L3 Complex

A-Frame Skills

12DTEC

Project 1: webVR

AFrame Skills

Voxels Skills

Inspiration

Start Here: CodeHS intro to Aframe.io

https://codehs.com/student/237838/section/129187/assignment/17705595/

[Intro VR] [Getting Started] [01] Intro to A-FrameIntroduction to A-Frame

Watch these videos in this 5 Part "Intro to webVR using AFrame" from Glitch.com

An Intro to WebVRA free, 5-part video course with interactive code examples that will teach you the fundamentals of WebVR using A-Frame.

VR User Interface Design

https://vimeo.com/116101132

https://vimeo.com/141330081

Level 2 Advanced A-Frame Skills

Frame Academy PROJECT #1: CREATE A WEBXR SITE WITH BASIC HTML
Frame Academy PROJECT #2: ADDING ANIMATIONS TO YOUR WEBXR SITES
Frame Academy PROJECT #3: RELATIVE POSITION + GROUPING ENTITIES

Frame Academy Project #1: Create a 3D Site With Basic HTMLIn this free, hands-on online project, you will learn some coding basics as you create 3D websites that work on desktop, mobile, and VR headsets. WebXR is here.

Frame Academy Project #2 - Adding Animations to Your WebXR Site WIth ComponentsIn Frame Academy Project 2, you learn how to build on your HTML skills with A-Frame to add animations to your WebXR sites.

Frame Academy Project 3: Meeting the RelativesIn Frame Academy Project 3, you continue to improve your WebXR and HTML skills while learning about grouping entities and relative position.

Level 3 Complex A-Frame Skills

Building on the Level 2 Advanced Skills above:

Complete Frame Academy Projects 4 & 5:

Complex techniques for UX Interaction Design for Level 3 may include:

· sophisticated digital effects

· non-core functionality

· industry standards or guidelines

· integration of original media types

· automation through scripts.

Develop more complex models, textures, lighting, interactivity and animation. Apply HCI & UI / UX methods.

Use programmtic scripting such as JavaScript or PHP loops to generatively create A-frame entities, e.g. use a loop to create 50 boxes in random locations using Math.random()

Frame Academy Project 4: Creating a WebXR Photosphere GalleryIn Frame Academy Project 4, you learn some basic JavaScript while constructing an interactive, cross-platform WebXR photosphere gallery. Take your A-Frame projects to the next level.

Frame Academy Project 5: Adding Sound and VideoIn Frame Academy Project 5, you learn how to bring sounds, videos, and videospheres into your WebXR sites with basic HTML and JavaScript. Take your A-Frame projects to the next level.

An Easy 360 image journey in webVR...

by Josh Marinacci

https://hacks.mozilla.org/2018/07/360-images-on-the-web-the-easy-way/

This is similar to the Frame Academy Project 4 above.

360° Images on the Web, the Easy Way – Mozilla Hacks - the Web developer blogOne of the most popular uses for VR today is 360° images and video. These are easy to discover and share online, and you don’t need to learn any new ...

Other Resources: 1) text, 2) video

https://www.viget.com/articles/crash-course-vr-design-for-noobs/

1) A-Frame School: webVR Interactive Online Course

(Refresh from start / Level 3 from 7.3)

https://aframe.io/aframe-school/#/

2) A complete A-Frame Skills, Two-part interactive Level 3 course...

Whack-An-Imp Game by Josh Marinacci

Building an Immersive Game with A-Frame and Low Poly Models – Mozilla Hacks - the Web developer blogIn the first part of this two-part tutorial, Josh Marinacci builds an immersive WebVR game using A-Frame, and walks through the key concepts and code for adding a physics engine, ...

https://hacks.mozilla.org/2018/03/immersive-aframe-low-poly/

Boilerplate Setup
Physics & Collisions - JS variables & score
Models & Scenery / randomising position

Building an Immersive Game with A-Frame and Low Poly Models (Part 2) – Mozilla Hacks - the Web developer blogIn Part 2 of this two-part tutorial on using A-Frame to build an immersive game, Josh Marinacci shows how to add lighting, audio, responsiveness and polish to the simple game ...

https://hacks.mozilla.org/2018/03/immersive-aframe-low-poly-part2/

Add Lighting & Shadows
Add Audio - polish / refine
Full 6DoF - VR Headset & Controls / responsive to 3DoF mobile

joshmarinacci/whack-an-impCode for AFrame / WebVR tutorial. Contribute to joshmarinacci/whack-an-imp development by creating an account on GitHub.

https://github.com/joshmarinacci/whack-an-imp

Interesting (and more complex) Options

How To Build An Endless Runner Game In Virtual Reality (Part 1) — Smashing MagazineVirtual reality (VR) is an experience based in a computer-generated environment, and following Alvin’s [introduction to programming in VR](https://www.smashingmagazine.com/2018/11/virtual-reality-model-real-time-cross-device-preview/), this article series aims to introduce more VR concepts in the context of building a game.

https://www.smashingmagazine.com/2019/03/virtual-reality-endless-runner-game-vr-part-1/

Tutorial will specifically introduce more A-Frame VR concepts such as stylized low-poly entities, lights, and animation.

Note: A demo of the final product can be viewed here.

How To Build An Endless Runner Game In Virtual Reality (Part 2) — Smashing MagazineIf you’ve ever wondered how games with keyboard-less support for VR headsets are built, then this tutorial explains just what you’re looking for. Here’s how you too can bring a basic, functioning VR game to life.

https://www.smashingmagazine.com/2019/03/virtual-reality-endless-runner-game-vr-part-2/

This tutorial involves a number of steps, including (but not limited to) collision detection and more A-Frame concepts such as mixins.

Demo of the final product

How To Build An Endless Runner Game In Virtual Reality (Part 3) — Smashing MagazineIn this final part of Alvin’s tutorial, the finishing touches will be added to the endless runner VR game. These will pave the way for concepts in building multiplayer games.

https://www.smashingmagazine.com/2019/03/virtual-reality-endless-runner-game-vr-part-3/

This tutorial will specifically introduce MirrorVR which is responsible for handling the mediating server in client-to-client communication.

Note: This game can be played with or without a VR headset. You can view a demo of the final product at ergo-3.glitch.me.

How To Build A Virtual Reality Model With A Real-Time Cross-Device Preview — Smashing MagazineIn this tutorial, we’ll program three-dimensional objects and add simple interactions to these objects. Additionally, you can learn how to build a simple message passing system between clients and servers.

Crash Course: VR Design for N00bs | VigetOur latest experiment in virtual reality—a WebVR adaptation of Lights Out.

https://www.viget.com/articles/crash-course-vr-design-for-noobs/

3) More Advanced A-Frame Skills...

More in-depth & detailed course of webVR tutorial Videos can be sourced at Udemy.com Learn AFrame

Introduction
AFrame Basics
1. What is A-Frame
2. Installation & Testing
Adding & Modifying HTML Elements
1. Basic Primitives
2. Position & Relative Positioning
3. Rotation & Relative Rotation
4. Scale, relative scale & reflection
5. Image textures and Materials
6. Image and curved image primitives
7. Breaking primitives down
Modifying the Virtual Environment
1. Ground
2. Sky & 360 image
3. Camera Primitive
4. Loading and displaying 3D Models
5. Animating Objects
6. Adding Lights and shadows
7. The AFrame Inspector
Interacting with the Objects
1. Cursor Primitive and component
2. Event-set component
3. Gaze-based Interactions
4. Selective Intersections
5. Controller-based interactions
6. Interaction gestures
Enhancing the Virtual Environment
1. Physics and collision
2. Sound and positional audio
3. Video
4. 360 Video
5. Stereoscopic Images
6. Antialiasing
Enhancing the Interactions
1. Semantic Animation
2. Animation component
3. Text component
4. Look-At component
Moving Around in the Virtual Environment
1. VR locomotion and its limitations
2. Smooth artificial locomotion
3. Movement controls component
4. Navigation meshes
Testing Your WebVR Scenes on Mobile
1. Using Glitch
2. Installing and using a web server
3. Installing and using ngrok
4. NOTE Camera offset on mobile devices
Resources for Your WebVR Projects
1. Web links to resources used during lectures
2. Web links to FREE 3D models & software
3. Web links to VR related websites
AFrame v0.8.x - what has changed
1. Introduction
2. Camera Heigh Offset (ECS syntax)
3. Sky colour
4. Colour Correction for glTF 3D models
AFrame v0.8.x - Known Issues
1. Introduction
2. Camera moves slowly on Chrome
3. Raycaster bug
4. Sound component not playing audio asset across multiple entities
5. Best practice for colour space management