@react-three/drei 9.74.11 → 9.74.13

package/src/core/MarchingCubes.js

@@ -0,0 +1,76 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import mergeRefs from 'react-merge-refs';
+import { MarchingCubes as MarchingCubes$1 } from 'three-stdlib';
+import { useFrame } from '@react-three/fiber';
+
+const globalContext = /*#__PURE__*/React.createContext(null);
+const MarchingCubes = /*#__PURE__*/React.forwardRef(({
+  resolution = 28,
+  maxPolyCount = 10000,
+  enableUvs = false,
+  enableColors = false,
+  children,
+  ...props
+}, ref) => {
+  const marchingCubesRef = React.useRef(null);
+  const marchingCubes = React.useMemo(() => new MarchingCubes$1(resolution, null, enableUvs, enableColors, maxPolyCount), [resolution, maxPolyCount, enableUvs, enableColors]);
+  const api = React.useMemo(() => ({
+    getParent: () => marchingCubesRef
+  }), []);
+  useFrame(() => {
+    marchingCubes.update();
+    marchingCubes.reset();
+  }, -1); // To make sure the reset runs before the balls or planes are added
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("primitive", _extends({
+    object: marchingCubes,
+    ref: mergeRefs([marchingCubesRef, ref])
+  }, props), /*#__PURE__*/React.createElement(globalContext.Provider, {
+    value: api
+  }, children)));
+});
+const MarchingCube = /*#__PURE__*/React.forwardRef(({
+  strength = 0.5,
+  subtract = 12,
+  color,
+  ...props
+}, ref) => {
+  const {
+    getParent
+  } = React.useContext(globalContext);
+  const parentRef = React.useMemo(() => getParent(), [getParent]);
+  const cubeRef = React.useRef();
+  const vec = new THREE.Vector3();
+  useFrame(state => {
+    if (!parentRef.current || !cubeRef.current) return;
+    cubeRef.current.getWorldPosition(vec);
+    parentRef.current.addBall(0.5 + vec.x * 0.5, 0.5 + vec.y * 0.5, 0.5 + vec.z * 0.5, strength, subtract, color);
+  });
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: mergeRefs([ref, cubeRef])
+  }, props));
+});
+const MarchingPlane = /*#__PURE__*/React.forwardRef(({
+  planeType: _planeType = 'x',
+  strength = 0.5,
+  subtract = 12,
+  ...props
+}, ref) => {
+  const {
+    getParent
+  } = React.useContext(globalContext);
+  const parentRef = React.useMemo(() => getParent(), [getParent]);
+  const wallRef = React.useRef();
+  const planeType = React.useMemo(() => _planeType === 'x' ? 'addPlaneX' : _planeType === 'y' ? 'addPlaneY' : 'addPlaneZ', [_planeType]);
+  useFrame(() => {
+    if (!parentRef.current || !wallRef.current) return;
+    parentRef.current[planeType](strength, subtract);
+  });
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: mergeRefs([ref, wallRef])
+  }, props));
+});
+
+export { MarchingCube, MarchingCubes, MarchingPlane };

package/src/core/Mask.js

@@ -0,0 +1,42 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+
+const Mask = /*#__PURE__*/React.forwardRef(({
+  id = 1,
+  colorWrite = false,
+  depthWrite = false,
+  ...props
+}, fref) => {
+  const ref = React.useRef(null);
+  const spread = React.useMemo(() => ({
+    colorWrite,
+    depthWrite,
+    stencilWrite: true,
+    stencilRef: id,
+    stencilFunc: THREE.AlwaysStencilFunc,
+    stencilFail: THREE.ReplaceStencilOp,
+    stencilZFail: THREE.ReplaceStencilOp,
+    stencilZPass: THREE.ReplaceStencilOp
+  }), [id, colorWrite, depthWrite]);
+  React.useLayoutEffect(() => {
+    Object.assign(ref.current.material, spread);
+  });
+  React.useImperativeHandle(fref, () => ref.current, []);
+  return /*#__PURE__*/React.createElement("mesh", _extends({
+    ref: ref,
+    renderOrder: -id
+  }, props));
+});
+function useMask(id, inverse = false) {
+  return {
+    stencilWrite: true,
+    stencilRef: id,
+    stencilFunc: inverse ? THREE.NotEqualStencilFunc : THREE.EqualStencilFunc,
+    stencilFail: THREE.KeepStencilOp,
+    stencilZFail: THREE.KeepStencilOp,
+    stencilZPass: THREE.KeepStencilOp
+  };
+}
+
+export { Mask, useMask };

package/src/core/MeshDiscardMaterial.js

@@ -0,0 +1,15 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { extend } from '@react-three/fiber';
+import { DiscardMaterial } from '../materials/DiscardMaterial.js';
+
+const MeshDiscardMaterial = /*#__PURE__*/React.forwardRef((props, fref) => {
+  extend({
+    DiscardMaterialImpl: DiscardMaterial
+  });
+  return /*#__PURE__*/React.createElement("discardMaterialImpl", _extends({
+    ref: fref
+  }, props));
+});
+
+export { MeshDiscardMaterial };

package/src/core/MeshDistortMaterial.js

@@ -0,0 +1,79 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { MeshPhysicalMaterial } from 'three';
+import { useFrame } from '@react-three/fiber';
+import distort from '../helpers/glsl/distort.vert.glsl.js';
+
+class DistortMaterialImpl extends MeshPhysicalMaterial {
+  constructor(parameters = {}) {
+    super(parameters);
+    this.setValues(parameters);
+    this._time = {
+      value: 0
+    };
+    this._distort = {
+      value: 0.4
+    };
+    this._radius = {
+      value: 1
+    };
+  }
+
+  onBeforeCompile(shader) {
+    shader.uniforms.time = this._time;
+    shader.uniforms.radius = this._radius;
+    shader.uniforms.distort = this._distort;
+    shader.vertexShader = `
+      uniform float time;
+      uniform float radius;
+      uniform float distort;
+      ${distort}
+      ${shader.vertexShader}
+    `;
+    shader.vertexShader = shader.vertexShader.replace('#include <begin_vertex>', `
+        float updateTime = time / 50.0;
+        float noise = snoise(vec3(position / 2.0 + updateTime * 5.0));
+        vec3 transformed = vec3(position * (noise * pow(distort, 2.0) + radius));
+        `);
+  }
+
+  get time() {
+    return this._time.value;
+  }
+
+  set time(v) {
+    this._time.value = v;
+  }
+
+  get distort() {
+    return this._distort.value;
+  }
+
+  set distort(v) {
+    this._distort.value = v;
+  }
+
+  get radius() {
+    return this._radius.value;
+  }
+
+  set radius(v) {
+    this._radius.value = v;
+  }
+
+}
+
+const MeshDistortMaterial = /*#__PURE__*/React.forwardRef(({
+  speed = 1,
+  ...props
+}, ref) => {
+  const [material] = React.useState(() => new DistortMaterialImpl());
+  useFrame(state => material && (material.time = state.clock.getElapsedTime() * speed));
+  return /*#__PURE__*/React.createElement("primitive", _extends({
+    object: material,
+    ref: ref,
+    attach: "material"
+  }, props));
+});
+
+export { MeshDistortMaterial };

package/src/core/MeshPortalMaterial.js

@@ -0,0 +1,381 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { extend, useThree, useFrame } from '@react-three/fiber';
+import { useFBO } from './useFBO.js';
+import { RenderTexture } from './RenderTexture.js';
+import { shaderMaterial } from './shaderMaterial.js';
+import { FullScreenQuad } from 'three-stdlib';
+
+const PortalMaterialImpl = shaderMaterial({
+  blur: 0,
+  map: null,
+  sdf: null,
+  size: 0,
+  resolution: new THREE.Vector2()
+}, `varying vec2 vUv;
+   void main() {
+     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+     vUv = uv;
+   }`, `uniform sampler2D sdf;
+   uniform sampler2D map;
+   uniform float blur;
+   uniform float size;
+   uniform float time;
+   uniform vec2 resolution;
+   varying vec2 vUv;
+   #include <packing>
+   void main() {
+     vec2 uv = gl_FragCoord.xy / resolution.xy;
+     vec4 t = texture2D(map, uv);
+     float k = blur;
+     float d = texture2D(sdf, vUv).r/size;
+     float alpha = 1.0 - smoothstep(0.0, 1.0, clamp(d/k + 1.0, 0.0, 1.0));
+     gl_FragColor = vec4(t.rgb, blur == 0.0 ? t.a : t.a * alpha);
+     #include <tonemapping_fragment>
+     #include <encodings_fragment>
+   }`);
+const MeshPortalMaterial = /*#__PURE__*/React.forwardRef(({
+  children,
+  blur = 0,
+  eventPriority,
+  renderPriority,
+  worldUnits = false,
+  resolution = 512,
+  ...props
+}, fref) => {
+  extend({
+    PortalMaterialImpl
+  });
+  const ref = React.useRef(null);
+  const {
+    gl,
+    size,
+    events,
+    viewport
+  } = useThree();
+  const maskRenderTarget = useFBO(resolution, resolution);
+  React.useLayoutEffect(() => {
+    var _ref$current;
+
+    let mask = (_ref$current = ref.current) == null ? void 0 : _ref$current.__r3f.parent;
+    if (!mask) return; // Apply the SDF mask only once
+
+    if (blur && ref.current.sdf === null) {
+      const tempMesh = new THREE.Mesh(mask.geometry, new THREE.MeshBasicMaterial());
+      const boundingBox = new THREE.Box3().setFromBufferAttribute(tempMesh.geometry.attributes.position);
+      const orthoCam = new THREE.OrthographicCamera(boundingBox.min.x * (1 + 2 / resolution), boundingBox.max.x * (1 + 2 / resolution), boundingBox.max.y * (1 + 2 / resolution), boundingBox.min.y * (1 + 2 / resolution), 0.1, 1000);
+      orthoCam.position.set(0, 0, 1);
+      orthoCam.lookAt(0, 0, 0);
+      gl.setRenderTarget(maskRenderTarget);
+      gl.render(tempMesh, orthoCam);
+      const sg = makeSDFGenerator(resolution, resolution, gl);
+      const sdf = sg(maskRenderTarget.texture);
+      const readSdf = new Float32Array(resolution * resolution);
+      gl.readRenderTargetPixels(sdf, 0, 0, resolution, resolution, readSdf); // Get smallest value in sdf
+
+      let min = Infinity;
+
+      for (let i = 0; i < readSdf.length; i++) {
+        if (readSdf[i] < min) min = readSdf[i];
+      }
+
+      min = -min;
+      ref.current.size = min;
+      ref.current.sdf = sdf.texture;
+      gl.setRenderTarget(null);
+    }
+  }, [resolution, blur]);
+  React.useImperativeHandle(fref, () => ref.current);
+  return /*#__PURE__*/React.createElement("portalMaterialImpl", _extends({
+    ref: ref,
+    blur: blur,
+    resolution: [size.width * viewport.dpr, size.height * viewport.dpr],
+    toneMapped: false,
+    attach: "material"
+  }, props), /*#__PURE__*/React.createElement(RenderTexture, {
+    attach: "map",
+    eventPriority: eventPriority,
+    renderPriority: renderPriority,
+    compute: events.compute
+  }, children, /*#__PURE__*/React.createElement(CopyMatrix, {
+    material: ref,
+    worldUnits: worldUnits
+  })));
+});
+
+function CopyMatrix({
+  material,
+  worldUnits
+}) {
+  const scene = useThree(state => state.scene);
+  React.useLayoutEffect(() => {
+    scene.matrixAutoUpdate = false;
+  }, []);
+  useFrame(() => {
+    var _material$current;
+
+    let parent = material == null ? void 0 : (_material$current = material.current) == null ? void 0 : _material$current.__r3f.parent;
+
+    if (parent) {
+      if (!worldUnits) scene.matrixWorld.copy(parent.matrixWorld);else scene.matrixWorld.identity();
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+}
+
+const makeSDFGenerator = (clientWidth, clientHeight, renderer) => {
+  let finalTarget = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+    minFilter: THREE.LinearMipmapLinearFilter,
+    magFilter: THREE.LinearFilter,
+    type: THREE.FloatType,
+    format: THREE.RedFormat,
+    generateMipmaps: true
+  });
+  let outsideRenderTarget = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+    minFilter: THREE.NearestFilter,
+    magFilter: THREE.NearestFilter
+  });
+  let insideRenderTarget = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+    minFilter: THREE.NearestFilter,
+    magFilter: THREE.NearestFilter
+  });
+  let outsideRenderTarget2 = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+    minFilter: THREE.NearestFilter,
+    magFilter: THREE.NearestFilter
+  });
+  let insideRenderTarget2 = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+    minFilter: THREE.NearestFilter,
+    magFilter: THREE.NearestFilter
+  });
+  let outsideRenderTargetFinal = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+    minFilter: THREE.NearestFilter,
+    magFilter: THREE.NearestFilter,
+    type: THREE.FloatType,
+    format: THREE.RedFormat
+  });
+  let insideRenderTargetFinal = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+    minFilter: THREE.NearestFilter,
+    magFilter: THREE.NearestFilter,
+    type: THREE.FloatType,
+    format: THREE.RedFormat
+  });
+  const uvRender = new FullScreenQuad(new THREE.ShaderMaterial({
+    uniforms: {
+      tex: {
+        value: null
+      }
+    },
+    vertexShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }`,
+    fragmentShader:
+    /*glsl*/
+    `
+        uniform sampler2D tex;
+        varying vec2 vUv;
+        #include <packing>
+        void main() {
+          gl_FragColor = pack2HalfToRGBA(vUv * (round(texture2D(tex, vUv).x)));
+        }`
+  }));
+  const uvRenderInside = new FullScreenQuad(new THREE.ShaderMaterial({
+    uniforms: {
+      tex: {
+        value: null
+      }
+    },
+    vertexShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }`,
+    fragmentShader:
+    /*glsl*/
+    `
+        uniform sampler2D tex;
+        varying vec2 vUv;
+        #include <packing>
+        void main() {
+          gl_FragColor = pack2HalfToRGBA(vUv * (1.0 - round(texture2D(tex, vUv).x)));
+        }`
+  }));
+  const jumpFloodRender = new FullScreenQuad(new THREE.ShaderMaterial({
+    uniforms: {
+      tex: {
+        value: null
+      },
+      offset: {
+        value: 0.0
+      },
+      level: {
+        value: 0.0
+      },
+      maxSteps: {
+        value: 0.0
+      }
+    },
+    vertexShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }`,
+    fragmentShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        uniform sampler2D tex;
+        uniform float offset;
+        uniform float level;
+        uniform float maxSteps;
+        #include <packing>
+        void main() {
+          float closestDist = 9999999.9;
+          vec2 closestPos = vec2(0.0);
+          for (float x = -1.0; x <= 1.0; x += 1.0) {
+            for (float y = -1.0; y <= 1.0; y += 1.0) {
+              vec2 voffset = vUv;
+              voffset += vec2(x, y) * vec2(${1 / clientWidth}, ${1 / clientHeight}) * offset;
+              vec2 pos = unpackRGBATo2Half(texture2D(tex, voffset));
+              float dist = distance(pos.xy, vUv);
+              if(pos.x != 0.0 && pos.y != 0.0 && dist < closestDist) {
+                closestDist = dist;
+                closestPos = pos;
+              }
+            }
+          }
+          gl_FragColor = pack2HalfToRGBA(closestPos);
+        }`
+  }));
+  const distanceFieldRender = new FullScreenQuad(new THREE.ShaderMaterial({
+    uniforms: {
+      tex: {
+        value: null
+      },
+      size: {
+        value: new THREE.Vector2(clientWidth, clientHeight)
+      }
+    },
+    vertexShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }`,
+    fragmentShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        uniform sampler2D tex;
+        uniform vec2 size;
+        #include <packing>
+        void main() {
+          gl_FragColor = vec4(distance(size * unpackRGBATo2Half(texture2D(tex, vUv)), size * vUv), 0.0, 0.0, 0.0);
+        }`
+  }));
+  const compositeRender = new FullScreenQuad(new THREE.ShaderMaterial({
+    uniforms: {
+      inside: {
+        value: insideRenderTargetFinal.texture
+      },
+      outside: {
+        value: outsideRenderTargetFinal.texture
+      },
+      tex: {
+        value: null
+      }
+    },
+    vertexShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }`,
+    fragmentShader:
+    /*glsl*/
+    `
+        varying vec2 vUv;
+        uniform sampler2D inside;
+        uniform sampler2D outside;
+        uniform sampler2D tex;
+        #include <packing>
+        void main() {
+          float i = texture2D(inside, vUv).x;
+          float o =texture2D(outside, vUv).x;
+          if (texture2D(tex, vUv).x == 0.0) {
+            gl_FragColor = vec4(o, 0.0, 0.0, 0.0);
+          } else {
+            gl_FragColor = vec4(-i, 0.0, 0.0, 0.0);
+          }
+        }`
+  }));
+  return image => {
+    let ft = finalTarget;
+    image.minFilter = THREE.NearestFilter;
+    image.magFilter = THREE.NearestFilter;
+    uvRender.material.uniforms.tex.value = image;
+    renderer.setRenderTarget(outsideRenderTarget);
+    uvRender.render(renderer);
+    const passes = Math.ceil(Math.log(Math.max(clientWidth, clientHeight)) / Math.log(2.0));
+    let lastTarget = outsideRenderTarget;
+    let target = null;
+
+    for (let i = 0; i < passes; i++) {
+      const offset = Math.pow(2, passes - i - 1);
+      target = lastTarget === outsideRenderTarget ? outsideRenderTarget2 : outsideRenderTarget;
+      jumpFloodRender.material.uniforms.level.value = i;
+      jumpFloodRender.material.uniforms.maxSteps.value = passes;
+      jumpFloodRender.material.uniforms.offset.value = offset;
+      jumpFloodRender.material.uniforms.tex.value = lastTarget.texture;
+      renderer.setRenderTarget(target);
+      jumpFloodRender.render(renderer);
+      lastTarget = target;
+    }
+
+    renderer.setRenderTarget(outsideRenderTargetFinal);
+    distanceFieldRender.material.uniforms.tex.value = target.texture;
+    distanceFieldRender.render(renderer);
+    uvRenderInside.material.uniforms.tex.value = image;
+    renderer.setRenderTarget(insideRenderTarget);
+    uvRenderInside.render(renderer);
+    lastTarget = insideRenderTarget;
+
+    for (let i = 0; i < passes; i++) {
+      const offset = Math.pow(2, passes - i - 1);
+      target = lastTarget === insideRenderTarget ? insideRenderTarget2 : insideRenderTarget;
+      jumpFloodRender.material.uniforms.level.value = i;
+      jumpFloodRender.material.uniforms.maxSteps.value = passes;
+      jumpFloodRender.material.uniforms.offset.value = offset;
+      jumpFloodRender.material.uniforms.tex.value = lastTarget.texture;
+      renderer.setRenderTarget(target);
+      jumpFloodRender.render(renderer);
+      lastTarget = target;
+    }
+
+    renderer.setRenderTarget(insideRenderTargetFinal);
+    distanceFieldRender.material.uniforms.tex.value = target.texture;
+    distanceFieldRender.render(renderer);
+    renderer.setRenderTarget(ft);
+    compositeRender.material.uniforms.tex.value = image;
+    compositeRender.render(renderer);
+    renderer.setRenderTarget(null);
+    return ft;
+  };
+};
+
+export { MeshPortalMaterial };