Flowchart describing steps in https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html

WebGLFlowChart1.txt

@startuml

skinparam classFontName Century

start

:canvas = document.getElementById("canvas");
note left: <canvas id="canvas"></canvas>

:gl = canvas.getContext("webgl");;




fork
    :vertexShader = gl.createShader(gl.VERTEX_SHADER);
    :gl.shaderSource(vertexShader, source);
    note left: <script id="2d-vertex-shader" type="notjs">\n  attribute vec4 a_position;\n  void main() {\n    gl_Position = a_position;\n  }\n</script>
    
    :gl.compileShader(vertexShader);

fork again
    :fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    :gl.shaderSource(fragmentShader, source);
    note right: <script id="2d-fragment-shader" type="notjs">\n  precision mediump float;\n  void main() {\n    gl_FragColor = vec4(1, 0, 0.5, 1);\n  }\n</script>
    
    :gl.compileShader(fragmentShader);
end fork

:program = gl.createProgram();\ngl.attachShader(program, vertexShader);\ngl.attachShader(program, fragmentShader);\ngl.linkProgram(program);


:positionAttributeLocation = gl.getAttribLocation(program, "a_position");
note left: <script id="2d-vertex-shader" type="notjs">\n  attribute vec4 a_position;\n  void main() {\n    gl_Position = a_position;\n  }\n</script>

:positionBuffer = gl.createBuffer();
:gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

:gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
note left: var positions = [\n  0, 0,\n  0, 0.5,\n  0.7, 0,\n];

:webglUtils.resizeCanvasToDisplaySize(gl.canvas);\ngl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

:gl.clearColor(0, 0, 0, 0);\ngl.clear(gl.COLOR_BUFFER_BIT);

:gl.useProgram(program);
:gl.enableVertexAttribArray(positionAttributeLocation);
note left: positionAttributeLocation = gl.getAttribLocation(program, "a_position");

:gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

:gl.drawArrays(primitiveType, offset, count);

@enduml