JSFiddle - React, Tailwind, and code Playground

by Nikita Spiridonov

HTML

<!-- Vertex shader program -->
<script id="shader-vs" type="x-shader/x-vertex">
  attribute highp vec3 aVertexPosition;
  attribute highp vec3 aVertexColor;
  uniform highp mat4 uMVMatrix;
  uniform highp mat4 uPMatrix;
  varying vec3 vColor;
  void main( void ) {
    gl_Position = uPMatrix * uMVMatrix * vec4( aVertexPosition, 1.0 );
    vColor = aVertexColor;
  }
</script>

<!-- Fragment shader program -->
<script id="shader-fs" type="x-shader/x-fragment">
  varying highp vec3 vColor;
  void main(void) {
    gl_FragColor = vec4(vColor, 1.0);
  }
</script>

<body >
  <canvas id="glCanvas">
    Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
  </canvas>
</body>

CSS

* {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  margin:0;
  padding:0;
}

body {
  color:#fff;
  font-family:tahoma,sans-serif;
  font-size:13px;
  background-color:black;
  overflow:hidden;
  margin:0;
}

#container canvas {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  bottom:0;
}

JavaScript

webGLStart();

///////////////////////////////////////////////////////////////////////////////
// JS script aimed to render Mobius strip using WebGL. Code from             //
// learningwebgl.com (and one more blog unfortunately can't recall) used as  //
// a base.                                                                   //
////////// From Siberia with love // bitbucket.org/jne100/code_from_blog/src //


var gl;
var shaderProgram;
var modelVerticesBuffer;
var modelVerticesIndexBuffer;
var modelVerticesColorBuffer;
var modelRotation = 0.0;
var lastModelUpdateTime = 0;


function webGLStart() {
    var canvas = document.getElementById("glCanvas");
    initWebGL(canvas);
    initShaders();
    initBuffers();
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);
    setInterval(drawScene, 33);
}


function initWebGL( canvas ) {
    try {
        gl = canvas.getContext("experimental-webgl");
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
    } catch(e) {
    }
    if (!gl) {
        alert("Could not initialise WebGL :(");
    }
}


function initShaders() {

    var fragmentShader = getShader(gl, "shader-fs");
    var 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);

    shaderProgram.vertexPositionAttribute =
        gl.getAttribLocation(shaderProgram, "aVertexPosition");
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

    shaderProgram.vertexColorAttribute =
        gl.getAttribLocation(shaderProgram, "aVertexColor");
   ...