JSFiddle - React, Tailwind, and code Playground

by Michal Vodicka

HTML

<canvas></canvas>

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

uniform mat4 MMatrix;
uniform mat4 VMatrix;
uniform mat4 PMatrix;

void main(void) {
	gl_Position = PMatrix * VMatrix * MMatrix * vec4(pos, 1.0);
}
</script>

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

void main(void) {
	gl_FragColor = vec4(1.0, 0.9, 0.0, 1.0);
}
</script>

JavaScript

var gl = document.querySelector("canvas").getContext("experimental-webgl");

var str = document.querySelector("#vs").textContent;
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, str);
gl.compileShader(vs);
	
var str = document.querySelector("#fs").textContent;
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, str);
gl.compileShader(fs);

var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
gl.useProgram(program);

var mmatrix = mat4.create();
mat4.scale(mmatrix, mmatrix, vec3.fromValues(2, 2, 2));
var mmLoc = gl.getUniformLocation(program, "MMatrix");

var vmatrix = mat4.create();
mat4.translate(vmatrix, vmatrix, vec3.fromValues(0, -0.2, -1));
var vmLoc = gl.getUniformLocation(program, "VMatrix");
gl.uniformMatrix4fv(vmLoc, false, vmatrix);

var pmatrix = mat4.create();
mat4.perspective(pmatrix, Math.PI/3, 2, 0.1, 100);
var pmLoc = gl.getUniformLocation(program, "PMatrix");
gl.uniformMatrix4fv(pmLoc, false, pmatrix);

gl.enable(gl.DEPTH_TEST);
gl.clearColor(0.3, 0.3, 0.3, 1);

var render = function() {
    mat4.rotateY(mmatrix, mmatrix, 0.03);
    gl.uniformMatrix4fv(mmLoc, false, mmatrix);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, data.indices.length, gl.UNSIGNED_SHORT, 0);
    requestAnimationFrame(render);
}

window.requestAnimationFrame = window.requestAnimationFrame 
	|| window.mozRequestAnimationFrame
	|| window.webkitRequestAnimationFrame
	|| function(cb) { setTimeout(cb, 1000/60); };

var data = {};
var xhr = new XMLHttpRequest();
xhr.open("get", "/gh/gist/response.json/5669191/", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState != 4 || xhr.status != 200) { return; }
    data = JSON.parse(xhr.responseText);

    var posLoc = gl.getAttribLocation(program, "pos");
    gl.enableVertexAttribArray(posLoc);

    var...