gbrochar
/
webgl
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Colored square rotating

This commit is contained in:
gbrochar 2020-11-22 15:16:08 +01:00
parent 9703298f40
commit 2e90822b5b
1 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/client/main.ts
View File

@ -1,6 +1,8 @@
// @ts-ignore // @ts-ignore
import mat4 from 'gl-mat4'; import mat4 from 'gl-mat4';
let squareRotation = 0.0;
main(); main();
/** /**
@ -60,7 +62,20 @@ function main() {
}; };
const buffers = initBuffers(gl); const buffers = initBuffers(gl);
drawScene(gl, programInfo, buffers); let then = 0;
/**
* Draws the scene repeatedly
* @param {number} now the current time
*/
function render(now: any) {
now *= 0.001;
const deltaTime = now - then;
then = now;
drawScene(gl, programInfo, buffers, deltaTime);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
} }
/** /**
@ -160,8 +175,9 @@ function initBuffers(gl: any) {
* @param {any} gl the WebGL context * @param {any} gl the WebGL context
* @param {any} programInfo WebGL program information * @param {any} programInfo WebGL program information
* @param {any} buffers the buffers to draw * @param {any} buffers the buffers to draw
* @param {number} deltaTime the difference in time since last call
*/ */
function drawScene(gl: any, programInfo: any, buffers: any) { function drawScene(gl: any, programInfo: any, buffers: any, deltaTime: number) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0); gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST); gl.enable(gl.DEPTH_TEST);
@ -201,6 +217,11 @@ function drawScene(gl: any, programInfo: any, buffers: any) {
modelViewMatrix, modelViewMatrix,
[-0.0, 0.0, -6.0]); [-0.0, 0.0, -6.0]);
mat4.rotate(modelViewMatrix,
modelViewMatrix,
squareRotation,
[Math.abs(squareRotation % 1.0 - 0.5), 1, 1]);
// Tell WebGL how to pull out the positions from the position // Tell WebGL how to pull out the positions from the position
// buffer into the vertexPosition attribute. // buffer into the vertexPosition attribute.
{ {
@ -258,4 +279,6 @@ function drawScene(gl: any, programInfo: any, buffers: any) {
const vertexCount = 4; const vertexCount = 4;
gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
} }
squareRotation += deltaTime;
} }