"Getting Started with WebGL"

on YouTube ↗29m

" summary

Demos show practical steps: build a 3D surface from tornado CSVs using Three.js, map Texas May data onto a plane geometry, peaks cluster around 4–5pm, and color/height use D3 scales. For maps use deck.gl + Mapbox GL to plot recent earthquakes, send magnitude as a fourth attribute (positions.w) so radii vary, and update zoom via a uniform. Covers writing vertex and fragment shaders, differences between high‑level wrappers and raw WebGL, links to code on GitHub and working examples.

AI-written summary · about

" chapters (8)

1. 0:00Introduction and background
2. 2:48What is WebGL and its uses
3. 5:13Data visualization with Three.js
4. 9:10Setting up a Three.js scene
5. 13:06Alternatives to Three.js
6. 16:17Shaders and GPU rendering
7. 21:53Advanced WebGL with Deck.gl
8. 22:36Learning resources and next steps

" related talks

• 31mWebGL: Building Interactive 3D Worlds in the BrowserMartin Splitt · You Gotta Love Frontend 2017
• 13mWebGL Demo with THREE.jsColin van Eenige · Frontend Love Eindhoven 2019
• 41mGetting started with three js and WebGLJaume Sanchez Elias · JSConf Budapest 2015
• 29mCreating 3D web maps with CesiumPatrick Cozzi · JS.Geo 2015
• 40mVisualizing Large Datasets with JavaScript Using Deck.glMarko Letic · code.talks 2019
• 37mThe next frontier WebGL and WebVRMartin Naumann · Codemotion Rome 2016
• 55mWebGL Meets Google MapsSimon Lebrun · DevFest Paris 2015
• 17mBuilding Immersive Experiences on the WebIshan Sharma · React Nexus 2023