JSFiddle - React, Tailwind, and code Playground

by ShukantPal

HTML

<html>
<head>
  <title>WebGL Shader Concept</title>
</head>
<body>
</body>
</html>

JavaScript

const canvasElement = new HTMLCanvasElement();
document.body.appendChild(canvasElement);

const gl = canvasElement.getContext('webgl');

/**
 * These are the vertices we want to draw. Since they
 * are clip-space vertices, they should cover half of
 * the canvas.
 *
 * Tinker with them and find out how they change the
 * triangle.
 */
const vertices = [
	0,0,
  1,0,
  1,1
];

const verticesBuffer = gl.createBuffer();