Untitled fiddle
HTML
<canvas id="render"></canvas>
<script>
var gl = document.getElementById("render").getContext("webgl2")
var number = "159.0"
var vs = `#version 300 es
in vec2 pos;
uniform float a;
void main() {
if (mod(a, ` + number + `) == ` + number + `) {
gl_Position = vec4(-pos.x, -pos.y, 1, 1);
} else {
gl_Position = vec4(pos.x, pos.y, 1, 1);
}
}
`
var fs = `#version 300 es
precision highp float;
out vec4 color;
void main() {
color = vec4(1, 0, 0, 1);
}
`
function shader(type, code) {
var shader = gl.createShader(type)
gl.shaderSource(shader, code)
gl.compileShader(shader)
return shader
}
var p = gl.createProgram()
gl.attachShader(p, shader(gl.VERTEX_SHADER, vs))
gl.attachShader(p, shader(gl.FRAGMENT_SHADER, fs))
gl.linkProgram(p)
gl.useProgram(p)
var aLoc = gl.getUniformLocation(p, "a")
gl.uniform1f(aLoc, parseFloat(number))
var buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0.8, -0.8, -0.8, 0.8, -0.8]), gl.STATIC_DRAW)
var pos = gl.getAttribLocation(p, "pos")
gl.enableVertexAttribArray(pos)
gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0)
setInterval(function() {
gl.drawArrays(gl.TRIANGLES, 0, 3)
}, 100)
</script>