@react-three/drei 9.74.11 → 9.74.13

package/src/core/Wireframe.js

@@ -0,0 +1,185 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import * as THREE from 'three';
+import * as FIBER from '@react-three/fiber';
+import { WireframeMaterial, WireframeMaterialShaders, useWireframeUniforms, setWireframeOverride } from '../materials/WireframeMaterial.js';
+
+FIBER.extend({
+  MeshWireframeMaterial: WireframeMaterial
+});
+
+function isWithGeometry(object) {
+  return !!(object != null && object.geometry);
+}
+
+function isGeometry(object) {
+  return !!(object != null && object.isBufferGeometry);
+}
+
+function isRefObject(object) {
+  return !!(object != null && object.current);
+}
+
+function isRef(object) {
+  return (object == null ? void 0 : object.current) !== undefined;
+}
+
+function isWireframeGeometry(geometry) {
+  return geometry.type === 'WireframeGeometry';
+}
+
+function getUniforms() {
+  const u = {};
+
+  for (const key in WireframeMaterialShaders.uniforms) {
+    u[key] = {
+      value: WireframeMaterialShaders.uniforms[key]
+    };
+  }
+
+  return u;
+}
+
+function getBarycentricCoordinates(geometry, removeEdge) {
+  const position = geometry.getAttribute('position');
+  const count = position.count;
+  const barycentric = [];
+
+  for (let i = 0; i < count; i++) {
+    const even = i % 2 === 0;
+    const Q = removeEdge ? 1 : 0;
+
+    if (even) {
+      barycentric.push(0, 0, 1, 0, 1, 0, 1, 0, Q);
+    } else {
+      barycentric.push(0, 1, 0, 0, 0, 1, 1, 0, Q);
+    }
+  }
+
+  return new THREE.BufferAttribute(Float32Array.from(barycentric), 3);
+}
+
+function getInputGeometry(inputGeometry) {
+  const geo = isRefObject(inputGeometry) ? inputGeometry.current : inputGeometry;
+
+  if (!isGeometry(geo)) {
+    // Disallow WireframeGeometry
+    if (isWireframeGeometry(geo)) {
+      throw new Error('Wireframe: WireframeGeometry is not supported.');
+    }
+
+    const parent = geo.parent;
+
+    if (isWithGeometry(parent)) {
+      // Disallow WireframeGeometry
+      if (isWireframeGeometry(parent.geometry)) {
+        throw new Error('Wireframe: WireframeGeometry is not supported.');
+      }
+
+      return parent.geometry;
+    }
+  } else {
+    return geo;
+  }
+}
+
+function setBarycentricCoordinates(geometry, simplify) {
+  if (geometry.index) {
+    console.warn('Wireframe: Requires non-indexed geometry, converting to non-indexed geometry.');
+    const nonIndexedGeo = geometry.toNonIndexed();
+    geometry.copy(nonIndexedGeo);
+    geometry.setIndex(null);
+  }
+
+  const newBarycentric = getBarycentricCoordinates(geometry, simplify);
+  geometry.setAttribute('barycentric', newBarycentric);
+}
+
+function WireframeWithCustomGeo({
+  geometry: customGeometry,
+  simplify = false,
+  ...props
+}) {
+  const [geometry, setGeometry] = React.useState(null);
+  React.useLayoutEffect(() => {
+    const geom = getInputGeometry(customGeometry);
+
+    if (!geom) {
+      throw new Error('Wireframe: geometry prop must be a BufferGeometry or a ref to a BufferGeometry.');
+    }
+
+    setBarycentricCoordinates(geom, simplify);
+
+    if (isRef(customGeometry)) {
+      setGeometry(geom);
+    }
+  }, [simplify, customGeometry]);
+  const drawnGeo = isRef(customGeometry) ? geometry : customGeometry;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, drawnGeo && /*#__PURE__*/React.createElement("mesh", {
+    geometry: drawnGeo
+  }, /*#__PURE__*/React.createElement("meshWireframeMaterial", _extends({
+    attach: "material",
+    transparent: true,
+    side: THREE.DoubleSide,
+    polygonOffset: true //
+    ,
+    polygonOffsetFactor: -4
+  }, props, {
+    extensions: {
+      derivatives: true,
+      fragDepth: false,
+      drawBuffers: false,
+      shaderTextureLOD: false
+    }
+  }))));
+}
+
+function WireframeWithoutCustomGeo({
+  simplify = false,
+  ...props
+}) {
+  const objectRef = React.useRef(null);
+  const uniforms = React.useMemo(() => getUniforms(), [WireframeMaterialShaders.uniforms]);
+  useWireframeUniforms(uniforms, props);
+  React.useLayoutEffect(() => {
+    const geom = getInputGeometry(objectRef);
+
+    if (!geom) {
+      throw new Error('Wireframe: Must be a child of a Mesh, Line or Points object or specify a geometry prop.');
+    }
+
+    const og = geom.clone();
+    setBarycentricCoordinates(geom, simplify);
+    return () => {
+      geom.copy(og);
+      og.dispose();
+    };
+  }, [simplify]);
+  React.useLayoutEffect(() => {
+    const parentMesh = objectRef.current.parent;
+    const og = parentMesh.material.clone();
+    setWireframeOverride(parentMesh.material, uniforms);
+    return () => {
+      parentMesh.material.dispose();
+      parentMesh.material = og;
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("object3D", {
+    ref: objectRef
+  });
+}
+
+function Wireframe({
+  geometry: customGeometry,
+  ...props
+}) {
+  if (customGeometry) {
+    return /*#__PURE__*/React.createElement(WireframeWithCustomGeo, _extends({
+      geometry: customGeometry
+    }, props));
+  }
+
+  return /*#__PURE__*/React.createElement(WireframeWithoutCustomGeo, props);
+}
+
+export { Wireframe };

package/src/core/meshBounds.js

@@ -0,0 +1,38 @@
+import { Matrix4, Ray, Sphere, Vector3 } from 'three';
+
+const _inverseMatrix = new Matrix4();
+
+const _ray = new Ray();
+
+const _sphere = new Sphere();
+
+const _vA = new Vector3();
+
+function meshBounds(raycaster, intersects) {
+  const geometry = this.geometry;
+  const material = this.material;
+  const matrixWorld = this.matrixWorld;
+  if (material === undefined) return; // Checking boundingSphere distance to ray
+
+  if (geometry.boundingSphere === null) geometry.computeBoundingSphere();
+
+  _sphere.copy(geometry.boundingSphere);
+
+  _sphere.applyMatrix4(matrixWorld);
+
+  if (raycaster.ray.intersectsSphere(_sphere) === false) return;
+
+  _inverseMatrix.copy(matrixWorld).invert();
+
+  _ray.copy(raycaster.ray).applyMatrix4(_inverseMatrix); // Check boundingBox before continuing
+
+
+  if (geometry.boundingBox !== null && _ray.intersectBox(geometry.boundingBox, _vA) === null) return;
+  intersects.push({
+    distance: _vA.distanceTo(raycaster.ray.origin),
+    point: _vA.clone(),
+    object: this
+  });
+}
+
+export { meshBounds };

package/src/core/shaderMaterial.js

@@ -0,0 +1,39 @@
+import * as THREE from 'three';
+
+function shaderMaterial(uniforms, vertexShader, fragmentShader, onInit) {
+  const material = class material extends THREE.ShaderMaterial {
+    constructor(parameters = {}) {
+      const entries = Object.entries(uniforms); // Create unforms and shaders
+
+      super({
+        uniforms: entries.reduce((acc, [name, value]) => {
+          const uniform = THREE.UniformsUtils.clone({
+            [name]: {
+              value
+            }
+          });
+          return { ...acc,
+            ...uniform
+          };
+        }, {}),
+        vertexShader,
+        fragmentShader
+      }); // Create getter/setters
+
+      this.key = '';
+      entries.forEach(([name]) => Object.defineProperty(this, name, {
+        get: () => this.uniforms[name].value,
+        set: v => this.uniforms[name].value = v
+      })); // Assign parameters, this might include uniforms
+
+      Object.assign(this, parameters); // Call onInit
+
+      if (onInit) onInit(this);
+    }
+
+  };
+  material.key = THREE.MathUtils.generateUUID();
+  return material;
+}
+
+export { shaderMaterial };

package/src/core/shapes.js

@@ -0,0 +1,68 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import * as THREE from 'three';
+
+function create(type, effect) {
+  const El = type + 'Geometry';
+  return /*#__PURE__*/React.forwardRef(({
+    args,
+    children,
+    ...props
+  }, fref) => {
+    const ref = React.useRef(null);
+    React.useImperativeHandle(fref, () => ref.current);
+    React.useLayoutEffect(() => void (effect == null ? void 0 : effect(ref.current)));
+    return /*#__PURE__*/React.createElement("mesh", _extends({
+      ref: ref
+    }, props), /*#__PURE__*/React.createElement(El, {
+      attach: "geometry",
+      args: args
+    }), children);
+  });
+}
+
+const Box = create('box');
+const Circle = create('circle');
+const Cone = create('cone');
+const Cylinder = create('cylinder');
+const Sphere = create('sphere');
+const Plane = create('plane');
+const Tube = create('tube');
+const Torus = create('torus');
+const TorusKnot = create('torusKnot');
+const Tetrahedron = create('tetrahedron');
+const Ring = create('ring');
+const Polyhedron = create('polyhedron');
+const Icosahedron = create('icosahedron');
+const Octahedron = create('octahedron');
+const Dodecahedron = create('dodecahedron');
+const Extrude = create('extrude');
+const Lathe = create('lathe');
+const Capsule = create('capsule');
+const Shape = create('shape', ({
+  geometry
+}) => {
+  // Calculate UVs (by https://discourse.threejs.org/u/prisoner849)
+  // https://discourse.threejs.org/t/custom-shape-in-image-not-working/49348/10
+  const pos = geometry.attributes.position;
+  const b3 = new THREE.Box3().setFromBufferAttribute(pos);
+  const b3size = new THREE.Vector3();
+  b3.getSize(b3size);
+  const uv = [];
+  let x = 0,
+      y = 0,
+      u = 0,
+      v = 0;
+
+  for (let i = 0; i < pos.count; i++) {
+    x = pos.getX(i);
+    y = pos.getY(i);
+    u = (x - b3.min.x) / b3size.x;
+    v = (y - b3.min.y) / b3size.y;
+    uv.push(u, v);
+  }
+
+  geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2));
+});
+
+export { Box, Capsule, Circle, Cone, Cylinder, Dodecahedron, Extrude, Icosahedron, Lathe, Octahedron, Plane, Polyhedron, Ring, Shape, Sphere, Tetrahedron, Torus, TorusKnot, Tube };

package/src/core/softShadows.js

@@ -0,0 +1,161 @@
+import * as React from 'react';
+import * as THREE from 'three';
+import { useThree } from '@react-three/fiber';
+
+/*  Integration and compilation: @N8Programs
+    Inspired by:
+     https://github.com/mrdoob/three.js/blob/dev/examples/webgl_shadowmap_pcss.html
+     https://developer.nvidia.com/gpugems/gpugems2/part-ii-shading-lighting-and-shadows/chapter-17-efficient-soft-edged-shadows-using
+     https://developer.download.nvidia.com/whitepapers/2008/PCSS_Integration.pdf
+     https://github.com/mrdoob/three.js/blob/master/examples/webgl_shadowmap_pcss.html [spidersharma03]
+     https://spline.design/
+   Concept:
+     https://www.gamedev.net/tutorials/programming/graphics/contact-hardening-soft-shadows-made-fast-r4906/
+   Vogel Disk Implementation:
+     https://www.shadertoy.com/view/4l3yRM [ashalah]
+   High-Frequency Noise Implementation:
+     https://www.shadertoy.com/view/tt3fDH [spawner64]
+*/
+
+const pcss = ({
+  focus = 0,
+  size = 25,
+  samples = 10
+} = {}) => `
+#define PENUMBRA_FILTER_SIZE float(${size})
+#define RGB_NOISE_FUNCTION(uv) (randRGB(uv))
+vec3 randRGB(vec2 uv) {
+  return vec3(
+    fract(sin(dot(uv, vec2(12.75613, 38.12123))) * 13234.76575),
+    fract(sin(dot(uv, vec2(19.45531, 58.46547))) * 43678.23431),
+    fract(sin(dot(uv, vec2(23.67817, 78.23121))) * 93567.23423)
+  );
+}
+
+vec3 lowPassRandRGB(vec2 uv) {
+  // 3x3 convolution (average)
+  // can be implemented as separable with an extra buffer for a total of 6 samples instead of 9
+  vec3 result = vec3(0);
+  result += RGB_NOISE_FUNCTION(uv + vec2(-1.0, -1.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2(-1.0,  0.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2(-1.0, +1.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2( 0.0, -1.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2( 0.0,  0.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2( 0.0, +1.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2(+1.0, -1.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2(+1.0,  0.0));
+  result += RGB_NOISE_FUNCTION(uv + vec2(+1.0, +1.0));
+  result *= 0.111111111; // 1.0 / 9.0
+  return result;
+}
+vec3 highPassRandRGB(vec2 uv) {
+  // by subtracting the low-pass signal from the original signal, we're being left with the high-pass signal
+  // hp(x) = x - lp(x)
+  return RGB_NOISE_FUNCTION(uv) - lowPassRandRGB(uv) + 0.5;
+}
+
+
+vec2 vogelDiskSample(int sampleIndex, int sampleCount, float angle) {
+  const float goldenAngle = 2.399963f; // radians
+  float r = sqrt(float(sampleIndex) + 0.5f) / sqrt(float(sampleCount));
+  float theta = float(sampleIndex) * goldenAngle + angle;
+  float sine = sin(theta);
+  float cosine = cos(theta);
+  return vec2(cosine, sine) * r;
+}
+float penumbraSize( const in float zReceiver, const in float zBlocker ) { // Parallel plane estimation
+  return (zReceiver - zBlocker) / zBlocker;
+}
+float findBlocker(sampler2D shadowMap, vec2 uv, float compare, float angle) {
+  float texelSize = 1.0 / float(textureSize(shadowMap, 0).x);
+  float blockerDepthSum = float(${focus});
+  float blockers = 0.0;
+
+  int j = 0;
+  vec2 offset = vec2(0.);
+  float depth = 0.;
+
+  #pragma unroll_loop_start
+  for(int i = 0; i < ${samples}; i ++) {
+    offset = (vogelDiskSample(j, ${samples}, angle) * texelSize) * 2.0 * PENUMBRA_FILTER_SIZE;
+    depth = unpackRGBAToDepth( texture2D( shadowMap, uv + offset));
+    if (depth < compare) {
+      blockerDepthSum += depth;
+      blockers++;
+    }
+    j++;
+  }
+  #pragma unroll_loop_end
+
+  if (blockers > 0.0) {
+    return blockerDepthSum / blockers;
+  }
+  return -1.0;
+}
+
+        
+float vogelFilter(sampler2D shadowMap, vec2 uv, float zReceiver, float filterRadius, float angle) {
+  float texelSize = 1.0 / float(textureSize(shadowMap, 0).x);
+  float shadow = 0.0f;
+  int j = 0;
+  vec2 vogelSample = vec2(0.0);
+  vec2 offset = vec2(0.0);
+  #pragma unroll_loop_start
+  for (int i = 0; i < ${samples}; i++) {
+    vogelSample = vogelDiskSample(j, ${samples}, angle) * texelSize;
+    offset = vogelSample * (1.0 + filterRadius * float(${size}));
+    shadow += step( zReceiver, unpackRGBAToDepth( texture2D( shadowMap, uv + offset ) ) );
+    j++;
+  }
+  #pragma unroll_loop_end
+  return shadow * 1.0 / ${samples}.0;
+}
+
+float PCSS (sampler2D shadowMap, vec4 coords) {
+  vec2 uv = coords.xy;
+  float zReceiver = coords.z; // Assumed to be eye-space z in this code
+  float angle = highPassRandRGB(gl_FragCoord.xy).r * PI2;
+  float avgBlockerDepth = findBlocker(shadowMap, uv, zReceiver, angle);
+  if (avgBlockerDepth == -1.0) {
+    return 1.0;
+  }
+  float penumbraRatio = penumbraSize(zReceiver, avgBlockerDepth);
+  return vogelFilter(shadowMap, uv, zReceiver, 1.25 * penumbraRatio, angle);
+}`;
+
+function reset(gl, scene, camera) {
+  scene.traverse(object => {
+    if (object.material) {
+      gl.properties.remove(object.material);
+      object.material.dispose == null ? void 0 : object.material.dispose();
+    }
+  });
+  gl.info.programs.length = 0;
+  gl.compile(scene, camera);
+}
+
+function SoftShadows({
+  focus = 0,
+  samples = 10,
+  size = 25
+}) {
+  const gl = useThree(state => state.gl);
+  const scene = useThree(state => state.scene);
+  const camera = useThree(state => state.camera);
+  React.useEffect(() => {
+    const original = THREE.ShaderChunk.shadowmap_pars_fragment;
+    THREE.ShaderChunk.shadowmap_pars_fragment = THREE.ShaderChunk.shadowmap_pars_fragment.replace('#ifdef USE_SHADOWMAP', '#ifdef USE_SHADOWMAP\n' + pcss({
+      size,
+      samples,
+      focus
+    })).replace('#if defined( SHADOWMAP_TYPE_PCF )', '\nreturn PCSS(shadowMap, shadowCoord);\n#if defined( SHADOWMAP_TYPE_PCF )');
+    reset(gl, scene, camera);
+    return () => {
+      THREE.ShaderChunk.shadowmap_pars_fragment = original;
+      reset(gl, scene, camera);
+    };
+  }, [focus, size, samples]);
+  return null;
+}
+
+export { SoftShadows };

package/src/core/useAnimations.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Object3D, AnimationMixer } from 'three';
+import { useFrame } from '@react-three/fiber';
+
+function useAnimations(clips, root) {
+  const ref = React.useRef();
+  const [actualRef] = React.useState(() => root ? root instanceof Object3D ? {
+    current: root
+  } : root : ref); // eslint-disable-next-line prettier/prettier
+
+  const [mixer] = React.useState(() => new AnimationMixer(undefined));
+  React.useLayoutEffect(() => void (mixer._root = actualRef.current), [mixer, root]);
+  const lazyActions = React.useRef({});
+  const [api] = React.useState(() => {
+    const actions = {};
+    clips.forEach(clip => Object.defineProperty(actions, clip.name, {
+      enumerable: true,
+
+      get() {
+        if (actualRef.current) {
+          return lazyActions.current[clip.name] || (lazyActions.current[clip.name] = mixer.clipAction(clip, actualRef.current));
+        }
+      },
+
+      configurable: true
+    }));
+    return {
+      ref: actualRef,
+      clips,
+      actions,
+      names: clips.map(c => c.name),
+      mixer
+    };
+  });
+  useFrame((state, delta) => mixer.update(delta));
+  React.useEffect(() => {
+    const currentRoot = actualRef.current;
+    return () => {
+      // Clean up only when clips change, wipe out lazy actions and uncache clips
+      lazyActions.current = {};
+      Object.values(api.actions).forEach(action => {
+        if (currentRoot) {
+          mixer.uncacheAction(action, currentRoot);
+        }
+      });
+    };
+  }, [clips]);
+  React.useEffect(() => {
+    return () => {
+      mixer.stopAllAction();
+    };
+  }, [mixer]);
+  return api;
+}
+
+export { useAnimations };

package/src/core/useAspect.js

@@ -0,0 +1,10 @@
+import { useThree } from '@react-three/fiber';
+
+function useAspect(width, height, factor = 1) {
+  const v = useThree(state => state.viewport);
+  const adaptedHeight = height * (v.aspect > width / height ? v.width / width : v.height / height);
+  const adaptedWidth = width * (v.aspect > width / height ? v.width / width : v.height / height);
+  return [adaptedWidth * factor, adaptedHeight * factor, 1];
+}
+
+export { useAspect };

package/src/core/useBVH.js

@@ -0,0 +1,90 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import { useThree } from '@react-three/fiber';
+import * as React from 'react';
+import { Mesh } from 'three';
+import { SAH, acceleratedRaycast, computeBoundsTree, disposeBoundsTree } from 'three-mesh-bvh';
+
+const isMesh = child => child.isMesh;
+/**
+ * @deprecated Use the Bvh component instead
+ */
+
+
+function useBVH(mesh, options) {
+  options = {
+    strategy: SAH,
+    verbose: false,
+    setBoundingBox: true,
+    maxDepth: 40,
+    maxLeafTris: 10,
+    ...options
+  };
+  React.useEffect(() => {
+    if (mesh.current) {
+      mesh.current.raycast = acceleratedRaycast;
+      const geometry = mesh.current.geometry;
+      geometry.computeBoundsTree = computeBoundsTree;
+      geometry.disposeBoundsTree = disposeBoundsTree;
+      geometry.computeBoundsTree(options);
+      return () => {
+        if (geometry.boundsTree) {
+          geometry.disposeBoundsTree();
+        }
+      };
+    }
+  }, [mesh, JSON.stringify(options)]);
+}
+const Bvh = /*#__PURE__*/React.forwardRef(({
+  enabled = true,
+  firstHitOnly = false,
+  children,
+  strategy = SAH,
+  verbose = false,
+  setBoundingBox = true,
+  maxDepth = 40,
+  maxLeafTris = 10,
+  ...props
+}, fref) => {
+  const ref = React.useRef(null);
+  const raycaster = useThree(state => state.raycaster);
+  React.useImperativeHandle(fref, () => ref.current, []);
+  React.useEffect(() => {
+    if (enabled) {
+      const options = {
+        strategy,
+        verbose,
+        setBoundingBox,
+        maxDepth,
+        maxLeafTris
+      };
+      const group = ref.current; // This can only safely work if the component is used once, but there is no alternative.
+      // Hijacking the raycast method to do it for individual meshes is not an option as it would
+      // cost too much memory ...
+
+      raycaster.firstHitOnly = firstHitOnly;
+      group.traverse(child => {
+        // Only include meshes that do not yet have a boundsTree and whose raycast is standard issue
+        if (isMesh(child) && !child.geometry.boundsTree && child.raycast === Mesh.prototype.raycast) {
+          child.raycast = acceleratedRaycast;
+          child.geometry.computeBoundsTree = computeBoundsTree;
+          child.geometry.disposeBoundsTree = disposeBoundsTree;
+          child.geometry.computeBoundsTree(options);
+        }
+      });
+      return () => {
+        delete raycaster.firstHitOnly;
+        group.traverse(child => {
+          if (isMesh(child) && child.geometry.boundsTree) {
+            child.geometry.disposeBoundsTree();
+            child.raycast = Mesh.prototype.raycast;
+          }
+        });
+      };
+    }
+  });
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: ref
+  }, props), children);
+});
+
+export { Bvh, useBVH };