NYVR Web Workshop

Mozilla A-Frame

What happens, how do you think it worked? How do you think you can make it work?

Description

The workshop is an opportunity to discover the key concepts of VR: how to build a scene, how to interact with it personally or in group, how to dynamically generate content and lots more. You will gradually learn the key principles and the technical framework to transform your idea into a proper VR experience. From marketing to presentation, from solo- to social market research: VR has many potential usages. You’ll learn the initial steps to start your own project in an efficient, collaborative and interactive environment.

Concepts we will explore:

1. the stereo effect
2. fundamental rules of VR-scene design
3. AFrame as a sensible and established framework
4. loading your own 3D assets
5. sharing your VR experience with the outside world
6. WebVR as a perfect entry to VR

Introduction to virtual reality (key concepts : object position, camera, stereo effect)

This first session will be a gentle introduction to the key concepts. All will be done directly in a coding environment without any installation required to start.

• object position
• camera
• stereo effect

Please note that the workshop is a place to experiment and learn, not an inventory of answers. The goal is to give you all the pointers you need to then efficiently starting thinking with and for VR.

Building for virtual reality (primitives, meshes, light, assets including 360 photos and videos)

Assuming that key concepts have been understood, in order to make a scene richer we can use:

• primitives
• meshes
• light
• textures
• 360 photos
• videos
• 360 videos
• sound
• assets in general

Note also that all assets are not equal. For example a textured 3D mesh can be scale and navigated in. An animated mesh can move and be deformed. A 360 video can modify the environment all around the viewer but is flat, one can not "move" in it without breaking immersion. A 360 photo has the same problem. A 2D image or a video is entirely flat, consequently the immersion might not be very impressive.

Interaction in virtual reality (gaze, button, proper distance)

Focus not on objects as static or even animated elements but rather how the person having the experience can interact with them. It will explain what works, what doesn’t, regarding hardware and user experience.

• manipulate the page content
• animations
• gaze
• button
• proper distance
• physics
• Bonus : debugging tricks

Note that most so far was done via the declarative aspect of AFrame solely. From now because of the dynamic aspect JavaScript is required.

Being social and dynamic in virtual reality (websockets, service side content)

A virtual reality experience doesn’t have to be experienced alone. In fact it is quite easy to transform a basic solo experience to a rich multi user experience. Instead of programming complex algorithms letting user interact with other allows to quickly showcase interesting behavior. Still, in addition to this it will be shown how to use dynamic content either generated on the fly or processed by a server then generated a relevant scene.

• websockets
  • to be social e.g. Firebase
  • for Internet of Things aka IoT e.g. fan
• service side content
• data visualization

Going faster and further

• the future of WebVR development
• registering a component following the model of proper distance
• selecting multiple custom elements
• emitting an event
• registering a shader
• developing your own scaffolding e.g. grid with associated .svg files
• try augmented reality using <a-marker> from AR.js
• UX & VR - Now that you can design entire worlds, how can you do it right?
• Lessons learned from the W3C with the different browser vendors

Let me help to make a better workshop, answer few questions!

Credits

AirPlane by thepixeldevil is licensed under CC Attribution

Done? Go back to learn more.