Getting started with three js and WebGL
summary
Live demos use three.js on top of WebGL and show the actual code pattern: renderer scene camera loop, meshes as geometry+material, and model loading with STL / ObjectLoader plus textures and normal maps. Postprocessing uses a composer (author’s Wagner library) for depth‑of‑field, bloom and chromatic aberration. Tools include an in‑browser shader editor, shadertoy for ray‑marching experiments, and a shader debug helper (maintenance‑compiler). Performance notes: runs on Nexus 5 and iOS, watch retina resolution, texture sizes and CDN hosting.
AI-written summary · about
chapters (9)
- 0:00Intro
- 2:06Building 3D experiences
- 7:02Adding stuff to render Meshes
- 8:16Choosing a geometry models (OBJ, STL, etc.)
- 12:39Choosing a light model Spherical environment mapping SEM
- 13:15Choosing a light model Image-based lighting (IBL)
- 14:28Choosing a light model Shaders
- 25:03Debugging and optimisation THREE Augmented Console
- 29:17Releasing! Congratulations!
related talks
31mWebGL: Building Interactive 3D Worlds in the Browser
17mBuilding Immersive Experiences on the Web
13mWebGL Demo with THREE.js
37m3DGraphics with Threejs by Ruben Meschian (Eng) | JSConfAM19
34mWebGL Practical Application
29m"Getting Started with WebGL"
20mEmbracing WebGPU and WebXR With Three.js
59mRendering 3D Like a Grown-Up