Successfully reported this slideshow.
Your SlideShare is downloading. ×

Introduction to Webgl by Rachel Prudden

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
3D editors
3D editors
Loading in …3
×

Check these out next

1 of 35 Ad

More Related Content

Similar to Introduction to Webgl by Rachel Prudden (20)

More from TechExeter (20)

Advertisement

Recently uploaded (20)

Introduction to Webgl by Rachel Prudden

  1. 1. WebGL
  2. 2. Hardware accelerated graphics
  3. 3. No additional software
  4. 4. GPU
  5. 5. “The WebGL API may be too tedious to use directly without some utility libraries” - Wikipedia
  6. 6. Three.js
  7. 7. Graphics Pipeline
  8. 8. (0,0) (1,-2) (2,1)
  9. 9. vertex shader rasterise fragment shader blending make shapes
  10. 10. vertex shader rasterise fragment shader blending make shapes
  11. 11. vertex shader rasterise fragment shader blending make shapes
  12. 12. world space screen space transforms model vertices vertex shader
  13. 13. world space screen space vertex shader
  14. 14. world space screen space vertex shader
  15. 15. Screenshot: The Eight Thousanders world space screen space vertex shader
  16. 16. vertex shader rasterise fragment shader blending make shapes
  17. 17. attributes colour fragment shader
  18. 18. vec4(1.0, 0.0, 0.0, 1.0); attributes colour fragment shader
  19. 19. attributes colour fragment shader vec4(1.0, 0.0, 0.0, 1.0);
  20. 20. coords attributes colour fragment shader vec4(coords.x, 0.0, 0.0, 1.0);
  21. 21. attributes colour fragment shader coords vec4(coords.x, 0.0, 0.0, 1.0);
  22. 22. attributes colour fragment shader coords vec4(coords.y, 0.0, 0.0, 1.0);
  23. 23. attributes colour fragment shader coords vec4(coords.z, 0.0, 0.0, 1.0);
  24. 24. attributes colour fragment shader coords, texture, lightPos, normals texture2D(texture, coords) + light
  25. 25. Three.js + Shaders
  26. 26. Thanks!

×