@react-three/drei 9.17.3 → 9.19.1

package/README.md

@@ -179,6 +179,8 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#spotlight">SpotLight</a></li>
           <li><a href="#shadow">Shadow</a></li>
           <li><a href="#contactshadows">ContactShadows</a></li>
+          <li><a href="#randomizedlight">RandomizedLight</a></li>
+          <li><a href="#accumulativeshadows">AccumulativeShadows</a></li>
           <li><a href="#sky">Sky</a></li>
           <li><a href="#stars">Stars</a></li>
           <li><a href="#sparkles">Sparkles</a></li>
@@ -997,8 +999,6 @@ Antialiased round dots. It takes the same props as regular [THREE.PointsMaterial
 
 #### softShadows
 
-[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/shaders-softshadows--soft-shadows-st)
-
 <p>
   <a href="https://codesandbox.io/s/dh2jc"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/dh2jc/screenshot.png" alt="Demo"/></a>
 </p>
@@ -2143,6 +2143,81 @@ Since this is a rather expensive effect you can limit the amount of frames it re
 <ContactShadows frames={1} />
 ```
 
+### RandomizedLight
+
+A randomized light that internally runs multiple lights and jiggles them. See below, you would normally pair it with `AccumulativeShadows`. This component is context aware, paired with AccumulativeShadows it will take the number of frames from its parent.
+
+```tsx
+type RandomizedLightProps = JSX.IntrinsicElements['group'] & {
+  /** How many frames it will jiggle the lights, 1.
+   *  Frames is context aware, if a provider like AccumulativeShadows exists, frames will be taken from there!  */
+  frames?: number
+  /** Light position, [0, 0, 0] */
+  position?: [x: number, y: number, z: number]
+  /** Radius of the jiggle, higher values make softer light, 5 */
+  radius?: number
+  /** Amount of lights, 8 */
+  amount?: number
+  /** Light intensity, 1 */
+  intensity?: number
+  /** Ambient occlusion, lower values mean less AO, hight more, you can mix AO and directional light, 0.5 */
+  ambient?: number
+  /** If the lights cast shadows, this is true by default */
+  castShadow?: boolean
+  /** Default shadow bias, 0 */
+  bias?: number
+  /** Default map size, 512 */
+  mapSize?: number
+  /** Default size of the shadow camera, 10 */
+  size?: number
+  /** Default shadow camera near, 0.5 */
+  near?: number
+  /** Default shadow camera far, 500 */
+  far?: number
+}
+```
+
+```jsx
+<RandomizedLight castShadow amount={8} frames={100} position={[5, 5, -10]} />
+```
+
+###  AccumulativeShadows
+
+<p>
+  <a href="https://codesandbox.io/s/hxcc1x"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/hxcc1x/screenshot.png" alt="Demo"/></a>
+</p>
+
+A planar, Y-up oriented shadow-catcher that can accumulate into soft shadows and has zero performance impact after all frames have accumulated. It can be temporal, it will accumulate over time, or instantaneous, which might expensive depending on how many frames you render.
+
+You must pair it with lightsources (and scene objects!) that cast shadows, which go into the children slot. Best use it with the `RandomizedLight` component, which jiggles a set of lights around, creating realistic raycast-like shadows and ambient occlusion.
+
+```tsx
+type AccumulativeShadowsProps = JSX.IntrinsicElements['group'] & {
+  /** How many frames it can render, more yields cleaner results but takes more time, 40 */
+  frames?: number
+  /** If frames === Infinity blend controls the refresh ratio, 100 */
+  blend?: number
+  /** Scale of the plane,  */
+  scale?: number
+  /** Temporal accumulates shadows over time which is more performant but has a visual regression over instant results, false  */
+  temporal?: false
+  /** Opacity of the plane, 1 */
+  opacity?: number
+  /** Discards alpha pixels, 0.65 */
+  alphaTest?: number
+  /** Shadow color, black */
+  color?: string
+  /** Buffer resolution, 1024 */
+  resolution?: number
+}
+```
+
+```jsx
+<AccumulativeShadows temporal frames={100} scale={10}>
+  <RandomizedLight castShadow amount={8} position={[5, 5, -10]} />
+</AccumulativeShadows>
+```
+
 #### SpotLight
 
 <p>

package/core/AccumulativeShadows.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),a=require("@react-three/fiber"),n=require("react-merge-refs");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 a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var o=i(e),u=s(r),l=s(t),c=i(n);class h{constructor(e,r,t=1024){this.renderer=e,this.res=t,this.scene=r,this.scene.background=null,this.buffer1Active=!1;const a=/(Android|iPad|iPhone|iPod)/g.test(navigator.userAgent)?u.HalfFloatType:u.FloatType;this.progressiveLightMap1=new u.WebGLRenderTarget(this.res,this.res,{type:a}),this.progressiveLightMap2=new u.WebGLRenderTarget(this.res,this.res,{type:a}),this.uvMat=new u.MeshPhongMaterial({shininess:0,specular:new u.Color("black")}),this.uniforms={},this.uvMat.onBeforeCompile=e=>{e.vertexShader="#define USE_LIGHTMAP\n"+e.vertexShader.slice(0,-1)+"\tgl_Position = vec4((uv2 - 0.5) * 2.0, 1.0, 1.0); }";const r=e.fragmentShader.indexOf("void main() {");e.fragmentShader=e.fragmentShader.replace("#include <clipping_planes_pars_fragment>","#include <clipping_planes_pars_fragment>\n#include <shadowmask_pars_fragment>\n"),e.fragmentShader="varying vec2 vUv2;\n"+e.fragmentShader.slice(0,r)+"\tuniform sampler2D previousShadowMap;\n\tuniform float averagingWindow;\n"+e.fragmentShader.slice(r-1,-1)+"\nvec3 texelOld = texture2D(previousShadowMap, vUv2).rgb;\n        gl_FragColor.rgb = mix(texelOld, gl_FragColor.rgb, 1.0/averagingWindow);\n      }",e.uniforms.previousShadowMap={value:this.progressiveLightMap1.texture},e.uniforms.averagingWindow={value:100},this.uniforms=e.uniforms}}clear(){this.renderer.setRenderTarget(this.progressiveLightMap1),this.renderer.clear(),this.renderer.setRenderTarget(this.progressiveLightMap2),this.renderer.clear()}configureObject(e){const r=e.geometry.getAttribute("uv").clone();e.geometry.setAttribute("uv2",r),e.geometry.getAttribute("uv2").needsUpdate=!0}update(e,r=100){this.uniforms.averagingWindow={value:r},this.scene.overrideMaterial=this.uvMat;const t=this.buffer1Active?this.progressiveLightMap1:this.progressiveLightMap2,a=this.buffer1Active?this.progressiveLightMap2:this.progressiveLightMap1;this.renderer.setRenderTarget(t),this.uniforms.previousShadowMap={value:a.texture},this.buffer1Active=!this.buffer1Active,this.renderer.render(this.scene,e),this.scene.overrideMaterial=null,this.renderer.setRenderTarget(null)}}const f=l.createContext(null),d=l.forwardRef((({children:e,blend:r,frames:t=40,scale:n=10,temporal:i=!1,opacity:s=1,alphaTest:o=.65,color:c="black",resolution:d=1024,...g},p)=>{const m=a.useThree((e=>e.gl)),v=a.useThree((e=>e.scene)),M=a.useThree((e=>e.camera)),b=l.useRef(null),y=l.useRef(null),w=l.useRef(0),[S]=l.useState((()=>new h(m,v,d)));l.useLayoutEffect((()=>{S.configureObject(b.current)}),[]);const _=void 0===r&&t===1/0?100:t,T=l.useMemo((()=>{const e=Object.assign(new u.MeshBasicMaterial({opacity:0,transparent:!0,dithering:!0,depthWrite:!1,map:S.progressiveLightMap2.texture}),{uniforms:{ucolor:{value:new u.Color(c)},alphaTest:{value:0}}});return e.onBeforeCompile=r=>{e.uniforms=r.uniforms={...r.uniforms,...e.uniforms},r.fragmentShader=r.fragmentShader.replace("void main() {","uniform vec3 ucolor;\n           uniform float alphaTest;\n           void main() {"),r.fragmentShader=r.fragmentShader.replace("#include <dithering_fragment>","#include <dithering_fragment>\n           gl_FragColor = vec4(ucolor * gl_FragColor.r * 2.0, max(0.0, (1.0 - gl_FragColor.r / alphaTest)) * opacity);")},e}),[c]);function x(){y.current.visible=!0;const e=[];return v.traverse((r=>{(function(e){return e.isLight})(r)&&(e.push({object:r,intensity:r.intensity}),r.intensity=0)})),e}function L(e){y.current.visible=!1,e.forEach((({object:e,intensity:r})=>e.intensity=r))}function E(){t!==1/0&&(S.clear(),T.opacity=0,T.uniforms.alphaTest.value=0,w.current=0)}l.useEffect((()=>{if(!i){T.opacity=s,T.uniforms.alphaTest.value=o;const e=x();for(let e=0;e<_;e++)S.update(M,_);L(e)}})),a.useFrame((()=>{if(i&&w.current<t){T.opacity=Math.min(s,T.opacity+s/_),T.uniforms.alphaTest.value=Math.min(o,T.uniforms.alphaTest.value+o/_);const e=x();S.update(M,_),L(e),w.current++}}));const R=l.useMemo((()=>({refresh:E,count:w,frames:t})),[t]);return l.useImperativeHandle(p,(()=>R),[R]),l.useLayoutEffect(E),l.createElement("group",g,l.createElement("group",{traverse:()=>null,ref:y},l.createElement(f.Provider,{value:R},e)),l.createElement("mesh",{receiveShadow:!0,ref:b,material:T,scale:n,rotation:[-Math.PI/2,0,0]},l.createElement("planeGeometry",null)))})),g=l.forwardRef((({castShadow:e=!0,bias:r=0,mapSize:t=512,size:n=5,near:i=.5,far:s=500,frames:h=1,position:d=[0,0,0],radius:g=1,amount:p=8,intensity:m=1,ambient:v=.5,...M},b)=>{const y=l.useRef(null),w=new u.Vector3(...d).length(),S=l.useContext(f),_=l.useRef(0),T=S?S.count:_,x=S?S.frames:h;let L;return a.useFrame((()=>{if(T.current<x){for(let e=0;e<y.current.children.length;e++)if(L=y.current.children[e],Math.random()>v)L.position.set(d[0]+u.MathUtils.randFloatSpread(g),d[1]+u.MathUtils.randFloatSpread(g),d[2]+u.MathUtils.randFloatSpread(g));else{let e=Math.acos(2*Math.random()-1)-Math.PI/2,r=2*Math.PI*Math.random();L.position.set(Math.cos(e)*Math.cos(r)*w,Math.abs(Math.cos(e)*Math.sin(r)*w),Math.sin(e)*w)}S||T.current++}})),console.log(n,i,s),l.createElement("group",o.default({ref:c.default([y,b])},M),Array.from({length:p},((a,o)=>l.createElement("directionalLight",{key:o,castShadow:e,"shadow-bias":r,"shadow-mapSize":[t,t],intensity:m/p},l.createElement("orthographicCamera",{attach:"shadow-camera",args:[-n,n,n,-n,i,s]})))))}));exports.AccumulativeShadows=d,exports.RandomizedLight=g,exports.accumulativeContext=f;

package/core/AccumulativeShadows.d.ts

@@ -0,0 +1,67 @@
+import * as THREE from 'three';
+import * as React from 'react';
+export declare const accumulativeContext: React.Context<{
+    refresh: (force?: boolean | undefined) => void;
+    count: React.MutableRefObject<number>;
+    frames: number;
+}>;
+export declare const AccumulativeShadows: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<THREE.Group>, import("@react-three/fiber").NodeProps<THREE.Group, typeof THREE.Group>>>, import("@react-three/fiber").NonFunctionKeys<{
+    position?: import("@react-three/fiber").Vector3 | undefined;
+    up?: import("@react-three/fiber").Vector3 | undefined;
+    scale?: import("@react-three/fiber").Vector3 | undefined;
+    rotation?: import("@react-three/fiber").Euler | undefined;
+    matrix?: import("@react-three/fiber").Matrix4 | undefined;
+    quaternion?: import("@react-three/fiber").Quaternion | undefined;
+    layers?: import("@react-three/fiber").Layers | undefined;
+    dispose?: (() => void) | null | undefined;
+}>> & {
+    position?: import("@react-three/fiber").Vector3 | undefined;
+    up?: import("@react-three/fiber").Vector3 | undefined;
+    scale?: import("@react-three/fiber").Vector3 | undefined;
+    rotation?: import("@react-three/fiber").Euler | undefined;
+    matrix?: import("@react-three/fiber").Matrix4 | undefined;
+    quaternion?: import("@react-three/fiber").Quaternion | undefined;
+    layers?: import("@react-three/fiber").Layers | undefined;
+    dispose?: (() => void) | null | undefined;
+} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
+    frames?: number | undefined;
+    blend?: number | undefined;
+    scale?: number | undefined;
+    temporal?: boolean | undefined;
+    opacity?: number | undefined;
+    alphaTest?: number | undefined;
+    color?: string | undefined;
+    resolution?: number | undefined;
+}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "opacity" | "alphaTest" | "resolution" | "frames" | "blend" | "temporal"> & React.RefAttributes<unknown>>;
+export declare const RandomizedLight: React.ForwardRefExoticComponent<Pick<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<THREE.Group>, import("@react-three/fiber").NodeProps<THREE.Group, typeof THREE.Group>>>, import("@react-three/fiber").NonFunctionKeys<{
+    position?: import("@react-three/fiber").Vector3 | undefined;
+    up?: import("@react-three/fiber").Vector3 | undefined;
+    scale?: import("@react-three/fiber").Vector3 | undefined;
+    rotation?: import("@react-three/fiber").Euler | undefined;
+    matrix?: import("@react-three/fiber").Matrix4 | undefined;
+    quaternion?: import("@react-three/fiber").Quaternion | undefined;
+    layers?: import("@react-three/fiber").Layers | undefined;
+    dispose?: (() => void) | null | undefined;
+}>> & {
+    position?: import("@react-three/fiber").Vector3 | undefined;
+    up?: import("@react-three/fiber").Vector3 | undefined;
+    scale?: import("@react-three/fiber").Vector3 | undefined;
+    rotation?: import("@react-three/fiber").Euler | undefined;
+    matrix?: import("@react-three/fiber").Matrix4 | undefined;
+    quaternion?: import("@react-three/fiber").Quaternion | undefined;
+    layers?: import("@react-three/fiber").Layers | undefined;
+    dispose?: (() => void) | null | undefined;
+} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
+    frames?: number | undefined;
+    position?: [x: number, y: number, z: number] | undefined;
+    radius?: number | undefined;
+    amount?: number | undefined;
+    intensity?: number | undefined;
+    ambient?: number | undefined;
+    castShadow?: boolean | undefined;
+    bias?: number | undefined;
+    mapSize?: number | undefined;
+    size?: number | undefined;
+    near?: number | undefined;
+    far?: number | undefined;
+}, "visible" | "attach" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "isGroup" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "size" | "near" | "far" | "intensity" | "frames" | "radius" | "bias" | "mapSize" | "amount" | "ambient"> & React.RefAttributes<unknown>>;

package/core/AccumulativeShadows.js

@@ -0,0 +1,276 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import mergeRefs from 'react-merge-refs';
+
+class ProgressiveLightMap {
+  constructor(renderer, scene, res = 1024) {
+    this.renderer = renderer;
+    this.res = res;
+    this.scene = scene;
+    this.scene.background = null;
+    this.buffer1Active = false; // Create the Progressive LightMap Texture
+
+    const format = /(Android|iPad|iPhone|iPod)/g.test(navigator.userAgent) ? THREE.HalfFloatType : THREE.FloatType;
+    this.progressiveLightMap1 = new THREE.WebGLRenderTarget(this.res, this.res, {
+      type: format
+    });
+    this.progressiveLightMap2 = new THREE.WebGLRenderTarget(this.res, this.res, {
+      type: format
+    }); // Inject some spicy new logic into a standard phong material
+
+    this.uvMat = new THREE.MeshPhongMaterial({
+      shininess: 0,
+      specular: new THREE.Color('black')
+    });
+    this.uniforms = {};
+
+    this.uvMat.onBeforeCompile = shader => {
+      // Vertex Shader: Set Vertex Positions to the Unwrapped UV Positions
+      shader.vertexShader = '#define USE_LIGHTMAP\n' + shader.vertexShader.slice(0, -1) + '	gl_Position = vec4((uv2 - 0.5) * 2.0, 1.0, 1.0); }'; // Fragment Shader: Set Pixels to average in the Previous frame's Shadows
+
+      const bodyStart = shader.fragmentShader.indexOf('void main() {');
+      shader.fragmentShader = shader.fragmentShader.replace('#include <clipping_planes_pars_fragment>', '#include <clipping_planes_pars_fragment>\n#include <shadowmask_pars_fragment>\n');
+      shader.fragmentShader = 'varying vec2 vUv2;\n' + shader.fragmentShader.slice(0, bodyStart) + '	uniform sampler2D previousShadowMap;\n	uniform float averagingWindow;\n' + shader.fragmentShader.slice(bodyStart - 1, -1) + `\nvec3 texelOld = texture2D(previousShadowMap, vUv2).rgb;
+        gl_FragColor.rgb = mix(texelOld, gl_FragColor.rgb, 1.0/averagingWindow);
+      }`; // Set the Previous Frame's Texture Buffer and Averaging Window
+
+      shader.uniforms.previousShadowMap = {
+        value: this.progressiveLightMap1.texture
+      };
+      shader.uniforms.averagingWindow = {
+        value: 100
+      };
+      this.uniforms = shader.uniforms;
+    };
+  }
+
+  clear() {
+    this.renderer.setRenderTarget(this.progressiveLightMap1);
+    this.renderer.clear();
+    this.renderer.setRenderTarget(this.progressiveLightMap2);
+    this.renderer.clear();
+  }
+
+  configureObject(object) {
+    const uv2 = object.geometry.getAttribute('uv').clone();
+    object.geometry.setAttribute('uv2', uv2);
+    object.geometry.getAttribute('uv2').needsUpdate = true;
+  }
+
+  update(camera, blendWindow = 100) {
+    // Set each object's material to the UV Unwrapped Surface Mapping Version
+    this.uniforms.averagingWindow = {
+      value: blendWindow
+    };
+    this.scene.overrideMaterial = this.uvMat; // Ping-pong two surface buffers for reading/writing
+
+    const activeMap = this.buffer1Active ? this.progressiveLightMap1 : this.progressiveLightMap2;
+    const inactiveMap = this.buffer1Active ? this.progressiveLightMap2 : this.progressiveLightMap1; // Render the object's surface maps
+
+    this.renderer.setRenderTarget(activeMap);
+    this.uniforms.previousShadowMap = {
+      value: inactiveMap.texture
+    };
+    this.buffer1Active = !this.buffer1Active;
+    this.renderer.render(this.scene, camera);
+    this.scene.overrideMaterial = null;
+    this.renderer.setRenderTarget(null);
+  }
+
+}
+
+function isLight(object) {
+  return object.isLight;
+}
+
+const accumulativeContext = /*#__PURE__*/React.createContext(null);
+const AccumulativeShadows = /*#__PURE__*/React.forwardRef(({
+  children,
+  blend,
+  frames = 40,
+  scale = 10,
+  temporal = false,
+  opacity = 1,
+  alphaTest = 0.65,
+  color = 'black',
+  resolution = 1024,
+  ...props
+}, forwardRef) => {
+  const gl = useThree(state => state.gl);
+  const scene = useThree(state => state.scene);
+  const defaultCamera = useThree(state => state.camera);
+  const gPlane = React.useRef(null);
+  const gLights = React.useRef(null);
+  const count = React.useRef(0);
+  const [plm] = React.useState(() => new ProgressiveLightMap(gl, scene, resolution));
+  React.useLayoutEffect(() => {
+    plm.configureObject(gPlane.current);
+  }, []);
+  const blendFrames = blend === undefined ? frames === Infinity ? 100 : frames : frames;
+  const material = React.useMemo(() => {
+    const mat = Object.assign(new THREE.MeshBasicMaterial({
+      opacity: 0,
+      transparent: true,
+      dithering: true,
+      depthWrite: false,
+      map: plm.progressiveLightMap2.texture
+    }), {
+      uniforms: {
+        ucolor: {
+          value: new THREE.Color(color)
+        },
+        alphaTest: {
+          value: 0
+        }
+      }
+    });
+
+    mat.onBeforeCompile = shader => {
+      mat.uniforms = shader.uniforms = { ...shader.uniforms,
+        ...mat.uniforms
+      };
+      shader.fragmentShader = shader.fragmentShader.replace(`void main() {`, `uniform vec3 ucolor;
+           uniform float alphaTest;
+           void main() {`);
+      shader.fragmentShader = shader.fragmentShader.replace('#include <dithering_fragment>', `#include <dithering_fragment>
+           gl_FragColor = vec4(ucolor * gl_FragColor.r * 2.0, max(0.0, (1.0 - gl_FragColor.r / alphaTest)) * opacity);`);
+    };
+
+    return mat;
+  }, [color]);
+
+  function prepare() {
+    gLights.current.visible = true;
+    const intensities = [];
+    scene.traverse(object => {
+      if (isLight(object)) {
+        intensities.push({
+          object,
+          intensity: object.intensity
+        });
+        object.intensity = 0;
+      }
+    });
+    return intensities;
+  }
+
+  function finish(intensities) {
+    gLights.current.visible = false;
+    intensities.forEach(({
+      object,
+      intensity
+    }) => object.intensity = intensity);
+  }
+
+  function refresh() {
+    if (frames !== Infinity) {
+      plm.clear();
+      material.opacity = 0;
+      material.uniforms.alphaTest.value = 0;
+      count.current = 0;
+    }
+  }
+
+  React.useEffect(() => {
+    if (!temporal) {
+      material.opacity = opacity;
+      material.uniforms.alphaTest.value = alphaTest;
+      const intensities = prepare();
+
+      for (let i = 0; i < blendFrames; i++) plm.update(defaultCamera, blendFrames);
+
+      finish(intensities);
+    }
+  });
+  useFrame(() => {
+    if (temporal && count.current < frames) {
+      material.opacity = Math.min(opacity, material.opacity + opacity / blendFrames);
+      material.uniforms.alphaTest.value = Math.min(alphaTest, material.uniforms.alphaTest.value + alphaTest / blendFrames);
+      const intensities = prepare();
+      plm.update(defaultCamera, blendFrames);
+      finish(intensities);
+      count.current++;
+    }
+  }); // Expose refresh api
+
+  const api = React.useMemo(() => ({
+    refresh,
+    count,
+    frames
+  }), [frames]);
+  React.useImperativeHandle(forwardRef, () => api, [api]); // Refresh on render
+
+  React.useLayoutEffect(refresh);
+  return /*#__PURE__*/React.createElement("group", props, /*#__PURE__*/React.createElement("group", {
+    traverse: () => null,
+    ref: gLights
+  }, /*#__PURE__*/React.createElement(accumulativeContext.Provider, {
+    value: api
+  }, children)), /*#__PURE__*/React.createElement("mesh", {
+    receiveShadow: true,
+    ref: gPlane,
+    material: material,
+    scale: scale,
+    rotation: [-Math.PI / 2, 0, 0]
+  }, /*#__PURE__*/React.createElement("planeGeometry", null)));
+});
+const RandomizedLight = /*#__PURE__*/React.forwardRef(({
+  castShadow = true,
+  bias = 0,
+  mapSize = 512,
+  size = 5,
+  near = 0.5,
+  far = 500,
+  frames = 1,
+  position = [0, 0, 0],
+  radius = 1,
+  amount = 8,
+  intensity = 1,
+  ambient = 0.5,
+  ...props
+}, forwardRef) => {
+  const gLights = React.useRef(null);
+  const length = new THREE.Vector3(...position).length();
+  const parent = React.useContext(accumulativeContext);
+  const count = React.useRef(0);
+  const actualCount = parent ? parent.count : count;
+  const actualFrames = parent ? parent.frames : frames;
+  let light;
+  useFrame(() => {
+    if (actualCount.current < actualFrames) {
+      for (let l = 0; l < gLights.current.children.length; l++) {
+        light = gLights.current.children[l];
+
+        if (Math.random() > ambient) {
+          light.position.set(position[0] + THREE.MathUtils.randFloatSpread(radius), position[1] + THREE.MathUtils.randFloatSpread(radius), position[2] + THREE.MathUtils.randFloatSpread(radius));
+        } else {
+          let lambda = Math.acos(2 * Math.random() - 1) - Math.PI / 2.0;
+          let phi = 2 * Math.PI * Math.random();
+          light.position.set(Math.cos(lambda) * Math.cos(phi) * length, Math.abs(Math.cos(lambda) * Math.sin(phi) * length), Math.sin(lambda) * length);
+        }
+      } // Do not count up if a perent exists
+
+
+      if (!parent) actualCount.current++;
+    }
+  });
+  console.log(size, near, far);
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: mergeRefs([gLights, forwardRef])
+  }, props), Array.from({
+    length: amount
+  }, (_, index) => /*#__PURE__*/React.createElement("directionalLight", {
+    key: index,
+    castShadow: castShadow,
+    "shadow-bias": bias,
+    "shadow-mapSize": [mapSize, mapSize],
+    intensity: intensity / amount
+  }, /*#__PURE__*/React.createElement("orthographicCamera", {
+    attach: "shadow-camera",
+    args: [-size, size, size, -size, near, far]
+  }))));
+});
+
+export { AccumulativeShadows, RandomizedLight, accumulativeContext };

package/core/ContactShadows.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"),a=require("@react-three/fiber"),n=require("three-stdlib");function o(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 a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var u=o(e),c=i(r),l=i(t);const s=c.forwardRef((({scale:e=10,frames:r=1/0,opacity:t=1,width:o=1,height:i=1,blur:s=1,far:d=10,resolution:f=512,smooth:h=!0,color:m="#000000",depthWrite:p=!1,renderOrder:g,...v},b)=>{const M=a.useThree((e=>e.scene)),y=a.useThree((e=>e.gl)),w=c.useRef(null);o*=Array.isArray(e)?e[0]:e||1,i*=Array.isArray(e)?e[1]:e||1;const[T,S,x,O,R,j,P]=c.useMemo((()=>{const e=new l.WebGLRenderTarget(f,f),r=new l.WebGLRenderTarget(f,f);r.texture.generateMipmaps=e.texture.generateMipmaps=!1;const t=new l.PlaneBufferGeometry(o,i).rotateX(Math.PI/2),a=new l.Mesh(t),u=new l.MeshDepthMaterial;u.depthTest=u.depthWrite=!1,u.onBeforeCompile=e=>{e.uniforms={...e.uniforms,ucolor:{value:new l.Color(m).convertSRGBToLinear()}},e.fragmentShader=e.fragmentShader.replace("void main() {","uniform vec3 ucolor;\n           void main() {\n          "),e.fragmentShader=e.fragmentShader.replace("vec4( vec3( 1.0 - fragCoordZ ), opacity );","vec4( ucolor, ( 1.0 - fragCoordZ ) * 1.0 );")};const c=new l.ShaderMaterial(n.HorizontalBlurShader),s=new l.ShaderMaterial(n.VerticalBlurShader);return s.depthTest=c.depthTest=!1,[e,t,u,a,c,s,r]}),[f,o,i,e,m]),B=e=>{O.visible=!0,O.material=R,R.uniforms.tDiffuse.value=T.texture,R.uniforms.h.value=1*e/256,y.setRenderTarget(P),y.render(O,w.current),O.material=j,j.uniforms.tDiffuse.value=P.texture,j.uniforms.v.value=1*e/256,y.setRenderTarget(T),y.render(O,w.current),O.visible=!1};let C=0;return a.useFrame((()=>{if(w.current&&(r===1/0||C<r)){const e=M.background;M.background=null;const r=M.overrideMaterial;M.overrideMaterial=x,y.setRenderTarget(T),y.render(M,w.current),M.overrideMaterial=r,B(s),h&&B(.4*s),y.setRenderTarget(null),M.background=e,C++}})),c.createElement("group",u.default({"rotation-x":Math.PI/2},v,{ref:b}),c.createElement("mesh",{renderOrder:g,geometry:S,scale:[1,-1,1],rotation:[-Math.PI/2,0,0]},c.createElement("meshBasicMaterial",{map:T.texture,"map-encoding":y.outputEncoding,transparent:!0,opacity:t,depthWrite:p})),c.createElement("orthographicCamera",{ref:w,args:[-o/2,o/2,i/2,-i/2,0,d]}))}));exports.ContactShadows=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib");function o(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 a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var u=o(e),l=i(r),c=i(t);const s=l.forwardRef((({scale:e=10,frames:r=1/0,opacity:t=1,width:o=1,height:i=1,blur:s=1,far:d=10,resolution:f=512,smooth:h=!0,color:m="#000000",depthWrite:g=!1,renderOrder:p,...v},b)=>{const M=a.useThree((e=>e.scene)),y=a.useThree((e=>e.gl)),w=l.useRef(null);o*=Array.isArray(e)?e[0]:e||1,i*=Array.isArray(e)?e[1]:e||1;const[T,S,x,O,R,j,C]=l.useMemo((()=>{const e=new c.WebGLRenderTarget(f,f),r=new c.WebGLRenderTarget(f,f);r.texture.generateMipmaps=e.texture.generateMipmaps=!1;const t=new c.PlaneBufferGeometry(o,i).rotateX(Math.PI/2),a=new c.Mesh(t),u=new c.MeshDepthMaterial;u.depthTest=u.depthWrite=!1,u.onBeforeCompile=e=>{e.uniforms={...e.uniforms,ucolor:{value:new c.Color(m).convertSRGBToLinear()}},e.fragmentShader=e.fragmentShader.replace("void main() {","uniform vec3 ucolor;\n           void main() {\n          "),e.fragmentShader=e.fragmentShader.replace("vec4( vec3( 1.0 - fragCoordZ ), opacity );","vec4( ucolor * fragCoordZ * 2.0, ( 1.0 - fragCoordZ ) * 1.0 );"),console.log(e.fragmentShader)};const l=new c.ShaderMaterial(n.HorizontalBlurShader),s=new c.ShaderMaterial(n.VerticalBlurShader);return s.depthTest=l.depthTest=!1,[e,t,u,a,l,s,r]}),[f,o,i,e,m]),P=e=>{O.visible=!0,O.material=R,R.uniforms.tDiffuse.value=T.texture,R.uniforms.h.value=1*e/256,y.setRenderTarget(C),y.render(O,w.current),O.material=j,j.uniforms.tDiffuse.value=C.texture,j.uniforms.v.value=1*e/256,y.setRenderTarget(T),y.render(O,w.current),O.visible=!1};let B=0;return a.useFrame((()=>{if(w.current&&(r===1/0||B<r)){const e=M.background;M.background=null;const r=M.overrideMaterial;M.overrideMaterial=x,y.setRenderTarget(T),y.render(M,w.current),M.overrideMaterial=r,P(s),h&&P(.4*s),y.setRenderTarget(null),M.background=e,B++}})),l.createElement("group",u.default({"rotation-x":Math.PI/2},v,{ref:b}),l.createElement("mesh",{renderOrder:p,geometry:S,scale:[1,-1,1],rotation:[-Math.PI/2,0,0]},l.createElement("meshBasicMaterial",{map:T.texture,"map-encoding":y.outputEncoding,transparent:!0,opacity:t,depthWrite:g})),l.createElement("orthographicCamera",{ref:w,args:[-o/2,o/2,i/2,-i/2,0,d]}))}));exports.ContactShadows=s;

package/core/ContactShadows.js

@@ -43,7 +43,9 @@ const ContactShadows = /*#__PURE__*/React.forwardRef(({
       `uniform vec3 ucolor;
            void main() {
           `);
-      shader.fragmentShader = shader.fragmentShader.replace('vec4( vec3( 1.0 - fragCoordZ ), opacity );', 'vec4( ucolor, ( 1.0 - fragCoordZ ) * 1.0 );');
+      shader.fragmentShader = shader.fragmentShader.replace('vec4( vec3( 1.0 - fragCoordZ ), opacity );', // Colorize the shadow, multiply by the falloff so that the center can remain darker
+      'vec4( ucolor * fragCoordZ * 2.0, ( 1.0 - fragCoordZ ) * 1.0 );');
+      console.log(shader.fragmentShader);
     };
 
     const horizontalBlurMaterial = new THREE.ShaderMaterial(HorizontalBlurShader);

package/core/Environment.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),r=require("@react-three/fiber"),t=require("three"),o=require("three-stdlib"),i=require("../helpers/environment-assets.cjs.js"),c=require("./shapes.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}var s=a(e),l=u(n);const d=e=>{return(n=e).current&&n.current.isScene?e.current:e;var n};function f({scene:e,background:n=!1,map:t}){const o=r.useThree((e=>e.scene));return l.useLayoutEffect((()=>{if(t){const r=d(e||o),i=r.background,c=r.environment;return"only"!==n&&(r.environment=t),n&&(r.background=t),()=>{"only"!==n&&(r.environment=c),n&&(r.background=i)}}}),[o,e,t,n]),null}function m({files:e=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:n="",preset:c,encoding:a,extensions:u}){if(c){if(!(c in i.presetsObj))throw new Error("Preset must be one of: "+Object.keys(i.presetsObj).join(", "));e=i.presetsObj[c],n="https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/"}const s=Array.isArray(e),l=s?t.CubeTextureLoader:o.RGBELoader,d=r.useLoader(l,s?[e]:e,(e=>{e.setPath(n),u&&u(e)})),f=s?d[0]:d;return f.mapping=s?t.CubeReflectionMapping:t.EquirectangularReflectionMapping,f.encoding=(null!=a?a:s)?t.sRGBEncoding:t.LinearEncoding,f}function p({background:e=!1,scene:n,...t}){const o=m(t),i=r.useThree((e=>e.scene));return l.useLayoutEffect((()=>{const r=d(n||i),t=r.background,c=r.environment;return"only"!==e&&(r.environment=o),e&&(r.background=o),()=>{"only"!==e&&(r.environment=c),e&&(r.background=t)}}),[o,e,n,i]),null}function v({children:e,near:n=1,far:o=1e3,resolution:i=256,frames:c=1,map:a,background:u=!1,scene:s,files:m,path:v,preset:g,extensions:b}){const h=r.useThree((e=>e.gl)),E=r.useThree((e=>e.scene)),P=l.useRef(null),[x]=l.useState((()=>new t.Scene)),_=l.useMemo((()=>{const e=new t.WebGLCubeRenderTarget(i);return e.texture.type=t.HalfFloatType,e}),[i]);l.useLayoutEffect((()=>{1===c&&P.current.update(h,x);const e=d(s||E),n=e.background,r=e.environment;return"only"!==u&&(e.environment=_.texture),u&&(e.background=_.texture),()=>{"only"!==u&&(e.environment=r),u&&(e.background=n)}}),[e,x,_.texture,s,E,u,c,h]);let y=1;return r.useFrame((()=>{(c===1/0||y<c)&&(P.current.update(h,x),y++)})),l.createElement(l.Fragment,null,r.createPortal(l.createElement(l.Fragment,null,e,l.createElement("cubeCamera",{ref:P,args:[n,o,_]}),m||g?l.createElement(p,{background:!0,files:m,preset:g,path:v,extensions:b}):a?l.createElement(f,{background:!0,map:a,extensions:b}):null),x))}function g(e){var n,r,o,i;const a=m(e),u=e.map||a,d=(p=u)&&p.isCubeTexture;var p;const v=l.useMemo((()=>{var e,n;const r=(null!==(e=d?null==(n=u.image[0])?void 0:n.width:u.image.width)&&void 0!==e?e:1024)/4,t=Math.floor(Math.log2(r)),o=Math.pow(2,t),i=3*Math.max(o,112);return[d?"#define ENVMAP_TYPE_CUBE":"","#define CUBEUV_TEXEL_WIDTH "+1/i,"#define CUBEUV_TEXEL_HEIGHT "+1/(4*o),`#define CUBEUV_MAX_MIP ${t}.0`,""]}),[]),g=l.useMemo((()=>v.join("\n")+"#define GLSLIFY 1\n#define ENVMAP_TYPE_CUBE_UV\nvarying vec3 vWorldPosition;uniform float radius;uniform float height;\n#ifdef ENVMAP_TYPE_CUBE\nuniform samplerCube cubemap;\n#else\nuniform sampler2D cubemap;\n#endif\nfloat diskIntersectWithBackFaceCulling(in vec3 ro,in vec3 rd,vec3 c,vec3 n,float r){float d=dot(rd,n);if(d>0.0)return 1e6;vec3 o=ro-c;float t=-dot(n,o)/d;vec3 q=o+rd*t;return(dot(q,q)<r*r)? t : 1e6;}float sphereIntersect(in vec3 ro,in vec3 rd,in vec3 ce,float ra){vec3 oc=ro-ce;float b=dot(oc,rd);float c=dot(oc,oc)-ra*ra;float h=b*b-c;if(h<0.0)-1.0;h=sqrt(h);return-b+h;}vec3 project(){vec3 p=normalize(vWorldPosition);vec3 camPos=cameraPosition;camPos.y-=height;float intersection=sphereIntersect(camPos,p,vec3(0.),radius);if(intersection>0.){vec3 h=vec3(0.0,-height,0.0);float intersection2=diskIntersectWithBackFaceCulling(camPos,p,h,vec3(0.0,1.0,0.0),radius);p=(camPos+min(intersection,intersection2)*p)/radius;}else{p=vec3(0.0,1.0,0.0);}return p;}\n#include <common>\n#include <cube_uv_reflection_fragment>\nvoid main(){vec3 projectedWorldPosition=project();\n#ifdef ENVMAP_TYPE_CUBE\nvec3 outcolor=textureCube(cubemap,projectedWorldPosition).rgb;\n#else\nvec3 direction=normalize(projectedWorldPosition);vec2 uv=equirectUv(direction);vec3 outcolor=texture2D(cubemap,uv).rgb;\n#endif\ngl_FragColor=vec4(outcolor,1.0);\n#include <tonemapping_fragment>\n#include <encodings_fragment>\n}"),[v]),b=l.useMemo((()=>({cubemap:{value:null},height:{value:15},radius:{value:60}})),[]),h=l.useRef(null),E=null==(n=e.ground)?void 0:n.height,P=null==(r=e.ground)?void 0:r.radius,x=null!==(o=null==(i=e.ground)?void 0:i.scale)&&void 0!==o?o:1e3;return l.useEffect((()=>{E&&(h.current.uniforms.height.value=E)}),[E]),l.useEffect((()=>{P&&(h.current.uniforms.radius.value=P)}),[P]),l.useEffect((()=>{h.current.uniforms.cubemap.value=u}),[u]),l.createElement(l.Fragment,null,l.createElement(f,s.default({},e,{map:u})),l.createElement(c.Icosahedron,{scale:x,args:[1,16]},l.createElement("shaderMaterial",{ref:h,side:t.BackSide,vertexShader:"#define GLSLIFY 1\nvarying vec3 vWorldPosition;void main(){vec4 worldPosition=modelMatrix*vec4(position,1.0);vWorldPosition=worldPosition.xyz;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}",fragmentShader:g,uniforms:b})))}exports.Environment=function(e){return e.ground?l.createElement(g,e):e.map?l.createElement(f,e):e.children?l.createElement(v,e):l.createElement(p,e)},exports.EnvironmentCube=p,exports.EnvironmentMap=f,exports.EnvironmentPortal=v,exports.useEnvironment=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),r=require("@react-three/fiber"),t=require("three"),u=require("three-stdlib"),o=require("../helpers/environment-assets.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}var s=a(e),i=c(n);const l=e=>{return(n=e).current&&n.current.isScene?e.current:e;var n};function d({scene:e,background:n=!1,map:t}){const u=r.useThree((e=>e.scene));return i.useLayoutEffect((()=>{if(t){const r=l(e||u),o=r.background,a=r.environment;return"only"!==n&&(r.environment=t),n&&(r.background=t),()=>{"only"!==n&&(r.environment=a),n&&(r.background=o)}}}),[u,e,t,n]),null}function p({files:e=["/px.png","/nx.png","/py.png","/ny.png","/pz.png","/nz.png"],path:n="",preset:a,encoding:c,extensions:s}){if(a){if(!(a in o.presetsObj))throw new Error("Preset must be one of: "+Object.keys(o.presetsObj).join(", "));e=o.presetsObj[a],n="https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/"}const i=Array.isArray(e),l=i?t.CubeTextureLoader:u.RGBELoader,d=r.useLoader(l,i?[e]:e,(e=>{e.setPath(n),s&&s(e)})),p=i?d[0]:d;return p.mapping=i?t.CubeReflectionMapping:t.EquirectangularReflectionMapping,p.encoding=(null!=c?c:i)?t.sRGBEncoding:t.LinearEncoding,p}function m({background:e=!1,scene:n,...t}){const u=p(t),o=r.useThree((e=>e.scene));return i.useLayoutEffect((()=>{const r=l(n||o),t=r.background,a=r.environment;return"only"!==e&&(r.environment=u),e&&(r.background=u),()=>{"only"!==e&&(r.environment=a),e&&(r.background=t)}}),[u,e,n,o]),null}function g({children:e,near:n=1,far:u=1e3,resolution:o=256,frames:a=1,map:c,background:s=!1,scene:p,files:g,path:f,preset:b,extensions:v}){const E=r.useThree((e=>e.gl)),h=r.useThree((e=>e.scene)),y=i.useRef(null),[x]=i.useState((()=>new t.Scene)),k=i.useMemo((()=>{const e=new t.WebGLCubeRenderTarget(o);return e.texture.type=t.HalfFloatType,e}),[o]);i.useLayoutEffect((()=>{1===a&&y.current.update(E,x);const e=l(p||h),n=e.background,r=e.environment;return"only"!==s&&(e.environment=k.texture),s&&(e.background=k.texture),()=>{"only"!==s&&(e.environment=r),s&&(e.background=n)}}),[e,x,k.texture,p,h,s,a,E]);let j=1;return r.useFrame((()=>{(a===1/0||j<a)&&(y.current.update(E,x),j++)})),i.createElement(i.Fragment,null,r.createPortal(i.createElement(i.Fragment,null,e,i.createElement("cubeCamera",{ref:y,args:[n,u,k]}),g||b?i.createElement(m,{background:!0,files:g,preset:b,path:f,extensions:v}):c?i.createElement(d,{background:!0,map:c,extensions:v}):null),x))}function f(e){var n,t,o,a;const c=p(e),l=e.map||c;i.useMemo((()=>{r.extend({GroundProjectedEnvImpl:u.GroundProjectedEnv})}),[]);const m=i.useMemo((()=>[l]),[l]),g=null==(n=e.ground)?void 0:n.height,f=null==(t=e.ground)?void 0:t.radius,b=null!==(o=null==(a=e.ground)?void 0:a.scale)&&void 0!==o?o:1e3;return i.createElement(i.Fragment,null,i.createElement(d,s.default({},e,{map:l})),i.createElement("groundProjectedEnvImpl",{args:m,scale:b,height:g,radius:f}))}exports.Environment=function(e){return e.ground?i.createElement(f,e):e.map?i.createElement(d,e):e.children?i.createElement(g,e):i.createElement(m,e)},exports.EnvironmentCube=m,exports.EnvironmentMap=d,exports.EnvironmentPortal=g,exports.useEnvironment=p;

package/core/Environment.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { Object3DNode } from '@react-three/fiber';
 import { Texture, Scene, Loader, CubeTexture, TextureEncoding } from 'three';
+import { GroundProjectedEnv as GroundProjectedEnvImpl } from 'three-stdlib';
 import { PresetsType } from '../helpers/environment-assets';
 declare type Props = {
     children?: React.ReactNode;
@@ -25,5 +27,12 @@ export declare function EnvironmentMap({ scene, background, map }: Props): null;
 export declare function useEnvironment({ files, path, preset, encoding, extensions, }: Partial<Props>): Texture | CubeTexture;
 export declare function EnvironmentCube({ background, scene, ...rest }: Props): null;
 export declare function EnvironmentPortal({ children, near, far, resolution, frames, map, background, scene, files, path, preset, extensions, }: Props): JSX.Element;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            groundProjectedEnvImpl: Object3DNode<GroundProjectedEnvImpl, typeof GroundProjectedEnvImpl>;
+        }
+    }
+}
 export declare function Environment(props: Props): JSX.Element;
 export {};

package/core/Environment.js

@@ -1,17 +1,12 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { useThree, useLoader, useFrame, createPortal } from '@react-three/fiber';
-import { CubeReflectionMapping, EquirectangularReflectionMapping, sRGBEncoding, LinearEncoding, Scene, WebGLCubeRenderTarget, HalfFloatType, CubeTextureLoader, BackSide } from 'three';
-import { RGBELoader } from 'three-stdlib';
+import { useThree, useLoader, useFrame, createPortal, extend } from '@react-three/fiber';
+import { CubeReflectionMapping, EquirectangularReflectionMapping, sRGBEncoding, LinearEncoding, Scene, WebGLCubeRenderTarget, HalfFloatType, CubeTextureLoader } from 'three';
+import { RGBELoader, GroundProjectedEnv } from 'three-stdlib';
 import { presetsObj } from '../helpers/environment-assets.js';
-import vertexShader from '../helpers/glsl/GroundProjection.vert.glsl.js';
-import fragmentShader from '../helpers/glsl/GroundProjection.frag.glsl.js';
-import { Icosahedron } from './shapes.js';
 
 const CUBEMAP_ROOT = 'https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/hdris/';
 
-const isCubeTexture = def => def && def.isCubeTexture;
-
 const isRef = obj => obj.current && obj.current.isScene;
 
 const resolveScene = scene => isRef(scene) ? scene.current : scene;
@@ -146,52 +141,23 @@ function EnvironmentGround(props) {
 
   const textureDefault = useEnvironment(props);
   const texture = props.map || textureDefault;
-  const isCubeMap = isCubeTexture(texture);
-  const defines = React.useMemo(() => {
-    var _ref, _texture$image$;
-
-    const w = (_ref = isCubeMap ? (_texture$image$ = texture.image[0]) == null ? void 0 : _texture$image$.width : texture.image.width) !== null && _ref !== void 0 ? _ref : 1024;
-    const cubeSize = w / 4;
-
-    const _lodMax = Math.floor(Math.log2(cubeSize));
-
-    const _cubeSize = Math.pow(2, _lodMax);
-
-    const width = 3 * Math.max(_cubeSize, 16 * 7);
-    const height = 4 * _cubeSize;
-    return [isCubeMap ? `#define ENVMAP_TYPE_CUBE` : '', `#define CUBEUV_TEXEL_WIDTH ${1.0 / width}`, `#define CUBEUV_TEXEL_HEIGHT ${1.0 / height}`, `#define CUBEUV_MAX_MIP ${_lodMax}.0`, ``];
+  React.useMemo(() => {
+    extend({
+      GroundProjectedEnvImpl: GroundProjectedEnv
+    });
   }, []);
-  const fragment = React.useMemo(() => defines.join('\n') + fragmentShader, [defines]);
-  const uniforms = React.useMemo(() => ({
-    cubemap: {
-      value: null
-    },
-    height: {
-      value: 15
-    },
-    radius: {
-      value: 60
-    }
-  }), []);
-  const mat = React.useRef(null);
+  const args = React.useMemo(() => [texture], [texture]);
   const height = (_props$ground = props.ground) == null ? void 0 : _props$ground.height;
   const radius = (_props$ground2 = props.ground) == null ? void 0 : _props$ground2.radius;
   const scale = (_scale = (_props$ground3 = props.ground) == null ? void 0 : _props$ground3.scale) !== null && _scale !== void 0 ? _scale : 1000;
-  React.useEffect(() => void (height && (mat.current.uniforms.height.value = height)), [height]);
-  React.useEffect(() => void (radius && (mat.current.uniforms.radius.value = radius)), [radius]);
-  React.useEffect(() => void (mat.current.uniforms.cubemap.value = texture), [texture]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EnvironmentMap, _extends({}, props, {
     map: texture
-  })), /*#__PURE__*/React.createElement(Icosahedron, {
+  })), /*#__PURE__*/React.createElement("groundProjectedEnvImpl", {
+    args: args,
     scale: scale,
-    args: [1, 16]
-  }, /*#__PURE__*/React.createElement("shaderMaterial", {
-    ref: mat,
-    side: BackSide,
-    vertexShader: vertexShader,
-    fragmentShader: fragment,
-    uniforms: uniforms
-  })));
+    height: height,
+    radius: radius
+  }));
 }
 
 function Environment(props) {

package/core/RenderTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),a=require("./useFBO.cjs.js");function u(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 c=u(e),o=i(r),s=i(t);const l=s.forwardRef((({children:e,width:r,height:t,renderPriority:u=0,eventPriority:i=0,frames:l=1/0,...d},m)=>{const{size:p,viewport:b}=n.useThree(),v=a.useFBO((r||p.width)*b.dpr,(t||p.height)*b.dpr,{samples:8}),[y]=s.useState((()=>new o.Scene)),g=s.useCallback(((e,r,t)=>{var n,a;let u=null==(n=v.texture)?void 0:n.__r3f.parent;for(;u&&!(u instanceof o.Object3D);)u=u.__r3f.parent;if(!u)return!1;t.raycaster.camera||t.events.compute(e,t,null==(a=t.previousRoot)?void 0:a.getState());const[i]=t.raycaster.intersectObject(u);if(!i)return!1;const c=i.uv;r.raycaster.setFromCamera(r.pointer.set(2*c.x-1,2*c.y-1),r.camera)}),[]);return s.useImperativeHandle(m,(()=>v.texture),[v]),s.createElement(s.Fragment,null,n.createPortal(s.createElement(f,{renderPriority:u,frames:l,fbo:v},e),y,{events:{compute:g,priority:i}}),s.createElement("primitive",c.default({object:v.texture},d)))}));function f({frames:e,renderPriority:r,children:t,fbo:a}){let u=0;return n.useFrame((r=>{(e===1/0||u<e)&&(r.gl.setRenderTarget(a),r.gl.render(r.scene,r.camera),r.gl.setRenderTarget(null),u++)}),r),s.createElement(s.Fragment,null,t)}exports.RenderTexture=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("three"),t=require("react"),n=require("@react-three/fiber"),a=require("./useFBO.cjs.js");function u(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 c=u(e),s=i(r),o=i(t);const l=o.forwardRef((({children:e,width:r,height:t,samples:u=8,renderPriority:i=0,eventPriority:l=0,frames:d=1/0,...m},p)=>{const{size:b,viewport:v}=n.useThree(),y=a.useFBO((r||b.width)*v.dpr,(t||b.height)*v.dpr,{samples:u}),[g]=o.useState((()=>new s.Scene)),h=o.useCallback(((e,r,t)=>{var n,a;let u=null==(n=y.texture)?void 0:n.__r3f.parent;for(;u&&!(u instanceof s.Object3D);)u=u.__r3f.parent;if(!u)return!1;t.raycaster.camera||t.events.compute(e,t,null==(a=t.previousRoot)?void 0:a.getState());const[i]=t.raycaster.intersectObject(u);if(!i)return!1;const c=i.uv;r.raycaster.setFromCamera(r.pointer.set(2*c.x-1,2*c.y-1),r.camera)}),[]);return o.useImperativeHandle(p,(()=>y.texture),[y]),o.createElement(o.Fragment,null,n.createPortal(o.createElement(f,{renderPriority:i,frames:d,fbo:y},e),g,{events:{compute:h,priority:l}}),o.createElement("primitive",c.default({object:y.texture},m)))}));function f({frames:e,renderPriority:r,children:t,fbo:a}){let u=0;return n.useFrame((r=>{(e===1/0||u<e)&&(r.gl.setRenderTarget(a),r.gl.render(r.scene,r.camera),r.gl.setRenderTarget(null),u++)}),r),o.createElement(o.Fragment,null,t)}exports.RenderTexture=l;