From 505aee8ecc0b24880f9832c939b006e098abe809 Mon Sep 17 00:00:00 2001 From: Luca Conte Date: Thu, 24 Apr 2025 17:39:38 +0200 Subject: [PATCH] some stuff --- src/script.js | 130 ++++++++++++++++++++++++-------- src/shaders/floor-fragment.glsl | 0 src/shaders/floor-vertex.glsl | 0 3 files changed, 97 insertions(+), 33 deletions(-) create mode 100644 src/shaders/floor-fragment.glsl create mode 100644 src/shaders/floor-vertex.glsl diff --git a/src/script.js b/src/script.js index 3c8ace0..5eacfae 100644 --- a/src/script.js +++ b/src/script.js @@ -7,6 +7,15 @@ let program; let cubeVertices; let cubeVertexBuffer; +let lineCubeVertices; +let lineCubeVertexBuffer; + +let originVertices; +let originVertexBuffer; + +let floorVertices; +let floorVertexBuffer; + let lastFrame = Date.now(); async function init() { @@ -72,37 +81,66 @@ async function init() { 1, -1, -1, 0.5, 1, 1 ]; + lineCubeVertices = [ + 1, 1, 1, 1, 0, 0, + 1, 1, -1, 1, 0, 0, + 1, 1, 1, 1, 0, 0, + 1, -1, 1, 1, 0, 0, + 1, 1, 1, 1, 0, 0, + -1, 1, 1, 1, 0, 0, + 1, 1, -1, 1, 0, 0, + 1, -1, -1, 1, 0, 0, + 1, 1, -1, 1, 0, 0, + -1, 1, -1, 1, 0, 0, + 1, -1, 1, 1, 0, 0, + 1, -1, -1, 1, 0, 0, + 1, -1, 1, 1, 0, 0, + -1, -1, 1, 1, 0, 0, + -1, 1, 1, 1, 0, 0, + -1, 1, -1, 1, 0, 0, + -1, 1, 1, 1, 0, 0, + -1, -1, 1, 1, 0, 0, + 1, -1, -1, 1, 0, 0, + -1, -1, -1, 1, 0, 0, + -1, -1, 1, 1, 0, 0, + -1, -1, -1, 1, 0, 0, + -1, 1, -1, 1, 0, 0, + -1, -1, -1, 1, 0, 0, + ]; + originVertices = [ + 0, 0, 0, 1, 0, 0, + 1, 0, 0, 1, 0, 0, + 0, 0, 0, 0, 1, 0, + 0, 1, 0, 0, 1, 0, + 0, 0, 0, 0, 0, 1, + 0, 0, 1, 0, 0, 1, + ]; + + floorVertices = [ + 1, 0, 1, 0, 0, 0, + -1, 0, -1, 0, 0, 0, + -1, 0, 1, 0, 0, 0, + -1, 0, -1, 0, 0, 0, + 1, 0, 1, 0, 0, 0, + 1, 0, -1, 0, 0, 0, + ]; cubeVertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cubeVertices), gl.STATIC_DRAW); - // get location of vertPosition attribute - let positionAttribLocation = gl.getAttribLocation(program, "vertPosition"); - let colorAttribLocation = gl.getAttribLocation(program, "vertColor"); + lineCubeVertexBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(lineCubeVertices), gl.STATIC_DRAW); - gl.vertexAttribPointer( - positionAttribLocation, // which attribute is read - 3, // number of values to read - gl.FLOAT, // type of values - gl.FALSE, // whether to normalize - 6 * Float32Array.BYTES_PER_ELEMENT, // size of individual vertex / distance between values to read - 0 // offset where to start reading - ); - // enable attribute - gl.enableVertexAttribArray(positionAttribLocation); + originVertexBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, originVertexBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(originVertices), gl.STATIC_DRAW); - gl.vertexAttribPointer( - colorAttribLocation, // which attribute is read - 3, // number of values to read - gl.FLOAT, // type of values - gl.FALSE, // whether to normalize - 6 * Float32Array.BYTES_PER_ELEMENT, // size of individual vertex / distance between values to read - 3 * Float32Array.BYTES_PER_ELEMENT // offset where to start reading - ); - - gl.enableVertexAttribArray(colorAttribLocation); + floorVertexBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, floorVertexBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(floorVertices), gl.STATIC_DRAW); // unbind buffer gl.bindBuffer(gl.ARRAY_BUFFER, null); @@ -116,6 +154,17 @@ async function init() { requestAnimationFrame(draw); } +function setAttribPointers() { + let positionAttribLocation = gl.getAttribLocation(program, "vertPosition"); + let colorAttribLocation = gl.getAttribLocation(program, "vertColor"); + + gl.vertexAttribPointer(positionAttribLocation, 3, gl.FLOAT, gl.FALSE, 6 * Float32Array.BYTES_PER_ELEMENT, 0); + gl.vertexAttribPointer(colorAttribLocation, 3, gl.FLOAT, gl.FALSE, 6 * Float32Array.BYTES_PER_ELEMENT, 3 * Float32Array.BYTES_PER_ELEMENT); + + gl.enableVertexAttribArray(positionAttribLocation); + gl.enableVertexAttribArray(colorAttribLocation); +} + let frameCount = 0; let lastStatUpdate = Date.now(); @@ -156,11 +205,11 @@ async function draw() { let modelViewLocation = gl.getUniformLocation(program, "modelViewMatrix"); let projectionLocation = gl.getUniformLocation(program, "projectionMatrix"); - let modelMatrix = []; - mat4Identity(modelMatrix); - mat4RotateX(modelMatrix, modelMatrix, hue * 2 * Math.PI); - mat4RotateY(modelMatrix, modelMatrix, hue * 2 * Math.PI); + let projectionMatrix = []; + mat4BuildPerspective(projectionMatrix, 90.0 / 180.0 * Math.PI, cv.width / cv.height, 0.1, 20); + gl.uniformMatrix4fv(projectionLocation, gl.FALSE, new Float32Array(projectionMatrix)); + let viewMatrix = []; let cameraPosition = [2, 2, 2]; @@ -168,20 +217,35 @@ async function draw() { let cameraUp = [0, 1, 0]; mat4BuildLookAt(viewMatrix, cameraPosition, cameraLookAt, cameraUp); + + let modelMatrix = []; + mat4Identity(modelMatrix); + + mat4RotateX(modelMatrix, modelMatrix, hue * 2 * Math.PI); + mat4RotateY(modelMatrix, modelMatrix, hue * 2 * Math.PI); + + let modelViewMatrix = []; mat4Multiply(modelViewMatrix, viewMatrix, modelMatrix); gl.uniformMatrix4fv(modelViewLocation, gl.FALSE, new Float32Array(modelViewMatrix)); - let projectionMatrix = []; - mat4BuildPerspective(projectionMatrix, 90.0 / 180.0 * Math.PI, cv.width / cv.height, 0.1, 20); - - gl.uniformMatrix4fv(projectionLocation, gl.FALSE, new Float32Array(projectionMatrix)); - gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexBuffer); - + setAttribPointers(); gl.drawArrays(gl.TRIANGLES, 0, cubeVertices.length / 6); + gl.lineWidth(3); + gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer); + setAttribPointers(); + gl.drawArrays(gl.LINES, 0, lineCubeVertices.length / 6); + + + gl.uniformMatrix4fv(modelViewLocation, gl.FALSE, new Float32Array(viewMatrix)); + + gl.bindBuffer(gl.ARRAY_BUFFER, originVertexBuffer); + setAttribPointers(); + gl.drawArrays(gl.LINES, 0, originVertices.length / 6); + lastFrame = now; requestAnimationFrame(draw); } diff --git a/src/shaders/floor-fragment.glsl b/src/shaders/floor-fragment.glsl new file mode 100644 index 0000000..e69de29 diff --git a/src/shaders/floor-vertex.glsl b/src/shaders/floor-vertex.glsl new file mode 100644 index 0000000..e69de29