Vertex shader
attribute vec3 aVertexPosition; attribute float which; uniform float time; varying vec4 bary; mat3 rot(float theta) { return mat3(cos(theta), 0, -sin(theta), 0, 1, 0, sin(theta), 0, cos(theta)); } void main(void) { gl_Position = vec4(rot(time) * aVertexPosition, 1.0); gl_Position.w = (gl_Position.z + 3.) / 2.; bary = vec4(0); if (which == 0.) bary.x = 1.; else if (which == 1.) bary.y = 1.; else if (which == 2.) bary.z = 1.; else bary.w = 1.; }

Fragment shader
precision highp float; varying vec4 bary; void main(void) { int count = 0; if (bary.x > 0.05) count++; if (bary.y > 0.05) count++; if (bary.z > 0.05) count++; if (bary.w > 0.05) count++; if (count < 3) gl_FragColor = vec4(1, 0, 0, 1); else gl_FragColor = vec4(1); }

Vertices
/* * Put JS code for the body of a function here. * It will be called on each reload. * Return an object with keys "attributes" and "data", * or a promise resolving to such an object. * "attributes" should be a list of pairs of attribute * names and sizes. * "data" should be a one-dimensional array of floats * of consecutively packed vertex attributes. */ return { attributes: [ ["aVertexPosition", 3], ["which", 1]], data: [ 0.0, 0, -0.577, 0, -0.5, 0, 0.288, 1, 0.5, 0, 0.288, 2, 0.0, 0.816, 0.0, 3, ]};

Triangles
/* * Put JS code for the body of a function here. * It will be called on each reload. * Return a one-dimensional array of vertex indices, * three per triangle, or a promise resolving to such * an array. */ return [ 0, 1, 2, 0, 1, 3, 1, 2, 3, 2, 0, 3, ];

Uniforms
/* * Put JS code for the body of a function here. * It will be called on each reload. * Return an object whose keys are uniform names * and whose values are values for those uniforms, * or a promise resolving to such an object. * Possible kinds of value are: * - A float (for GLSL float) * - An array of floats (for GLSL vectors) * - An array of arrays of floats * (for square GLSL matrices) (column-major) * - A zero-arg function returning one of the above, to be * called for the uniform's value each frame * - A string containing the URL of an image or video * usable in an <img> or <video> tag (for GLSL sampler2D) */ return {time: () => performance.now() / 1000};

Load Gist (ctrl+O)
Save anonymous Gist (ctrl+S)
Reload (ctrl+Enter)