@rtstic.dev/pulse 0.0.54 → 0.0.56

package/dist/home/depth.js

@@ -1,4 +1,75 @@
-"use strict";(()=>{var g="https://cdn.prod.website-files.com/680cbbaefb50442c848aedf7/6926cf888059f91e69c286e7_IMG_0311.jpg",p="https://cdn.prod.website-files.com/680cbbaefb50442c848aedf7/6926cf7fd0f3c3f3276d1575_IMG_0310.png";var t={gl:null,program:null,mousePos:{x:0,y:0},targetPos:{x:0,y:0},textures:{color:null,depth:null},animationId:null,isLoaded:!1,imageAspect:1,canvasAspect:1,uvScale:{x:1,y:1},uvOffset:{x:0,y:0}},E=document.getElementById("viewer-wrapper"),i=document.getElementById("viewer-canvas"),d=document.getElementById("status");i.addEventListener("mousemove",e=>{let r=i.getBoundingClientRect(),n=((e.clientX-r.left)/r.width-.5)*2,o=-((e.clientY-r.top)/r.height-.5)*2;t.targetPos.x=n,t.targetPos.y=o});i.addEventListener("mouseleave",()=>{t.targetPos.x=0,t.targetPos.y=0});function v(){i.width=E.clientWidth,i.height=E.clientHeight,t.gl&&(t.gl.viewport(0,0,i.width,i.height),T())}function T(){t.canvasAspect=i.width/i.height;let e=t.imageAspect||1,r=t.canvasAspect||1,n=1,o=1,u=0,a=0;r>e?(n=r/e,u=(n-1)/2):(o=e/r,a=(o-1)/2),t.uvScale.x=n,t.uvScale.y=o,t.uvOffset.x=u,t.uvOffset.y=a}function L(){v();let e=i.getContext("webgl");if(!e){d.textContent="WebGL not supported in this browser.";return}t.gl=e;let r=`
+"use strict";
+(() => {
+  // src/home/depth.ts
+  var COLOR_URL = "https://cdn.prod.website-files.com/680cbbaefb50442c848aedf7/6926cf888059f91e69c286e7_IMG_0311.jpg";
+  var DEPTH_URL = "https://cdn.prod.website-files.com/680cbbaefb50442c848aedf7/6926cf7fd0f3c3f3276d1575_IMG_0310.png";
+  var DEPTH_SCALE = 0.01;
+  var MOUSE_SMOOTH = 0.9;
+  var IMAGE_SCALE = 0.9;
+  var state = {
+    gl: null,
+    program: null,
+    mousePos: { x: 0, y: 0 },
+    targetPos: { x: 0, y: 0 },
+    textures: { color: null, depth: null },
+    animationId: null,
+    isLoaded: false,
+    imageAspect: 1,
+    canvasAspect: 1,
+    uvScale: { x: 1, y: 1 },
+    uvOffset: { x: 0, y: 0 }
+  };
+  var wrapper = document.getElementById("viewer-wrapper");
+  var canvas = document.getElementById("viewer-canvas");
+  var statusEl = document.getElementById("status");
+  canvas.addEventListener("mousemove", (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
+    const y = -((e.clientY - rect.top) / rect.height - 0.5) * 2;
+    state.targetPos.x = x;
+    state.targetPos.y = y;
+  });
+  canvas.addEventListener("mouseleave", () => {
+    state.targetPos.x = 0;
+    state.targetPos.y = 0;
+  });
+  function updateCanvasSize() {
+    canvas.width = wrapper.clientWidth;
+    canvas.height = wrapper.clientHeight;
+    if (state.gl) {
+      state.gl.viewport(0, 0, canvas.width, canvas.height);
+      updateUvScale();
+    }
+  }
+  function updateUvScale() {
+    state.canvasAspect = canvas.width / canvas.height;
+    const ia = state.imageAspect || 1;
+    const ca = state.canvasAspect || 1;
+    let scaleX = 1;
+    let scaleY = 1;
+    let offsetX = 0;
+    let offsetY = 0;
+    if (ca > ia) {
+      scaleX = ca / ia;
+      offsetX = (scaleX - 1) / 2;
+    } else {
+      scaleY = ia / ca;
+      offsetY = (scaleY - 1) / 2;
+    }
+    state.uvScale.x = scaleX;
+    state.uvScale.y = scaleY;
+    state.uvOffset.x = offsetX;
+    state.uvOffset.y = offsetY;
+  }
+  function initWebGL() {
+    updateCanvasSize();
+    const gl = canvas.getContext("webgl");
+    if (!gl) {
+      statusEl.textContent = "WebGL not supported in this browser.";
+      return;
+    }
+    state.gl = gl;
+    const vertexShaderSource = `
       attribute vec2 a_position;
       attribute vec2 a_texCoord;
       varying vec2 v_texCoord;
@@ -6,7 +77,8 @@
         gl_Position = vec4(a_position, 0.0, 1.0);
         v_texCoord = a_texCoord;
       }
-    `,n=`
+    `;
+    const fragmentShaderSource = `
       precision mediump float;
       uniform sampler2D u_colorTexture;
       uniform sampler2D u_depthTexture;
@@ -36,4 +108,172 @@
           gl_FragColor = texture2D(u_colorTexture, uv);
         }
       }
-    `;function o(c,A,R){let f=c.createShader(R);return f?(c.shaderSource(f,A),c.compileShader(f),c.getShaderParameter(f,c.COMPILE_STATUS)?f:(console.error(c.getShaderInfoLog(f)),c.deleteShader(f),null)):null}let u=o(e,r,e.VERTEX_SHADER),a=o(e,n,e.FRAGMENT_SHADER);if(!u||!a)return;let s=e.createProgram();if(!s)return;if(e.attachShader(s,u),e.attachShader(s,a),e.linkProgram(s),!e.getProgramParameter(s,e.LINK_STATUS)){console.error(e.getProgramInfoLog(s)),d.textContent="Error linking WebGL program.";return}t.program=s;let m=e.createBuffer();if(!m)return;e.bindBuffer(e.ARRAY_BUFFER,m),e.bufferData(e.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),e.STATIC_DRAW);let l=e.createBuffer();l&&(e.bindBuffer(e.ARRAY_BUFFER,l),e.bufferData(e.ARRAY_BUFFER,new Float32Array([0,1,1,1,0,0,0,0,1,1,1,0]),e.STATIC_DRAW),t.positionBuffer=m,t.texCoordBuffer=l,b())}function _(e,r,n,o){let u=e.createTexture();if(!u)return null;e.bindTexture(e.TEXTURE_2D,u),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,1,1,0,e.RGBA,e.UNSIGNED_BYTE,new Uint8Array([0,0,0,255]));let a=new Image;return a.crossOrigin="anonymous",a.onload=()=>{o&&o(a),e.bindTexture(e.TEXTURE_2D,u),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,a),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),n()},a.onerror=()=>{d.textContent="Error loading image: "+r},a.src=r,u}function b(){let e=t.gl;if(!e)return;let r=0;function n(){r+=1,r===2&&e&&(e.viewport(0,0,i.width,i.height),t.isLoaded=!0,d.textContent="Move your mouse over the image to see the 3D parallax effect.",x())}t.textures.color=_(e,g,n,o=>{t.imageAspect=o.width/o.height,T()}),t.textures.depth=_(e,p,n)}function x(){if(!t.isLoaded)return;let e=t.gl,r=t.program;if(!e||!r)return;t.mousePos.x+=(t.targetPos.x-t.mousePos.x)*.9,t.mousePos.y+=(t.targetPos.y-t.mousePos.y)*.9,e.clearColor(0,0,0,1),e.clear(e.COLOR_BUFFER_BIT),e.useProgram(r);let n=e.getAttribLocation(r,"a_position");e.bindBuffer(e.ARRAY_BUFFER,t.positionBuffer),e.enableVertexAttribArray(n),e.vertexAttribPointer(n,2,e.FLOAT,!1,0,0);let o=e.getAttribLocation(r,"a_texCoord");e.bindBuffer(e.ARRAY_BUFFER,t.texCoordBuffer),e.enableVertexAttribArray(o),e.vertexAttribPointer(o,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.textures.color),e.uniform1i(e.getUniformLocation(r,"u_colorTexture"),0),e.activeTexture(e.TEXTURE1),e.bindTexture(e.TEXTURE_2D,t.textures.depth),e.uniform1i(e.getUniformLocation(r,"u_depthTexture"),1),e.uniform2f(e.getUniformLocation(r,"u_mouse"),t.mousePos.x,t.mousePos.y),e.uniform1f(e.getUniformLocation(r,"u_scale"),.01),e.uniform2f(e.getUniformLocation(r,"u_uvScale"),t.uvScale.x,t.uvScale.y),e.uniform2f(e.getUniformLocation(r,"u_uvOffset"),t.uvOffset.x,t.uvOffset.y),e.uniform1f(e.getUniformLocation(r,"u_imageScale"),.9),e.drawArrays(e.TRIANGLES,0,6),t.animationId=requestAnimationFrame(x)}window.addEventListener("load",L);window.addEventListener("resize",()=>{t.gl&&v()});})();
+    `;
+    function compileShader(glContext, source, type) {
+      const shader = glContext.createShader(type);
+      if (!shader) return null;
+      glContext.shaderSource(shader, source);
+      glContext.compileShader(shader);
+      if (!glContext.getShaderParameter(shader, glContext.COMPILE_STATUS)) {
+        console.error(glContext.getShaderInfoLog(shader));
+        glContext.deleteShader(shader);
+        return null;
+      }
+      return shader;
+    }
+    const vertexShader = compileShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
+    const fragmentShader = compileShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
+    if (!vertexShader || !fragmentShader) return;
+    const program = gl.createProgram();
+    if (!program) return;
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      console.error(gl.getProgramInfoLog(program));
+      statusEl.textContent = "Error linking WebGL program.";
+      return;
+    }
+    state.program = program;
+    const positionBuffer = gl.createBuffer();
+    if (!positionBuffer) return;
+    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
+    );
+    const texCoordBuffer = gl.createBuffer();
+    if (!texCoordBuffer) return;
+    gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([
+        0,
+        1,
+        1,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1,
+        1,
+        1,
+        0
+      ]),
+      gl.STATIC_DRAW
+    );
+    state.positionBuffer = positionBuffer;
+    state.texCoordBuffer = texCoordBuffer;
+    loadTextures();
+  }
+  function loadTexture(gl, url, onLoaded, onImageLoaded) {
+    const texture = gl.createTexture();
+    if (!texture) return null;
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      1,
+      1,
+      0,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      new Uint8Array([0, 0, 0, 255])
+    );
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.onload = () => {
+      if (onImageLoaded) onImageLoaded(image);
+      gl.bindTexture(gl.TEXTURE_2D, texture);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      onLoaded();
+    };
+    image.onerror = () => {
+      statusEl.textContent = "Error loading image: " + url;
+    };
+    image.src = url;
+    return texture;
+  }
+  function loadTextures() {
+    const gl = state.gl;
+    if (!gl) return;
+    let loadedCount = 0;
+    function onLoaded() {
+      loadedCount += 1;
+      if (loadedCount === 2 && gl) {
+        gl.viewport(0, 0, canvas.width, canvas.height);
+        state.isLoaded = true;
+        statusEl.textContent = "Move your mouse over the image to see the 3D parallax effect.";
+        render();
+      }
+    }
+    state.textures.color = loadTexture(
+      gl,
+      COLOR_URL,
+      onLoaded,
+      (image) => {
+        state.imageAspect = image.width / image.height;
+        updateUvScale();
+      }
+    );
+    state.textures.depth = loadTexture(gl, DEPTH_URL, onLoaded);
+  }
+  function render() {
+    if (!state.isLoaded) return;
+    const gl = state.gl;
+    const program = state.program;
+    if (!gl || !program) return;
+    state.mousePos.x += (state.targetPos.x - state.mousePos.x) * MOUSE_SMOOTH;
+    state.mousePos.y += (state.targetPos.y - state.mousePos.y) * MOUSE_SMOOTH;
+    gl.clearColor(0, 0, 0, 1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.useProgram(program);
+    const positionLocation = gl.getAttribLocation(program, "a_position");
+    gl.bindBuffer(gl.ARRAY_BUFFER, state.positionBuffer);
+    gl.enableVertexAttribArray(positionLocation);
+    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+    const texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
+    gl.bindBuffer(gl.ARRAY_BUFFER, state.texCoordBuffer);
+    gl.enableVertexAttribArray(texCoordLocation);
+    gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, state.textures.color);
+    gl.uniform1i(gl.getUniformLocation(program, "u_colorTexture"), 0);
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, state.textures.depth);
+    gl.uniform1i(gl.getUniformLocation(program, "u_depthTexture"), 1);
+    gl.uniform2f(gl.getUniformLocation(program, "u_mouse"), state.mousePos.x, state.mousePos.y);
+    gl.uniform1f(gl.getUniformLocation(program, "u_scale"), DEPTH_SCALE);
+    gl.uniform2f(gl.getUniformLocation(program, "u_uvScale"), state.uvScale.x, state.uvScale.y);
+    gl.uniform2f(gl.getUniformLocation(program, "u_uvOffset"), state.uvOffset.x, state.uvOffset.y);
+    gl.uniform1f(gl.getUniformLocation(program, "u_imageScale"), IMAGE_SCALE);
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+    state.animationId = requestAnimationFrame(render);
+  }
+  window.addEventListener("load", initWebGL);
+  window.addEventListener("resize", () => {
+    if (!state.gl) return;
+    updateCanvasSize();
+  });
+})();
+//# sourceMappingURL=depth.js.map