webgl_demo

Running

App Files Files Community

Severian commited on Feb 5

Commit

337fbee

verified ·

1 Parent(s): 993eabd

Update test.js

Browse files

Files changed (1) hide show

test.js +274 -199

test.js CHANGED Viewed

@@ -1,205 +1,280 @@
-<!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/gl-matrix@3.4.3/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>

+"use strict";
+function main() {
+  // Get a WebGL2 context
+  const canvas = document.querySelector("#canvas");
+  const gl = canvas.getContext("webgl2");
+  if (!gl) {
+    return;
+  }
+  //────────────────────────────────────────────────────────────
+  // Vertex shader: simply pass the vertex positions along.
+  const vs = `#version 300 es
+    in vec4 a_position;
+    void main() {
+      gl_Position = a_position;
+    }
+  `;
+  //────────────────────────────────────────────────────────────
+  // Fragment shader: a scientifically–inspired 3D cymatic display.
+  // This shader ray–marches a vibrating “plate” (whose height is defined
+  // by the sum of two sinusoidal (mode) functions) and then shades it with
+  // diffuse and specular lighting. The palette() function is used to inject
+  // a pleasing color variation based on the local vibration amplitude.
+  const fs = `#version 300 es
+  precision highp float;
+  uniform vec2 iResolution;
+  uniform vec2 iMouse;
+  uniform float iTime;
+  out vec4 outColor;
+  // A color palette function (from Shadertoy) to add some “pop”
+  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) );
+  }
+  // The vibrating plate – defined on the xz–plane (with x,z in [-1,1])
+  // and with vertical displacement given by y = plate(x,z,t).
+  // Two modes are added (a “fundamental” and a second–harmonic mode) to mimic
+  // realistic cymatic (Chladni) patterns on a clamped plate.
+  float plate(vec2 pos, float t) {
+      // Map pos from [-1,1] to [0,1] (for clamped–edge conditions)
+      vec2 uv = (pos + 1.0) * 0.5;
+      float mode1 = sin(3.14159 * uv.x) * sin(3.14159 * uv.y) * cos(3.14159 * t);
+      float mode2 = sin(2.0 * 3.14159 * uv.x) * sin(2.0 * 3.14159 * uv.y) * cos(2.0 * 3.14159 * t);
+      return 0.2 * (mode1 + mode2);
+  }
+  // Compute the normal of the heightfield (the vibrating plate) using finite differences.
+  vec3 calcNormal(vec2 pos, float t) {
+      float eps = 0.001;
+      float h = plate(pos, t);
+      float hx = plate(pos + vec2(eps, 0.0), t) - h;
+      float hz = plate(pos + vec2(0.0, eps), t) - h;
+      return normalize(vec3(-hx, 1.0, -hz));
+  }
+  // Given a 3D point p, return its vertical distance to the plate surface.
+  // (If p is exactly on the surface then p.y = plate(p.xz,t) and the result is zero.)
+  float mapHeight(vec3 p, float t) {
+      // Outside the domain x,z ∈ [-1,1] we assume a flat floor at y=0.
+      if (abs(p.x) > 1.0 || abs(p.z) > 1.0) {
+          return p.y;
+      }
+      return p.y - plate(vec2(p.x, p.z), t);
+  }
+  // A simple raycast function that marches a ray from the camera and
+  // returns the distance along the ray at which the plate is hit.
+  float raycast(vec3 ro, vec3 rd, float t) {
+      float tMin = 0.0;
+      float tMax = 20.0;
+      float tCurrent = tMin;
+      float stepSize = 0.02;
+      bool hit = false;
+      for (int i = 0; i < 500; i++) {
+          vec3 pos = ro + rd * tCurrent;
+          float d = mapHeight(pos, t);
+          if (d < 0.001) {
+              hit = true;
+              break;
           }
+          tCurrent += stepSize;
+          if (tCurrent > tMax) break;
+      }
+      if (!hit) return -1.0;
+      // Refine the hit point with a short binary search.
+      float tA = tCurrent - stepSize;
+      float tB = tCurrent;
+      for (int i = 0; i < 10; i++) {
+          float tMid = (tA + tB) * 0.5;
+          float dMid = mapHeight(ro + rd * tMid, t);
+          if (dMid > 0.0) {
+              tA = tMid;
+          } else {
+              tB = tMid;
           }
       }
+      return (tA + tB) * 0.5;
+  }
+  void main() {
+      // Compute normalized screen coordinates (centered on 0)
+      vec2 uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;
+      // Use the mouse to control the camera’s azimuth and pitch.
+      // Horizontal movement rotates 0–2π; vertical movement adjusts pitch.
+      float angle = iMouse.x / iResolution.x * 6.28318; // full rotation
+      float pitch = mix(0.4, 1.2, iMouse.y / iResolution.y);
+      float radius = 4.0;
+      vec3 ro = vec3(
+          radius * cos(pitch) * cos(angle),
+          radius * sin(pitch),
+          radius * cos(pitch) * sin(angle)
+      );
+      vec3 target = vec3(0.0, 0.0, 0.0);
+      // Construct a simple camera coordinate system.
+      vec3 forward = normalize(target - ro);
+      vec3 right = normalize(cross(forward, vec3(0.0, 1.0, 0.0)));
+      vec3 up = cross(right, forward);
+      // Compute the ray direction using a basic perspective projection.
+      vec3 rd = normalize(forward + uv.x * right + uv.y * up);
+      // March the ray to see if and where it hits the vibrating plate.
+      float tHit = raycast(ro, rd, iTime);
+      vec3 color;
+      if (tHit > 0.0) {
+          vec3 pos = ro + rd * tHit;
+          // Get the local normal from the heightfield
+          vec3 normal = calcNormal(vec2(pos.x, pos.z), iTime);
+          // Standard lighting: diffuse + specular
+          vec3 lightDir = normalize(vec3(0.5, 1.0, 0.8));
+          float diff = max(dot(normal, lightDir), 0.0);
+          vec3 viewDir = normalize(ro - pos);
+          vec3 halfDir = normalize(lightDir + viewDir);
+          float spec = pow(max(dot(normal, halfDir), 0.0), 32.0);
+          // Base color comes from the palette – modulated by the local vibration amplitude.
+          float h = plate(vec2(pos.x, pos.z), iTime);
+          vec3 baseColor = palette(h * 5.0);
+          color = baseColor * diff + vec3(0.1) * spec + vec3(0.1);
+      } else {
+          // If no hit, use a subtle background gradient.
+          color = mix(vec3(0.0, 0.0, 0.1), vec3(0.0), uv.y + 0.5);
+      }
+      outColor = vec4(color, 1.0);
+  }
+  `;
+  //───────────────────────────────────────────��────────────────
+  // Create and compile the shader program using webgl-utils.
+  const program = webglUtils.createProgramFromSources(gl, [vs, fs]);
+  // Look up attribute and uniform locations.
+  const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
+  const resolutionLocation = gl.getUniformLocation(program, "iResolution");
+  const mouseLocation = gl.getUniformLocation(program, "iMouse");
+  const timeLocation = gl.getUniformLocation(program, "iTime");
+  // Create a vertex array object (VAO) and bind it.
+  const vao = gl.createVertexArray();
+  gl.bindVertexArray(vao);
+  // Create a buffer and put a full–screen quad in it.
+  const positionBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+  gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([
+      -1, -1,
+       1, -1,
+      -1,  1,
+      -1,  1,
+       1, -1,
+       1,  1,
+    ]),
+    gl.STATIC_DRAW
+  );
+  // Enable the position attribute.
+  gl.enableVertexAttribArray(positionAttributeLocation);
+  gl.vertexAttribPointer(
+    positionAttributeLocation,
+    2,           // 2 components per vertex
+    gl.FLOAT,    // data type is float
+    false,
+    0,
+    0
+  );
+  //────────────────────────────────────────────────────────────
+  // Setup mouse / touch interactions.
+  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;
+  }
+  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 });
+  //────────────────────────────────────────────────────────────
+  // Animation loop variables and functions.
+  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 milliseconds to seconds
+    const elapsedTime = Math.min(now - then, 0.1);
+    time += elapsedTime;
+    then = now;
+    // Resize canvas if needed.
+    webglUtils.resizeCanvasToDisplaySize(gl.canvas);
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+    // Use our program and bind our VAO.
+    gl.useProgram(program);
+    gl.bindVertexArray(vao);
+    // Set the uniforms.
+    gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);
+    gl.uniform2f(mouseLocation, mouseX, mouseY);
+    gl.uniform1f(timeLocation, time);
+    // Draw the full–screen quad.
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+    requestFrame();
+  }
+  requestFrame();
+  requestAnimationFrame(cancelFrame);
+}
+main();