Update test.js

test.js

@@ -1,222 +1,205 @@
-"use strict";
-
-function main() {
-  // Get A WebGL context
-  /** @type {HTMLCanvasElement} */
-  const canvas = document.querySelector("#canvas");
-  const gl = canvas.getContext("webgl2");
-  if (!gl) {
-    return;
-  }
-
-  const vs = `#version 300 es
-    // an attribute is an input (in) to a vertex shader.
-    // It will receive data from a buffer
-    in vec4 a_position;
-
-    // all shaders have a main function
-    void main() {
-
-      // gl_Position is a special variable a vertex shader
-      // is responsible for setting
-      gl_Position = a_position;
-    }
-  `;
-
-  const fs = `#version 300 es
-    precision highp float;
-
-    uniform vec2 iResolution;
-    uniform vec2 iMouse;
-    uniform float iTime;
-
-    // we need to declare an output for the fragment shader
-    out vec4 outColor;
-
-vec3 palette( float t ) {
-    vec3 a = vec3(0.5, 0.5, 0.5);
-    vec3 b = vec3(0.5, 0.5, 0.5);
-    vec3 c = vec3(1.0, 1.0, 1.0);
-    vec3 d = vec3(0.263,0.416,0.557);
-
-    return a + b*cos( 6.28318*(c*t+d) );
-}
-
-//https://www.shadertoy.com/view/mtyGWy
-void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
-    vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
-    vec2 uv0 = uv;
-    vec3 finalColor = vec3(0.0);
-    
-    for (float i = 0.0; i < 4.0; i++) {
-        uv = fract(uv * 1.5) - 0.5;
-
-        float d = length(uv) * exp(-length(uv0));
-
-        vec3 col = palette(length(uv0) + i*.4 + iTime*.4);
-
-        d = sin(d*8. + iTime)/8.;
-        d = abs(d);
-
-        d = pow(0.01 / d, 1.2);
-
-        finalColor += col * d;
-    }
-        
-    fragColor = vec4(finalColor, 1.0);
-}   
-
-    void main() {
-      mainImage(outColor, gl_FragCoord.xy);
-    }
-  `;
-
-  // setup GLSL program
-  const program = webglUtils.createProgramFromSources(gl, [vs, fs]);
-
-  // look up where the vertex data needs to go.
-  const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
-
-  // look up uniform locations
-  const resolutionLocation = gl.getUniformLocation(program, "iResolution");
-  const mouseLocation = gl.getUniformLocation(program, "iMouse");
-  const timeLocation = gl.getUniformLocation(program, "iTime");
-
-  // Create a vertex array object (attribute state)
-  const vao = gl.createVertexArray();
-
-  // and make it the one we're currently working with
-  gl.bindVertexArray(vao);
-
-  // Create a buffer to put three 2d clip space points in
-  const positionBuffer = gl.createBuffer();
-
-  // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-
-  // fill it with a 2 triangles that cover clip space
-  gl.bufferData(
-    gl.ARRAY_BUFFER,
-    new Float32Array([
-      -1,
-      -1, // first triangle
-      1,
-      -1,
-      -1,
-      1,
-      -1,
-      1, // second triangle
-      1,
-      -1,
-      1,
-      1,
-    ]),
-    gl.STATIC_DRAW
-  );
-
-  // Turn on the attribute
-  gl.enableVertexAttribArray(positionAttributeLocation);
-
-  // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
-  gl.vertexAttribPointer(
-    positionAttributeLocation,
-    2, // 2 components per iteration
-    gl.FLOAT, // the data is 32bit floats
-    false, // don't normalize the data
-    0, // 0 = move forward size * sizeof(type) each iteration to get the next position
-    0 // start at the beginning of the buffer
-  );
-
-  const playpauseElem = document.querySelector(".playpause");
-  const inputElem = document.querySelector(".divcanvas");
-  inputElem.addEventListener("mouseover", requestFrame);
-  inputElem.addEventListener("mouseout", cancelFrame);
-
-  let mouseX = 0;
-  let mouseY = 0;
-
-  function setMousePosition(e) {
-    const rect = inputElem.getBoundingClientRect();
-    mouseX = e.clientX - rect.left;
-    mouseY = rect.height - (e.clientY - rect.top) - 1; // bottom is 0 in WebGL
-  }
-
-  inputElem.addEventListener("mousemove", setMousePosition);
-  inputElem.addEventListener(
-    "touchstart",
-    (e) => {
-      e.preventDefault();
-      playpauseElem.classList.add("playpausehide");
-      requestFrame();
-    },
-    { passive: false }
-  );
-  inputElem.addEventListener(
-    "touchmove",
-    (e) => {
-      e.preventDefault();
-      setMousePosition(e.touches[0]);
-    },
-    { passive: false }
-  );
-  inputElem.addEventListener(
-    "touchend",
-    (e) => {
-      e.preventDefault();
-      playpauseElem.classList.remove("playpausehide");
-      cancelFrame();
-    },
-    { passive: false }
-  );
-
-  let requestId;
-  function requestFrame() {
-    if (!requestId) {
-      requestId = requestAnimationFrame(render);
-    }
-  }
-  function cancelFrame() {
-    if (requestId) {
-      cancelAnimationFrame(requestId);
-      requestId = undefined;
-    }
-  }
-
-  let then = 0;
-  let time = 0;
-  function render(now) {
-    requestId = undefined;
-    now *= 0.001; // convert to seconds
-    const elapsedTime = Math.min(now - then, 0.1);
-    time += elapsedTime;
-    then = now;
-
-    webglUtils.resizeCanvasToDisplaySize(gl.canvas);
-
-    // Tell WebGL how to convert from clip space to pixels
-    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
-
-    // Tell it to use our program (pair of shaders)
-    gl.useProgram(program);
-
-    // Bind the attribute/buffer set we want.
-    gl.bindVertexArray(vao);
-
-    gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);
-    gl.uniform2f(mouseLocation, mouseX, mouseY);
-    gl.uniform1f(timeLocation, time);
-
-    gl.drawArrays(
-      gl.TRIANGLES,
-      0, // offset
-      6 // num vertices to process
-    );
-
-    requestFrame();
-  }
-
-  requestFrame();
-  requestAnimationFrame(cancelFrame);
-}
-
-main();
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>3D Cymatic Display in WebGL2</title>
+    <style>
+      body, html { margin: 0; height: 100%; overflow: hidden; background: #000; }
+      canvas { width: 100%; height: 100%; display: block; }
+    </style>
+  </head>
+  <body>
+    <canvas id="canvas"></canvas>
+    <!-- Include glMatrix and webgl-utils scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/gl-matrix-min.js"></script>
+    <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
+    <script type="text/javascript">
+      "use strict";
+      function main() {
+        const canvas = document.querySelector("#canvas");
+        const gl = canvas.getContext("webgl2");
+        if (!gl) {
+          console.error("WebGL 2 not supported");
+          return;
+        }
+
+        // Vertex shader: displaces a grid using two vibrational modes and computes normals
+        const vsSource = `#version 300 es
+        precision highp float;
+        in vec3 a_position;
+        uniform float u_time;
+        uniform mat4 u_MVP;
+        out vec3 v_normal;
+        out vec3 v_position;
+        const float PI = 3.14159;
+        void main() {
+          // Amplitudes for two modes
+          float A1 = 0.1;
+          float A2 = 0.05;
+          // Mode 1: Fundamental vibration (nodal lines at the boundaries)
+          float mode1 = A1 * sin(PI * (a_position.x + 1.0) / 2.0) 
+                             * sin(PI * (a_position.y + 1.0) / 2.0)
+                             * cos(3.0 * u_time);
+          // Mode 2: A higher-order vibration for additional detail
+          float mode2 = A2 * sin(2.0 * PI * (a_position.x + 1.0) / 2.0) 
+                             * sin(PI * (a_position.y + 1.0) / 2.0)
+                             * cos(5.0 * u_time);
+          float z = mode1 + mode2;
+          
+          // Compute partial derivatives for normal calculation
+          float dx1 = A1 * (PI/2.0) * cos(PI*(a_position.x+1.0)/2.0)
+                             * sin(PI*(a_position.y+1.0)/2.0) * cos(3.0 * u_time);
+          float dx2 = A2 * (2.0*PI/2.0) * cos(2.0*PI*(a_position.x+1.0)/2.0)
+                             * sin(PI*(a_position.y+1.0)/2.0) * cos(5.0 * u_time);
+          float dfdx = dx1 + dx2;
+          
+          float dy1 = A1 * (PI/2.0) * sin(PI*(a_position.x+1.0)/2.0)
+                             * cos(PI*(a_position.y+1.0)/2.0) * cos(3.0 * u_time);
+          float dy2 = A2 * (PI/2.0) * sin(2.0*PI*(a_position.x+1.0)/2.0)
+                             * cos(PI*(a_position.y+1.0)/2.0) * cos(5.0 * u_time);
+          float dfdy = dy1 + dy2;
+          
+          vec3 displacedPos = vec3(a_position.x, a_position.y, z);
+          // The normal is computed as the normalized cross of the tangent derivatives.
+          // For a height field, an approximate normal is: (-dfdx, -dfdy, 1)
+          vec3 normal = normalize(vec3(-dfdx, -dfdy, 1.0));
+          
+          v_normal = normal;
+          v_position = displacedPos;
+          gl_Position = u_MVP * vec4(displacedPos, 1.0);
+        }`;
+
+        // Fragment shader: uses Phong shading for realistic lighting
+        const fsSource = `#version 300 es
+        precision highp float;
+        in vec3 v_normal;
+        in vec3 v_position;
+        uniform vec3 u_lightPos;
+        uniform vec3 u_viewPos;
+        out vec4 outColor;
+        void main() {
+          vec3 normal = normalize(v_normal);
+          vec3 lightDir = normalize(u_lightPos - v_position);
+          float diff = max(dot(normal, lightDir), 0.0);
+          vec3 ambient = vec3(0.2);
+          vec3 diffuse = diff * vec3(0.7, 0.7, 0.8);
+          vec3 viewDir = normalize(u_viewPos - v_position);
+          vec3 reflectDir = reflect(-lightDir, normal);
+          float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32.0);
+          vec3 specular = vec3(0.3) * spec;
+          vec3 color = ambient + diffuse + specular;
+          outColor = vec4(color, 1.0);
+        }`;
+
+        // Create the shader program using webgl-utils
+        const program = webglUtils.createProgramFromSources(gl, [vsSource, fsSource]);
+
+        // Look up attribute and uniform locations
+        const positionAttribLocation = gl.getAttribLocation(program, "a_position");
+        const timeUniformLocation = gl.getUniformLocation(program, "u_time");
+        const mvpUniformLocation = gl.getUniformLocation(program, "u_MVP");
+        const lightPosUniformLocation = gl.getUniformLocation(program, "u_lightPos");
+        const viewPosUniformLocation = gl.getUniformLocation(program, "u_viewPos");
+
+        // Create a grid covering [-1,1]x[-1,1]
+        const gridSize = 150;
+        const positions = [];
+        for (let j = 0; j <= gridSize; j++) {
+          for (let i = 0; i <= gridSize; i++) {
+            // Map grid coordinates to [-1,1]
+            let x = (i / gridSize) * 2 - 1;
+            let y = (j / gridSize) * 2 - 1;
+            positions.push(x, y, 0);
+          }
+        }
+
+        // Generate indices for triangles
+        const indices = [];
+        for (let j = 0; j < gridSize; j++) {
+          for (let i = 0; i < gridSize; i++) {
+            let a = j * (gridSize + 1) + i;
+            let b = a + 1;
+            let c = a + (gridSize + 1);
+            let d = c + 1;
+            indices.push(a, b, c);
+            indices.push(b, d, c);
+          }
+        }
+
+        // Create and bind a Vertex Array Object
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+
+        // Create and fill the position buffer
+        const positionBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+        gl.enableVertexAttribArray(positionAttribLocation);
+        gl.vertexAttribPointer(positionAttribLocation, 3, gl.FLOAT, false, 0, 0);
+
+        // Create and fill the index buffer
+        const indexBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indices), gl.STATIC_DRAW);
+
+        // Set up camera matrices using glMatrix
+        const fieldOfView = 45 * Math.PI / 180;
+        const near = 0.1;
+        const far = 100;
+        let projectionMatrix = glMatrix.mat4.create();
+        let viewMatrix = glMatrix.mat4.create();
+        let modelMatrix = glMatrix.mat4.create();
+        const eye = [0, -2.5, 2.5];      // Camera position
+        const center = [0, 0, 0];          // Look at center of plate
+        const up = [0, 0, 1];
+        glMatrix.mat4.perspective(projectionMatrix, fieldOfView, canvas.clientWidth / canvas.clientHeight, near, far);
+        glMatrix.mat4.lookAt(viewMatrix, eye, center, up);
+        // Optionally, rotate the model slightly for a dramatic view
+        glMatrix.mat4.rotateX(modelMatrix, modelMatrix, -0.5);
+        let mvpMatrix = glMatrix.mat4.create();
+        glMatrix.mat4.multiply(mvpMatrix, viewMatrix, modelMatrix);
+        glMatrix.mat4.multiply(mvpMatrix, projectionMatrix, mvpMatrix);
+
+        // Set light and view positions (for the shader)
+        const lightPos = [2.0, -2.0, 3.0];
+        const viewPos = eye;
+
+        // Animation loop
+        let startTime = null;
+        function render(now) {
+          if (!startTime) startTime = now;
+          const timeInSeconds = (now - startTime) * 0.001;
+          
+          // Resize canvas if needed
+          webglUtils.resizeCanvasToDisplaySize(gl.canvas);
+          gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+          gl.enable(gl.DEPTH_TEST);
+          gl.clearColor(0.0, 0.0, 0.0, 1.0);
+          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+          // Update the projection in case the canvas size changed
+          glMatrix.mat4.perspective(projectionMatrix, fieldOfView, gl.canvas.clientWidth / gl.canvas.clientHeight, near, far);
+          glMatrix.mat4.lookAt(viewMatrix, eye, center, up);
+          glMatrix.mat4.multiply(mvpMatrix, viewMatrix, modelMatrix);
+          glMatrix.mat4.multiply(mvpMatrix, projectionMatrix, mvpMatrix);
+
+          // Use our program and bind the VAO
+          gl.useProgram(program);
+          gl.bindVertexArray(vao);
+
+          // Set shader uniforms
+          gl.uniform1f(timeUniformLocation, timeInSeconds);
+          gl.uniformMatrix4fv(mvpUniformLocation, false, mvpMatrix);
+          gl.uniform3fv(lightPosUniformLocation, lightPos);
+          gl.uniform3fv(viewPosUniformLocation, viewPos);
+
+          // Draw the grid
+          gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_INT, 0);
+          requestAnimationFrame(render);
+        }
+        requestAnimationFrame(render);
+      }
+      main();
+    </script>
+  </body>
+</html>