106 lines
2.9 KiB
JavaScript
106 lines
2.9 KiB
JavaScript
;(function() {
|
|
"use strict"
|
|
var gl, canvas, program, buffer;
|
|
var attributeLocation;
|
|
var timeLocation, resolutionLocation;
|
|
|
|
window.addEventListener("load", initWebGL, false);
|
|
|
|
function getRenderingContext() {
|
|
canvas = document.querySelector("canvas");
|
|
canvas.width = canvas.clientWidth;
|
|
canvas.height = canvas.clientHeight;
|
|
|
|
var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
|
|
|
|
if (!gl) {
|
|
// TODO: show something fancy
|
|
console.log("failed to get webcontext");
|
|
return null;
|
|
}
|
|
|
|
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
|
|
|
|
return gl;
|
|
};
|
|
|
|
function render(time) {
|
|
gl.viewport(0, 0, canvas.width, canvas.height);
|
|
|
|
gl.clearColor(1.0, 0.0, 0.0, 1.0);
|
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
|
|
gl.useProgram(program);
|
|
|
|
gl.enableVertexAttribArray(attributeLocation);
|
|
gl.vertexAttribPointer(attributeLocation, 2, gl.FLOAT, false, 0, 0);
|
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
|
|
gl.uniform1f(timeLocation, time * 0.001);
|
|
|
|
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
|
|
|
window.requestAnimationFrame(render, canvas);
|
|
}
|
|
|
|
function initAttributes() {
|
|
buffer = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
gl.bufferData(
|
|
gl.ARRAY_BUFFER,
|
|
new Float32Array([
|
|
-1.0, -1.0,
|
|
1.0, -1.0,
|
|
-1.0, 1.0,
|
|
-1.0, 1.0,
|
|
1.0, -1.0,
|
|
1.0, 1.0,
|
|
]),
|
|
gl.STATIC_DRAW);
|
|
}
|
|
|
|
function initWebGL(event) {
|
|
window.removeEventListener(event.type, initWebGL, false);
|
|
|
|
if (!(gl = getRenderingContext()))
|
|
return;
|
|
|
|
initAttributes();
|
|
|
|
var vertexSource =
|
|
`attribute vec2 a_position;
|
|
void main() { gl_Position = vec4(a_position, 0, 1);}`;
|
|
|
|
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
|
|
|
|
gl.shaderSource(vertexShader, vertexSource);
|
|
gl.compileShader(vertexShader);
|
|
|
|
var wavesSource = document.querySelector('#waves').text;
|
|
var wavesShader = gl.createShader(gl.FRAGMENT_SHADER);
|
|
|
|
gl.shaderSource(wavesShader, wavesSource);
|
|
gl.compileShader(wavesShader);
|
|
|
|
var compilationLog = gl.getShaderInfoLog(wavesShader);
|
|
|
|
// TODO: show link/compile errors?
|
|
|
|
program = gl.createProgram();
|
|
|
|
gl.attachShader(program, vertexShader);
|
|
gl.attachShader(program, wavesShader);
|
|
|
|
gl.linkProgram(program);
|
|
gl.useProgram(program);
|
|
|
|
attributeLocation = gl.getAttribLocation(program, "a_position");
|
|
|
|
timeLocation = gl.getUniformLocation(program, "iTime");
|
|
resolutionLocation = gl.getUniformLocation(program, "iResolution");
|
|
|
|
render();
|
|
};
|
|
})();
|