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

A Novice's Guide to WebGL

A Novice's Guide to WebGL

Introduction to 3D, shaders and WebGL.

krzychukula

April 26, 2017
Tweet

More Decks by krzychukula

Other Decks in Programming

Transcript

  1. A Novice’s Guide to WebGL
    @Krzychukula

    View full-size slide

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

    View full-size slide

  3. ASK QUESTIONS!

    View full-size slide

  4. Data Visualisation

    View full-size slide

  5. What my learning looked
    like?

    View full-size slide

  6. But this is just a hobby

    View full-size slide

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

    View full-size slide

  8. Disclaimer: mental models
    over correctness

    View full-size slide

  9. Who this talk is for?

    View full-size slide

  10. [-1 …. 0 …. 1]

    View full-size slide

  11. NO SHINY DEMOS

    View full-size slide

  12. Dreyfus model of skill
    acquisition

    View full-size slide

  13. Masters of DOOM
    YOUme

    View full-size slide

  14. I realised that we are all
    Novices!

    View full-size slide

  15. Novice WebGL Programmer!

    View full-size slide

  16. Let’s start

    View full-size slide

  17. 2. How it all works?

    View full-size slide

  18. Back in the old days…

    View full-size slide

  19. Graphic Card

    View full-size slide

  20. What is WebGL?

    View full-size slide

  21. Vertex
    Fragment

    View full-size slide

  22. Vertex Shader
    Fragment Shader

    View full-size slide

  23. It has to be FAST

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. But… What about JS?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. -0.5, -0.5
    0, 0.5

    View full-size slide

  36. -0.5, -0.5
    0, 0.5
    0.5, -0.5

    View full-size slide

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

    View full-size slide

  38. 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 full-size slide

  39. 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 full-size slide

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

    View full-size slide

  41. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  44. Vertex Shader
    Fragment Shaders

    View full-size slide

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

    View full-size slide

  46. varying
    Vertex Shaders
    Fragment Shaders
    attributes

    View full-size slide

  47. 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 full-size slide

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

    View full-size slide

  49. 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 full-size slide

  50. What about the middle?

    View full-size slide

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

    View full-size slide

  52. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. Almost the end

    View full-size slide

  57. diffX
    diffX
    rotateAngle
    scaleX
    scaleY

    View full-size slide

  58. Don’t worry about Math
    Linear Algebra

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. What to learn from?

    View full-size slide

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

    View full-size slide

  63. Interactive 3D Graphics
    Eric Haines & Gundega Dekena

    View full-size slide

  64. WebGL Programming
    Guide
    Kouichi Matsuda & Rodger Lea

    View full-size slide

  65. The End
    @Krzychukula

    View full-size slide

  66. 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 full-size slide

  67. 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 full-size slide