Let’s talk WebGL

Introduction to game development and three.js with Tomek Kopczuk, SwingDev’s CTO

Transcript

1. www.swing3d.io Let’s talk WebGL Introduction to game development and three.js with Tomek Kopczuk, SwingDev’s CTO
2. Game Development is different • Render loop • Only 16ms per frame • Soft Real Time System
3. 16ms to rule them all • Actual drawing • Collisions • Physics • Animations • AI • I/O
4. So - WebGL • OpenGL ES for <canvas> • Transcends way beyond 3D!
5. Programmable Pipeline Vertex Buffer Objects Primitive Processing Vertex
 Shader Primitive Assembly Rasterizer Fragment Shader Depth
 Stencil Color Buffer Blend Dither Frame
 Buffer API Triangles/Lines/Points Vertices How does stuff get drawn?
6. How does stuff get drawn? VBO Vertex Shader Rasterization Fragment Shader
7. three.js - introduction • After today we’re going to be able to do this
8. three.js - introduction • Scene • Camera • Renderer
9. three.js - cameras and projections • Orthographic • Perspective
10. Camera Demo
11. three.js - introduction • Geometry • Material • Object3D • Light • Mesh
12. three.js - common geometries • BoxGeometry • CircleGeometry • ConeGeometry • CylinderGeometry • PlaneGeometry • SphereGeometry
13. Demo 1 - bootstrap, skybox, ground
14. three.js - common materials • MeshBasicMaterial • MeshLambertMaterial • MeshPhongMaterial • MeshPhysicalMaterial • MeshStandardMaterial • MeshToonMaterial • RawShaderMaterial
15. Demo 2 - cube and materials
16. three.js - shaders • Vertex shader • Fragment shader Vertex
 Shader Uniforms Fragment Shader Frame
 Buffer Vertex Buffer Objects Varyings Attributes input input input output points to input
17. three.js - vertex shader uniform mat4 projectionMatrix;
 uniform mat4 modelViewMatrix; void main () {
 gl_Position = 
 projectionMatrix * 
 modelViewMatrix *
 vec4(position, 1.0);
 }
18. three.js - fragment shader void main () {
 gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);
 }
19. Demo 3 - cube with a shader
20. three.js - shaders - useful?
21. Demo 4 - cube with a dynamic shader
22. three.js - loading real assets • Group • OBJ Loader • Texture Loader
23. Demo 5 - turret
24. three.js - loading real assets • Geometry • MeshStandardMaterial • map • normalMap • aoMap • roughnessMap • metalnessMap • envMap • ModelView matrix
25. three.js - adding user interaction • Asynchronous to the render loop • Raycasting
26. Demo 6 - moving turrets
27. Further reading • https://threejs.org/docs/index.html#manual/introduction/Creating- a-scene • https://threejs.org/examples/ • https://www.khronos.org/webgl/ • https://www.opengl.org/sdk/tools/ShaderDesigner/
28. Thank you