@react-three/drei 9.74.13 → 9.74.14

package/src/core/useTexture.js

@@ -1,35 +0,0 @@
-import { TextureLoader } from 'three';
-import { useThree, useLoader } from '@react-three/fiber';
-import { useLayoutEffect, useEffect } from 'react';
-
-const IsObject = url => url === Object(url) && !Array.isArray(url) && typeof url !== 'function';
-function useTexture(input, onLoad) {
-  const gl = useThree(state => state.gl);
-  const textures = useLoader(TextureLoader, IsObject(input) ? Object.values(input) : input);
-  useLayoutEffect(() => {
-    onLoad == null ? void 0 : onLoad(textures);
-  }, [onLoad]); // https://github.com/mrdoob/three.js/issues/22696
-  // Upload the texture to the GPU immediately instead of waiting for the first render
-
-  useEffect(() => {
-    const array = Array.isArray(textures) ? textures : [textures];
-    array.forEach(gl.initTexture);
-  }, [gl, textures]);
-
-  if (IsObject(input)) {
-    const keys = Object.keys(input);
-    const keyed = {};
-    keys.forEach(key => Object.assign(keyed, {
-      [key]: textures[keys.indexOf(key)]
-    }));
-    return keyed;
-  } else {
-    return textures;
-  }
-}
-
-useTexture.preload = url => useLoader.preload(TextureLoader, url);
-
-useTexture.clear = input => useLoader.clear(TextureLoader, input);
-
-export { IsObject, useTexture };

package/src/core/useTrailTexture.js

@@ -1,164 +0,0 @@
-import { useMemo, useCallback } from 'react';
-import { useFrame } from '@react-three/fiber';
-import { Texture } from 'three';
-
-/**
- *  Adapted from https://github.com/brunoimbrizi/interactive-particles/blob/master/src/scripts/webgl/particles/TrailTexture.js
- *  Changes:
- *    * accepts config as constructor params
- *    * frame-rate independent aging
- *    * added option to interpolate between slow mouse events
- *    * added option for smoothing between values to avoid large jumps in force
- */
-
-// smooth new sample (measurement) based on previous sample (current)
-function smoothAverage(current, measurement, smoothing = 0.9) {
-  return measurement * smoothing + current * (1.0 - smoothing);
-} // default ease
-
-
-const easeCircleOut = x => Math.sqrt(1 - Math.pow(x - 1, 2));
-
-class TrailTexture {
-  constructor({
-    size = 256,
-    maxAge = 750,
-    radius = 0.3,
-    intensity = 0.2,
-    interpolate = 0,
-    smoothing = 0,
-    minForce = 0.3,
-    blend = 'screen',
-    // source-over is canvas default. Others are slower
-    ease = easeCircleOut
-  } = {}) {
-    this.size = size;
-    this.maxAge = maxAge;
-    this.radius = radius;
-    this.intensity = intensity;
-    this.ease = ease;
-    this.interpolate = interpolate;
-    this.smoothing = smoothing;
-    this.minForce = minForce;
-    this.blend = blend;
-    this.trail = [];
-    this.force = 0;
-    this.initTexture();
-  }
-
-  initTexture() {
-    this.canvas = document.createElement('canvas');
-    this.canvas.width = this.canvas.height = this.size;
-    this.ctx = this.canvas.getContext('2d');
-    this.ctx.fillStyle = 'black';
-    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
-    this.texture = new Texture(this.canvas);
-    this.canvas.id = 'touchTexture';
-    this.canvas.style.width = this.canvas.style.height = `${this.canvas.width}px`;
-  }
-
-  update(delta) {
-    this.clear(); // age points
-
-    this.trail.forEach((point, i) => {
-      point.age += delta * 1000; // remove old
-
-      if (point.age > this.maxAge) {
-        this.trail.splice(i, 1);
-      }
-    }); // reset force when empty (when smoothing)
-
-    if (!this.trail.length) this.force = 0;
-    this.trail.forEach(point => {
-      this.drawTouch(point);
-    });
-    this.texture.needsUpdate = true;
-  }
-
-  clear() {
-    this.ctx.globalCompositeOperation = 'source-over';
-    this.ctx.fillStyle = 'black';
-    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
-  }
-
-  addTouch(point) {
-    const last = this.trail[this.trail.length - 1];
-
-    if (last) {
-      const dx = last.x - point.x;
-      const dy = last.y - point.y;
-      const dd = dx * dx + dy * dy;
-      const force = Math.max(this.minForce, Math.min(dd * 10000, 1));
-      this.force = smoothAverage(force, this.force, this.smoothing);
-
-      if (!!this.interpolate) {
-        const lines = Math.ceil(dd / Math.pow(this.radius * 0.5 / this.interpolate, 2));
-
-        if (lines > 1) {
-          for (let i = 1; i < lines; i++) {
-            this.trail.push({
-              x: last.x - dx / lines * i,
-              y: last.y - dy / lines * i,
-              age: 0,
-              force
-            });
-          }
-        }
-      }
-    }
-
-    this.trail.push({
-      x: point.x,
-      y: point.y,
-      age: 0,
-      force: this.force
-    });
-  }
-
-  drawTouch(point) {
-    const pos = {
-      x: point.x * this.size,
-      y: (1 - point.y) * this.size
-    };
-    let intensity = 1;
-
-    if (point.age < this.maxAge * 0.3) {
-      intensity = this.ease(point.age / (this.maxAge * 0.3));
-    } else {
-      intensity = this.ease(1 - (point.age - this.maxAge * 0.3) / (this.maxAge * 0.7));
-    }
-
-    intensity *= point.force; // apply blending
-
-    this.ctx.globalCompositeOperation = this.blend;
-    const radius = this.size * this.radius * intensity;
-    const grd = this.ctx.createRadialGradient(pos.x, pos.y, Math.max(0, radius * 0.25), pos.x, pos.y, Math.max(0, radius));
-    grd.addColorStop(0, `rgba(255, 255, 255, ${this.intensity})`);
-    grd.addColorStop(1, `rgba(0, 0, 0, 0.0)`);
-    this.ctx.beginPath();
-    this.ctx.fillStyle = grd;
-    this.ctx.arc(pos.x, pos.y, Math.max(0, radius), 0, Math.PI * 2);
-    this.ctx.fill();
-  }
-
-}
-
-function useTrailTexture(config = {}) {
-  const {
-    size,
-    maxAge,
-    radius,
-    intensity,
-    interpolate,
-    smoothing,
-    minForce,
-    blend,
-    ease
-  } = config;
-  const trail = useMemo(() => new TrailTexture(config), [size, maxAge, radius, intensity, interpolate, smoothing, minForce, blend, ease]);
-  useFrame((_, delta) => void trail.update(delta));
-  const onMove = useCallback(e => trail.addTouch(e.uv), [trail]);
-  return [trail.texture, onMove];
-}
-
-export { useTrailTexture };

package/src/core/useVideoTexture.js

@@ -1,41 +0,0 @@
-import * as THREE from 'three';
-import { useEffect } from 'react';
-import { useThree } from '@react-three/fiber';
-import { suspend } from 'suspend-react';
-
-function useVideoTexture(src, props) {
-  const {
-    unsuspend,
-    start,
-    crossOrigin,
-    muted,
-    loop,
-    ...rest
-  } = {
-    unsuspend: 'loadedmetadata',
-    crossOrigin: 'Anonymous',
-    muted: true,
-    loop: true,
-    start: true,
-    playsInline: true,
-    ...props
-  };
-  const gl = useThree(state => state.gl);
-  const texture = suspend(() => new Promise((res, rej) => {
-    const video = Object.assign(document.createElement('video'), {
-      src: typeof src === 'string' && src || undefined,
-      srcObject: src instanceof MediaStream && src || undefined,
-      crossOrigin,
-      loop,
-      muted,
-      ...rest
-    });
-    const texture = new THREE.VideoTexture(video);
-    if ('colorSpace' in texture) texture.colorSpace = gl.outputColorSpace;else texture.encoding = gl.outputEncoding;
-    video.addEventListener(unsuspend, () => res(texture));
-  }), [src]);
-  useEffect(() => void (start && texture.image.play()), [texture, start]);
-  return texture;
-}
-
-export { useVideoTexture };

package/src/helpers/environment-assets.js

@@ -1,14 +0,0 @@
-const presetsObj = {
-  apartment: 'lebombo_1k.hdr',
-  city: 'potsdamer_platz_1k.hdr',
-  dawn: 'kiara_1_dawn_1k.hdr',
-  forest: 'forest_slope_1k.hdr',
-  lobby: 'st_fagans_interior_1k.hdr',
-  night: 'dikhololo_night_1k.hdr',
-  park: 'rooitou_park_1k.hdr',
-  studio: 'studio_small_03_1k.hdr',
-  sunset: 'venice_sunset_1k.hdr',
-  warehouse: 'empty_warehouse_01_1k.hdr'
-};
-
-export { presetsObj };

package/src/helpers/useEffectfulState.js

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-function call(ref, value) {
-  if (typeof ref === 'function') ref(value);else if (ref != null) ref.current = value;
-}
-
-function useEffectfulState(fn, deps = [], cb) {
-  const [state, set] = React.useState();
-  React.useLayoutEffect(() => {
-    const value = fn();
-    set(value);
-    call(cb, value);
-    return () => call(cb, null);
-  }, deps);
-  return state;
-}
-
-export { useEffectfulState };

package/src/materials/BlurPass.js

@@ -1,75 +0,0 @@
-import { WebGLRenderTarget, LinearFilter, HalfFloatType, Vector2, Scene, Camera, BufferGeometry, BufferAttribute, Mesh } from 'three';
-import { ConvolutionMaterial } from './ConvolutionMaterial.js';
-
-class BlurPass {
-  constructor({
-    gl,
-    resolution,
-    width = 500,
-    height = 500,
-    minDepthThreshold = 0,
-    maxDepthThreshold = 1,
-    depthScale = 0,
-    depthToBlurRatioBias = 0.25
-  }) {
-    this.renderToScreen = false;
-    this.renderTargetA = new WebGLRenderTarget(resolution, resolution, {
-      minFilter: LinearFilter,
-      magFilter: LinearFilter,
-      stencilBuffer: false,
-      depthBuffer: false,
-      type: HalfFloatType
-    });
-    this.renderTargetB = this.renderTargetA.clone();
-    this.convolutionMaterial = new ConvolutionMaterial();
-    this.convolutionMaterial.setTexelSize(1.0 / width, 1.0 / height);
-    this.convolutionMaterial.setResolution(new Vector2(width, height));
-    this.scene = new Scene();
-    this.camera = new Camera();
-    this.convolutionMaterial.uniforms.minDepthThreshold.value = minDepthThreshold;
-    this.convolutionMaterial.uniforms.maxDepthThreshold.value = maxDepthThreshold;
-    this.convolutionMaterial.uniforms.depthScale.value = depthScale;
-    this.convolutionMaterial.uniforms.depthToBlurRatioBias.value = depthToBlurRatioBias;
-    this.convolutionMaterial.defines.USE_DEPTH = depthScale > 0;
-    const vertices = new Float32Array([-1, -1, 0, 3, -1, 0, -1, 3, 0]);
-    const uvs = new Float32Array([0, 0, 2, 0, 0, 2]);
-    const geometry = new BufferGeometry();
-    geometry.setAttribute('position', new BufferAttribute(vertices, 3));
-    geometry.setAttribute('uv', new BufferAttribute(uvs, 2));
-    this.screen = new Mesh(geometry, this.convolutionMaterial);
-    this.screen.frustumCulled = false;
-    this.scene.add(this.screen);
-  }
-
-  render(renderer, inputBuffer, outputBuffer) {
-    const scene = this.scene;
-    const camera = this.camera;
-    const renderTargetA = this.renderTargetA;
-    const renderTargetB = this.renderTargetB;
-    let material = this.convolutionMaterial;
-    let uniforms = material.uniforms;
-    uniforms.depthBuffer.value = inputBuffer.depthTexture;
-    const kernel = material.kernel;
-    let lastRT = inputBuffer;
-    let destRT;
-    let i, l; // Apply the multi-pass blur.
-
-    for (i = 0, l = kernel.length - 1; i < l; ++i) {
-      // Alternate between targets.
-      destRT = (i & 1) === 0 ? renderTargetA : renderTargetB;
-      uniforms.kernel.value = kernel[i];
-      uniforms.inputBuffer.value = lastRT.texture;
-      renderer.setRenderTarget(destRT);
-      renderer.render(scene, camera);
-      lastRT = destRT;
-    }
-
-    uniforms.kernel.value = kernel[i];
-    uniforms.inputBuffer.value = lastRT.texture;
-    renderer.setRenderTarget(this.renderToScreen ? null : outputBuffer);
-    renderer.render(scene, camera);
-  }
-
-}
-
-export { BlurPass };

package/src/materials/ConvolutionMaterial.js

@@ -1,99 +0,0 @@
-import { ShaderMaterial, Uniform, Vector2, NoBlending } from 'three';
-
-class ConvolutionMaterial extends ShaderMaterial {
-  constructor(texelSize = new Vector2()) {
-    super({
-      uniforms: {
-        inputBuffer: new Uniform(null),
-        depthBuffer: new Uniform(null),
-        resolution: new Uniform(new Vector2()),
-        texelSize: new Uniform(new Vector2()),
-        halfTexelSize: new Uniform(new Vector2()),
-        kernel: new Uniform(0.0),
-        scale: new Uniform(1.0),
-        cameraNear: new Uniform(0.0),
-        cameraFar: new Uniform(1.0),
-        minDepthThreshold: new Uniform(0.0),
-        maxDepthThreshold: new Uniform(1.0),
-        depthScale: new Uniform(0.0),
-        depthToBlurRatioBias: new Uniform(0.25)
-      },
-      fragmentShader: `#include <common>
-        #include <dithering_pars_fragment>      
-        uniform sampler2D inputBuffer;
-        uniform sampler2D depthBuffer;
-        uniform float cameraNear;
-        uniform float cameraFar;
-        uniform float minDepthThreshold;
-        uniform float maxDepthThreshold;
-        uniform float depthScale;
-        uniform float depthToBlurRatioBias;
-        varying vec2 vUv;
-        varying vec2 vUv0;
-        varying vec2 vUv1;
-        varying vec2 vUv2;
-        varying vec2 vUv3;
-
-        void main() {
-          float depthFactor = 0.0;
-          
-          #ifdef USE_DEPTH
-            vec4 depth = texture2D(depthBuffer, vUv);
-            depthFactor = smoothstep(minDepthThreshold, maxDepthThreshold, 1.0-(depth.r * depth.a));
-            depthFactor *= depthScale;
-            depthFactor = max(0.0, min(1.0, depthFactor + 0.25));
-          #endif
-          
-          vec4 sum = texture2D(inputBuffer, mix(vUv0, vUv, depthFactor));
-          sum += texture2D(inputBuffer, mix(vUv1, vUv, depthFactor));
-          sum += texture2D(inputBuffer, mix(vUv2, vUv, depthFactor));
-          sum += texture2D(inputBuffer, mix(vUv3, vUv, depthFactor));
-          gl_FragColor = sum * 0.25 ;
-
-          #include <dithering_fragment>
-          #include <tonemapping_fragment>
-          #include <encodings_fragment>
-        }`,
-      vertexShader: `uniform vec2 texelSize;
-        uniform vec2 halfTexelSize;
-        uniform float kernel;
-        uniform float scale;
-        varying vec2 vUv;
-        varying vec2 vUv0;
-        varying vec2 vUv1;
-        varying vec2 vUv2;
-        varying vec2 vUv3;
-
-        void main() {
-          vec2 uv = position.xy * 0.5 + 0.5;
-          vUv = uv;
-
-          vec2 dUv = (texelSize * vec2(kernel) + halfTexelSize) * scale;
-          vUv0 = vec2(uv.x - dUv.x, uv.y + dUv.y);
-          vUv1 = vec2(uv.x + dUv.x, uv.y + dUv.y);
-          vUv2 = vec2(uv.x + dUv.x, uv.y - dUv.y);
-          vUv3 = vec2(uv.x - dUv.x, uv.y - dUv.y);
-
-          gl_Position = vec4(position.xy, 1.0, 1.0);
-        }`,
-      blending: NoBlending,
-      depthWrite: false,
-      depthTest: false
-    });
-    this.toneMapped = false;
-    this.setTexelSize(texelSize.x, texelSize.y);
-    this.kernel = new Float32Array([0.0, 1.0, 2.0, 2.0, 3.0]);
-  }
-
-  setTexelSize(x, y) {
-    this.uniforms.texelSize.value.set(x, y);
-    this.uniforms.halfTexelSize.value.set(x, y).multiplyScalar(0.5);
-  }
-
-  setResolution(resolution) {
-    this.uniforms.resolution.value.copy(resolution);
-  }
-
-}
-
-export { ConvolutionMaterial };

package/src/materials/DiscardMaterial.js

@@ -1,5 +0,0 @@
-import { shaderMaterial } from '../core/shaderMaterial.js';
-
-const DiscardMaterial = shaderMaterial({}, 'void main() { }', 'void main() { gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); discard;  }');
-
-export { DiscardMaterial };