Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to WebGL

Introduction to WebGL

Basics of WebGL extended with Shadertoy new project description.

krzychukula

November 28, 2017
Tweet

More Decks by krzychukula

Other Decks in Programming

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