Introduction to Webgl by Rachel Prudden
1 like1,267 views
The document discusses WebGL and graphics pipelines. It explains that WebGL allows hardware-accelerated 3D graphics on websites without plugins by using the browser's GPU. It also introduces Three.js, a library that builds upon WebGL to make it easier to use. The document then provides examples of vertex and fragment shaders to manipulate 3D objects by transforming coordinates and applying textures and lighting.
Introduction to Webgl by Rachel Prudden
- 1. WebGL
- 5. GPU
- 6. “The WebGL API may be too tedious to use directly without some utility libraries” - Wikipedia
- 8. Three.js
- 16. world space screen space transforms model vertices vertex shader
- 17. world space screen space vertex shader
- 18. world space screen space vertex shader
- 19. Screenshot: The Eight Thousanders world space screen space vertex shader
- 24. vec4(1.0, 0.0, 0.0, 1.0); attributes colour fragment shader
- 25. attributes colour fragment shader vec4(1.0, 0.0, 0.0, 1.0);
- 26. coords attributes colour fragment shader vec4(coords.x, 0.0, 0.0, 1.0);
- 27. attributes colour fragment shader coords vec4(coords.x, 0.0, 0.0, 1.0);
- 28. attributes colour fragment shader coords vec4(coords.y, 0.0, 0.0, 1.0);
- 29. attributes colour fragment shader coords vec4(coords.z, 0.0, 0.0, 1.0);
- 30. attributes colour fragment shader coords, texture, lightPos, normals texture2D(texture, coords) + light
- 35. Thanks!