WebGL Practical Application
summary
Shows that WebGL powers real products: Artec3D handheld scanners and a photo booth that scans a person in 12 seconds, uses three.js and Blender to move large scenes into the browser, and applies shaders for texture filtering, sepia/grayscale, postprocessing via three.js EffectComposer. Explains shader roles (vertex → fragment), performance tradeoffs, and browser support differences as WebGL 1.0 vs 2.0 browser support. Demonstrates particle systems and debugging with Mozilla’s shader editor.
AI-written summary · about
chapters (36)
- 0:00Intro
- 0:49Artec 3D
- 1:35Contents
- 2:43Navigation
- 3:23Constructors
- 4:01Interactive maps
- 4:49Panorama
- 5:47Unity 3D
- 9:09WebGL 1.0
- 10:08Browser Support
- 10:50Check WebGL
- 11:49Connection
- 12:43Mesh
- 13:26Camera types
- 14:56Shaders types
- 15:51Rasterization
- 16:25Primary data types
- 16:55Qualifiers
- 18:31WebGL program
- 21:01Vertex shader
- 21:55Fragment shader. Texturing
- 22:28Shader Material
- 23:02Model with texture
- 23:55Fragment shader. Black and white texture
- 24:27Sepia
- 25:21Rendering
- 26:12Environment. Cube images
- 26:26Environment. Materials
- 27:20Postprocessing scene
- 29:28Comparison of particle visualization
- 30:03Particles
- 31:34Debug
- 31:46WebGL Advantages
- 32:18Disadvantages
- 32:52WebGL Practical Application
- 33:24Interactivity
related talks
22mWebGL For More Than Graphics: Is It Possible?
45mThe visual web of today and tomorrow - WebGL and WebVR.
20mThe future of the web is paved with shaders
21mPhotorealistic Real Time Computer Graphics with Javascript
44mWebGL and Shaders: Programming Light
38mMy journey with WebGL
41mWebGL Is Easier Than You Think (feat. three.js)
50mPractical Applications of WebGL