WebGL/GLSL time variable similar to ShaderToy

Question

Here is my vertex shader

attribute vec4 a_position;
varying vec4 v_color;

void main() {
  gl_Position = vec4(a_position.xy, 0.0, 1.0);
  v_color = gl_Position * 0.5 + 0.5;
}

Here is my fragment shader

precision mediump float;

varying vec4 v_color;

void main() {
  gl_FragColor = v_color;
}

Here is my JS, that sets up everything

var gl = document.getElementById("canvas").getContext('webgl');
var vertexShader = createShader(gl, gl.VERTEX_SHADER, window.vert);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, window.frag);
var program = createProgram(gl, vertexShader, fragmentShader);
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
var positions = [
  -1, -1,
  -1, 1,
  1, 1,
  1, 1,
  1, -1,
  -1, -1,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
resizeCanvas(gl);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
var size = 2;          // 2 components per iteration
var type = gl.FLOAT;   // the data is 32bit floats
var normalize = false; // don't normalize the data
var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
var offset = 0;        // start at the beginning of the buffer
gl.vertexAttribPointer(
    positionAttributeLocation, size, type, normalize, stride, offset)
// // draw
var primitiveType = gl.TRIANGLES;
var offset = 0;
var count = 6;
gl.drawArrays(primitiveType, offset, count);

And I get the following output

But what I'm trying to achieve next is to animate this using some time variable similar to iTime of ShaderToy.

How do I setup something like this?

You should probably read some articles on webgl. [For example these ones](https://webglfundamentals.org/webgl/lessons/webgl-animation.html) — gman, Jan 23 '18 at 01:26
I had read that article, if I am interpreting it correctly it's a bit different in the sense that your shader code stays dumb while you do the heavy lifting inside JS. I was looking for a way to setup my variable such that I do all the necessary math inside glsl & your answer does exactly that. Basically, I'm planning to implement something similar to this https://www.shadertoy.com/view/MslGWN, I'll figure out the audio aspect next. — Mudassir Ali, Jan 23 '18 at 03:44

score 16 · Accepted Answer · answered Jan 23 '18 at 01:38

If you want to pass in the time you just need to make a uniform to hold the time and set it to some time or counter

uniform float time;

in JavaScript look up the location at init time

const timeLocation = gl.getUniformLocation(program, "time");

At render time set it

gl.uniform1f(timeLocation, someTimeValue);

You also need a render loop using requestAnimationFrame. requestAnimationFrame gets passed the time since the page loaded so you can just use that

function render(time) {
  ...
  gl.useProgram(program);
  gl.uniform1f(timeLocation, time * 0.001);  // time in seconds
  ...
  // draw

  requestAnimationFrame(render);
}
requestAnimationFrame(render);

Example:

var vert = `
attribute vec4 a_position;
varying vec4 v_color;

void main() {
  gl_Position = vec4(a_position.xy, 0.0, 1.0);
  v_color = gl_Position * 0.5 + 0.5;
}
`;
var frag = `
precision mediump float;

varying vec4 v_color;

uniform float time;

void main() {
  gl_FragColor = vec4(fract(v_color.rgb + time), 1);
}
`;

var gl = document.getElementById("canvas").getContext('webgl');
var vertexShader = createShader(gl, gl.VERTEX_SHADER, window.vert);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, window.frag);
var program = createProgram(gl, vertexShader, fragmentShader);
const timeLocation = gl.getUniformLocation(program, "time");
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
var positions = [
  -1, -1,
  -1, 1,
  1, 1,
  1, 1,
  1, -1,
  -1, -1,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

function render(time) {
  resizeCanvas(gl);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  gl.clearColor(0, 0, 0, 0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.useProgram(program);
  gl.enableVertexAttribArray(positionAttributeLocation);
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  // // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
  var size = 2;          // 2 components per iteration
  var type = gl.FLOAT;   // the data is 32bit floats
  var normalize = false; // don't normalize the data
  var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
  var offset = 0;        // start at the beginning of the buffer
  gl.vertexAttribPointer(
      positionAttributeLocation, size, type, normalize, stride, offset)

  gl.uniform1f(timeLocation, time * 0.001);
  // // draw  
  var primitiveType = gl.TRIANGLES;
  var offset = 0;
  var count = 6;
  gl.drawArrays(primitiveType, offset, count);
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

function resizeCanvas(gl) {
  // not important for example
}

function createProgram(gl, vs, fs) {
  const p = gl.createProgram();
  gl.attachShader(p, vs);
  gl.attachShader(p, fs);
  gl.linkProgram(p);
  // should check for error here!
  return p;
}

function createShader(gl, type, src) {
  const s = gl.createShader(type);
  gl.shaderSource(s, src);
  gl.compileShader(s);
  // should check for error here
  return s;
}

<canvas id="canvas"></canvas>

score 1 · Answer 2 · answered Jan 22 '18 at 18:03

You should pass some time variable as a uniform to shader and use it to create some animated effect. Use requestAnimationFrame to get fast and efficient animation.

const vert = `
attribute vec4 a_position;
varying vec4 v_color;

void main() {
  gl_Position = vec4(a_position.xy, 0.0, 1.0);
  v_color = gl_Position * 0.5 + 0.5;
}`

const frag = `
precision mediump float;

varying vec4 v_color;
uniform float time;

void main() {
  gl_FragColor = v_color;
  gl_FragColor.r = v_color.r * 0.5 * (1.0 + sin(4.0*time) );
  gl_FragColor.g = v_color.g * 0.5 * (1.0 + sin(1.0 + 2.0*time) );
}`

function animate(t) {
 gl.uniform1f(timeUniformLocation, t / 1000); // convert from milis to seconds
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(primitiveType, offset, count);
  requestAnimationFrame(animate)
}


var gl = document.getElementById("canvas").getContext('webgl');
var vertexShader =gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader,vert);
gl.compileShader(vertexShader);
var fragmentShader =gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader,frag);
gl.compileShader(fragmentShader);
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
 console.log(gl.getShaderInfoLog(fragmentShader))
  console.log(gl.getShaderInfoLog(vertexShader))
}

var timeUniformLocation = gl.getUniformLocation(program, "time");
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
var positions = [
  -1, -1,
  -1, 1,
  1, 1,
  1, 1,
  1, -1,
  -1, -1,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
var size = 2;          // 2 components per iteration
var type = gl.FLOAT;   // the data is 32bit floats
var normalize = false; // don't normalize the data
var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
var offset = 0;        // start at the beginning of the buffer
gl.vertexAttribPointer(
  positionAttributeLocation, size, type, normalize, stride, offset)
// // draw
var primitiveType = gl.TRIANGLES;
var offset = 0;
var count = 6;
gl.drawArrays(primitiveType, offset, count);
animate()

<canvas id="canvas" width="400px" height="300px"></canvas>

WebGL/GLSL time variable similar to ShaderToy

2 Answers2