JSFiddle - React, Tailwind, and code Playground

by asterix77

HTML

<!DOCTYPE html>
<html>

<script id="vertex-shader" type="x-shader/x-vertex">

varying vec3 R;
attribute vec4 vPosition;
attribute vec4 vNormal;
attribute float vDoReflect;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat3 normalMatrix;

void main()
{     
    //vec3 eyePos  = normalize((modelViewMatrix*vPosition).xyz);
    vec3 eyePos  = (modelViewMatrix*vPosition).xyz;

    vec3 N = normalize(normalMatrix*vNormal.xyz);
    //vec3 N = normalMatrix*vNormal.xyz;
    
    if (vDoReflect >= 0.5) {
      gl_Position = projectionMatrix*modelViewMatrix*vPosition;
      //if (dot(eyePos, N) > 0.0) {
      	// R = reflect(eyePos, N);
        R = N;
      //} else {
      //	R = reflect(eyePos, N);
      	//R = vec3(1.0, 0.0, 0.0);
      //}
    } else {
      // Stationary outer square
      gl_Position = projectionMatrix*vPosition;
      //R = vec3(vNormal.x, vNormal.y, -vNormal.z);
      R = vPosition.xyz;
      
      // Moving outer square
      // gl_Position = projectionMatrix*modelViewMatrix*vPosition;
      // R = -vNormal.xyz;
    } 
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

varying vec3 R;
uniform samplerCube texMap;

void main()
{
    vec4 texColor = textureCube(texMap, R);

    gl_FragColor = texColor;
}
</script>

<p> </p>
<button id = "Button2">Increase theta</button>
<button id = "Button3">Decrease theta</button>
<button id = "Button4">Increase phi</button>
<button id = "Button5">Decrease phi</button>
<p> </p>



<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>

<body>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>

JavaScript

var canvas;
var gl;
var program;

var numVertices  = 36;

var dr = 5.0 * Math.PI/180.0;
var radius = 3.0;
var theta  = -6.0 * dr;
var phi    = -6.0 * dr;

var near = 0.001;
var far = 1000.0;
var  fovy = 140.0;  // Field-of-view in Y direction angle (in degrees)
var  aspect;       // Viewport aspect ratio


var flag = true;

function makeFTexture(r,g,b,a) {
  var color = [r,g,b,a];
  var black = [r>>1, g>>1, b>>1, 255];
  var tex = new Uint8Array([].concat(
  color, black, color, color,
  color, color, black, color,
  color, black, color, color,
  black, color, color, color
  ));
  return tex;
}

var red = makeFTexture(255, 0, 0, 255);
var green = makeFTexture(0, 255, 0, 255);
var blue = makeFTexture(0, 0, 255, 255);
var cyan = makeFTexture(0, 255, 255, 255);
var magenta = makeFTexture(255, 0, 255, 255);
var yellow = makeFTexture(255, 255, 0, 255);

/* var red = new Uint8Array([255, 0, 0, 255]);
var green = new Uint8Array([0, 255, 0, 255]);
var blue = new Uint8Array([0, 0, 255, 255]);
var cyan = new Uint8Array([0, 255, 255, 255]);
var magenta = new Uint8Array([255, 0, 255, 255]);
var yellow = new Uint8Array([255, 255, 0, 255]);
 */
var cubeMap;

var pointsArray = [];
var normalsArray = [];
var reflectArray = [];
/* 
var vertices = [
    vec4( -0.5, -0.5,  0.5, 1.0 ),
    vec4( -0.5,  0.5,  0.5, 1.0 ),
    vec4( 0.5,  0.5,  0.5, 1.0 ),
    vec4( 0.5, -0.5,  0.5, 1.0 ),
    vec4( -0.5, -0.5, -0.5, 1.0 ),
    vec4( -0.5,  0.5, -0.5, 1.0 ),
    vec4( 0.5,  0.5, -0.5, 1.0 ),
    vec4( 0.5, -0.5, -0.5, 1.0 )
]; */


var vertices = [
    vec4( -0.5, -0.5,  0.5, 1.0),
    vec4( -0.5,  0.5,  0.5, 1.0),
    vec4(  0.5,  0.5,  0.5, 1.0),
    vec4(  0.5, -0.5,  0.5, 1.0),
    vec4( -0.5, -0.5, -0.5, 1.0),
    vec4( -0.5,  0.5, -0.5, 1.0),
    vec4(  0.5,  0.5, -0.5, 1.0),
    vec4(  0.5, -0.5, -0.5, 1.0)
];


function configureCubeMap() {

    cubeMap = gl.createTexture();

    gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeMap);
    gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X...