90 lines
2.2 KiB
JavaScript
90 lines
2.2 KiB
JavaScript
|
let gl;
|
||
|
|
let program;
|
||
|
|
let positions, colors;
|
||
|
|
let posVBO, colorVBO;
|
||
|
|
let lastTimestamp;
|
||
|
|
|
||
|
|
async function main() {
|
||
|
|
// 1. Get canvas and setup WebGL context
|
||
|
|
const canvas = document.getElementById("gl-canvas");
|
||
|
|
gl = canvas.getContext("webgl2");
|
||
|
|
|
||
|
|
// 2. Configure viewport
|
||
|
|
gl.viewport(0, 0, canvas.width, canvas.height);
|
||
|
|
gl.clearColor(1.0, 1.0, 1.0, 1.0);
|
||
|
|
|
||
|
|
// 4. Init shader program via additional function and bind it
|
||
|
|
program = await initShaders(gl, "shaders/simple.vert.glsl", "shaders/simple.frag.glsl");
|
||
|
|
gl.useProgram(program);
|
||
|
|
|
||
|
|
initTriangle();
|
||
|
|
window.requestAnimationFrame(render);
|
||
|
|
}
|
||
|
|
|
||
|
|
function initTriangle() {
|
||
|
|
//prettier-ignore
|
||
|
|
// 3. Specify geometry
|
||
|
|
positions = [ -1.0, -1.0,
|
||
|
|
-1.0, 1.0,
|
||
|
|
1.0, -1.0,
|
||
|
|
1.0, 1.0,
|
||
|
|
-1.0, 1.0,
|
||
|
|
1.0, -1.0];
|
||
|
|
//prettier-ignore
|
||
|
|
colors = [ 0, 1, 0, 1,
|
||
|
|
0, 0, 1, 1,
|
||
|
|
1, 1, 0, 1,
|
||
|
|
1, 0, 0, 1,
|
||
|
|
0, 0, 1, 1,
|
||
|
|
1, 1, 0, 1];
|
||
|
|
|
||
|
|
initTriangleBuffers();
|
||
|
|
}
|
||
|
|
|
||
|
|
function initTriangleBuffers() {
|
||
|
|
// 5.1 Create VBO for positions and activate it
|
||
|
|
posVBO = gl.createBuffer();
|
||
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, posVBO);
|
||
|
|
|
||
|
|
// 6.1 Fill VBO with positions
|
||
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
|
||
|
|
|
||
|
|
// 5.2 Create VBO for colors and activate it
|
||
|
|
colorVBO = gl.createBuffer();
|
||
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, colorVBO);
|
||
|
|
|
||
|
|
// 6.2 Fill VBO with colors
|
||
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
|
||
|
|
}
|
||
|
|
|
||
|
|
function renderTriangle() {
|
||
|
|
// 7.1 Link data in VBO to shader variables
|
||
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, posVBO);
|
||
|
|
const posLoc = gl.getAttribLocation(program, "vPosition");
|
||
|
|
gl.enableVertexAttribArray(posLoc);
|
||
|
|
gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
|
||
|
|
|
||
|
|
// 7.2 Link data in VBO to shader variables
|
||
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, colorVBO);
|
||
|
|
const colorLoc = gl.getAttribLocation(program, "vColor");
|
||
|
|
gl.enableVertexAttribArray(colorLoc);
|
||
|
|
gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, 0, 0);
|
||
|
|
|
||
|
|
// 8. Render
|
||
|
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||
|
|
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
||
|
|
}
|
||
|
|
|
||
|
|
function render(timestamp) {
|
||
|
|
const elapsed = timestamp - lastTimestamp;
|
||
|
|
|
||
|
|
renderTriangle();
|
||
|
|
|
||
|
|
lastTimestamp = timestamp;
|
||
|
|
window.requestAnimationFrame(render);
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload = async function () {
|
||
|
|
main();
|
||
|
|
};
|