[Martin Splitt] Practical WebGL with Three.js

@g33konaut with Three.js Practical WebGL

@g33konaut Hi, I’m Martin, Senior Dev @ Archilogic @g33konaut on
Twitter

@g33konaut This is what we do

@g33konaut The next 30ish minutes... Why should you be excited?
How do you create 3D experiences? What is next?

@g33konaut Why?

@g33konaut Use cases • Maps / Navigation • Education /
Research • Healthcare / Therapy • Entertainment / Journalism • Marketing

@g33konaut So, what’s it look like?

@g33konaut It’s well-ish-supported

@g33konaut Is WebGL fast?

@g33konaut

@g33konaut How?

@g33konaut

@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”

@g33konaut The WebGL pipeline

@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

@g33konaut The WebGL pipeline Three.js covers this

@g33konaut Setup var renderer = new THREE.WebGLRenderer(), scene = new
THREE.Scene(), camera = new THREE.PerspectiveCamera( ...)

@g33konaut Getting something on stage var box = new THREE.Mesh(
new THREE.BoxGeometry(100, 100, 100), new THREE.MeshBasicMaterial() ) scene.add(box)

@g33konaut Rendering it out (function render() { requestAnimationFrame( render )
renderer.render( scene, camera ) })()

@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)

@g33konaut Tips & Tricks

@g33konaut The basic ones: Reducing vertices

@g33konaut The basic ones: Level of detail

@g33konaut The basic ones: Extensions

@g33konaut Using textures to cheat • Normal maps • Light
maps • Bump maps • Environment maps

@g33konaut Normal maps

@g33konaut Light maps

@g33konaut Bump maps

@g33konaut Environment maps

@g33konaut Post processing

@g33konaut Tooling • Shader Editor: Chrome & Firefox (built in)
• WebGL Insight • WebGL Inspector

@g33konaut What’s next? • Explore WebVR • Check out what’s
coming in WebGL 2 • Get started!

@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

@g33konaut GO EXPLORE! • The harder way: learningwebgl.com • The
easier way: three.js.org/docs

@g33konaut Thank you! Questions? Slides: bit.ly/dfua-webgl Twitter: @g33konaut Web: spaces.archilogic.com
Feedback wanted ;-)

[Martin Splitt] Practical WebGL with Three.js

[Martin Splitt] Practical WebGL with Three.js

More Decks by Google Developers Group Lviv

Other Decks in Technology

Featured

Transcript