JSFiddle - React, Tailwind, and code Playground

by Sam Wray

HTML

<canvas></canvas>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
uniform vec2 u_resolution;

  void main() {
    gl_Position = vec4(a_position, 0, 1);
  }
</script>

<script id="2d-fragment-shader" type="x-shader/x-fragment">
uniform vec2 u_resolution;

void main() {
    gl_FragColor = vec4(gl_FragCoord.x, gl_FragCoord.y, 0, 1);
}
</script>

CSS

body {
  margin: 0;
  position: relative;
}

canvas {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
}

JavaScript

var gl;
var canvas;
var buffer;
var program;

function resize() {
  canvas.width  = window.innerWidth * window.devicePixelRatio;
  canvas.height = window.innerHeight * window.devicePixelRatio;
	
  canvas.style.width  = window.innerWidth + 'px';
  canvas.style.height = window.innerHeight  + 'px';
  
  // Set viewport size from context
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  
  // Set u_resolution
  if(program) {
	  var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
  	gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
  }
}

function init() {

  canvas        = document.querySelector('canvas');
  gl            = canvas.getContext('webgl');
	
  console.log(gl);
  
  resize();
  window.addEventListener('resize', resize);
  
  // init buffers to allow full viewport use (-1.0 to 1.0)
  buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(
    gl.ARRAY_BUFFER, 
    new Float32Array([
      -1.0, -1.0, 
       1.0, -1.0, 
      -1.0,  1.0, 
      -1.0,  1.0, 
       1.0, -1.0, 
       1.0,  1.0
    ]), 
    gl.STATIC_DRAW
  );
	
  var shaderScript;
  var shaderSource;
  var vertexShader;
  var fragmentShader;

  shaderScript = document.getElementById("2d-vertex-shader");
  shaderSource = shaderScript.text;
  vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, shaderSource);
  gl.compileShader(vertexShader);

  shaderScript   = document.getElementById("2d-fragment-shader");
  shaderSource   = shaderScript.text;
  fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, shaderSource);
  gl.compileShader(fragmentShader);

  program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);	
  gl.useProgram(program);
	
  render();
}

function render() {

  window.requestAnimationFrame(render);

  gl.clearColor(1.0, 0.0, 0.0, 1.0);
 ...