@react-three/drei 9.84.2 → 9.85.0

package/core/Cloud.js

@@ -1,58 +1,224 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { useFrame } from '@react-three/fiber';
-import { Billboard } from './Billboard.js';
-import { Plane } from './shapes.js';
+import { Quaternion, Vector3, DynamicDrawUsage, MeshLambertMaterial, Matrix4, Color } from 'three';
+import { extend, useFrame, applyProps } from '@react-three/fiber';
 import { useTexture } from './useTexture.js';
+import { v4 } from 'uuid';
 
 const CLOUD_URL = 'https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png';
-function Cloud({
-  opacity = 0.5,
-  speed = 0.4,
-  width = 10,
-  depth = 1.5,
-  segments = 20,
+const parentMatrix =
+/*@__PURE__*/
+/*@__PURE__*/
+new Matrix4();
+const translation =
+/*@__PURE__*/
+/*@__PURE__*/
+new Vector3();
+const rotation =
+/*@__PURE__*/
+/*@__PURE__*/
+new Quaternion();
+const cpos =
+/*@__PURE__*/
+/*@__PURE__*/
+new Vector3();
+const cquat =
+/*@__PURE__*/
+/*@__PURE__*/
+new Quaternion();
+const scale =
+/*@__PURE__*/
+/*@__PURE__*/
+new Vector3();
+const context = /*@__PURE__*/React.createContext(null);
+const Clouds = /*@__PURE__*/React.forwardRef(({
+  children,
+  material = MeshLambertMaterial,
   texture = CLOUD_URL,
-  color = '#ffffff',
-  depthTest = true,
+  range,
+  limit = 200,
   ...props
-}) {
-  const group = React.useRef(null);
+}, fref) => {
+  var _image$width, _image$height;
+  const CloudMaterial = React.useMemo(() => {
+    return class extends material {
+      constructor() {
+        super();
+        this.onBeforeCompile = shader => {
+          shader.vertexShader = `attribute float opacity;
+               varying float vOpacity;
+              ` + shader.vertexShader.replace('#include <fog_vertex>', `#include <fog_vertex>
+                 vOpacity = opacity;
+                `);
+          shader.fragmentShader = `varying float vOpacity;
+              ` + shader.fragmentShader.replace('#include <opaque_fragment>', `#include <opaque_fragment>
+                 gl_FragColor = vec4(outgoingLight, diffuseColor.a * vOpacity);
+                `);
+        };
+      }
+    };
+  }, [material]);
+  extend({
+    CloudMaterial
+  });
+  const instance = React.useRef(null);
+  const clouds = React.useRef([]);
+  const opacities = React.useMemo(() => new Float32Array(Array.from({
+    length: limit
+  }, () => 1)), [limit]);
+  const colors = React.useMemo(() => new Float32Array(Array.from({
+    length: limit
+  }, () => [1, 1, 1]).flat()), [limit]);
   const cloudTexture = useTexture(texture);
-  const clouds = React.useMemo(() => [...new Array(segments)].map((_, index) => ({
-    x: width / 2 - Math.random() * width,
-    y: width / 2 - Math.random() * width,
-    scale: 0.4 + Math.sin((index + 1) / segments * Math.PI) * ((0.2 + Math.random()) * 10),
-    density: Math.max(0.2, Math.random()),
-    rotation: Math.max(0.002, 0.005 * Math.random()) * speed
-  })), [width, segments, speed]);
-  useFrame(state => {
-    var _group$current;
-    return (_group$current = group.current) == null ? void 0 : _group$current.children.forEach((cloud, index) => {
-      cloud.children[0].rotation.z += clouds[index].rotation;
-      cloud.children[0].scale.setScalar(clouds[index].scale + (1 + Math.sin(state.clock.getElapsedTime() / 10)) / 2 * index / 10);
-    });
+  let t = 0;
+  let index = 0;
+  let config;
+  const qat = new Quaternion();
+  const dir = new Vector3(0, 0, 1);
+  useFrame((state, delta) => {
+    t = state.clock.getElapsedTime();
+    parentMatrix.copy(instance.current.matrixWorld).invert();
+    state.camera.matrixWorld.decompose(cpos, cquat, scale);
+    for (index = 0; index < clouds.current.length; index++) {
+      config = clouds.current[index];
+      config.ref.current.matrixWorld.decompose(translation, rotation, scale);
+      translation.add(config.position).applyQuaternion(rotation);
+      rotation.copy(cquat).multiply(qat.setFromAxisAngle(dir, config.rotation += delta * config.rotationFactor));
+      scale.addScalar(config.volume + (1 + Math.sin(t * config.density * config.speed)) / 2 * config.growth);
+      config.matrix.compose(translation, rotation, scale).premultiply(parentMatrix);
+      config.dist = translation.distanceTo(cpos);
+    }
+
+    // Depth-sort. Instances have no specific draw order, w/o sorting z would be random
+    clouds.current.sort((a, b) => b.dist - a.dist);
+    for (index = 0; index < clouds.current.length; index++) {
+      config = clouds.current[index];
+      opacities[index] = config.opacity * (config.dist < config.fade - 1 ? config.dist / config.fade : 1);
+      instance.current.setMatrixAt(index, config.matrix);
+      instance.current.setColorAt(index, config.color);
+    }
+
+    // Update instance
+    instance.current.geometry.attributes.opacity.needsUpdate = true;
+    instance.current.instanceMatrix.needsUpdate = true;
+    if (instance.current.instanceColor) instance.current.instanceColor.needsUpdate = true;
   });
-  return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement("group", {
-    position: [0, 0, segments / 2 * depth],
-    ref: group
-  }, clouds.map(({
-    x,
-    y,
-    scale,
-    density
-  }, index) => /*#__PURE__*/React.createElement(Billboard, {
-    key: index,
-    position: [x, y, -index * depth]
-  }, /*#__PURE__*/React.createElement(Plane, {
-    scale: scale,
-    rotation: [0, 0, 0]
-  }, /*#__PURE__*/React.createElement("meshStandardMaterial", {
+  React.useLayoutEffect(() => {
+    const updateRange = Math.min(limit, range !== undefined ? range : limit, clouds.current.length);
+    instance.current.count = updateRange;
+    instance.current.instanceMatrix.updateRange.count = updateRange * 16;
+    if (instance.current.instanceColor) instance.current.instanceColor.updateRange.count = updateRange * 3;
+    instance.current.geometry.attributes.opacity.updateRange.count = updateRange;
+  });
+  let imageBounds = [(_image$width = cloudTexture.image.width) !== null && _image$width !== void 0 ? _image$width : 1, (_image$height = cloudTexture.image.height) !== null && _image$height !== void 0 ? _image$height : 1];
+  let max = Math.max(imageBounds[0], imageBounds[1]);
+  imageBounds = [imageBounds[0] / max, imageBounds[1] / max];
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: fref
+  }, props), /*#__PURE__*/React.createElement(context.Provider, {
+    value: clouds
+  }, children, /*#__PURE__*/React.createElement("instancedMesh", {
+    matrixAutoUpdate: false,
+    ref: instance,
+    args: [null, null, limit]
+  }, /*#__PURE__*/React.createElement("instancedBufferAttribute", {
+    usage: DynamicDrawUsage,
+    attach: "instanceColor",
+    args: [colors, 3]
+  }), /*#__PURE__*/React.createElement("planeGeometry", {
+    args: [...imageBounds]
+  }, /*#__PURE__*/React.createElement("instancedBufferAttribute", {
+    usage: DynamicDrawUsage,
+    attach: "attributes-opacity",
+    args: [opacities, 1]
+  })), /*#__PURE__*/React.createElement("cloudMaterial", {
+    key: material.name,
     map: cloudTexture,
     transparent: true,
-    opacity: scale / 6 * density * opacity,
-    depthTest: depthTest,
-    color: color
-  }))))));
-}
+    depthWrite: false
+  }))));
+});
+const CloudInstance = /*@__PURE__*/React.forwardRef(({
+  opacity = 1,
+  speed = 0,
+  bounds = [5, 1, 1],
+  segments = 20,
+  color = '#ffffff',
+  fade = 10,
+  volume = 6,
+  growth = 4,
+  seed = Math.random(),
+  ...props
+}, fref) => {
+  function random() {
+    const x = Math.sin(seed++) * 10000;
+    return x - Math.floor(x);
+  }
+  const parent = React.useContext(context);
+  const ref = React.useRef(null);
+  const [uuid] = React.useState(() => v4());
+  const clouds = React.useMemo(() => {
+    return [...new Array(segments)].map((_, index) => ({
+      segments,
+      bounds: new Vector3(1, 1, 1),
+      position: new Vector3(),
+      uuid,
+      index,
+      ref,
+      dist: 0,
+      matrix: new Matrix4(),
+      color: new Color(),
+      rotation: index * (Math.PI / segments)
+    }));
+  }, [segments, uuid]);
+  React.useLayoutEffect(() => {
+    clouds.forEach((cloud, index) => {
+      applyProps(cloud, {
+        color,
+        speed,
+        growth,
+        opacity,
+        fade,
+        bounds,
+        density: Math.max(0.5, random()),
+        rotationFactor: Math.max(0.2, 0.5 * random()) * speed
+      });
+      // Only distribute randomly if there are multiple segments
+      if (segments > 1) cloud.position.copy(cloud.bounds).multiply({
+        x: random() * 2 - 1,
+        y: random() * 2 - 1,
+        z: random() * 2 - 1
+      });
+      const xDiff = Math.abs(cloud.position.x);
+      const yDiff = Math.abs(cloud.position.y);
+      const zDiff = Math.abs(cloud.position.z);
+      const max = Math.max(xDiff, yDiff, zDiff);
+      cloud.length = 1;
+      if (xDiff === max) cloud.length -= xDiff / cloud.bounds.x;
+      if (yDiff === max) cloud.length -= yDiff / cloud.bounds.y;
+      if (zDiff === max) cloud.length -= zDiff / cloud.bounds.z;
+      cloud.volume = Math.max(0.25, cloud.length) * volume;
+    });
+  }, [bounds, fade, color, opacity, growth, volume, seed, segments, speed]);
+  React.useLayoutEffect(() => {
+    const temp = clouds;
+    parent.current = [...parent.current, ...temp];
+    return () => {
+      parent.current = parent.current.filter(item => item.uuid !== uuid);
+    };
+  }, [clouds]);
+  React.useImperativeHandle(fref, () => ref.current, []);
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: ref
+  }, props));
+});
+const Cloud = /*@__PURE__*/React.forwardRef((props, fref) => {
+  const parent = React.useContext(context);
+  if (parent) return /*#__PURE__*/React.createElement(CloudInstance, _extends({
+    ref: fref
+  }, props));else return /*#__PURE__*/React.createElement(Clouds, null, /*#__PURE__*/React.createElement(CloudInstance, _extends({
+    ref: fref
+  }, props)));
+});
 
-export { Cloud };
+export { Cloud, CloudInstance, Clouds };

package/core/ContactShadows.js

@@ -4,7 +4,7 @@ import * as THREE from 'three';
 import { useThree, useFrame } from '@react-three/fiber';
 import { HorizontalBlurShader, VerticalBlurShader } from 'three-stdlib';
 
-const ContactShadows = /*#__PURE__*/React.forwardRef(({
+const ContactShadows = /*@__PURE__*/React.forwardRef(({
   scale = 10,
   frames = Infinity,
   opacity = 1,

package/core/CubicBezierLine.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Vector3, CubicBezierCurve3 } from 'three';
 import { Line } from './Line.js';
 
-const CubicBezierLine = /*#__PURE__*/React.forwardRef(function CubicBezierLine({
+const CubicBezierLine = /*@__PURE__*/React.forwardRef(function CubicBezierLine({
   start,
   end,
   midA,

package/core/CurveModifier.js

@@ -3,7 +3,7 @@ import * as THREE from 'three';
 import { createPortal } from '@react-three/fiber';
 import { Flow } from 'three-stdlib';
 
-const CurveModifier = /*#__PURE__*/React.forwardRef(({
+const CurveModifier = /*@__PURE__*/React.forwardRef(({
   children,
   curve
 }, ref) => {

package/core/Decal.js

@@ -16,7 +16,7 @@ function vecToArray(vec = [0, 0, 0]) {
     return [vec, vec, vec];
   }
 }
-const Decal = /*#__PURE__*/React.forwardRef(function Decal({
+const Decal = /*@__PURE__*/React.forwardRef(function Decal({
   debug,
   depthTest = false,
   polygonOffsetFactor = -10,

package/core/Detailed.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useFrame } from '@react-three/fiber';
 import mergeRefs from 'react-merge-refs';
 
-const Detailed = /*#__PURE__*/React.forwardRef(({
+const Detailed = /*@__PURE__*/React.forwardRef(({
   children,
   hysteresis = 0,
   distances,

package/core/DeviceOrientationControls.js

@@ -3,7 +3,7 @@ import { useThree, useFrame } from '@react-three/fiber';
 import * as React from 'react';
 import { DeviceOrientationControls as DeviceOrientationControls$1 } from 'three-stdlib';
 
-const DeviceOrientationControls = /*#__PURE__*/React.forwardRef((props, ref) => {
+const DeviceOrientationControls = /*@__PURE__*/React.forwardRef((props, ref) => {
   const {
     camera,
     onChange,

package/core/Edges.js

@@ -2,7 +2,7 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
 
-const Edges = /*#__PURE__*/React.forwardRef(({
+const Edges = /*@__PURE__*/React.forwardRef(({
   userData,
   children,
   geometry,

package/core/Effects.js

@@ -13,7 +13,7 @@ const isWebGL2Available = () => {
     return false;
   }
 };
-const Effects = /*#__PURE__*/React.forwardRef(({
+const Effects = /*@__PURE__*/React.forwardRef(({
   children,
   multisamping = 8,
   renderIndex = 1,

package/core/Example.js

@@ -3,7 +3,7 @@ import { Text3D } from './Text3D.js';
 import { Center } from './Center.js';
 
 /* eslint react-hooks/exhaustive-deps: 1 */
-const Example = /*#__PURE__*/React.forwardRef(({
+const Example = /*@__PURE__*/React.forwardRef(({
   font,
   color = '#cbcbcb',
   bevelSize = 0.04,

package/core/FaceControls.js

@@ -23,8 +23,8 @@ function localToLocal(objSrc, v, objDst) {
 //
 //
 //
-const FaceControlsContext = /*#__PURE__*/createContext({});
-const FaceControls = /*#__PURE__*/forwardRef(({
+const FaceControlsContext = /*@__PURE__*/createContext({});
+const FaceControls = /*@__PURE__*/forwardRef(({
   camera,
   autostart = true,
   webcam = true,
@@ -233,7 +233,7 @@ const useFaceControls = () => useContext(FaceControlsContext);
 //
 // Webcam
 //
-const Webcam = /*#__PURE__*/forwardRef(({
+const Webcam = /*@__PURE__*/forwardRef(({
   videoTextureSrc,
   autostart = true
 }, fref) => {
@@ -275,7 +275,7 @@ const Webcam = /*#__PURE__*/forwardRef(({
 //
 // VideoTexture
 //
-const VideoTexture = /*#__PURE__*/forwardRef(({
+const VideoTexture = /*@__PURE__*/forwardRef(({
   src,
   start
 }, fref) => {

package/core/FaceLandmarker.js

@@ -4,7 +4,7 @@ import { FilesetResolver, FaceLandmarker as FaceLandmarker$1 } from '@mediapipe/
 import { suspend, clear } from 'suspend-react';
 
 /* eslint react-hooks/exhaustive-deps: 1 */
-const FaceLandmarkerContext = /*#__PURE__*/createContext({});
+const FaceLandmarkerContext = /*@__PURE__*/createContext({});
 const FaceLandmarkerDefaults = {
   basePath: 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.2/wasm',
   options: {

package/core/Facemesh.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as THREE from 'three';
 export type MediaPipeFaceMesh = typeof FacemeshDatas.SAMPLE_FACE;
-export type MediaPipePoints = typeof FacemeshDatas.SAMPLE_FACE.keypoints | typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceLandmarks[0];
+export type MediaPipePoints = typeof FacemeshDatas.SAMPLE_FACE.keypoints | (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceLandmarks)[0];
 export type FacemeshProps = {
     points?: MediaPipePoints;
     face?: MediaPipeFaceMesh;
@@ -10,10 +10,10 @@ export type FacemeshProps = {
     depth?: number;
     verticalTri?: [number, number, number];
     origin?: number | THREE.Vector3;
-    facialTransformationMatrix?: typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes[0];
+    facialTransformationMatrix?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes)[0];
     offset?: boolean;
     offsetScalar?: number;
-    faceBlendshapes?: typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes[0];
+    faceBlendshapes?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes)[0];
     eyes?: boolean;
     eyesAsOrigin?: boolean;
     debug?: boolean;

package/core/Facemesh.js

@@ -4,8 +4,8 @@ import { useThree } from '@react-three/fiber';
 import { Line } from './Line.js';
 
 /* eslint react-hooks/exhaustive-deps: 1 */
-const defaultLookAt = new THREE.Vector3(0, 0, -1);
-const normal = function () {
+const defaultLookAt = /*@__PURE__*/new THREE.Vector3(0, 0, -1);
+const normal = /*@__PURE__*/function () {
   const a = new THREE.Vector3();
   const b = new THREE.Vector3();
   const c = new THREE.Vector3();
@@ -23,7 +23,7 @@ const normal = function () {
 function mean(v1, v2) {
   return v1.clone().add(v2).multiplyScalar(0.5);
 }
-const Facemesh = /*#__PURE__*/React.forwardRef(({
+const Facemesh = /*@__PURE__*/React.forwardRef(({
   points = FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceLandmarks[0],
   face,
   facialTransformationMatrix,
@@ -241,7 +241,7 @@ const FacemeshEyeDefaults = {
     vertical: 90
   }
 };
-const FacemeshEye = /*#__PURE__*/React.forwardRef(({
+const FacemeshEye = /*@__PURE__*/React.forwardRef(({
   side,
   debug = true
 }, fref) => {

package/core/FirstPersonControls.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useThree, useFrame } from '@react-three/fiber';
 import { FirstPersonControls as FirstPersonControls$1 } from 'three-stdlib';
 
-const FirstPersonControls = /*#__PURE__*/React.forwardRef(({
+const FirstPersonControls = /*@__PURE__*/React.forwardRef(({
   domElement,
   makeDefault,
   ...props

package/core/Float.js

@@ -3,7 +3,7 @@ import { useFrame } from '@react-three/fiber';
 import mergeRefs from 'react-merge-refs';
 import * as THREE from 'three';
 
-const Float = /*#__PURE__*/React.forwardRef(({
+const Float = /*@__PURE__*/React.forwardRef(({
   children,
   enabled = true,
   speed = 1,

package/core/FlyControls.js

@@ -3,7 +3,7 @@ import { useThree, useFrame } from '@react-three/fiber';
 import * as React from 'react';
 import { FlyControls as FlyControls$1 } from 'three-stdlib';
 
-const FlyControls = /*#__PURE__*/React.forwardRef(({
+const FlyControls = /*@__PURE__*/React.forwardRef(({
   domElement,
   ...props
 }, fref) => {

package/core/GizmoHelper.js

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import { useThree, useFrame } from '@react-three/fiber';
-import { Object3D, Matrix4, Quaternion, Vector3 } from 'three';
+import { Vector3, Object3D, Matrix4, Quaternion } from 'three';
 import { OrthographicCamera } from './OrthographicCamera.js';
 import { Hud } from './Hud.js';
 
-const Context = /*#__PURE__*/React.createContext({});
+const Context = /*@__PURE__*/React.createContext({});
 const useGizmoContext = () => {
   return React.useContext(Context);
 };
 const turnRate = 2 * Math.PI; // turn rate in angles per second
-const dummy = new Object3D();
-const matrix = new Matrix4();
-const [q1, q2] = [new Quaternion(), new Quaternion()];
-const target = new Vector3();
-const targetPosition = new Vector3();
+const dummy = /*@__PURE__*/new Object3D();
+const matrix = /*@__PURE__*/new Matrix4();
+const [q1, q2] = [/*@__PURE__*/new Quaternion(), /*@__PURE__*/new Quaternion()];
+const target = /*@__PURE__*/new Vector3();
+const targetPosition = /*@__PURE__*/new Vector3();
 const isOrbitControls = controls => {
   return 'minPolarAngle' in controls;
 };

package/core/GizmoViewcube.js

@@ -12,10 +12,10 @@ const colors = {
 };
 const defaultFaces = ['Right', 'Left', 'Top', 'Bottom', 'Front', 'Back'];
 const makePositionVector = xyz => new Vector3(...xyz).multiplyScalar(0.38);
-const corners = [[1, 1, 1], [1, 1, -1], [1, -1, 1], [1, -1, -1], [-1, 1, 1], [-1, 1, -1], [-1, -1, 1], [-1, -1, -1]].map(makePositionVector);
+const corners = /*@__PURE__*/[[1, 1, 1], [1, 1, -1], [1, -1, 1], [1, -1, -1], [-1, 1, 1], [-1, 1, -1], [-1, -1, 1], [-1, -1, -1]].map(makePositionVector);
 const cornerDimensions = [0.25, 0.25, 0.25];
-const edges = [[1, 1, 0], [1, 0, 1], [1, 0, -1], [1, -1, 0], [0, 1, 1], [0, 1, -1], [0, -1, 1], [0, -1, -1], [-1, 1, 0], [-1, 0, 1], [-1, 0, -1], [-1, -1, 0]].map(makePositionVector);
-const edgeDimensions = edges.map(edge => edge.toArray().map(axis => axis == 0 ? 0.5 : 0.25));
+const edges = /*@__PURE__*/[[1, 1, 0], [1, 0, 1], [1, 0, -1], [1, -1, 0], [0, 1, 1], [0, 1, -1], [0, -1, 1], [0, -1, -1], [-1, 1, 0], [-1, 0, 1], [-1, 0, -1], [-1, -1, 0]].map(makePositionVector);
+const edgeDimensions = /*@__PURE__*/edges.map(edge => edge.toArray().map(axis => axis == 0 ? 0.5 : 0.25));
 const FaceMaterial = ({
   hover,
   index,

package/core/Gltf.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useGLTF } from './useGLTF.js';
 import { Clone } from './Clone.js';
 
-const Gltf = /*#__PURE__*/React.forwardRef(({
+const Gltf = /*@__PURE__*/React.forwardRef(({
   src,
   ...props
 }, ref) => {

package/core/GradientTexture.js

@@ -2,7 +2,10 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import { useThree } from '@react-three/fiber';
 
-let GradientType = /*#__PURE__*/function (GradientType) {
+let GradientType =
+/*@__PURE__*/
+/*#__PURE__*/
+function (GradientType) {
   GradientType["Linear"] = "linear";
   GradientType["Radial"] = "radial";
   return GradientType;

package/core/Grid.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),o=require("three"),i=require("react-merge-refs"),r=require("@react-three/fiber"),t=require("./shaderMaterial.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var i=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,i.get?i:{enumerable:!0,get:function(){return e[o]}})}})),n.default=e,Object.freeze(n)}var s=l(e),c=a(n),f=a(o),d=l(i);const u=t.shaderMaterial({cellSize:.5,sectionSize:1,fadeDistance:100,fadeStrength:1,cellThickness:.5,sectionThickness:1,cellColor:new f.Color,sectionColor:new f.Color,infiniteGrid:!1,followCamera:!1,worldCamProjPosition:new f.Vector3,worldPlanePosition:new f.Vector3},"\n    varying vec3 localPosition;\n    varying vec4 worldPosition;\n\n    uniform vec3 worldCamProjPosition;\n    uniform vec3 worldPlanePosition;\n    uniform float fadeDistance;\n    uniform bool infiniteGrid;\n    uniform bool followCamera;\n\n    void main() {\n      localPosition = position.xzy;\n      if (infiniteGrid) localPosition *= 1.0 + fadeDistance;\n      \n      worldPosition = modelMatrix * vec4(localPosition, 1.0);\n      if (followCamera) {\n        worldPosition.xyz += (worldCamProjPosition - worldPlanePosition);\n        localPosition = (inverse(modelMatrix) * worldPosition).xyz;\n      }\n\n      gl_Position = projectionMatrix * viewMatrix * worldPosition;\n    }\n  ",`\n    varying vec3 localPosition;\n    varying vec4 worldPosition;\n\n    uniform vec3 worldCamProjPosition;\n    uniform float cellSize;\n    uniform float sectionSize;\n    uniform vec3 cellColor;\n    uniform vec3 sectionColor;\n    uniform float fadeDistance;\n    uniform float fadeStrength;\n    uniform float cellThickness;\n    uniform float sectionThickness;\n\n    float getGrid(float size, float thickness) {\n      vec2 r = localPosition.xz / size;\n      vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);\n      float line = min(grid.x, grid.y) + 1.0 - thickness;\n      return 1.0 - min(line, 1.0);\n    }\n\n    void main() {\n      float g1 = getGrid(cellSize, cellThickness);\n      float g2 = getGrid(sectionSize, sectionThickness);\n\n      float dist = distance(worldCamProjPosition, worldPosition.xyz);\n      float d = 1.0 - min(dist / fadeDistance, 1.0);\n      vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * g2));\n\n      gl_FragColor = vec4(color, (g1 + g2) * pow(d, fadeStrength));\n      gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);\n      if (gl_FragColor.a <= 0.0) discard;\n\n      #include <tonemapping_fragment>\n      #include <${parseInt(f.REVISION.replace(/\D+/g,""))>=154?"colorspace_fragment":"encodings_fragment"}>\n    }\n  `),m=c.forwardRef((({args:e,cellColor:n="#000000",sectionColor:o="#2080ff",cellSize:i=.5,sectionSize:t=1,followCamera:l=!1,infiniteGrid:a=!1,fadeDistance:m=100,fadeStrength:g=1,cellThickness:P=.5,sectionThickness:w=1,side:v=f.BackSide,...C},h)=>{r.extend({GridMaterial:u});const p=c.useRef(null),x=new f.Plane,z=new f.Vector3(0,1,0),j=new f.Vector3(0,0,0);r.useFrame((e=>{x.setFromNormalAndCoplanarPoint(z,j).applyMatrix4(p.current.matrixWorld);const n=p.current.material,o=n.uniforms.worldCamProjPosition,i=n.uniforms.worldPlanePosition;x.projectPoint(e.camera.position,o.value),i.value.set(0,0,0).applyMatrix4(p.current.matrixWorld)}));const y={cellSize:i,sectionSize:t,cellColor:n,sectionColor:o,cellThickness:P,sectionThickness:w},S={fadeDistance:m,fadeStrength:g,infiniteGrid:a,followCamera:l};return c.createElement("mesh",s.default({ref:d.default([p,h]),frustumCulled:!1},C),c.createElement("gridMaterial",s.default({transparent:!0,"extensions-derivatives":!0,side:v},y,S)),c.createElement("planeGeometry",{args:e}))}));exports.Grid=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),o=require("three"),i=require("react-merge-refs"),r=require("@react-three/fiber"),t=require("./shaderMaterial.cjs.js"),l=require("../helpers/constants.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var i=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,i.get?i:{enumerable:!0,get:function(){return e[o]}})}})),n.default=e,Object.freeze(n)}var c=a(e),f=s(n),d=s(o),u=a(i);const m=t.shaderMaterial({cellSize:.5,sectionSize:1,fadeDistance:100,fadeStrength:1,cellThickness:.5,sectionThickness:1,cellColor:new d.Color,sectionColor:new d.Color,infiniteGrid:!1,followCamera:!1,worldCamProjPosition:new d.Vector3,worldPlanePosition:new d.Vector3},"\n    varying vec3 localPosition;\n    varying vec4 worldPosition;\n\n    uniform vec3 worldCamProjPosition;\n    uniform vec3 worldPlanePosition;\n    uniform float fadeDistance;\n    uniform bool infiniteGrid;\n    uniform bool followCamera;\n\n    void main() {\n      localPosition = position.xzy;\n      if (infiniteGrid) localPosition *= 1.0 + fadeDistance;\n      \n      worldPosition = modelMatrix * vec4(localPosition, 1.0);\n      if (followCamera) {\n        worldPosition.xyz += (worldCamProjPosition - worldPlanePosition);\n        localPosition = (inverse(modelMatrix) * worldPosition).xyz;\n      }\n\n      gl_Position = projectionMatrix * viewMatrix * worldPosition;\n    }\n  ",`\n    varying vec3 localPosition;\n    varying vec4 worldPosition;\n\n    uniform vec3 worldCamProjPosition;\n    uniform float cellSize;\n    uniform float sectionSize;\n    uniform vec3 cellColor;\n    uniform vec3 sectionColor;\n    uniform float fadeDistance;\n    uniform float fadeStrength;\n    uniform float cellThickness;\n    uniform float sectionThickness;\n\n    float getGrid(float size, float thickness) {\n      vec2 r = localPosition.xz / size;\n      vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);\n      float line = min(grid.x, grid.y) + 1.0 - thickness;\n      return 1.0 - min(line, 1.0);\n    }\n\n    void main() {\n      float g1 = getGrid(cellSize, cellThickness);\n      float g2 = getGrid(sectionSize, sectionThickness);\n\n      float dist = distance(worldCamProjPosition, worldPosition.xyz);\n      float d = 1.0 - min(dist / fadeDistance, 1.0);\n      vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * g2));\n\n      gl_FragColor = vec4(color, (g1 + g2) * pow(d, fadeStrength));\n      gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);\n      if (gl_FragColor.a <= 0.0) discard;\n\n      #include <tonemapping_fragment>\n      #include <${l.version>=154?"colorspace_fragment":"encodings_fragment"}>\n    }\n  `),g=f.forwardRef((({args:e,cellColor:n="#000000",sectionColor:o="#2080ff",cellSize:i=.5,sectionSize:t=1,followCamera:l=!1,infiniteGrid:a=!1,fadeDistance:s=100,fadeStrength:g=1,cellThickness:P=.5,sectionThickness:w=1,side:v=d.BackSide,...C},h)=>{r.extend({GridMaterial:m});const p=f.useRef(null),x=new d.Plane,j=new d.Vector3(0,1,0),z=new d.Vector3(0,0,0);r.useFrame((e=>{x.setFromNormalAndCoplanarPoint(j,z).applyMatrix4(p.current.matrixWorld);const n=p.current.material,o=n.uniforms.worldCamProjPosition,i=n.uniforms.worldPlanePosition;x.projectPoint(e.camera.position,o.value),i.value.set(0,0,0).applyMatrix4(p.current.matrixWorld)}));const y={cellSize:i,sectionSize:t,cellColor:n,sectionColor:o,cellThickness:P,sectionThickness:w},S={fadeDistance:s,fadeStrength:g,infiniteGrid:a,followCamera:l};return f.createElement("mesh",c.default({ref:u.default([p,h]),frustumCulled:!1},C),f.createElement("gridMaterial",c.default({transparent:!0,"extensions-derivatives":!0,side:v},y,S)),f.createElement("planeGeometry",{args:e}))}));exports.Grid=g;

package/core/Grid.js

@@ -4,20 +4,21 @@ import * as THREE from 'three';
 import mergeRefs from 'react-merge-refs';
 import { extend, useFrame } from '@react-three/fiber';
 import { shaderMaterial } from './shaderMaterial.js';
+import { version } from '../helpers/constants.js';
 
-const GridMaterial = shaderMaterial({
+const GridMaterial = /*@__PURE__*/shaderMaterial({
   cellSize: 0.5,
   sectionSize: 1,
   fadeDistance: 100,
   fadeStrength: 1,
   cellThickness: 0.5,
   sectionThickness: 1,
-  cellColor: new THREE.Color(),
-  sectionColor: new THREE.Color(),
+  cellColor: /*@__PURE__*/new THREE.Color(),
+  sectionColor: /*@__PURE__*/new THREE.Color(),
   infiniteGrid: false,
   followCamera: false,
-  worldCamProjPosition: new THREE.Vector3(),
-  worldPlanePosition: new THREE.Vector3()
+  worldCamProjPosition: /*@__PURE__*/new THREE.Vector3(),
+  worldPlanePosition: /*@__PURE__*/new THREE.Vector3()
 }, /* glsl */`
     varying vec3 localPosition;
     varying vec4 worldPosition;
@@ -74,10 +75,10 @@ const GridMaterial = shaderMaterial({
       if (gl_FragColor.a <= 0.0) discard;
 
       #include <tonemapping_fragment>
-      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+      #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
     }
   `);
-const Grid = /*#__PURE__*/React.forwardRef(({
+const Grid = /*@__PURE__*/React.forwardRef(({
   args,
   cellColor = '#000000',
   sectionColor = '#2080ff',

package/core/Image.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var s=c(e),l=i(r),u=i(t);const f=a.shaderMaterial({color:new u.Color("white"),scale:[1,1],imageBounds:[1,1],map:null,zoom:1,grayscale:0,opacity:1},"\n  varying vec2 vUv;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n  }\n",`\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float zoom;\n  uniform float grayscale;\n  uniform float opacity;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity), grayscale);\n    \n    #include <tonemapping_fragment>\n    #include <${parseInt(u.REVISION.replace(/\D+/g,""))>=154?"colorspace_fragment":"encodings_fragment"}>\n  }\n`),m=l.forwardRef((({children:e,color:r,segments:t=1,scale:a=1,zoom:o=1,grayscale:c=0,opacity:i=1,texture:u,toneMapped:m,transparent:v,...d},g)=>{n.extend({ImageMaterial:f});const p=Array.isArray(a)?[a[0],a[1]]:[a,a],y=[u.image.width,u.image.height];return l.createElement("mesh",s.default({ref:g,scale:Array.isArray(a)?[...a,1]:a},d),l.createElement("planeGeometry",{args:[1,1,t,t]}),l.createElement("imageMaterial",{color:r,map:u,zoom:o,grayscale:c,opacity:i,scale:p,imageBounds:y,toneMapped:m,transparent:v}),e)})),v=l.forwardRef((({url:e,...r},t)=>{const n=o.useTexture(e);return l.createElement(m,s.default({},r,{texture:n,ref:t}))})),d=l.forwardRef((({url:e,...r},t)=>l.createElement(m,s.default({},r,{ref:t})))),g=l.forwardRef(((e,r)=>{if(e.url)return l.createElement(v,s.default({},e,{ref:r}));if(e.texture)return l.createElement(d,s.default({},e,{ref:r}));throw new Error("<Image /> requires a url or texture")}));exports.Image=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.cjs.js"),c=require("../helpers/constants.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var l=i(e),u=s(r),f=s(t);const m=a.shaderMaterial({color:new f.Color("white"),scale:[1,1],imageBounds:[1,1],map:null,zoom:1,grayscale:0,opacity:1},"\n  varying vec2 vUv;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n  }\n",`\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float zoom;\n  uniform float grayscale;\n  uniform float opacity;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity), grayscale);\n    \n    #include <tonemapping_fragment>\n    #include <${c.version>=154?"colorspace_fragment":"encodings_fragment"}>\n  }\n`),v=u.forwardRef((({children:e,color:r,segments:t=1,scale:a=1,zoom:o=1,grayscale:c=0,opacity:i=1,texture:s,toneMapped:f,transparent:v,...d},y)=>{n.extend({ImageMaterial:m});const g=Array.isArray(a)?[a[0],a[1]]:[a,a],p=[s.image.width,s.image.height];return u.createElement("mesh",l.default({ref:y,scale:Array.isArray(a)?[...a,1]:a},d),u.createElement("planeGeometry",{args:[1,1,t,t]}),u.createElement("imageMaterial",{color:r,map:s,zoom:o,grayscale:c,opacity:i,scale:g,imageBounds:p,toneMapped:f,transparent:v}),e)})),d=u.forwardRef((({url:e,...r},t)=>{const n=o.useTexture(e);return u.createElement(v,l.default({},r,{texture:n,ref:t}))})),y=u.forwardRef((({url:e,...r},t)=>u.createElement(v,l.default({},r,{ref:t})))),g=u.forwardRef(((e,r)=>{if(e.url)return u.createElement(d,l.default({},e,{ref:r}));if(e.texture)return u.createElement(y,l.default({},e,{ref:r}));throw new Error("<Image /> requires a url or texture")}));exports.Image=g;