Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[Martin Splitt] Practical WebGL with Three.js

[Martin Splitt] Practical WebGL with Three.js

Presentation from GDG DevFest Ukraine 2016.
Learn more at: https://devfest.gdg.org.ua

Google Developers Group Lviv

September 10, 2016
Tweet

More Decks by Google Developers Group Lviv

Other Decks in Technology

Transcript

  1. @g33konaut The next 30ish minutes... Why should you be excited?

    How do you create 3D experiences? What is next?
  2. @g33konaut Use cases • Maps / Navigation • Education /

    Research • Healthcare / Therapy • Entertainment / Journalism • Marketing
  3. @g33konaut So how do we get 3D graphics? 1. We

    need points (“vertices”) 2. We need to connect them (“faces”) 3. We need to define a. What colour? b. What texture? c. Shiny / Transparent / …? “Material”
  4. @g33konaut Three.js • threejs.org • Lots of plugins, 3D format

    importers, ... • Basic principle: ◦ “Movie shooting”: Camera, Scene, Meshes • Let’s go: avgp.github.io/h2g2three
  5. @g33konaut Setup var renderer = new THREE.WebGLRenderer(), scene = new

    THREE.Scene(), camera = new THREE.PerspectiveCamera( ...)
  6. @g33konaut Getting something on stage var box = new THREE.Mesh(

    new THREE.BoxGeometry(100, 100, 100), new THREE.MeshBasicMaterial() ) scene.add(box)
  7. @g33konaut Working with 3D assets • Use the 3D editor

    of your choice (e.g. Blender) • Export as a common 3D format (e.g. OBJ or glTF)
  8. @g33konaut Using textures to cheat • Normal maps • Light

    maps • Bump maps • Environment maps
  9. @g33konaut Wrap up • 3D is great for spatial visualisation

    • 3D can be used as an enhancement • Three.js gets you up & running quickly • Trick the eyes to get nicer visual quality