Learning through Art: An Introduction to Virtual Reality

Transcript

1. None

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.

7. None
8. None
9. None
10. None

11. You are the viewer, not the participant.

12. None

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 %
15. None
16. None
17. None

18. ✅ ✅

19. Asset Management A-Frame’s asset loading and caching system

20. None
21. None
22. None
23. None

24. .obj Skeleton of the model. The physical shape. .mtl Skin

    of the model. The materials and colours.
25. None

26. Caching is caring. It’s also better for performance. 3D models

    Images Audio/Video
27. None
28. None
29. None

30. Coffee Table 1 flower 1 <a-cylinder> 4 <a-box>

31. None

32. Create the surface

33. Create the legs

34. Wrap it in <a-entity> for clarity.

35. None

36. Console 1 TV 1 <a-box> 4 <a-cylinder>

37. None

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

44. None

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
46. None
47. None

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

51. None
52. None

53. 1. Get Camera Coordinates

54. 2. Generate Cylinder ✨

55. 3. Set Position and Append

56. None

57. Rotating around the y-axis. Rotating around the x-axis.

58. None

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.

62. None
63. None
64. None
65. None

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.
69. None

70. Directly set the velocity.

71. None

72. After a collision, make it a static-body.

73. None

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

80. None
81. None

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