Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
2 likes3,086 views
The document discusses developing interactive 3D experiences using HTML5, emphasizing a structured workflow that includes frequent prototyping and performance testing. It covers essential concepts such as graphics, game loops, transformations, audio processing, and optimization techniques for both desktop and mobile environments. Additionally, it provides resource links and insights on working with libraries like three.js and the Web Audio API.
Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
- 1. Developing Interactive 3D Experiences in HTML5 Carlos Ulloa HelloEnjoy.com FITC Amsterdam 2014
- 2. @C4RL05
- 10. GFX AUDIO INPUT
- 14. 1-CLICK
- 15. WORK FLOW
- 16. Workflow first & then performance
- 17. Test early First build in 2 weeks
- 18. Test often One or two builds per week
- 19. Prototype From concept & design
- 20. GFX
- 21. GAME LOOP
- 23. Object Pooling Minimise garbage collection
- 24. Spread & interpolate over frames
- 25. TIME
- 28. deltaTime Since the last frame
- 29. Multiply by deltaTime to update values per second instead of per frame
- 30. Cap deltaTime < 0.1 second
- 32. Keep Sync with music & video
- 33. THREE.JS
- 37. ASSET PIPELINE
- 42. MATH
- 43. VEC QUAT MTRX
- 44. VECTORS
- 45. Vectors Represent position, direction, velocity, acceleration, forces…
- 46. ( x, y, z ) Not very intuitive on multiple axes
- 49. |a| Magnitude
- 51. +
- 52. DOT PRODUCT
- 55. Dot Product
- 56. |a| |b| cos Dot Product
- 57. + CROSS PRODUCT
- 60. Cross Product
- 61. |a| |b| sin Cross Product
- 62. QUATERNIONS
- 65. Multiply quaternions to rotate a vector or another rotation
- 66. Slerp quaternions to interpolate rotations
- 67. Avoid Euler on multiple axes
- 68. MATRICES
- 69. Matrices Represent transformations i.e. position, rotation, scale
- 72. Multiply matrices to transform a vector or another matrix
- 73. Transform methods lookAt, translateXYZ, rotateXYZ, localToWorld, worldToLocal
- 74. OBJECTS
- 75. HIERARCHY
- 76. GROUPS
- 77. PIVOTS
- 79. Helper Objects Arrow, Axis, Bounding Box, Camera, Grid, Lights
- 80. MESHES
- 82. Vertex Color Paint, bake or create in code
- 84. TEXTURES
- 85. Mip Maps Smaller versions of the texture
- 86. Offset & Repeat Transform textures
- 87. Anisotropy Fix mip map artifacts
- 89. Clamp Wrap Fix artifacts on texture seams
- 92. LIGHTS
- 93. Dynamic Lights Real-time surface illumination
- 94. Baked Lights Better quality & performance
- 96. Vertex Bake Quality depends on geometry
- 97. CAMERA
- 99. Near Plane Occlusion & fill rate performance
- 100. Far Plane Horizon pop up & removed geometry
- 101. FRUSTUM CULLING
- 102. Near Far
- 105. Bounding Sphere
- 109. FOV Vertical angle
- 110. FOV
- 111. FOV Different for each scene
- 112. POST PROCESSING
- 113. FXAA
- 114. 8X
- 115. 8X
- 116. SSAO
- 117. Cry Engine
- 118. GLOW
- 120. VIGNETTE
- 123. OPTIMISE
- 124. Profile & measure Understand what’s going on
- 125. GPU CPU
- 126. GPU
- 127. GPU? Faster in lower res
- 128. GPU Many pixels, fill rate bound
- 129. CPU
- 130. CPU? Faster with objects disabled
- 131. CPU Many objects, many draw calls
- 132. DRAW CALLS
- 133. Minimise state changes & draw calls
- 134. Batching Combine meshes with same material
- 135. Batch Static Always combine static objects
- 136. Combine Materials Use vertex & textures to differentiate
- 139. Multiple Passes Multiple draw calls
- 140. SHADERS
- 141. Objects < Vertices < Pixels
- 144. Alpha Test Instead of Alpha Blend
- 145. Fragment Math Avoid pow, sin, cos
- 146. Vector Math Dot & Cross Product
- 147. LOD
- 148. Level of detail Simpler far away objects
- 151. Skybox & Rings for very distant objects
- 152. MOBILE
- 153. Mobile < Desktop
- 154. Low Polycount > 500
- 155. Overdraw Depends on the GPU
- 158. Downscale For higher quality renders
- 159. Simple Shaders Minimise fragment complexity
- 160. No Bumps Avoid normal mapping
- 161. No Lights Avoid dynamic lighting or shadows
- 162. No Fog Only on vertex shader
- 163. No Post Avoid full screen effects
- 165. AUDIO
- 166. WEB AUDIO
- 168. Audio Node Web Audio API building block
- 171. Panner Node for positional audio
- 172. Logarithmic scale for spectrum analysis
- 174. INPUT
- 175. KEYBOARD
- 177. Each key on its own
- 178. Combine keys to create axes
- 179. MOUSE
- 180. Pointer Lock Relative mouse movement
- 182. DPI & different screen sizes
- 184. TOUCH
- 186. Orientation How users hold the device?
- 188. LEAP MOTION
- 190. Calibration Don’t leave it to the user