@nice2dev/ui-3d 1.3.15 → 1.3.16

package/dist/esm/rendering/NiceSSR.js

@@ -1,263 +1,394 @@
-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';
-
-/* ── SSR Shader ── */
-const SSR_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 SSR_VERTEX = `
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 1.0);
+}
 `;
-const SSR_FRAGMENT = `
-uniform sampler2D tDiffuse;
-uniform sampler2D tDepth;
-uniform sampler2D tNormal;
-uniform mat4 projMatrix;
-uniform mat4 projInverseMatrix;
-uniform mat4 viewMatrix;
-uniform vec2 resolution;
-uniform float cameraNear;
-uniform float cameraFar;
-uniform int maxSteps;
-uniform float maxDistance;
-uniform float thickness;
-uniform float jitter;
-uniform float intensity;
-uniform float fresnelExponent;
-
-varying vec2 vUv;
-
-float getDepth(vec2 uv) {
-  float d = texture2D(tDepth, uv).r;
-  return cameraNear * cameraFar / (cameraFar - d * (cameraFar - cameraNear));
-}
-
-vec3 getViewPosition(vec2 uv, float depth) {
-  vec4 clipPos = vec4(uv * 2.0 - 1.0, depth * 2.0 - 1.0, 1.0);
-  vec4 viewPos = projInverseMatrix * clipPos;
-  return viewPos.xyz / viewPos.w;
-}
-
-vec3 getViewNormal(vec2 uv) {
-  return normalize(texture2D(tNormal, uv).xyz * 2.0 - 1.0);
-}
-
-float fresnel(vec3 viewDir, vec3 normal, float exponent) {
-  return pow(1.0 - max(dot(-viewDir, normal), 0.0), exponent);
-}
-
-vec2 rayMarch(vec3 origin, vec3 direction) {
-  vec3 pos = origin;
-  float stepSize = maxDistance / float(maxSteps);
-
-  for (int i = 0; i < 256; i++) {
-    if (i >= maxSteps) break;
-
-    pos += direction * stepSize;
-
-    // Project to screen space
-    vec4 projPos = projMatrix * vec4(pos, 1.0);
-    projPos.xyz /= projPos.w;
-    vec2 screenUv = projPos.xy * 0.5 + 0.5;
-
-    // Out of screen
-    if (screenUv.x < 0.0 || screenUv.x > 1.0 || screenUv.y < 0.0 || screenUv.y > 1.0) {
-      return vec2(-1.0);
-    }
-
-    float sceneDepth = getDepth(screenUv);
-    float rayDepth = -pos.z;
-
-    if (rayDepth > sceneDepth && rayDepth - sceneDepth < thickness) {
-      return screenUv;
-    }
-  }
-
-  return vec2(-1.0);
-}
-
-void main() {
-  vec4 baseColor = texture2D(tDiffuse, vUv);
-  float depth = texture2D(tDepth, vUv).r;
-
-  if (depth >= 1.0) {
-    gl_FragColor = baseColor;
-    return;
-  }
-
-  vec3 viewPos = getViewPosition(vUv, depth);
-  vec3 viewNormal = getViewNormal(vUv);
-  vec3 viewDir = normalize(viewPos);
-
-  // Reflect view direction around normal
-  vec3 reflectDir = reflect(viewDir, viewNormal);
-
-  // Add jitter
-  float j = fract(sin(dot(vUv, vec2(12.9898, 78.233))) * 43758.5453) * jitter;
-  reflectDir += j * 0.01;
-  reflectDir = normalize(reflectDir);
-
-  // Ray march
-  vec2 hitUv = rayMarch(viewPos + viewNormal * 0.01, reflectDir);
-
-  vec3 reflection = vec3(0.0);
-  if (hitUv.x >= 0.0) {
-    reflection = texture2D(tDiffuse, hitUv).rgb;
-  }
-
-  // Fresnel attenuation
-  float f = fresnel(viewDir, viewNormal, fresnelExponent);
-
-  gl_FragColor = vec4(mix(baseColor.rgb, reflection, f * intensity), baseColor.a);
-}
+const SSR_FRAGMENT = `
+uniform sampler2D tDiffuse;
+uniform sampler2D tDepth;
+uniform sampler2D tNormal;
+uniform mat4 projMatrix;
+uniform mat4 projInverseMatrix;
+uniform mat4 viewMatrix;
+uniform vec2 resolution;
+uniform float cameraNear;
+uniform float cameraFar;
+uniform int maxSteps;
+uniform float maxDistance;
+uniform float thickness;
+uniform float jitter;
+uniform float intensity;
+uniform float fresnelExponent;
+
+varying vec2 vUv;
+
+float getDepth(vec2 uv) {
+  float d = texture2D(tDepth, uv).r;
+  return cameraNear * cameraFar / (cameraFar - d * (cameraFar - cameraNear));
+}
+
+vec3 getViewPosition(vec2 uv, float depth) {
+  vec4 clipPos = vec4(uv * 2.0 - 1.0, depth * 2.0 - 1.0, 1.0);
+  vec4 viewPos = projInverseMatrix * clipPos;
+  return viewPos.xyz / viewPos.w;
+}
+
+vec3 getViewNormal(vec2 uv) {
+  return normalize(texture2D(tNormal, uv).xyz * 2.0 - 1.0);
+}
+
+float fresnel(vec3 viewDir, vec3 normal, float exponent) {
+  return pow(1.0 - max(dot(-viewDir, normal), 0.0), exponent);
+}
+
+vec2 rayMarch(vec3 origin, vec3 direction) {
+  vec3 pos = origin;
+  float stepSize = maxDistance / float(maxSteps);
+
+  for (int i = 0; i < 256; i++) {
+    if (i >= maxSteps) break;
+
+    pos += direction * stepSize;
+
+    // Project to screen space
+    vec4 projPos = projMatrix * vec4(pos, 1.0);
+    projPos.xyz /= projPos.w;
+    vec2 screenUv = projPos.xy * 0.5 + 0.5;
+
+    // Out of screen
+    if (screenUv.x < 0.0 || screenUv.x > 1.0 || screenUv.y < 0.0 || screenUv.y > 1.0) {
+      return vec2(-1.0);
+    }
+
+    float sceneDepth = getDepth(screenUv);
+    float rayDepth = -pos.z;
+
+    if (rayDepth > sceneDepth && rayDepth - sceneDepth < thickness) {
+      return screenUv;
+    }
+  }
+
+  return vec2(-1.0);
+}
+
+void main() {
+  vec4 baseColor = texture2D(tDiffuse, vUv);
+  float depth = texture2D(tDepth, vUv).r;
+
+  if (depth >= 1.0) {
+    gl_FragColor = baseColor;
+    return;
+  }
+
+  vec3 viewPos = getViewPosition(vUv, depth);
+  vec3 viewNormal = getViewNormal(vUv);
+  vec3 viewDir = normalize(viewPos);
+
+  // Reflect view direction around normal
+  vec3 reflectDir = reflect(viewDir, viewNormal);
+
+  // Add jitter
+  float j = fract(sin(dot(vUv, vec2(12.9898, 78.233))) * 43758.5453) * jitter;
+  reflectDir += j * 0.01;
+  reflectDir = normalize(reflectDir);
+
+  // Ray march
+  vec2 hitUv = rayMarch(viewPos + viewNormal * 0.01, reflectDir);
+
+  vec3 reflection = vec3(0.0);
+  if (hitUv.x >= 0.0) {
+    reflection = texture2D(tDiffuse, hitUv).rgb;
+  }
+
+  // Fresnel attenuation
+  float f = fresnel(viewDir, viewNormal, fresnelExponent);
+
+  gl_FragColor = vec4(mix(baseColor.rgb, reflection, f * intensity), baseColor.a);
+}
 `;
-/* ── Hook ── */
 const DEFAULT_SSR = {
-    enabled: true,
-    maxSteps: 64,
-    maxDistance: 50,
-    thickness: 0.5,
-    resolution: 0.5,
-    jitter: 0.3,
-    intensity: 0.6,
-    roughnessFade: 0.8,
-    fresnelExponent: 3.0,
+  enabled: true,
+  maxSteps: 64,
+  maxDistance: 50,
+  thickness: 0.5,
+  resolution: 0.5,
+  jitter: 0.3,
+  intensity: 0.6,
+  roughnessFade: 0.8,
+  fresnelExponent: 3
 };
 function useSSR(renderer, scene, camera, configOverride) {
-    const [config, setConfigState] = useState({ ...DEFAULT_SSR, ...configOverride });
-    const [renderTarget, setRenderTarget] = useState(null);
-    const depthTarget = useRef(null);
-    const normalTarget = useRef(null);
-    const ssrMaterial = useRef(null);
-    const fullScreenQuad = useRef(null);
-    const orthoScene = useRef(new THREE.Scene());
-    const orthoCamera = useRef(new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1));
-    const setConfig = useCallback((partial) => {
-        setConfigState((prev) => ({ ...prev, ...partial }));
-    }, []);
-    // Setup render targets and shader
-    useEffect(() => {
-        if (!renderer || !camera) {
-            return;
+  const [config, setConfigState] = useState({ ...DEFAULT_SSR, ...configOverride });
+  const [renderTarget, setRenderTarget] = useState(null);
+  const depthTarget = useRef(null);
+  const normalTarget = useRef(null);
+  const ssrMaterial = useRef(null);
+  const fullScreenQuad = useRef(null);
+  const orthoScene = useRef(new THREE.Scene());
+  const orthoCamera = useRef(new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1));
+  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 sceneRT = new THREE.WebGLRenderTarget(width, height, {
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.LinearFilter,
+      format: THREE.RGBAFormat,
+      type: THREE.HalfFloatType
+    });
+    setRenderTarget(sceneRT);
+    const dTarget = new THREE.WebGLRenderTarget(width, height, {
+      minFilter: THREE.NearestFilter,
+      magFilter: THREE.NearestFilter,
+      format: THREE.RGBAFormat,
+      type: THREE.FloatType
+    });
+    dTarget.depthTexture = new THREE.DepthTexture(width, height);
+    dTarget.depthTexture.type = THREE.UnsignedIntType;
+    depthTarget.current = dTarget;
+    const nTarget = new THREE.WebGLRenderTarget(width, height, {
+      minFilter: THREE.NearestFilter,
+      magFilter: THREE.NearestFilter,
+      format: THREE.RGBAFormat
+    });
+    normalTarget.current = nTarget;
+    const material = new THREE.ShaderMaterial({
+      vertexShader: SSR_VERTEX,
+      fragmentShader: SSR_FRAGMENT,
+      uniforms: {
+        tDiffuse: { value: sceneRT.texture },
+        tDepth: { value: dTarget.depthTexture },
+        tNormal: { value: nTarget.texture },
+        projMatrix: { value: camera.projectionMatrix },
+        projInverseMatrix: { value: camera.projectionMatrixInverse },
+        viewMatrix: { value: camera.matrixWorldInverse },
+        resolution: { value: new THREE.Vector2(width, height) },
+        cameraNear: { value: camera.near },
+        cameraFar: { value: camera.far },
+        maxSteps: { value: config.maxSteps },
+        maxDistance: { value: config.maxDistance },
+        thickness: { value: config.thickness },
+        jitter: { value: config.jitter },
+        intensity: { value: config.intensity },
+        fresnelExponent: { value: config.fresnelExponent }
+      }
+    });
+    ssrMaterial.current = material;
+    const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
+    quad.frustumCulled = false;
+    const ortho = orthoScene.current;
+    ortho.add(quad);
+    fullScreenQuad.current = quad;
+    return () => {
+      sceneRT.dispose();
+      dTarget.dispose();
+      nTarget.dispose();
+      material.dispose();
+      ortho.remove(quad);
+    };
+  }, [renderer, camera, config.resolution]);
+  useEffect(() => {
+    if (!ssrMaterial.current) {
+      return;
+    }
+    const u = ssrMaterial.current.uniforms;
+    u.maxSteps.value = config.maxSteps;
+    u.maxDistance.value = config.maxDistance;
+    u.thickness.value = config.thickness;
+    u.jitter.value = config.jitter;
+    u.intensity.value = config.intensity;
+    u.fresnelExponent.value = config.fresnelExponent;
+  }, [config]);
+  const update = useCallback(() => {
+    if (!renderer || !scene || !camera || !config.enabled) {
+      return;
+    }
+    if (!renderTarget || !depthTarget.current) {
+      return;
+    }
+    renderer.setRenderTarget(depthTarget.current);
+    renderer.render(scene, camera);
+    renderer.setRenderTarget(renderTarget);
+    renderer.render(scene, camera);
+    if (ssrMaterial.current) {
+      ssrMaterial.current.uniforms.projMatrix.value.copy(camera.projectionMatrix);
+      ssrMaterial.current.uniforms.projInverseMatrix.value.copy(camera.projectionMatrixInverse);
+      ssrMaterial.current.uniforms.viewMatrix.value.copy(camera.matrixWorldInverse);
+    }
+    renderer.setRenderTarget(null);
+    renderer.render(orthoScene.current, orthoCamera.current);
+  }, [renderer, scene, camera, config.enabled, renderTarget]);
+  const dispose = useCallback(() => {
+    renderTarget?.dispose();
+    depthTarget.current?.dispose();
+    normalTarget.current?.dispose();
+    ssrMaterial.current?.dispose();
+  }, [renderTarget]);
+  return { config, setConfig, renderTarget, update, dispose };
+}
+const NiceSSR = ({
+  renderer,
+  scene,
+  camera,
+  config: configProp,
+  className = ""
+}) => {
+  const { t } = useNiceTranslation();
+  const { config, setConfig } = useSSR(renderer, scene, camera, configProp);
+  return /* @__PURE__ */ jsxs("div", { className: `nice-ssr ${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: "copy", size: 14 }),
+        " ",
+        t("ssr.screenSpaceReflections", "Screen-Space Reflections")
+      ] }),
+      /* @__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("ssr.enabled", "Enabled")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("ssr.maxSteps", "Max Steps: {maxSteps}").replace("{maxSteps}", String(config.maxSteps)),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 16,
+          max: 256,
+          step: 16,
+          value: config.maxSteps,
+          onChange: (e) => setConfig({ maxSteps: parseInt(e.target.value, 10) }),
+          style: { width: "100%" }
         }
-        const width = Math.floor(renderer.domElement.width * config.resolution);
-        const height = Math.floor(renderer.domElement.height * config.resolution);
-        // Scene render target
-        const sceneRT = new THREE.WebGLRenderTarget(width, height, {
-            minFilter: THREE.LinearFilter,
-            magFilter: THREE.LinearFilter,
-            format: THREE.RGBAFormat,
-            type: THREE.HalfFloatType,
-        });
-        setRenderTarget(sceneRT);
-        // Depth render target
-        const dTarget = new THREE.WebGLRenderTarget(width, height, {
-            minFilter: THREE.NearestFilter,
-            magFilter: THREE.NearestFilter,
-            format: THREE.RGBAFormat,
-            type: THREE.FloatType,
-        });
-        dTarget.depthTexture = new THREE.DepthTexture(width, height);
-        dTarget.depthTexture.type = THREE.UnsignedIntType;
-        depthTarget.current = dTarget;
-        // Normal render target
-        const nTarget = new THREE.WebGLRenderTarget(width, height, {
-            minFilter: THREE.NearestFilter,
-            magFilter: THREE.NearestFilter,
-            format: THREE.RGBAFormat,
-        });
-        normalTarget.current = nTarget;
-        // SSR shader material
-        const material = new THREE.ShaderMaterial({
-            vertexShader: SSR_VERTEX,
-            fragmentShader: SSR_FRAGMENT,
-            uniforms: {
-                tDiffuse: { value: sceneRT.texture },
-                tDepth: { value: dTarget.depthTexture },
-                tNormal: { value: nTarget.texture },
-                projMatrix: { value: camera.projectionMatrix },
-                projInverseMatrix: { value: camera.projectionMatrixInverse },
-                viewMatrix: { value: camera.matrixWorldInverse },
-                resolution: { value: new THREE.Vector2(width, height) },
-                cameraNear: { value: camera.near },
-                cameraFar: { value: camera.far },
-                maxSteps: { value: config.maxSteps },
-                maxDistance: { value: config.maxDistance },
-                thickness: { value: config.thickness },
-                jitter: { value: config.jitter },
-                intensity: { value: config.intensity },
-                fresnelExponent: { value: config.fresnelExponent },
-            },
-        });
-        ssrMaterial.current = material;
-        // Full-screen quad
-        const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
-        quad.frustumCulled = false;
-        const ortho = orthoScene.current;
-        ortho.add(quad);
-        fullScreenQuad.current = quad;
-        return () => {
-            sceneRT.dispose();
-            dTarget.dispose();
-            nTarget.dispose();
-            material.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 when config changes
-    useEffect(() => {
-        if (!ssrMaterial.current) {
-            return;
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("ssr.maxDistance", "Max Distance: {maxDistance}").replace(
+        "{maxDistance}",
+        String(config.maxDistance)
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 5,
+          max: 200,
+          step: 5,
+          value: config.maxDistance,
+          onChange: (e) => setConfig({ maxDistance: parseInt(e.target.value, 10) }),
+          style: { width: "100%" }
         }
-        const u = ssrMaterial.current.uniforms;
-        u.maxSteps.value = config.maxSteps;
-        u.maxDistance.value = config.maxDistance;
-        u.thickness.value = config.thickness;
-        u.jitter.value = config.jitter;
-        u.intensity.value = config.intensity;
-        u.fresnelExponent.value = config.fresnelExponent;
-    }, [config]);
-    const update = useCallback(() => {
-        if (!renderer || !scene || !camera || !config.enabled) {
-            return;
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("ssr.intensity", "Intensity: {intensity}").replace(
+        "{intensity}",
+        String(config.intensity.toFixed(2))
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 0,
+          max: 1,
+          step: 0.05,
+          value: config.intensity,
+          onChange: (e) => setConfig({ intensity: parseFloat(e.target.value) }),
+          style: { width: "100%" }
         }
-        if (!renderTarget || !depthTarget.current) {
-            return;
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("ssr.thickness", "Thickness: {thickness}").replace(
+        "{thickness}",
+        String(config.thickness.toFixed(2))
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 0.05,
+          max: 2,
+          step: 0.05,
+          value: config.thickness,
+          onChange: (e) => setConfig({ thickness: parseFloat(e.target.value) }),
+          style: { width: "100%" }
         }
-        // Render scene to render target (color + depth)
-        renderer.setRenderTarget(depthTarget.current);
-        renderer.render(scene, camera);
-        renderer.setRenderTarget(renderTarget);
-        renderer.render(scene, camera);
-        // Update camera matrices in uniforms
-        if (ssrMaterial.current) {
-            ssrMaterial.current.uniforms.projMatrix.value.copy(camera.projectionMatrix);
-            ssrMaterial.current.uniforms.projInverseMatrix.value.copy(camera.projectionMatrixInverse);
-            ssrMaterial.current.uniforms.viewMatrix.value.copy(camera.matrixWorldInverse);
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("ssr.jitter", "Jitter: {jitter}").replace("{jitter}", String(config.jitter.toFixed(2))),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 0,
+          max: 1,
+          step: 0.05,
+          value: config.jitter,
+          onChange: (e) => setConfig({ jitter: parseFloat(e.target.value) }),
+          style: { width: "100%" }
         }
-        // Render SSR pass to screen
-        renderer.setRenderTarget(null);
-        renderer.render(orthoScene.current, orthoCamera.current);
-    }, [renderer, scene, camera, config.enabled, renderTarget]);
-    const dispose = useCallback(() => {
-        var _a, _b, _c;
-        renderTarget === null || renderTarget === void 0 ? void 0 : renderTarget.dispose();
-        (_a = depthTarget.current) === null || _a === void 0 ? void 0 : _a.dispose();
-        (_b = normalTarget.current) === null || _b === void 0 ? void 0 : _b.dispose();
-        (_c = ssrMaterial.current) === null || _c === void 0 ? void 0 : _c.dispose();
-    }, [renderTarget]);
-    return { config, setConfig, renderTarget, update, dispose };
-}
-/* ── Component ── */
-const NiceSSR = ({ renderer, scene, camera, config: configProp, className = '', }) => {
-    const { t } = useNiceTranslation();
-    const { config, setConfig } = useSSR(renderer, scene, camera, configProp);
-    return (jsxs("div", { className: `nice-ssr ${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: "copy", size: 14 }), ' ', t('ssr.screenSpaceReflections', 'Screen-Space Reflections')] }), 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('ssr.enabled', 'Enabled')] })] }), jsxs("label", { children: [t('ssr.maxSteps', 'Max Steps: {maxSteps}').replace('{maxSteps}', String(config.maxSteps)), jsx("input", { type: "range", min: 16, max: 256, step: 16, value: config.maxSteps, onChange: (e) => setConfig({ maxSteps: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssr.maxDistance', 'Max Distance: {maxDistance}').replace('{maxDistance}', String(config.maxDistance)), jsx("input", { type: "range", min: 5, max: 200, step: 5, value: config.maxDistance, onChange: (e) => setConfig({ maxDistance: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssr.intensity', 'Intensity: {intensity}').replace('{intensity}', String(config.intensity.toFixed(2))), jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: config.intensity, onChange: (e) => setConfig({ intensity: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssr.thickness', 'Thickness: {thickness}').replace('{thickness}', String(config.thickness.toFixed(2))), jsx("input", { type: "range", min: 0.05, max: 2, step: 0.05, value: config.thickness, onChange: (e) => setConfig({ thickness: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssr.jitter', 'Jitter: {jitter}').replace('{jitter}', String(config.jitter.toFixed(2))), jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: config.jitter, onChange: (e) => setConfig({ jitter: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssr.resolutionScale', 'Resolution Scale: {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", { children: [t('ssr.fresnel', 'Fresnel: {fresnelExponent}').replace('{fresnelExponent}', String(config.fresnelExponent.toFixed(1))), jsx("input", { type: "range", min: 1, max: 8, step: 0.5, value: config.fresnelExponent, onChange: (e) => setConfig({ fresnelExponent: parseFloat(e.target.value) }), style: { width: '100%' } })] })] }));
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("ssr.resolutionScale", "Resolution Scale: {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%" }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      t("ssr.fresnel", "Fresnel: {fresnelExponent}").replace(
+        "{fresnelExponent}",
+        String(config.fresnelExponent.toFixed(1))
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 1,
+          max: 8,
+          step: 0.5,
+          value: config.fresnelExponent,
+          onChange: (e) => setConfig({ fresnelExponent: parseFloat(e.target.value) }),
+          style: { width: "100%" }
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  NiceSSR,
+  useSSR
 };
-
-export { NiceSSR, useSSR };