@react-three/drei 9.74.11 → 9.74.13

package/src/core/useTexture.js

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,164 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,99 @@
+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

@@ -0,0 +1,5 @@
+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 };