@nice2dev/ui-3d 1.3.15 → 1.3.16

package/dist/esm/rendering/NiceWebGPURenderer.js

@@ -1,225 +1,337 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { NiceIcon } from '@nice2dev/ui';
-import { useState, useRef, useEffect, useCallback } from 'react';
-import * as THREE from 'three';
-import { useNiceTranslation } from '../core/i18n.js';
-import { SOFT_SHADOW_MAP } from '../core/threeCompat.js';
-
-/* ── WebGPU detection ── */
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { NiceIcon } from "@nice2dev/ui";
+import { useState, useRef, useEffect, useCallback } from "react";
+import * as THREE from "three";
+import { useNiceTranslation } from "../core/i18n.js";
+import { SOFT_SHADOW_MAP } from "../core/threeCompat.js";
 async function detectWebGPU() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    if (!('gpu' in navigator)) {
-        return null;
+  if (!("gpu" in navigator)) {
+    return null;
+  }
+  try {
+    const adapter = await navigator.gpu.requestAdapter();
+    if (!adapter) {
+      return null;
     }
-    try {
-        const adapter = await navigator.gpu.requestAdapter();
-        if (!adapter) {
-            return null;
+    const legacy = adapter;
+    const info = adapter.info ?? await legacy.requestAdapterInfo?.() ?? {};
+    const device = await adapter.requestDevice();
+    const features = [];
+    adapter.features.forEach((f) => features.push(f));
+    device.destroy();
+    return {
+      isWebGPU: true,
+      adapterName: info.device ?? "Unknown",
+      vendor: info.vendor ?? "Unknown",
+      architecture: info.architecture ?? "Unknown",
+      maxTextureDimension2D: adapter.limits?.maxTextureDimension2D ?? 8192,
+      maxBufferSize: adapter.limits?.maxBufferSize ?? 268435456,
+      maxComputeWorkgroupSize: adapter.limits?.maxComputeWorkgroupSizeX ?? 256,
+      features
+    };
+  } catch {
+    return null;
+  }
+}
+function useWebGPURenderer(canvas, scene, camera, width = 800, height = 600, onRendererReady) {
+  const [renderer, setRenderer] = useState(null);
+  const [isWebGPU, setIsWebGPU] = useState(false);
+  const [capabilities, setCapabilities] = useState(null);
+  const [isReady, setIsReady] = useState(false);
+  const [toneMapping, setToneMappingState] = useState(
+    THREE.ACESFilmicToneMapping
+  );
+  const [toneMappingExposure, setToneMappingExposureState] = useState(1);
+  const [outputColorSpace, setOutputColorSpaceState] = useState(THREE.SRGBColorSpace);
+  const [pixelRatio, setPixelRatioState] = useState(
+    typeof window !== "undefined" ? window.devicePixelRatio : 1
+  );
+  const rendererRef = useRef(null);
+  useEffect(() => {
+    if (!canvas) {
+      return;
+    }
+    let disposed = false;
+    async function init() {
+      const gpuCaps = await detectWebGPU();
+      if (disposed) {
+        return;
+      }
+      let r;
+      let usingWebGPU = false;
+      if (gpuCaps) {
+        try {
+          const { WebGPURenderer } = await import("three/webgpu").catch(() => ({
+            WebGPURenderer: null
+          }));
+          if (WebGPURenderer && !disposed) {
+            r = new WebGPURenderer({ canvas, antialias: true });
+            usingWebGPU = true;
+          } else {
+            r = new THREE.WebGLRenderer({
+              canvas: canvas ?? void 0,
+              antialias: true,
+              alpha: true
+            });
+          }
+        } catch {
+          r = new THREE.WebGLRenderer({
+            canvas: canvas ?? void 0,
+            antialias: true,
+            alpha: true
+          });
         }
-        // `requestAdapterInfo()` was dropped from the WebGPU spec in favour of the
-        // `info` property. Keep the old call as a runtime fallback for browsers that
-        // still ship only the method.
-        const legacy = adapter;
-        const info = (_c = (_a = adapter.info) !== null && _a !== void 0 ? _a : (await ((_b = legacy.requestAdapterInfo) === null || _b === void 0 ? void 0 : _b.call(legacy)))) !== null && _c !== void 0 ? _c : {};
-        const device = await adapter.requestDevice();
-        const features = [];
-        adapter.features.forEach((f) => features.push(f));
-        device.destroy();
-        return {
-            isWebGPU: true,
-            adapterName: (_d = info.device) !== null && _d !== void 0 ? _d : 'Unknown',
-            vendor: (_e = info.vendor) !== null && _e !== void 0 ? _e : 'Unknown',
-            architecture: (_f = info.architecture) !== null && _f !== void 0 ? _f : 'Unknown',
-            maxTextureDimension2D: (_h = (_g = adapter.limits) === null || _g === void 0 ? void 0 : _g.maxTextureDimension2D) !== null && _h !== void 0 ? _h : 8192,
-            maxBufferSize: (_k = (_j = adapter.limits) === null || _j === void 0 ? void 0 : _j.maxBufferSize) !== null && _k !== void 0 ? _k : 268435456,
-            maxComputeWorkgroupSize: (_m = (_l = adapter.limits) === null || _l === void 0 ? void 0 : _l.maxComputeWorkgroupSizeX) !== null && _m !== void 0 ? _m : 256,
-            features,
-        };
+        setCapabilities(gpuCaps);
+      } else {
+        r = new THREE.WebGLRenderer({ canvas: canvas ?? void 0, antialias: true, alpha: true });
+        setCapabilities({
+          isWebGPU: false,
+          adapterName: r.getContext().getParameter(r.getContext().RENDERER) ?? "WebGL",
+          vendor: r.getContext().getParameter(r.getContext().VENDOR) ?? "Unknown",
+          architecture: "WebGL 2",
+          maxTextureDimension2D: r.getContext().getParameter(r.getContext().MAX_TEXTURE_SIZE),
+          maxBufferSize: 0,
+          maxComputeWorkgroupSize: 0,
+          features: []
+        });
+      }
+      if (disposed) {
+        r.dispose();
+        return;
+      }
+      r.setSize(width, height);
+      r.setPixelRatio(pixelRatio);
+      r.toneMapping = toneMapping;
+      r.toneMappingExposure = toneMappingExposure;
+      r.outputColorSpace = outputColorSpace;
+      r.shadowMap.enabled = true;
+      r.shadowMap.type = SOFT_SHADOW_MAP;
+      rendererRef.current = r;
+      setRenderer(r);
+      setIsWebGPU(usingWebGPU);
+      setIsReady(true);
+      onRendererReady?.(r, usingWebGPU);
+    }
+    init();
+    return () => {
+      disposed = true;
+      rendererRef.current?.dispose();
+    };
+  }, [canvas]);
+  useEffect(() => {
+    if (!rendererRef.current) {
+      return;
     }
-    catch (_o) {
-        return null;
+    rendererRef.current.toneMapping = toneMapping;
+  }, [toneMapping]);
+  useEffect(() => {
+    if (!rendererRef.current) {
+      return;
     }
+    rendererRef.current.toneMappingExposure = toneMappingExposure;
+  }, [toneMappingExposure]);
+  useEffect(() => {
+    if (!rendererRef.current) {
+      return;
+    }
+    rendererRef.current.outputColorSpace = outputColorSpace;
+  }, [outputColorSpace]);
+  useEffect(() => {
+    if (!rendererRef.current) {
+      return;
+    }
+    rendererRef.current.setPixelRatio(pixelRatio);
+  }, [pixelRatio]);
+  useEffect(() => {
+    if (!rendererRef.current) {
+      return;
+    }
+    rendererRef.current.setSize(width, height);
+  }, [width, height]);
+  const setToneMapping = useCallback((m) => {
+    setToneMappingState(m);
+  }, []);
+  const setToneMappingExposure = useCallback((e) => {
+    setToneMappingExposureState(e);
+  }, []);
+  const setOutputColorSpace = useCallback((s) => {
+    setOutputColorSpaceState(s);
+  }, []);
+  const setPixelRatio = useCallback((r) => {
+    setPixelRatioState(r);
+  }, []);
+  const dispose = useCallback(() => {
+    rendererRef.current?.dispose();
+    rendererRef.current = null;
+    setRenderer(null);
+    setIsReady(false);
+  }, []);
+  return {
+    renderer,
+    isWebGPU,
+    capabilities,
+    isReady,
+    toneMapping,
+    setToneMapping,
+    toneMappingExposure,
+    setToneMappingExposure,
+    outputColorSpace,
+    setOutputColorSpace,
+    pixelRatio,
+    setPixelRatio,
+    dispose
+  };
 }
-/* ── Hook ── */
-function useWebGPURenderer(canvas, scene, camera, width = 800, height = 600, onRendererReady) {
-    const [renderer, setRenderer] = useState(null);
-    const [isWebGPU, setIsWebGPU] = useState(false);
-    const [capabilities, setCapabilities] = useState(null);
-    const [isReady, setIsReady] = useState(false);
-    const [toneMapping, setToneMappingState] = useState(THREE.ACESFilmicToneMapping);
-    const [toneMappingExposure, setToneMappingExposureState] = useState(1.0);
-    const [outputColorSpace, setOutputColorSpaceState] = useState(THREE.SRGBColorSpace);
-    const [pixelRatio, setPixelRatioState] = useState(typeof window !== 'undefined' ? window.devicePixelRatio : 1);
-    const rendererRef = useRef(null);
-    // Initialize renderer
-    useEffect(() => {
-        if (!canvas) {
-            return;
-        }
-        let disposed = false;
-        async function init() {
-            var _a, _b;
-            const gpuCaps = await detectWebGPU();
-            if (disposed) {
-                return;
+const TONE_MAPPINGS = [
+  { value: THREE.NoToneMapping, label: "None" },
+  { value: THREE.LinearToneMapping, label: "Linear" },
+  { value: THREE.ReinhardToneMapping, label: "Reinhard" },
+  { value: THREE.CineonToneMapping, label: "Cineon" },
+  { value: THREE.ACESFilmicToneMapping, label: "ACES Filmic" },
+  { value: THREE.AgXToneMapping, label: "AgX" },
+  { value: THREE.NeutralToneMapping, label: "Neutral" }
+];
+const NiceWebGPURenderer = ({
+  canvas,
+  scene,
+  camera,
+  width,
+  height,
+  onRendererReady,
+  className = ""
+}) => {
+  const { t } = useNiceTranslation();
+  const {
+    isWebGPU,
+    capabilities,
+    isReady,
+    toneMapping,
+    setToneMapping,
+    toneMappingExposure,
+    setToneMappingExposure,
+    outputColorSpace,
+    setOutputColorSpace,
+    pixelRatio,
+    setPixelRatio
+  } = useWebGPURenderer(canvas, scene, camera, width, height, onRendererReady);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `nice-webgpu-renderer ${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: "monitor", size: 14 }),
+            " ",
+            t("webGPURenderer.renderer", "Renderer")
+          ] }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: 10,
+                padding: "2px 6px",
+                borderRadius: 4,
+                background: isWebGPU ? "var(--nice-success, #22c55e)" : "var(--nice-warning, #f59e0b)",
+                color: "var(--nice-color-white, #fff)"
+              },
+              children: isWebGPU ? "WebGPU" : "WebGL"
             }
-            let r;
-            let usingWebGPU = false;
-            if (gpuCaps) {
-                // Try the WebGPU renderer. Since three r167 it lives in the `three/webgpu` entry; the
-                // old `examples/jsm/renderers/webgpu/WebGPURenderer.js` path no longer exists, and a
-                // bundler that cannot resolve a literal dynamic import fails the whole module.
-                try {
-                    const { WebGPURenderer } = await import('three/webgpu').catch(() => ({
-                        WebGPURenderer: null,
-                    }));
-                    if (WebGPURenderer && !disposed) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Three.js WebGPU renderer is loaded via dynamic import; constructor signature mirrors WebGLRenderer
-                        r = new WebGPURenderer({ canvas, antialias: true });
-                        usingWebGPU = true;
-                    }
-                    else {
-                        r = new THREE.WebGLRenderer({
-                            canvas: canvas !== null && canvas !== void 0 ? canvas : undefined,
-                            antialias: true,
-                            alpha: true,
-                        });
-                    }
-                }
-                catch (_c) {
-                    r = new THREE.WebGLRenderer({
-                        canvas: canvas !== null && canvas !== void 0 ? canvas : undefined,
-                        antialias: true,
-                        alpha: true,
-                    });
-                }
-                setCapabilities(gpuCaps);
+          )
+        ] }),
+        !isReady && /* @__PURE__ */ jsx("div", { style: { opacity: 0.6, fontSize: 11 }, children: t("webGPURenderer.initializing", "Initializing…") }),
+        capabilities && /* @__PURE__ */ jsxs("div", { style: { fontSize: 10, opacity: 0.7, lineHeight: 1.5 }, children: [
+          t("webGPURenderer.gpu", "GPU: {adapterName}").replace(
+            "{adapterName}",
+            String(capabilities.adapterName)
+          ),
+          /* @__PURE__ */ jsx("br", {}),
+          t("webGPURenderer.vendor", "Vendor: {vendor}").replace(
+            "{vendor}",
+            String(capabilities.vendor)
+          ),
+          /* @__PURE__ */ jsx("br", {}),
+          t("webGPURenderer.maxTexturePx", "Max Texture: {maxTextureDimension2D}px").replace(
+            "{maxTextureDimension2D}",
+            String(capabilities.maxTextureDimension2D)
+          ),
+          capabilities.features.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("br", {}),
+            t("webGPURenderer.features", "Features: {features}").replace(
+              "{features}",
+              String(capabilities.features.length)
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          t("webGPURenderer.toneMapping", "Tone Mapping:"),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: toneMapping,
+              onChange: (e) => setToneMapping(parseInt(e.target.value, 10)),
+              style: { width: "100%", marginTop: 2 },
+              children: TONE_MAPPINGS.map((tm) => /* @__PURE__ */ jsx("option", { value: tm.value, children: tm.label }, tm.value))
             }
-            else {
-                r = new THREE.WebGLRenderer({ canvas: canvas !== null && canvas !== void 0 ? canvas : undefined, antialias: true, alpha: true });
-                setCapabilities({
-                    isWebGPU: false,
-                    adapterName: (_a = r.getContext().getParameter(r.getContext().RENDERER)) !== null && _a !== void 0 ? _a : 'WebGL',
-                    vendor: (_b = r.getContext().getParameter(r.getContext().VENDOR)) !== null && _b !== void 0 ? _b : 'Unknown',
-                    architecture: 'WebGL 2',
-                    maxTextureDimension2D: r.getContext().getParameter(r.getContext().MAX_TEXTURE_SIZE),
-                    maxBufferSize: 0,
-                    maxComputeWorkgroupSize: 0,
-                    features: [],
-                });
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          t("webGPURenderer.exposure", "Exposure: {toneMappingExposure}").replace(
+            "{toneMappingExposure}",
+            String(toneMappingExposure.toFixed(2))
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 0.1,
+              max: 3,
+              step: 0.05,
+              value: toneMappingExposure,
+              onChange: (e) => setToneMappingExposure(parseFloat(e.target.value)),
+              style: { width: "100%" }
             }
-            if (disposed) {
-                r.dispose();
-                return;
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          t("webGPURenderer.outputColorSpace", "Output Color Space:"),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: outputColorSpace,
+              onChange: (e) => setOutputColorSpace(e.target.value),
+              style: { width: "100%", marginTop: 2 },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: THREE.SRGBColorSpace, children: "sRGB" }),
+                /* @__PURE__ */ jsx("option", { value: THREE.LinearSRGBColorSpace, children: t("webGPURenderer.linearSrgb", "Linear sRGB") })
+              ]
             }
-            r.setSize(width, height);
-            r.setPixelRatio(pixelRatio);
-            r.toneMapping = toneMapping;
-            r.toneMappingExposure = toneMappingExposure;
-            r.outputColorSpace = outputColorSpace;
-            r.shadowMap.enabled = true;
-            r.shadowMap.type = SOFT_SHADOW_MAP;
-            rendererRef.current = r;
-            setRenderer(r);
-            setIsWebGPU(usingWebGPU);
-            setIsReady(true);
-            onRendererReady === null || onRendererReady === void 0 ? void 0 : onRendererReady(r, usingWebGPU);
-        }
-        init();
-        return () => {
-            var _a;
-            disposed = true;
-            (_a = rendererRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- one renderer per canvas, made with the first settings; the effects below apply later changes, and onRendererReady reports that one renderer
-    }, [canvas]);
-    // Update renderer settings reactively
-    useEffect(() => {
-        if (!rendererRef.current) {
-            return;
-        }
-        rendererRef.current.toneMapping = toneMapping;
-    }, [toneMapping]);
-    useEffect(() => {
-        if (!rendererRef.current) {
-            return;
-        }
-        rendererRef.current.toneMappingExposure = toneMappingExposure;
-    }, [toneMappingExposure]);
-    useEffect(() => {
-        if (!rendererRef.current) {
-            return;
-        }
-        rendererRef.current.outputColorSpace = outputColorSpace;
-    }, [outputColorSpace]);
-    useEffect(() => {
-        if (!rendererRef.current) {
-            return;
-        }
-        rendererRef.current.setPixelRatio(pixelRatio);
-    }, [pixelRatio]);
-    useEffect(() => {
-        if (!rendererRef.current) {
-            return;
-        }
-        rendererRef.current.setSize(width, height);
-    }, [width, height]);
-    const setToneMapping = useCallback((m) => {
-        setToneMappingState(m);
-    }, []);
-    const setToneMappingExposure = useCallback((e) => {
-        setToneMappingExposureState(e);
-    }, []);
-    const setOutputColorSpace = useCallback((s) => {
-        setOutputColorSpaceState(s);
-    }, []);
-    const setPixelRatio = useCallback((r) => {
-        setPixelRatioState(r);
-    }, []);
-    const dispose = useCallback(() => {
-        var _a;
-        (_a = rendererRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
-        rendererRef.current = null;
-        setRenderer(null);
-        setIsReady(false);
-    }, []);
-    return {
-        renderer,
-        isWebGPU,
-        capabilities,
-        isReady,
-        toneMapping,
-        setToneMapping,
-        toneMappingExposure,
-        setToneMappingExposure,
-        outputColorSpace,
-        setOutputColorSpace,
-        pixelRatio,
-        setPixelRatio,
-        dispose,
-    };
-}
-/* ── Tone mapping options ── */
-const TONE_MAPPINGS = [
-    { value: THREE.NoToneMapping, label: 'None' },
-    { value: THREE.LinearToneMapping, label: 'Linear' },
-    { value: THREE.ReinhardToneMapping, label: 'Reinhard' },
-    { value: THREE.CineonToneMapping, label: 'Cineon' },
-    { value: THREE.ACESFilmicToneMapping, label: 'ACES Filmic' },
-    { value: THREE.AgXToneMapping, label: 'AgX' },
-    { value: THREE.NeutralToneMapping, label: 'Neutral' },
-];
-/* ── Component ── */
-const NiceWebGPURenderer = ({ canvas, scene, camera, width, height, onRendererReady, className = '', }) => {
-    const { t } = useNiceTranslation();
-    const { isWebGPU, capabilities, isReady, toneMapping, setToneMapping, toneMappingExposure, setToneMappingExposure, outputColorSpace, setOutputColorSpace, pixelRatio, setPixelRatio, } = useWebGPURenderer(canvas, scene, camera, width, height, onRendererReady);
-    return (jsxs("div", { className: `nice-webgpu-renderer ${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: "monitor", size: 14 }), " ", t('webGPURenderer.renderer', 'Renderer')] }), jsx("span", { style: {
-                            fontSize: 10,
-                            padding: '2px 6px',
-                            borderRadius: 4,
-                            background: isWebGPU ? 'var(--nice-success, #22c55e)' : 'var(--nice-warning, #f59e0b)',
-                            color: 'var(--nice-color-white, #fff)',
-                        }, children: isWebGPU ? 'WebGPU' : 'WebGL' })] }), !isReady && (jsx("div", { style: { opacity: 0.6, fontSize: 11 }, children: t('webGPURenderer.initializing', 'Initializing…') })), capabilities && (jsxs("div", { style: { fontSize: 10, opacity: 0.7, lineHeight: 1.5 }, children: [t('webGPURenderer.gpu', 'GPU: {adapterName}').replace('{adapterName}', String(capabilities.adapterName)), jsx("br", {}), t('webGPURenderer.vendor', 'Vendor: {vendor}').replace('{vendor}', String(capabilities.vendor)), jsx("br", {}), t('webGPURenderer.maxTexturePx', 'Max Texture: {maxTextureDimension2D}px').replace('{maxTextureDimension2D}', String(capabilities.maxTextureDimension2D)), capabilities.features.length > 0 && (jsxs(Fragment, { children: [jsx("br", {}), t('webGPURenderer.features', 'Features: {features}').replace('{features}', String(capabilities.features.length))] }))] })), jsxs("label", { children: [t('webGPURenderer.toneMapping', 'Tone Mapping:'), jsx("select", { value: toneMapping, onChange: (e) => setToneMapping(parseInt(e.target.value, 10)), style: { width: '100%', marginTop: 2 }, children: TONE_MAPPINGS.map((tm) => (jsx("option", { value: tm.value, children: tm.label }, tm.value))) })] }), jsxs("label", { children: [t('webGPURenderer.exposure', 'Exposure: {toneMappingExposure}').replace('{toneMappingExposure}', String(toneMappingExposure.toFixed(2))), jsx("input", { type: "range", min: 0.1, max: 3, step: 0.05, value: toneMappingExposure, onChange: (e) => setToneMappingExposure(parseFloat(e.target.value)), style: { width: '100%' } })] }), jsxs("label", { children: [t('webGPURenderer.outputColorSpace', 'Output Color Space:'), jsxs("select", { value: outputColorSpace, onChange: (e) => setOutputColorSpace(e.target.value), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: THREE.SRGBColorSpace, children: "sRGB" }), jsx("option", { value: THREE.LinearSRGBColorSpace, children: t('webGPURenderer.linearSrgb', 'Linear sRGB') })] })] }), jsxs("label", { children: [t('webGPURenderer.pixelRatio', 'Pixel Ratio: {pixelRatio}').replace('{pixelRatio}', String(pixelRatio.toFixed(1))), jsx("input", { type: "range", min: 0.5, max: 3, step: 0.5, value: pixelRatio, onChange: (e) => setPixelRatio(parseFloat(e.target.value)), style: { width: '100%' } })] })] }));
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          t("webGPURenderer.pixelRatio", "Pixel Ratio: {pixelRatio}").replace(
+            "{pixelRatio}",
+            String(pixelRatio.toFixed(1))
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 0.5,
+              max: 3,
+              step: 0.5,
+              value: pixelRatio,
+              onChange: (e) => setPixelRatio(parseFloat(e.target.value)),
+              style: { width: "100%" }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  NiceWebGPURenderer,
+  useWebGPURenderer
 };
-
-export { NiceWebGPURenderer, useWebGPURenderer };