Introduction to WebGL

Basics of WebGL extended with Shadertoy new project description.

Transcript

1. Introduction to WebGL
   @Krzychukula
   

   View Slide

2. Plan
   1. Intro
   2. How it all works
   3. Triangle in WebGL
   4. Multiple colours
   5. Our own Shadertoy
   6. Learn
   

   View Slide

3. Disclaimer:
   mental models
   over
   correctness
   

   View Slide

4. NO SHINY DEMOS
   

   View Slide

5. ASK QUESTIONS!
   

   View Slide

6. View Slide

7. Data Visualisation
   

   View Slide

8. Shadertoy
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. 2. How it all works?
    

    View Slide

13. Back in the old days…
    

    View Slide

14. View Slide

15. Graphic Card
    

    View Slide

16. View Slide

17. Map Reduce?
    

    View Slide

18. View Slide

19. View Slide

20. What is WebGL?
    

    View Slide

21. History
    

    View Slide

22. Shaders
    

    View Slide

23. Vertex
    Fragment
    

    View Slide

24. Vertex Shader
    Fragment Shader
    

    View Slide

25. It has to be FAST
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. View Slide

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

    View Slide

31. But… What about JS?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. View Slide

39. View Slide

40. 1
    -1
    1
    

    View Slide

41. View Slide

42. -0.5, -0.5
    

    View Slide

43. -0.5, -0.5 0.5, -0.5
    

    View Slide

44. -0.5, -0.5
    0, 0.5
    0.5, -0.5
    

    View Slide

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

    View Slide

46. 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

47. View Slide

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

    View Slide

49. Buffers
    

    View Slide

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

    View Slide

51. 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

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

    View Slide

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

    View Slide

54. View Slide

55. View Slide

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

    View Slide

57. varying
    Vertex Shaders
    Fragment Shaders
    attributes
    

    View Slide

58. 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

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

    View Slide

60. 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

61. What about the middle?
    

    View Slide

62. View Slide

63. View Slide

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

    View Slide

65. View Slide

66. 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

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

    View Slide

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

    View Slide

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

    View Slide

70. View Slide

71. Shadertoy
    

    View Slide

72. View Slide

73. View Slide

74. -1, -1
    -1, 1 1, 1
    

    View Slide

75. -1, -1 1, -1
    1, 1
    

    View Slide

76. var vertices = new Float32Array([
    // X, Y,
    -1.0, 1.0,
    1.0, 1.0,
    -1.0, -1.0,
    -1.0, -1.0,
    1.0, 1.0,
    1.0, -1.0,
    ])
    In JavaScript
    

    View Slide

77. -1, -1 1, -1
    1, 1
    

    View Slide

78. void mainImage( out vec4 fragColor, in vec2 fragCoord )
    {
    fragColor = vec4(0.0,0.0,1.0,1.0);
    }
    

    View Slide

79. View Slide

80. out vec4 fragColor
    

    View Slide

81. in vec2 fragCoord
    

    View Slide

82. in vec2 iResolution
    

    View Slide

83. in float iTime
    

    View Slide

84. void mainImage( out vec4 fragColor, in vec2 fragCoord )
    {
    vec2 uv = fragCoord.xy / iResolution.xy;
    fragColor = vec4(uv,0.5+0.5*sin(iTime),1.0);
    }
    

    View Slide

85. void mainImage( out vec4 fragColor, in vec2 fragCoord )
    {
    vec2 uv = fragCoord.xy / iResolution.xy;
    fragColor = vec4(uv, 0.5+0.5*sin(iTime),1.0);
    }
    

    View Slide

86. fragColor = vec4(uv.r, uv.g, 1.0, 1.0);
    

    View Slide

87. void mainImage( out vec4 fragColor, in vec2 fragCoord )
    {
    vec2 uv = fragCoord.xy / iResolution.xy;
    fragColor = vec4(uv, 0.5+0.5*sin(iTime), 1.0);
    }
    

    View Slide

88. View Slide

89. Demo?
    

    View Slide

90. What to learn from?
    

    View Slide

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

    View Slide

92. Interactive 3D Graphics
    Eric Haines & Gundega Dekena
    

    View Slide

93. WebGL Programming
    Guide
    Kouichi Matsuda & Rodger Lea
    

    View Slide

94. The End
    @Krzychukula
    

    View Slide

95. https:/
    /hacks.mozilla.org/2017
    /01/webgl-2-lands-in-firefox/
    https:/
    /www.chromeexperiments.com/globe
    https:/
    /handmadehero.org/
    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:/
    /codepen.io/krzychukula/pen/qVrLww Similar to new Shadertoy in WebGL
    https:/
    /www.shadertoy.com/new
    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