162 lines
4.0 KiB
JavaScript
162 lines
4.0 KiB
JavaScript
/* Canvas set-up */
|
|
const canvas = document.getElementsByTagName("canvas")[0];
|
|
const gl = canvas.getContext("webgl", { antialias: false, preserveDrawingBuffer: false });
|
|
|
|
var projectionMatrix = mat4.create();
|
|
const resizeCanvas = () => {
|
|
var width = gl.canvas.clientWidth;
|
|
var height = gl.canvas.clientHeight;
|
|
|
|
if (gl.canvas.width != width || gl.canvas.height != height) {
|
|
gl.canvas.width = width;
|
|
gl.canvas.height = height;
|
|
|
|
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
|
|
|
|
mat4.perspective(
|
|
projectionMatrix,
|
|
(45 * Math.PI) / 180,
|
|
gl.canvas.clientWidth / gl.canvas.clientHeight,
|
|
0.1, 100.0
|
|
);
|
|
}
|
|
}
|
|
|
|
resizeCanvas();
|
|
|
|
/* Load shaders */
|
|
const fetchText = async url => (await fetch(url)).text();
|
|
const vsSrc = await fetchText("/shader/my.vert");
|
|
const fsSrc = await fetchText("/shader/my.frag");
|
|
|
|
const program = compile(gl, vsSrc, fsSrc);
|
|
gl.useProgram(program);
|
|
|
|
/* WebGL set-up */
|
|
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
|
gl.enable(gl.DEPTH_TEST);
|
|
|
|
/* Geometry */
|
|
var verts = 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,
|
|
1.0, -1.0, -1.0,
|
|
1.0, 1.0, -1.0,
|
|
-1.0, 1.0, -1.0,
|
|
-1.0, -1.0, -1.0,
|
|
]);
|
|
|
|
// var makeVerts = (szX, szZ) => {
|
|
// var fverts = new Float32Array([]);
|
|
// var findices = new Uint16Array([]);
|
|
// for (var x = 0; x <= szX; x += 1) {
|
|
// for (var z = 0; z <= szZ; z += 1) {
|
|
// var cverts = new Float32Array([
|
|
// 1.0, 1.0, 1.0,
|
|
// -1.0, 1.0, 1.0,
|
|
// -1.0, 0.0, 1.0,
|
|
// 1.0, 0.0, 1.0,
|
|
// 1.0, 0.0, -1.0,
|
|
// 1.0, 1.0, -1.0,
|
|
// -1.0, 1.0, -1.0,
|
|
// -1.0, 0.0, -1.0,
|
|
// ]);
|
|
|
|
// var cindices = new Uint8Array([
|
|
// 0, 1, 2, 0, 2, 3, // front
|
|
// 0, 3, 4, 0, 4, 5, // right
|
|
// 0, 5, 6, 0, 6, 1, // up
|
|
// 1, 6, 7, 1, 7, 2, // left
|
|
// 7, 4, 3, 7, 3, 2, // down
|
|
// 4, 7, 6, 4, 6, 5 // back
|
|
// ]).map;
|
|
// }
|
|
// }
|
|
// };
|
|
|
|
// var myVerts = makeVerts(5, 5);
|
|
|
|
// Indices of the vertices for each triangle
|
|
var indices = new Uint8Array([
|
|
0, 1, 2, 0, 2, 3, // front
|
|
0, 3, 4, 0, 4, 5, // right
|
|
0, 5, 6, 0, 6, 1, // up
|
|
1, 6, 7, 1, 7, 2, // left
|
|
7, 4, 3, 7, 3, 2, // down
|
|
4, 7, 6, 4, 6, 5 // back
|
|
]);
|
|
|
|
const modelViewMatrix = mat4.create();
|
|
mat4.translate(
|
|
modelViewMatrix,
|
|
modelViewMatrix,
|
|
[0.0, 0.0, -5.0]
|
|
);
|
|
|
|
/* Get attribs/uniforms */
|
|
var a_position = gl.getAttribLocation(program, 'a_position');
|
|
var u_projectionMtx = gl.getUniformLocation(program, 'u_projectionMtx');
|
|
var u_modelViewMtx = gl.getUniformLocation(program, 'u_modelViewMtx');
|
|
var u_clock = gl.getUniformLocation(program, 'u_clock');
|
|
|
|
/* Create buffers */
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
|
|
gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
|
|
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
|
|
|
|
gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, verts.BYTES_PER_ELEMENT * 3, 0);
|
|
gl.enableVertexAttribArray(a_position);
|
|
|
|
/* Utility function */
|
|
const rotate3D = (mtx, x, y, z) => {
|
|
mat4.rotate(
|
|
mtx, mtx,
|
|
x,
|
|
[1, 0, 0]
|
|
);
|
|
mat4.rotate(
|
|
mtx, mtx,
|
|
y,
|
|
[0, 1, 0]
|
|
);
|
|
mat4.rotate(
|
|
mtx, mtx,
|
|
z,
|
|
[0, 0, 1]
|
|
);
|
|
};
|
|
|
|
/* Render */
|
|
var lastDraw = performance.now();
|
|
const draw = () => {
|
|
requestAnimationFrame(draw);
|
|
|
|
// Resize if needed
|
|
resizeCanvas(gl);
|
|
|
|
// Rotate camera
|
|
var delta = performance.now() - lastDraw + 0.001;
|
|
lastDraw = performance.now();
|
|
|
|
var r1 = 1 / delta;
|
|
var r2 = r1 * 2;
|
|
r1 = (r1 * Math.PI) / 180;
|
|
r2 = (r1 * Math.PI) / 180;
|
|
// rotate3D(modelViewMatrix, r1, r2, r1);
|
|
|
|
// Set uniforms
|
|
gl.uniformMatrix4fv(u_projectionMtx, false, projectionMatrix);
|
|
gl.uniformMatrix4fv(u_modelViewMtx, false, modelViewMatrix);
|
|
gl.uniform1f(u_clock, performance.now() % 16384);
|
|
|
|
// Draw triangles
|
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_BYTE, 0);
|
|
}
|
|
|
|
/* Start */
|
|
requestAnimationFrame(draw);
|