A Novice's Guide to WebGL

Introduction to 3D, shaders and WebGL.

Transcript

1. A Novice’s Guide to WebGL
   @Krzychukula
   

   View Slide

2. Plan
   1. Intro
   2. How it all works
   3. Triangle
   4. Multiple colours
   5. Matrix
   6. Learn
   

   View Slide

3. ASK QUESTIONS!
   

   View Slide

4. View Slide

5. Data Visualisation
   

   View Slide

6. What my learning looked
   like?
   

   View Slide

7. But this is just a hobby
   

   View Slide

8. OpenGL books
   Courses
   Three.js
   Shaders Workshop
   WebGL workshop
   WebGL Books
   

   View Slide

9. Disclaimer: mental models
   over correctness
   

   View Slide

10. Who this talk is for?
    

    View Slide

11. [-1 …. 0 …. 1]
    

    View Slide

12. NO SHINY DEMOS
    

    View Slide

13. View Slide

14. View Slide

15. Dreyfus model of skill
    acquisition
    

    View Slide

16. Masters of DOOM
    YOUme
    

    View Slide

17. I realised that we are all
    Novices!
    

    View Slide

18. Novice WebGL Programmer!
    

    View Slide

19. Let’s start
    

    View Slide

20. 2. How it all works?
    

    View Slide

21. Back in the old days…
    

    View Slide

22. View Slide

23. Graphic Card
    

    View Slide

24. View Slide

25. Map Reduce?
    

    View Slide

26. View Slide

27. View Slide

28. What is WebGL?
    

    View Slide

29. History
    

    View Slide

30. Shaders
    

    View Slide

31. Vertex
    Fragment
    

    View Slide

32. Vertex Shader
    Fragment Shader
    

    View Slide

33. It has to be FAST
    

    View Slide

34. Vertex Shader
    void main() {
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
    }
    

    View Slide

35. Vertex Shader
    attribute vec4 a_Position;
    void main() {
    gl_Position = a_Position;
    }
    

    View Slide

36. Fragment Shader
    void main() {
    gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
    }
    

    View Slide

37. View Slide

38. Fragment Shader
    uniform vec4 a_Color;
    void main() {
    gl_FragColor = a_Color;
    }
    

    View Slide

39. But… What about JS?
    

    View Slide

40. Context
    var gl = canvas.getContext("webgl");
    

    View Slide

41. Compile Vertex Shader
    var vertexShader = gl.createShader(gl.VERTEX_SHADER)
    gl.shaderSource(vertexShader, `
    void main() { … }
    `)
    gl.compileShader(vertexShader)
    

    View Slide

42. Compile Fragment Shader
    var fragShader = gl.createShader(gl.FRAGMENT_SHADER)
    gl.shaderSource(fragShader, `
    void main() { … }
    `)
    gl.compileShader(fragShader)
    

    View Slide

43. Program
    var program = gl.createProgram()
    gl.attachShader(program, vertexShader)
    gl.attachShader(program, fragmentShader)
    gl.linkProgram(program)
    

    View Slide

44. u_Color
    var u_Color = gl.getUniformLocation(program,
    ‘u_Color’);
    gl.uniform4fv(u_Color, [0.0, 1.0, 0.0, 1.0]);
    

    View Slide

45. Fragment Shader
    uniform vec4 u_Color;
    void main() {
    gl_FragColor = u_Color;
    }
    

    View Slide

46. View Slide

47. View Slide

48. 1
    -1
    1
    

    View Slide

49. View Slide

50. 0, 0.5
    

    View Slide

51. -0.5, -0.5
    0, 0.5
    

    View Slide

52. -0.5, -0.5
    0, 0.5
    0.5, -0.5
    

    View Slide

53. gl_Position = vec4(0.0, 0.5, 0.0, 1.0);
    -0.5, -0.5
    0, 0.5
    -0.5, 0.5
    

    View Slide

54. gl_Position = vec4(0.0, 0.5, 0.0, 1.0);
    gl_Position = vec4(-0.5, -0.5, 0.0, 1.0); gl_Position = vec4(0.5, -0.5, 0.0, 1.0);
    -0.5, -0.5
    0, 0.5
    -0.5, 0.5
    

    View Slide

55. var positions = new Float32Array([
    0.0, 0.5, 0.0, 1.0,
    -0.5, -0.5, 0.0, 1.0,
    0.5, -0.5, 0.0, 1.0
    ]);
    

    View Slide

56. Buffers
    

    View Slide

57. var buffer = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)
    

    View Slide

58. var positions = new Float32Array([
    0.0, 0.5, 0.0, 1.0,
    -0.5, -0.5, 0.0, 1.0,
    0.5, -0.5, 0.0, 1.0
    ]);
    

    View Slide

59. var a_Position = gl.getAttribLocation(program, ‘a_Position')
    gl.enableVertexAttribArray(a_Position)
    gl.vertexAttribPointer(a_Position, 4, gl.FLOAT, false, 0, 0)
    

    View Slide

60. gl.drawArrays(gl.TRIANGLES, 0, 3)
    

    View Slide

61. View Slide

62. Vertex Shader
    Fragment Shaders
    

    View Slide

63. View Slide

64. Fragment Shader
    attribute vec4 a_Color;
    void main() {
    gl_FragColor = a_Color;
    }
    

    View Slide

65. varying
    Vertex Shaders
    Fragment Shaders
    attributes
    

    View Slide

66. Vertex Shader
    attribute vec4 a_Position;
    attribute vec4 a_Color;
    varying vec4 v_Color;
    void main() {
    gl_Position = a_Position;
    v_Color = a_Color;
    }
    

    View Slide

67. Vertex Shader
    void main(vec4 a_Position, vec4 a_Color) {
    return {
    gl_Position: a_Position,
    v_Color: a_Color
    };
    }
    

    View Slide

68. v_Color = vec4(1.0, 0.0, 0.0, 1.0);
    v_Color = vec4(0.0, 1.0, 0.0, 1.0); v_Color = vec4(0.0, 0.0, 1.0, 1.0);
    

    View Slide

69. What about the middle?
    

    View Slide

70. View Slide

71. View Slide

72. Fragment Shader
    varying vec4 v_Color;
    void main() {
    gl_FragColor = v_Color;
    }
    

    View Slide

73. View Slide

74. var colors = new Float32Array([
    1.0, 0.0, 0.0, 1.0,
    0.0, 1.0, 0.0, 1.0,
    0.0, 0.0, 1.0, 1.0
    ]);
    

    View Slide

75. var buffer = gl.createBuffer()
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW)
    

    View Slide

76. var a_Color = gl.getAttribLocation(program, ‘a_Color')
    gl.enableVertexAttribArray(a_Color)
    gl.vertexAttribPointer(a_Position, 4, gl.FLOAT, false, 0, 0)
    

    View Slide

77. gl.drawArrays(gl.TRIANGLES, 0, 3)
    

    View Slide

78. View Slide

79. Almost the end
    

    View Slide

80. Matrix
    

    View Slide

81. diffX
    diffX
    rotateAngle
    scaleX
    scaleY
    

    View Slide

82. Matrix
    

    View Slide

83. Don’t worry about Math
    Linear Algebra
    

    View Slide

84. var modelMatrix = new Matrix4()
    modelMatrix.translate(x, 0, 0, 1)
    modelMatrix.rotate(angle, 0, 0, 1)
    In JavaScript
    

    View Slide

85. Vertex Shader
    attribute vec4 a_Position;
    uniform mat4 u_modelMatrix;
    void main() {
    gl_Position = u_modelMatrix * a_Position;
    }
    

    View Slide

86. What to learn from?
    

    View Slide

87. WebGL Beginner’s Guide
    Diego Cantor & Brandon Jones
    

    View Slide

88. Interactive 3D Graphics
    Eric Haines & Gundega Dekena
    

    View Slide

89. WebGL Programming
    Guide
    Kouichi Matsuda & Rodger Lea
    

    View Slide

90. The End
    @Krzychukula
    

    View Slide

91. https:/
    /hacks.mozilla.org/2017
    /01/webgl-2-lands-in-firefox/
    https:/
    /www.chromeexperiments.com/globe
    https:/
    /codepen.io/krzychukula/pen/qmZaMz?editors=0010 Triangle
    https:/
    /codepen.io/krzychukula/pen/OmXgKe?editors=0010 Triangle 3 colors
    https:/
    /codepen.io/krzychukula/pen/OmXgKe?editors=0010 Triangle 3 colors
    in one buffer
    https:/
    /www.packtpub.com/game-development/webgl-beginners-guide
    https:/
    /www.udacity.com/course/interactive-3d-graphics--cs291
    https:/
    /sites.google.com/site/webglbook/
    

    View Slide

92. QA (ideas)
    Libraries?
    How shadertoy works?
    How to use one buffer for vertex and colors data?
    How textures work?
    How many lines of code those examples have?
    

    View Slide