Learning through Art: An Introduction to Virtual Reality

Transcript

2. Opendoor Work WaffleJS Meetup @billyroh Twitter
3. Low-end Phone-in-a-box, no dedicated anything High-end Dedicated machines, controllers, sensors
4. Social Media Games Videos
5. Not Infinitely Replicable One-Way Street Tight Guardrails Not Infinitely Replicable One-Way Street Tight Guardrails
6. Virtual reality is uncharted territory.
11. You are the viewer, not the participant.
13. Virtual reality, but make it personal.
14. 1. Scene Layout 2. Dynamic Entities 3. Interaction & Physics Creating a scene and populating it Generating entities in the scene on the fly Having the stickers fly and stick as expected %
18. ✅ ✅
19. Asset Management A-Frame’s asset loading and caching system
24. .obj Skeleton of the model. The physical shape. .mtl Skin of the model. The materials and colours.
26. Caching is caring. It’s also better for performance. 3D models Images Audio/Video
30. Coffee Table 1 flower 1 <a-cylinder> 4 <a-box>
32. Create the surface
33. Create the legs
34. Wrap it in <a-entity> for clarity.
36. Console 1 TV 1 <a-box> 4 <a-cylinder>
38. No Lighting Low Contrast
39. Lighting the Scene Adding lighting to the scene for better contrast
40. Ambient Position-agnostic, affects globally Point Position-dependent, affects locally
41. Spot Only lights in a specific direction
42. Directional Like ambient, but lights in a specific direction
43. Hemisphere Like ambient, but with two separate colours
45. Type Ambient, directional, hemisphere, point, spot Distance How far the light should reach Intensity How bright the light should be Color What colour the light should emit
48. 12 lighting elements <20 fps 3 lighting elements >30 fps
49. Default lighting, low contrast. Custom lighting, higher contrast.
50. Dynamic Generation Appending stickers to the scene on the fly
53. 1. Get Camera Coordinates
54. 2. Generate Cylinder ✨
55. 3. Set Position and Append
57. Rotating around the y-axis. Rotating around the x-axis.
59. x-axis z-axis -1 -1 +1 +1
60. Always facing the same way. Facing the direction of the camera.
61. Create a mirror image when z < 0.
66. A Brief Lesson on Physics Integrating a physics engine to the scene
67. aframe-physics-system
68. Dynamic Body Reactive to collisions and gravity. Static Body Fixed position, or fixed animation, unreactive.
70. Directly set the velocity.
72. After a collision, make it a static-body.
74. The Two-Body Problem Altering the default physics body
75. The model is complex. The body is simple.
76. The engine makes its best guess. Sometimes it’s wrong.
77. Create a box in its image.
78. Make it invisible then you’re done.
79. Closing Remarks A final demo and things to think about
82. No one knows what they’re doing. Don’t be afraid to make something strange and beautiful.
83. Twitter @billyroh billyroh.com/obliteration Demo