@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/esm/rendering/NiceSSAO.js

@@ -1,346 +1,468 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceIcon } from '@nice2dev/ui';
-import { useState, useRef, useCallback, useEffect } from 'react';
-import * as THREE from 'three';
-import { useNiceTranslation } from '../core/i18n.js';
-
-/* ── SSAO Shaders ── */
-const SSAO_VERTEX = `
-varying vec2 vUv;
-void main() {
-  vUv = uv;
-  gl_Position = vec4(position, 1.0);
-}
+import { jsxs, jsx } from "react/jsx-runtime";
+import { NiceIcon } from "@nice2dev/ui";
+import { useState, useRef, useCallback, useEffect } from "react";
+import * as THREE from "three";
+import { useNiceTranslation } from "../core/i18n.js";
+const SSAO_VERTEX = `
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 1.0);
+}
 `;
-const SSAO_FRAGMENT = `
-uniform sampler2D tDepth;
-uniform sampler2D tNoise;
-uniform vec3 kernel[128];
-uniform int kernelSize;
-uniform vec2 resolution;
-uniform mat4 projMatrix;
-uniform mat4 projInverseMatrix;
-uniform float cameraNear;
-uniform float cameraFar;
-uniform float radius;
-uniform float bias;
-uniform float intensity;
-uniform float minDistance;
-uniform float maxDistance;
-
-varying vec2 vUv;
-
-float linearDepth(float d) {
-  return cameraNear * cameraFar / (cameraFar - d * (cameraFar - cameraNear));
-}
-
-vec3 getViewPos(vec2 uv) {
-  float d = texture2D(tDepth, uv).r;
-  vec4 clipPos = vec4(uv * 2.0 - 1.0, d * 2.0 - 1.0, 1.0);
-  vec4 viewPos = projInverseMatrix * clipPos;
-  return viewPos.xyz / viewPos.w;
-}
-
-void main() {
-  float depth = texture2D(tDepth, vUv).r;
-  if (depth >= 1.0) {
-    gl_FragColor = vec4(1.0);
-    return;
-  }
-
-  vec3 viewPos = getViewPos(vUv);
-  
-  // Reconstruct normal from depth buffer
-  vec3 dpdx = dFdx(viewPos);
-  vec3 dpdy = dFdy(viewPos);
-  vec3 normal = normalize(cross(dpdx, dpdy));
-
-  // Random rotation from noise texture
-  vec2 noiseUv = vUv * resolution / 4.0;
-  vec3 randomVec = texture2D(tNoise, noiseUv).xyz * 2.0 - 1.0;
-
-  // Create TBN matrix
-  vec3 tangent = normalize(randomVec - normal * dot(randomVec, normal));
-  vec3 bitangent = cross(normal, tangent);
-  mat3 TBN = mat3(tangent, bitangent, normal);
-
-  float occlusion = 0.0;
-  
-  for (int i = 0; i < 128; i++) {
-    if (i >= kernelSize) break;
-    
-    // Transform sample to view space
-    vec3 samplePos = TBN * kernel[i];
-    samplePos = viewPos + samplePos * radius;
-
-    // Project sample to screen
-    vec4 offset = projMatrix * vec4(samplePos, 1.0);
-    offset.xyz /= offset.w;
-    vec2 sampleUv = offset.xy * 0.5 + 0.5;
-
-    // Out of screen
-    if (sampleUv.x < 0.0 || sampleUv.x > 1.0 || sampleUv.y < 0.0 || sampleUv.y > 1.0) continue;
-
-    float sampleDepth = linearDepth(texture2D(tDepth, sampleUv).r);
-    float rangeCheck = smoothstep(0.0, 1.0, radius / abs(-viewPos.z - sampleDepth));
-
-    float dist = abs(-viewPos.z - sampleDepth);
-    if (dist >= minDistance && dist <= maxDistance) {
-      occlusion += (sampleDepth <= -samplePos.z - bias ? 1.0 : 0.0) * rangeCheck;
-    }
-  }
-
-  occlusion = 1.0 - (occlusion / float(kernelSize)) * intensity;
-  gl_FragColor = vec4(vec3(occlusion), 1.0);
-}
+const SSAO_FRAGMENT = `
+uniform sampler2D tDepth;
+uniform sampler2D tNoise;
+uniform vec3 kernel[128];
+uniform int kernelSize;
+uniform vec2 resolution;
+uniform mat4 projMatrix;
+uniform mat4 projInverseMatrix;
+uniform float cameraNear;
+uniform float cameraFar;
+uniform float radius;
+uniform float bias;
+uniform float intensity;
+uniform float minDistance;
+uniform float maxDistance;
+
+varying vec2 vUv;
+
+float linearDepth(float d) {
+  return cameraNear * cameraFar / (cameraFar - d * (cameraFar - cameraNear));
+}
+
+vec3 getViewPos(vec2 uv) {
+  float d = texture2D(tDepth, uv).r;
+  vec4 clipPos = vec4(uv * 2.0 - 1.0, d * 2.0 - 1.0, 1.0);
+  vec4 viewPos = projInverseMatrix * clipPos;
+  return viewPos.xyz / viewPos.w;
+}
+
+void main() {
+  float depth = texture2D(tDepth, vUv).r;
+  if (depth >= 1.0) {
+    gl_FragColor = vec4(1.0);
+    return;
+  }
+
+  vec3 viewPos = getViewPos(vUv);
+  
+  // Reconstruct normal from depth buffer
+  vec3 dpdx = dFdx(viewPos);
+  vec3 dpdy = dFdy(viewPos);
+  vec3 normal = normalize(cross(dpdx, dpdy));
+
+  // Random rotation from noise texture
+  vec2 noiseUv = vUv * resolution / 4.0;
+  vec3 randomVec = texture2D(tNoise, noiseUv).xyz * 2.0 - 1.0;
+
+  // Create TBN matrix
+  vec3 tangent = normalize(randomVec - normal * dot(randomVec, normal));
+  vec3 bitangent = cross(normal, tangent);
+  mat3 TBN = mat3(tangent, bitangent, normal);
+
+  float occlusion = 0.0;
+  
+  for (int i = 0; i < 128; i++) {
+    if (i >= kernelSize) break;
+    
+    // Transform sample to view space
+    vec3 samplePos = TBN * kernel[i];
+    samplePos = viewPos + samplePos * radius;
+
+    // Project sample to screen
+    vec4 offset = projMatrix * vec4(samplePos, 1.0);
+    offset.xyz /= offset.w;
+    vec2 sampleUv = offset.xy * 0.5 + 0.5;
+
+    // Out of screen
+    if (sampleUv.x < 0.0 || sampleUv.x > 1.0 || sampleUv.y < 0.0 || sampleUv.y > 1.0) continue;
+
+    float sampleDepth = linearDepth(texture2D(tDepth, sampleUv).r);
+    float rangeCheck = smoothstep(0.0, 1.0, radius / abs(-viewPos.z - sampleDepth));
+
+    float dist = abs(-viewPos.z - sampleDepth);
+    if (dist >= minDistance && dist <= maxDistance) {
+      occlusion += (sampleDepth <= -samplePos.z - bias ? 1.0 : 0.0) * rangeCheck;
+    }
+  }
+
+  occlusion = 1.0 - (occlusion / float(kernelSize)) * intensity;
+  gl_FragColor = vec4(vec3(occlusion), 1.0);
+}
 `;
-const BLUR_FRAGMENT = `
-uniform sampler2D tAO;
-uniform sampler2D tDepth;
-uniform vec2 resolution;
-uniform int blurSize;
-uniform float cameraNear;
-uniform float cameraFar;
-
-varying vec2 vUv;
-
-float linearDepth(float d) {
-  return cameraNear * cameraFar / (cameraFar - d * (cameraFar - cameraNear));
-}
-
-void main() {
-  float centerDepth = linearDepth(texture2D(tDepth, vUv).r);
-  float result = 0.0;
-  float weightSum = 0.0;
-
-  for (int x = -4; x <= 4; x++) {
-    for (int y = -4; y <= 4; y++) {
-      if (abs(x) > blurSize || abs(y) > blurSize) continue;
-
-      vec2 offset = vec2(float(x), float(y)) / resolution;
-      float sampleDepth = linearDepth(texture2D(tDepth, vUv + offset).r);
-      
-      // Bilateral weight based on depth difference
-      float depthWeight = exp(-abs(centerDepth - sampleDepth) * 10.0);
-      float spatialWeight = exp(-float(x * x + y * y) / (2.0 * float(blurSize * blurSize)));
-      float weight = depthWeight * spatialWeight;
-
-      result += texture2D(tAO, vUv + offset).r * weight;
-      weightSum += weight;
-    }
-  }
-
-  gl_FragColor = vec4(vec3(result / weightSum), 1.0);
-}
+const BLUR_FRAGMENT = `
+uniform sampler2D tAO;
+uniform sampler2D tDepth;
+uniform vec2 resolution;
+uniform int blurSize;
+uniform float cameraNear;
+uniform float cameraFar;
+
+varying vec2 vUv;
+
+float linearDepth(float d) {
+  return cameraNear * cameraFar / (cameraFar - d * (cameraFar - cameraNear));
+}
+
+void main() {
+  float centerDepth = linearDepth(texture2D(tDepth, vUv).r);
+  float result = 0.0;
+  float weightSum = 0.0;
+
+  for (int x = -4; x <= 4; x++) {
+    for (int y = -4; y <= 4; y++) {
+      if (abs(x) > blurSize || abs(y) > blurSize) continue;
+
+      vec2 offset = vec2(float(x), float(y)) / resolution;
+      float sampleDepth = linearDepth(texture2D(tDepth, vUv + offset).r);
+      
+      // Bilateral weight based on depth difference
+      float depthWeight = exp(-abs(centerDepth - sampleDepth) * 10.0);
+      float spatialWeight = exp(-float(x * x + y * y) / (2.0 * float(blurSize * blurSize)));
+      float weight = depthWeight * spatialWeight;
+
+      result += texture2D(tAO, vUv + offset).r * weight;
+      weightSum += weight;
+    }
+  }
+
+  gl_FragColor = vec4(vec3(result / weightSum), 1.0);
+}
 `;
-/* ── Generate kernel and noise ── */
 function generateSSAOKernel(size) {
-    const kernel = new Float32Array(size * 3);
-    for (let i = 0; i < size; i++) {
-        // Hemisphere samples
-        let x = Math.random() * 2 - 1;
-        let y = Math.random() * 2 - 1;
-        let z = Math.random(); // hemisphere — positive z only
-        const len = Math.sqrt(x * x + y * y + z * z);
-        x /= len;
-        y /= len;
-        z /= len;
-        // Scale to distribute more samples closer to origin
-        let scale = i / size;
-        scale = 0.1 + scale * scale * 0.9; // lerp(0.1, 1.0, scale^2)
-        kernel[i * 3] = x * scale;
-        kernel[i * 3 + 1] = y * scale;
-        kernel[i * 3 + 2] = z * scale;
-    }
-    return kernel;
+  const kernel = new Float32Array(size * 3);
+  for (let i = 0; i < size; i++) {
+    let x = Math.random() * 2 - 1;
+    let y = Math.random() * 2 - 1;
+    let z = Math.random();
+    const len = Math.sqrt(x * x + y * y + z * z);
+    x /= len;
+    y /= len;
+    z /= len;
+    let scale = i / size;
+    scale = 0.1 + scale * scale * 0.9;
+    kernel[i * 3] = x * scale;
+    kernel[i * 3 + 1] = y * scale;
+    kernel[i * 3 + 2] = z * scale;
+  }
+  return kernel;
 }
 function generateNoiseTexture() {
-    const size = 4;
-    const data = new Float32Array(size * size * 4);
-    for (let i = 0; i < size * size; i++) {
-        data[i * 4] = Math.random() * 2 - 1;
-        data[i * 4 + 1] = Math.random() * 2 - 1;
-        data[i * 4 + 2] = 0;
-        data[i * 4 + 3] = 1;
-    }
-    const tex = new THREE.DataTexture(data, size, size, THREE.RGBAFormat, THREE.FloatType);
-    tex.wrapS = THREE.RepeatWrapping;
-    tex.wrapT = THREE.RepeatWrapping;
-    tex.needsUpdate = true;
-    return tex;
+  const size = 4;
+  const data = new Float32Array(size * size * 4);
+  for (let i = 0; i < size * size; i++) {
+    data[i * 4] = Math.random() * 2 - 1;
+    data[i * 4 + 1] = Math.random() * 2 - 1;
+    data[i * 4 + 2] = 0;
+    data[i * 4 + 3] = 1;
+  }
+  const tex = new THREE.DataTexture(data, size, size, THREE.RGBAFormat, THREE.FloatType);
+  tex.wrapS = THREE.RepeatWrapping;
+  tex.wrapT = THREE.RepeatWrapping;
+  tex.needsUpdate = true;
+  return tex;
 }
-/* ── Hook ── */
 const DEFAULT_SSAO = {
-    enabled: true,
-    mode: 'ssao',
-    samples: 32,
-    radius: 1.0,
-    bias: 0.025,
-    intensity: 1.5,
-    resolution: 0.5,
-    blurEnabled: true,
-    blurSize: 2,
-    minDistance: 0.01,
-    maxDistance: 10,
+  enabled: true,
+  mode: "ssao",
+  samples: 32,
+  radius: 1,
+  bias: 0.025,
+  intensity: 1.5,
+  resolution: 0.5,
+  blurEnabled: true,
+  blurSize: 2,
+  minDistance: 0.01,
+  maxDistance: 10
 };
 function useSSAO(renderer, scene, camera, configOverride) {
-    const [config, setConfigState] = useState({ ...DEFAULT_SSAO, ...configOverride });
-    const [aoRenderTarget, setAoRenderTarget] = useState(null);
-    const depthRT = useRef(null);
-    const blurRT = useRef(null);
-    const ssaoMaterial = useRef(null);
-    const blurMaterial = useRef(null);
-    const noiseTexture = useRef(generateNoiseTexture());
-    const kernel = useRef(generateSSAOKernel(128));
-    const orthoScene = useRef(new THREE.Scene());
-    const orthoCamera = useRef(new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1));
-    const quadRef = useRef(null);
-    const setConfig = useCallback((partial) => {
-        setConfigState((prev) => ({ ...prev, ...partial }));
-    }, []);
-    // Setup
-    useEffect(() => {
-        if (!renderer || !camera) {
-            return;
+  const [config, setConfigState] = useState({ ...DEFAULT_SSAO, ...configOverride });
+  const [aoRenderTarget, setAoRenderTarget] = useState(null);
+  const depthRT = useRef(null);
+  const blurRT = useRef(null);
+  const ssaoMaterial = useRef(null);
+  const blurMaterial = useRef(null);
+  const noiseTexture = useRef(generateNoiseTexture());
+  const kernel = useRef(generateSSAOKernel(128));
+  const orthoScene = useRef(new THREE.Scene());
+  const orthoCamera = useRef(new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1));
+  const quadRef = useRef(null);
+  const setConfig = useCallback((partial) => {
+    setConfigState((prev) => ({ ...prev, ...partial }));
+  }, []);
+  useEffect(() => {
+    if (!renderer || !camera) {
+      return;
+    }
+    const width = Math.floor(renderer.domElement.width * config.resolution);
+    const height = Math.floor(renderer.domElement.height * config.resolution);
+    const dRT = new THREE.WebGLRenderTarget(width, height, {
+      minFilter: THREE.NearestFilter,
+      magFilter: THREE.NearestFilter,
+      type: THREE.FloatType
+    });
+    dRT.depthTexture = new THREE.DepthTexture(width, height);
+    dRT.depthTexture.type = THREE.UnsignedIntType;
+    depthRT.current = dRT;
+    const aoRT = new THREE.WebGLRenderTarget(width, height, {
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.LinearFilter
+    });
+    setAoRenderTarget(aoRT);
+    const bRT = new THREE.WebGLRenderTarget(width, height, {
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.LinearFilter
+    });
+    blurRT.current = bRT;
+    const kernelUniforms = [];
+    for (let i = 0; i < 128; i++) {
+      kernelUniforms.push(
+        new THREE.Vector3(
+          kernel.current[i * 3],
+          kernel.current[i * 3 + 1],
+          kernel.current[i * 3 + 2]
+        )
+      );
+    }
+    const ssaoMat = new THREE.ShaderMaterial({
+      vertexShader: SSAO_VERTEX,
+      fragmentShader: SSAO_FRAGMENT,
+      uniforms: {
+        tDepth: { value: dRT.depthTexture },
+        tNoise: { value: noiseTexture.current },
+        kernel: { value: kernelUniforms },
+        kernelSize: { value: config.samples },
+        resolution: { value: new THREE.Vector2(width, height) },
+        projMatrix: { value: camera.projectionMatrix },
+        projInverseMatrix: { value: camera.projectionMatrixInverse },
+        cameraNear: { value: camera.near },
+        cameraFar: { value: camera.far },
+        radius: { value: config.radius },
+        bias: { value: config.bias },
+        intensity: { value: config.intensity },
+        minDistance: { value: config.minDistance },
+        maxDistance: { value: config.maxDistance }
+      }
+    });
+    ssaoMaterial.current = ssaoMat;
+    const blurMat = new THREE.ShaderMaterial({
+      vertexShader: SSAO_VERTEX,
+      fragmentShader: BLUR_FRAGMENT,
+      uniforms: {
+        tAO: { value: aoRT.texture },
+        tDepth: { value: dRT.depthTexture },
+        resolution: { value: new THREE.Vector2(width, height) },
+        blurSize: { value: config.blurSize },
+        cameraNear: { value: camera.near },
+        cameraFar: { value: camera.far }
+      }
+    });
+    blurMaterial.current = blurMat;
+    const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), ssaoMat);
+    quad.frustumCulled = false;
+    const ortho = orthoScene.current;
+    ortho.add(quad);
+    quadRef.current = quad;
+    return () => {
+      dRT.dispose();
+      aoRT.dispose();
+      bRT.dispose();
+      ssaoMat.dispose();
+      blurMat.dispose();
+      ortho.remove(quad);
+    };
+  }, [renderer, camera, config.resolution]);
+  useEffect(() => {
+    if (!ssaoMaterial.current) {
+      return;
+    }
+    const u = ssaoMaterial.current.uniforms;
+    u.kernelSize.value = config.samples;
+    u.radius.value = config.radius;
+    u.bias.value = config.bias;
+    u.intensity.value = config.intensity;
+    u.minDistance.value = config.minDistance;
+    u.maxDistance.value = config.maxDistance;
+  }, [config]);
+  useEffect(() => {
+    if (!blurMaterial.current) {
+      return;
+    }
+    blurMaterial.current.uniforms.blurSize.value = config.blurSize;
+  }, [config.blurSize]);
+  const update = useCallback(() => {
+    if (!renderer || !scene || !camera || !config.enabled) {
+      return;
+    }
+    if (!depthRT.current || !aoRenderTarget || !quadRef.current) {
+      return;
+    }
+    renderer.setRenderTarget(depthRT.current);
+    renderer.render(scene, camera);
+    quadRef.current.material = ssaoMaterial.current;
+    renderer.setRenderTarget(aoRenderTarget);
+    renderer.render(orthoScene.current, orthoCamera.current);
+    if (config.blurEnabled && blurMaterial.current && blurRT.current) {
+      blurMaterial.current.uniforms.tAO.value = aoRenderTarget.texture;
+      quadRef.current.material = blurMaterial.current;
+      renderer.setRenderTarget(blurRT.current);
+      renderer.render(orthoScene.current, orthoCamera.current);
+    }
+    renderer.setRenderTarget(null);
+  }, [renderer, scene, camera, config.enabled, config.blurEnabled, aoRenderTarget]);
+  const dispose = useCallback(() => {
+    depthRT.current?.dispose();
+    aoRenderTarget?.dispose();
+    blurRT.current?.dispose();
+    ssaoMaterial.current?.dispose();
+    blurMaterial.current?.dispose();
+    noiseTexture.current?.dispose();
+  }, [aoRenderTarget]);
+  return { config, setConfig, aoRenderTarget, update, dispose };
+}
+const NiceSSAO = ({
+  renderer,
+  scene,
+  camera,
+  config: configProp,
+  className = ""
+}) => {
+  const { t } = useNiceTranslation();
+  const { config, setConfig } = useSSAO(renderer, scene, camera, configProp);
+  return /* @__PURE__ */ jsxs("div", { className: `nice-ssao ${className}`, style: { display: "grid", gap: 8, fontSize: 13 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxs("strong", { children: [
+        /* @__PURE__ */ jsx(NiceIcon, { name: "circle", size: 14 }),
+        " ",
+        t("ssao.ambientOcclusion", "Ambient Occlusion")
+      ] }),
+      /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 4, fontSize: 11 }, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: config.enabled,
+            onChange: (e) => setConfig({ enabled: e.target.checked })
+          }
+        ),
+        t("ssao.enabled", "Enabled")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("ssao.mode", "Mode:"),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: config.mode,
+          onChange: (e) => setConfig({ mode: e.target.value }),
+          style: { width: "100%", marginTop: 2 },
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "ssao", children: t("ssao.ssao", "SSAO") }),
+            /* @__PURE__ */ jsx("option", { value: "hbao", children: t("ssao.hbao", "HBAO") })
+          ]
         }
-        const width = Math.floor(renderer.domElement.width * config.resolution);
-        const height = Math.floor(renderer.domElement.height * config.resolution);
-        // Depth render target
-        const dRT = new THREE.WebGLRenderTarget(width, height, {
-            minFilter: THREE.NearestFilter,
-            magFilter: THREE.NearestFilter,
-            type: THREE.FloatType,
-        });
-        dRT.depthTexture = new THREE.DepthTexture(width, height);
-        dRT.depthTexture.type = THREE.UnsignedIntType;
-        depthRT.current = dRT;
-        // AO render target
-        const aoRT = new THREE.WebGLRenderTarget(width, height, {
-            minFilter: THREE.LinearFilter,
-            magFilter: THREE.LinearFilter,
-        });
-        setAoRenderTarget(aoRT);
-        // Blur render target
-        const bRT = new THREE.WebGLRenderTarget(width, height, {
-            minFilter: THREE.LinearFilter,
-            magFilter: THREE.LinearFilter,
-        });
-        blurRT.current = bRT;
-        // Kernel uniform as vec3 array
-        const kernelUniforms = [];
-        for (let i = 0; i < 128; i++) {
-            kernelUniforms.push(new THREE.Vector3(kernel.current[i * 3], kernel.current[i * 3 + 1], kernel.current[i * 3 + 2]));
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("ssao.samples", "Samples: {samples}").replace("{samples}", String(config.samples)),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 8,
+          max: 128,
+          step: 8,
+          value: config.samples,
+          onChange: (e) => setConfig({ samples: parseInt(e.target.value, 10) }),
+          style: { width: "100%" }
         }
-        // SSAO material
-        const ssaoMat = new THREE.ShaderMaterial({
-            vertexShader: SSAO_VERTEX,
-            fragmentShader: SSAO_FRAGMENT,
-            uniforms: {
-                tDepth: { value: dRT.depthTexture },
-                tNoise: { value: noiseTexture.current },
-                kernel: { value: kernelUniforms },
-                kernelSize: { value: config.samples },
-                resolution: { value: new THREE.Vector2(width, height) },
-                projMatrix: { value: camera.projectionMatrix },
-                projInverseMatrix: { value: camera.projectionMatrixInverse },
-                cameraNear: { value: camera.near },
-                cameraFar: { value: camera.far },
-                radius: { value: config.radius },
-                bias: { value: config.bias },
-                intensity: { value: config.intensity },
-                minDistance: { value: config.minDistance },
-                maxDistance: { value: config.maxDistance },
-            },
-        });
-        ssaoMaterial.current = ssaoMat;
-        // Blur material
-        const blurMat = new THREE.ShaderMaterial({
-            vertexShader: SSAO_VERTEX,
-            fragmentShader: BLUR_FRAGMENT,
-            uniforms: {
-                tAO: { value: aoRT.texture },
-                tDepth: { value: dRT.depthTexture },
-                resolution: { value: new THREE.Vector2(width, height) },
-                blurSize: { value: config.blurSize },
-                cameraNear: { value: camera.near },
-                cameraFar: { value: camera.far },
-            },
-        });
-        blurMaterial.current = blurMat;
-        // Full-screen quad
-        const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), ssaoMat);
-        quad.frustumCulled = false;
-        const ortho = orthoScene.current;
-        ortho.add(quad);
-        quadRef.current = quad;
-        return () => {
-            dRT.dispose();
-            aoRT.dispose();
-            bRT.dispose();
-            ssaoMat.dispose();
-            blurMat.dispose();
-            ortho.remove(quad);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- the uniforms' first values; the next effect updates them without rebuilding the render targets
-    }, [renderer, camera, config.resolution]);
-    // Update uniforms
-    useEffect(() => {
-        if (!ssaoMaterial.current) {
-            return;
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("ssao.radius", "Radius: {radius}").replace("{radius}", String(config.radius.toFixed(2))),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 0.1,
+          max: 5,
+          step: 0.1,
+          value: config.radius,
+          onChange: (e) => setConfig({ radius: parseFloat(e.target.value) }),
+          style: { width: "100%" }
         }
-        const u = ssaoMaterial.current.uniforms;
-        u.kernelSize.value = config.samples;
-        u.radius.value = config.radius;
-        u.bias.value = config.bias;
-        u.intensity.value = config.intensity;
-        u.minDistance.value = config.minDistance;
-        u.maxDistance.value = config.maxDistance;
-    }, [config]);
-    useEffect(() => {
-        if (!blurMaterial.current) {
-            return;
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("ssao.intensity", "Intensity: {intensity}").replace(
+        "{intensity}",
+        String(config.intensity.toFixed(2))
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 0,
+          max: 3,
+          step: 0.1,
+          value: config.intensity,
+          onChange: (e) => setConfig({ intensity: parseFloat(e.target.value) }),
+          style: { width: "100%" }
         }
-        blurMaterial.current.uniforms.blurSize.value = config.blurSize;
-    }, [config.blurSize]);
-    const update = useCallback(() => {
-        if (!renderer || !scene || !camera || !config.enabled) {
-            return;
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("ssao.bias", "Bias: {bias}").replace("{bias}", String(config.bias.toFixed(3))),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 1e-3,
+          max: 0.1,
+          step: 1e-3,
+          value: config.bias,
+          onChange: (e) => setConfig({ bias: parseFloat(e.target.value) }),
+          style: { width: "100%" }
         }
-        if (!depthRT.current || !aoRenderTarget || !quadRef.current) {
-            return;
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("ssao.resolution", "Resolution: {resolution}").replace(
+        "{resolution}",
+        String(config.resolution.toFixed(2))
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 0.25,
+          max: 1,
+          step: 0.25,
+          value: config.resolution,
+          onChange: (e) => setConfig({ resolution: parseFloat(e.target.value) }),
+          style: { width: "100%" }
         }
-        // Render depth
-        renderer.setRenderTarget(depthRT.current);
-        renderer.render(scene, camera);
-        // SSAO pass
-        quadRef.current.material = ssaoMaterial.current;
-        renderer.setRenderTarget(aoRenderTarget);
-        renderer.render(orthoScene.current, orthoCamera.current);
-        // Blur pass
-        if (config.blurEnabled && blurMaterial.current && blurRT.current) {
-            blurMaterial.current.uniforms.tAO.value = aoRenderTarget.texture;
-            quadRef.current.material = blurMaterial.current;
-            renderer.setRenderTarget(blurRT.current);
-            renderer.render(orthoScene.current, orthoCamera.current);
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: config.blurEnabled,
+          onChange: (e) => setConfig({ blurEnabled: e.target.checked })
         }
-        renderer.setRenderTarget(null);
-    }, [renderer, scene, camera, config.enabled, config.blurEnabled, aoRenderTarget]);
-    const dispose = useCallback(() => {
-        var _a, _b, _c, _d, _e;
-        (_a = depthRT.current) === null || _a === void 0 ? void 0 : _a.dispose();
-        aoRenderTarget === null || aoRenderTarget === void 0 ? void 0 : aoRenderTarget.dispose();
-        (_b = blurRT.current) === null || _b === void 0 ? void 0 : _b.dispose();
-        (_c = ssaoMaterial.current) === null || _c === void 0 ? void 0 : _c.dispose();
-        (_d = blurMaterial.current) === null || _d === void 0 ? void 0 : _d.dispose();
-        (_e = noiseTexture.current) === null || _e === void 0 ? void 0 : _e.dispose();
-    }, [aoRenderTarget]);
-    return { config, setConfig, aoRenderTarget, update, dispose };
-}
-/* ── Component ── */
-const NiceSSAO = ({ renderer, scene, camera, config: configProp, className = '', }) => {
-    const { t } = useNiceTranslation();
-    const { config, setConfig } = useSSAO(renderer, scene, camera, configProp);
-    return (jsxs("div", { className: `nice-ssao ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "circle", size: 14 }), " ", t('ssao.ambientOcclusion', 'Ambient Occlusion')] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 11 }, children: [jsx("input", { type: "checkbox", checked: config.enabled, onChange: (e) => setConfig({ enabled: e.target.checked }) }), t('ssao.enabled', 'Enabled')] })] }), jsxs("label", { children: [t('ssao.mode', 'Mode:'), jsxs("select", { value: config.mode, onChange: (e) => setConfig({ mode: e.target.value }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: "ssao", children: t('ssao.ssao', 'SSAO') }), jsx("option", { value: "hbao", children: t('ssao.hbao', 'HBAO') })] })] }), jsxs("label", { children: [t('ssao.samples', 'Samples: {samples}').replace('{samples}', String(config.samples)), jsx("input", { type: "range", min: 8, max: 128, step: 8, value: config.samples, onChange: (e) => setConfig({ samples: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssao.radius', 'Radius: {radius}').replace('{radius}', String(config.radius.toFixed(2))), jsx("input", { type: "range", min: 0.1, max: 5, step: 0.1, value: config.radius, onChange: (e) => setConfig({ radius: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssao.intensity', 'Intensity: {intensity}').replace('{intensity}', String(config.intensity.toFixed(2))), jsx("input", { type: "range", min: 0, max: 3, step: 0.1, value: config.intensity, onChange: (e) => setConfig({ intensity: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssao.bias', 'Bias: {bias}').replace('{bias}', String(config.bias.toFixed(3))), jsx("input", { type: "range", min: 0.001, max: 0.1, step: 0.001, value: config.bias, onChange: (e) => setConfig({ bias: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssao.resolution', 'Resolution: {resolution}').replace('{resolution}', String(config.resolution.toFixed(2))), jsx("input", { type: "range", min: 0.25, max: 1, step: 0.25, value: config.resolution, onChange: (e) => setConfig({ resolution: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "checkbox", checked: config.blurEnabled, onChange: (e) => setConfig({ blurEnabled: e.target.checked }) }), t('ssao.bilateralBlurSize', 'Bilateral Blur (size: {blurSize})').replace('{blurSize}', String(config.blurSize))] })] }));
+      ),
+      t("ssao.bilateralBlurSize", "Bilateral Blur (size: {blurSize})").replace(
+        "{blurSize}",
+        String(config.blurSize)
+      )
+    ] })
+  ] });
+};
+export {
+  NiceSSAO,
+  useSSAO
 };
-
-export { NiceSSAO, useSSAO };