JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="myCanvas"></canvas>
JavaScript
var vertexShader = [
'attribute vec4 a_position;',
'attribute vec2 a_texcoord;',
'uniform mat4 u_matrix;',
'varying vec2 v_texcoord;',
'void main() {',
'gl_Position = u_matrix * a_position;',
'v_texcoord = a_texcoord;',
'}'
].join('');
var fragmentShader = [
'precision mediump float;',
'varying vec2 v_texcoord;',
'uniform sampler2D u_texture;',
'void main() {',
'gl_FragColor = texture2D(u_texture, v_texcoord);',
'}'
].join('');
function orthographic(left, right, bottom, top, near, far, dst) {
dst = dst || new Float32Array(16);
dst[0] = 2 / (right - left);
dst[1] = 0;
dst[2] = 0;
dst[3] = 0;
dst[4] = 0;
dst[5] = 2 / (top - bottom);
dst[6] = 0;
dst[7] = 0;
dst[8] = 0;
dst[9] = 0;
dst[10] = 2 / (near - far);
dst[11] = 0;
dst[12] = (left + right) / (left - right);
dst[13] = (bottom + top) / (bottom - top);
dst[14] = (near + far) / (near - far);
dst[15] = 1;
return dst;
}
function translate(m, tx, ty, tz, dst) {
dst = dst || new Float32Array(16);
var m00 = m[0],
m01 = m[1],
m02 = m[2],
m03 = m[3],
m10 = m[1 * 4 + 0],
m11 = m[1 * 4 + 1],
m12 = m[1 * 4 + 2],
m13 = m[1 * 4 + 3],
m20 = m[2 * 4 + 0],
m21 = m[2 * 4 + 1],
m22 = m[2 * 4 + 2],
m23 = m[2 * 4 + 3],
m30 = m[3 * 4 + 0],
m31 = m[3 * 4 + 1],
m32 = m[3 * 4 + 2],
m33 = m[3 * 4 + 3];
if (m !== dst) {
dst[0] = m00;
dst[1] = m01;
dst[2] = m02;
dst[3] = m03;
dst[4] = m10;
dst[5] = m11;
dst[6] = m12;
dst[7] = m13;
dst[8] = m20;
dst[9] = m21;
dst[10] = m22;
dst[11] = m23;
}
dst[12] = m00 * tx + m10 * ty + m20 * tz + m30;
dst[13] = m01 * tx + m11 * ty + m21 * tz + m31;
dst[14] = m02 * tx + m12 * ty + m22 * tz + m32;
dst[15] = m03 * tx +...