JSFiddle - React, Tailwind, and code Playground

by Jimmy Chandra

HTML

<script src="//learningwebgl.com/lessons/lesson01/glMatrix-0.9.5.min.js"></script>
<canvas id="surface" style="border:none;" width="500" height="500"></canvas>

<script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;
    
    void main(void) {
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
</script>

<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;
    
    void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    }
</script>

JavaScript

(function webGLStart() {
    var 
        gl,
        shaderProgram,
        triangleVertexPositionBuffer,
        squareVertexPositionBuffer,
        mvMatrix = mat4.create(),
        pMatrix = mat4.create(),
        surface = document.getElementById('surface'),
        
        initGL = function(canvas) {
            try {
                gl = canvas.getContext('experimental-webgl');
                gl.viewportWidth = gl.width;
                gl.vieportHeight = gl.height;
            } catch(e) {
            }
            
            if (!gl) {
                alert('Could not initialize WebGL, sorry :-(');
            }
        },
        
        initShaders = function() {
            var fragmentShader = getShader(gl, 'shader-fs'),
                vertexShader = getShader(gl, 'shader-vs');
            
            shaderProgram = gl.createProgram();
            gl.attachShader(shaderProgram, vertexShader);
            gl.attachShader(shaderProgram, fragmentShader);
            gl.linkProgram(shaderProgram);
            
            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
                alert('Could not initialise shaders');
            }
            
            gl.useProgram(shaderProgram);
            
            //Cache gl attribute 'aVertexPosition' locally.
            shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
            gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
            
            //Cache gl uniform variables (uPMatrix & uMVMatrix) locally.
            shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, 'uPMatrix');
            shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, 'uMVMatrix');
        },
        
        getShader = function(gl, id) {
            var shaderScript = document.getElementById(id);
            if (!shaderScript) {
                return null;
            }
            
           ...