JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gl-matrix.js"></script>
<canvas id="webgl-canvas" width="640" height="480"></canvas>
<script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;
    
    varying vec4 vColor;
    varying vec3 vLighting;
    
    void main(void) {
        gl_FragColor = vec4(vColor.rgb * vLighting, vColor.a);
    }
</script>

<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;
    attribute vec3 aVertexColor;
    attribute vec3 aVertexNormal;
    
    uniform mat4 uNormalMatrix;
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;
    
    varying vec4 vColor;
    varying vec3 vLighting;
    
    void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        
        vColor = vec4(aVertexColor, 1.0);
        
        vec3 ambientLight = vec3(0.6, 0.6, 0.6);
        vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
        vec3 directionalVector = vec3(0.85, 0.8, 0.75);
        
        vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
        
        float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
        vLighting = ambientLight + (directionalLightColor * directional);
    
    }
</script>

JavaScript

var gl;
var shaderProgram;

var vertexPositionBuffer;
var vertexIndexBuffer;
var vertexColorBuffer;
var vertexNormalBuffer;

var mvMatrix = mat4.create();
var pMatrix = mat4.create();
var lMatrix = mat4.create();

var vertices = [
    // Front face
    -1.0, -1.0,  1.0,
    1.0, -1.0,  1.0,
    1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,
    
    // Back face
    -1.0, -1.0, -1.0,
    -1.0,  1.0, -1.0,
    1.0,  1.0, -1.0,
    1.0, -1.0, -1.0,
    
    // Top face
    -1.0,  1.0, -1.0,
    -1.0,  1.0,  1.0,
    1.0,  1.0,  1.0,
    1.0,  1.0, -1.0,
    
    // Bottom face
    -1.0, -1.0, -1.0,
    1.0, -1.0, -1.0,
    1.0, -1.0,  1.0,
    -1.0, -1.0,  1.0,
    
    // Right face
    1.0, -1.0, -1.0,
    1.0,  1.0, -1.0,
    1.0,  1.0,  1.0,
    1.0, -1.0,  1.0,
    
    // Left face
    -1.0, -1.0, -1.0,
    -1.0, -1.0,  1.0,
    -1.0,  1.0,  1.0,
    -1.0,  1.0, -1.0
];

var indices = [
    0,  1,  2,      0,  2,  3,    // front
    4,  5,  6,      4,  6,  7,    // back
    8,  9,  10,     8,  10, 11,   // top
    12, 13, 14,     12, 14, 15,   // bottom
    16, 17, 18,     16, 18, 19,   // right
    20, 21, 22,     20, 22, 23    // left
];

var normals = [
    [0, 0, 1],
    [0, 0, -1],
    [0, 1, 0],
    [0, -1, 0],
    [1, 0, 0],
    [-1, 0, 0],
];
    
var colors = [
    [1.0,  1.0,  0.0],    // Front face: white
    [1.0,  1.0,  0.0],    // Back face: red
    [1.0,  1.0,  0.0],    // Top face: green
    [1.0,  1.0,  0.0],    // Bottom face: blue
    [1.0,  1.0,  0.0],    // Right face: yellow
    [1.0,  1.0,  0.0]     // Left face: purple
];

var generatedColors = [];
var generatedNormals = [];

webGLStart();

function webGLStart() {
    var canvas = document.getElementById("webgl-canvas");
    
    for (j=0; j<6; j++) {
        var c = colors[j];
        var n = normals[j];
        
        for (var i=0; i<4; i++) {
            generatedColors = generatedColors.concat(c);
            generatedNormals = generatedNormals.concat(n);
        }
    }
    
   ...