JSFiddle - React, Tailwind, and code Playground

by asterix77

HTML

<!DOCTYPE html>
<html>
<head>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vNormal;

varying vec3 N, L, V;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec4 lightPosition;
uniform mat3 normalMatrix;

void main()
{
    vec3 pos = (modelViewMatrix * vPosition).xyz;
    V = -normalize(pos);
    N = normalize(normalMatrix*vNormal.xyz);

    // check for far or near light
    if(lightPosition.w == 0.0) {
      L = normalize(lightPosition.xyz);
    } else {
      L = normalize(lightPosition.xyz - pos);
    }

    gl_Position = projectionMatrix * modelViewMatrix * vPosition;
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;

uniform vec4 ambientProduct;
uniform vec4 diffuseProduct;
uniform vec4 specularProduct;
uniform float shininess;
varying vec3 N, L, V;

void main()
{        
    vec4 ambient = ambientProduct;

    float Kd = max( dot(L, N), 0.0 );
    vec4  diffuse = Kd*diffuseProduct;

    vec3 H = normalize( L + V );
    float Ks = pow( max(dot(N, H), 0.0), shininess );
    vec4  specular = Ks * specularProduct;
    
    if( dot(L, N) < 0.0 ) specular = vec4(0.0, 0.0, 0.0, 1.0);

    vec4 fColor = ambient + diffuse + specular;
    fColor.a = 1.0;

    gl_FragColor = fColor;
}
</script>
    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/webgl-utils.js"></script>
    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/initShaders.js"></script>
    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/MV.js"></script>
  </head>
<body>
    <canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>

  <br />
Move: 
<button id = "Button3">Farther</button><span id="distance"></span>
<button id = "Button4">Closer</button>
<button id = "Button6">Up</button><span id="theta"></span>
<button id =...

JavaScript

var canvas;
var gl;

var numTimesToSubdivide = 5;
 
var index = 0;
var pointsArray = [];
var normalsArray = [];

var near = 0.001;
var far = 1000.0;
var radius = 4.0;
var theta  = 90 * Math.PI/180;
var phi    = 30 * Math.PI/180;
var dr = 5.0 * Math.PI/180.0;

var  fovy = 45.0;  // Field-of-view in Y direction angle (in degrees)
var  aspect;       // Viewport aspect ratio

var eye;
const at = vec3(0.0, 0.0, 0.0);
const up = vec3(0.0, 1.0, 0.0);

var usePerspective = true;

var va = vec4(0.0, 0.0, -1.0,1);
var vb = vec4(0.0, 0.942809, 0.333333, 1);
var vc = vec4(-0.816497, -0.471405, 0.333333, 1);
var vd = vec4(0.816497, -0.471405, 0.333333,1);

var lightPosition = vec4(1.0, 1.0, 1.0, 0.0 );
var lightAmbient = vec4(0.2, 0.2, 0.2, 1.0 );
var lightDiffuse = vec4( 1.0, 1.0, 1.0, 1.0 );
var lightSpecular = vec4( 1.0, 1.0, 1.0, 1.0 );

var materialAmbient = vec4( 1.0, 0.0, 1.0, 1.0 );
var materialDiffuse = vec4( 1.0, 0.8, 0.0, 1.0 );
var materialSpecular = vec4( 1.0, 1.0, 1.0, 1.0 );
var materialShininess = 20.0;

var ctm;
var ambientColor, diffuseColor, specularColor;

var modelViewMatrix, projectionMatrix;
var modelViewMatrixLoc, projectionMatrixLoc;

var normalMatrix, normalMatrixLoc;

function triangle(a, b, c) {
     pointsArray.push(a);
     pointsArray.push(b);      
     pointsArray.push(c);
    
     // normals are vectors
     normalsArray.push(a[0], a[1], a[2], 0.0);
     normalsArray.push(b[0], b[1], b[2], 0.0);
     normalsArray.push(c[0], c[1], c[2], 0.0);

     index += 3;
}


function divideTriangle(a, b, c, count) {
    if ( count > 0 ) {
        var ab = mix( a, b, 0.5);
        var ac = mix( a, c, 0.5);
        var bc = mix( b, c, 0.5);
                
        ab = normalize(ab, true);
        ac = normalize(ac, true);
        bc = normalize(bc, true);
                                
        divideTriangle( a, ab, ac, count - 1 );
        divideTriangle( ab, b, bc, count - 1 );
        divideTriangle( bc, c, ac, count - 1 );
        divideTriangle(...