Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa

2,081 views

Published on

Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca

OVERVIEW
Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
Modern web browsers are capable of producing some amazing audiovisual candy, through new capabilities like HTML5, fast JavaScript, WebGL and Web Audio API. In this session, Carlos talks in detail about his work developing interactive 3D experiences using these technologies.

He will take an in-depth look at the production of high-end WebGL projects including Lights, HelloRun and Racer-S, to discuss the graphics, audio and input development techniques used.

He shows how to take advantage of the three.js engine to deliver immersive 3D visuals running at high performance on desktop and mobile browsers.

This presentation will also cover music visualization and sound effects, using Web Audio API for sound processing and analysis.

Carlos also discusses the integration of a broad range of input technologies like touch, mouse, keyboard, accelerometer and Leap Motion controller, along with some interesting lessons learned.

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,081
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa

  1. 1. Developing Interactive 3D Experiences in HTML5 Carlos Ulloa HelloEnjoy.com FITC Amsterdam 2014
  2. 2. @C4RL05
  3. 3. GFX AUDIO INPUT
  4. 4. Developing Interactive 3D Experiences in HTML5
  5. 5. 1-CLICK
  6. 6. WORK FLOW
  7. 7. Workflow first & then performance
  8. 8. Test early First build in 2 weeks
  9. 9. Test often One or two builds per week
  10. 10. Prototype From concept & design
  11. 11. GFX
  12. 12. GAME LOOP
  13. 13. Optimise your game loop
  14. 14. Object Pooling Minimise garbage collection
  15. 15. Spread & interpolate over frames
  16. 16. TIME
  17. 17. Frame Rate Independent
  18. 18. requestAnimationFrame
  19. 19. deltaTime Since the last frame
  20. 20. Multiply by deltaTime to update values per second instead of per frame
  21. 21. Cap deltaTime < 0.1 second
  22. 22. timeScale Multiplies deltaTime
  23. 23. Keep Sync with music & video
  24. 24. THREE.JS
  25. 25. Examples threejs.org/examples
  26. 26. Source Code three.js/src
  27. 27. Docs threejs.org/docs
  28. 28. ASSET PIPELINE
  29. 29. MATH
  30. 30. VEC QUAT MTRX
  31. 31. VECTORS
  32. 32. Vectors Represent position, direction, velocity, acceleration, forces…
  33. 33. ( x, y, z ) Not very intuitive on multiple axes
  34. 34. object.position Local position
  35. 35. object.scale Local scale
  36. 36. |a| Magnitude
  37. 37. |a| = 1 Normalized
  38. 38. +
  39. 39. DOT PRODUCT
  40. 40. Dot Product
  41. 41. |a| |b| cos Dot Product
  42. 42. + CROSS PRODUCT
  43. 43. Cross Product
  44. 44. |a| |b| sin Cross Product
  45. 45. QUATERNIONS
  46. 46. Quaternions Represent rotations
  47. 47. object.quaternion Local rotation
  48. 48. Multiply quaternions to rotate a vector or another rotation
  49. 49. Slerp quaternions to interpolate rotations
  50. 50. Avoid Euler on multiple axes
  51. 51. MATRICES
  52. 52. Matrices Represent transformations i.e. position, rotation, scale
  53. 53. object.matrix Local transform
  54. 54. object.matrixWorld Global transform
  55. 55. Multiply matrices to transform a vector or another matrix
  56. 56. Transform methods lookAt, translateXYZ, rotateXYZ, localToWorld, worldToLocal
  57. 57. OBJECTS
  58. 58. HIERARCHY
  59. 59. GROUPS
  60. 60. PIVOTS
  61. 61. Children methods getDescendants, traverse
  62. 62. Helper Objects Arrow, Axis, Bounding Box, Camera, Grid, Lights
  63. 63. MESHES
  64. 64. Geometry Build your own
  65. 65. Vertex Color Paint, bake or create in code
  66. 66. TEXTURES
  67. 67. Mip Maps Smaller versions of the texture
  68. 68. Offset & Repeat Transform textures
  69. 69. Anisotropy Fix mip map artifacts
  70. 70. Wrap Repeat, Clamp, Mirror
  71. 71. Clamp Wrap Fix artifacts on texture seams
  72. 72. RGBA Use all channels
  73. 73. LIGHTS
  74. 74. Dynamic Lights Real-time surface illumination
  75. 75. Baked Lights Better quality & performance
  76. 76. Lightmaps Global illumination
  77. 77. Vertex Bake Quality depends on geometry
  78. 78. CAMERA
  79. 79. Avoid default camera settings
  80. 80. Near Plane Occlusion & fill rate performance
  81. 81. Far Plane Horizon pop up & removed geometry
  82. 82. FRUSTUM CULLING
  83. 83. Near Far
  84. 84. Bounding Sphere
  85. 85. FOV Vertical angle
  86. 86. FOV
  87. 87. FOV Different for each scene
  88. 88. POST PROCESSING
  89. 89. FXAA
  90. 90. 8X
  91. 91. 8X
  92. 92. SSAO
  93. 93. Cry Engine
  94. 94. GLOW
  95. 95. VIGNETTE
  96. 96. OPTIMISE
  97. 97. Profile & measure Understand what’s going on
  98. 98. GPU CPU
  99. 99. GPU
  100. 100. GPU? Faster in lower res
  101. 101. GPU Many pixels, fill rate bound
  102. 102. CPU
  103. 103. CPU? Faster with objects disabled
  104. 104. CPU Many objects, many draw calls
  105. 105. DRAW CALLS
  106. 106. Minimise state changes & draw calls
  107. 107. Batching Combine meshes with same material
  108. 108. Batch Static Always combine static objects
  109. 109. Combine Materials Use vertex & textures to differentiate
  110. 110. Texture Atlas Combine textures
  111. 111. Multiple Passes Multiple draw calls
  112. 112. SHADERS
  113. 113. Objects < Vertices < Pixels
  114. 114. Vertex Instead of fragment
  115. 115. Precission Colors & normals
  116. 116. Alpha Test Instead of Alpha Blend
  117. 117. Fragment Math Avoid pow, sin, cos
  118. 118. Vector Math Dot & Cross Product
  119. 119. LOD
  120. 120. Level of detail Simpler far away objects
  121. 121. Optimised geometries or materials
  122. 122. Sprites & particle systems
  123. 123. Skybox & Rings for very distant objects
  124. 124. MOBILE
  125. 125. Mobile < Desktop
  126. 126. Low Polycount > 500
  127. 127. Overdraw Depends on the GPU
  128. 128. Fill Rate devicePixelRatio
  129. 129. Upscale For higher resolutions
  130. 130. Downscale For higher quality renders
  131. 131. Simple Shaders Minimise fragment complexity
  132. 132. No Bumps Avoid normal mapping
  133. 133. No Lights Avoid dynamic lighting or shadows
  134. 134. No Fog Only on vertex shader
  135. 135. No Post Avoid full screen effects
  136. 136. lowp getShaderPrecisionFormat
  137. 137. AUDIO
  138. 138. WEB AUDIO
  139. 139. Audio Processing & analysis
  140. 140. Audio Node Web Audio API building block
  141. 141. Panner Node for positional audio
  142. 142. Logarithmic scale for spectrum analysis
  143. 143. INPUT
  144. 144. KEYBOARD
  145. 145. Analog Simulate key pressure
  146. 146. Each key on its own
  147. 147. Combine keys to create axes
  148. 148. MOUSE
  149. 149. Pointer Lock Relative mouse movement
  150. 150. Relative Mouse Accumulated deltas
  151. 151. DPI & different screen sizes
  152. 152. Sensitivity Users ignore settings
  153. 153. TOUCH
  154. 154. Relative touch controls
  155. 155. Orientation How users hold the device?
  156. 156. Secondary touch support
  157. 157. LEAP MOTION
  158. 158. Smooth Introduces lag
  159. 159. Calibration Don’t leave it to the user
  160. 160. Relative Real time calibration
  161. 161. Slides helloenjoy.com/docs/3DJSDev.pdf
  162. 162. DANK U helloenjoy.com

×