Rendering 3D Like a Grown-Up
summary
Shows how to build a production-style 3D rendering engine from scratch in the browser using WebGL 2.0 and the glTF 2.0 scene format. Covers practical architecture and approaches for scene construction, lighting, matrix/vector math, and interactive 3D object handling so web developers can start creating 3D applications today.
AI-written summary · about
chapters (28)
- 0:00Introduction
- 2:05Why 3D rendering hard
- 5:403D model export problems
- 7:25glTF format structure
- 9:32Browser rendering pipeline
- 13:45glTF specification abstractions
- 14:51Geometry and components
- 17:06Transformation matrices
- 19:18Local vs world space
- 20:24Camera matrices
- 22:30Perspective vs orthographic
- 25:00Fixing black screen
- 25:23Light sources and parameters
- 26:12PBR materials rendering
- 28:30Normal and metallic maps
- 31:58Lighting components models
- 33:26Light calculation inputs
- 34:49PBR vs non-PBR rendering
- 35:33Color spaces gamma correction
- 36:57Vertex and fragment shaders
- 38:48Shader writing mistakes
- 39:31Rendering pipeline cycle
- 40:563D animation keyframes
- 42:47Camera rotation techniques
- 43:50Scene scaling perspective
- 44:53Raycasting interactivity
- 46:213D rendering in browsers
- 48:56Q&A
related talks
31mWebGL: Building Interactive 3D Worlds in the Browser
41mWebGL Is Easier Than You Think (feat. three.js)
41mGetting started with three js and WebGL
42mWebGL and 2D: As Simple as the Web
34mWebGL Practical Application
37mBuild in-browser 3D experiences with WebGL and PyScript
33mFull 3D Worlds in Plain old CSS & JavaScript
45mThe visual web of today and tomorrow - WebGL and WebVR.