@react-three/drei 9.22.9 → 9.23.0

package/README.md

@@ -111,6 +111,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#useTrail">useTrail</a></li>
           <li><a href="#useSurfaceSampler">useSurfaceSampler</a></li>
           <li><a href="#BBAnchor">BBAnchor</a></li>
+          <li><a href="#configureevents">configureEvents</a></li>
         </ul>
         <li><a href="#loading">Loaders</a></li>
         <ul>
@@ -1518,6 +1519,29 @@ For instance, one could want the Html component to be pinned to `positive x`, `p
 </Box>
 ```
 
+#### configureEvents
+
+![](https://img.shields.io/badge/-Dom only-red)
+
+A small helper that ties events to a different target (the default is the canvas itself). This is useful whenever you combine HTML and the canvas. If both need to receive events they have to share the same parent, and the canvas has to register its events there.
+
+This function also allows you exchange the event prefix. By default fiber reads from event.offsetX(/Y), but in some situations it may be useful to use "client", especially if hovering HTML content resets your canvas pointer events to the upper/left of the viewport.
+
+```tsx
+type EventOptions = {
+  target?: HTMLElement
+  prefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen'
+}
+
+export function configureEvents(_options: EventOptions): (state: RootState) => void
+```
+
+It is a curried function, you would typically drop this into onCreated.
+
+```jsx
+<Canvas onCreated={configureEvents({ target: document.getElementById('root'), prefix: 'client' })}>
+```
+
 # Loading
 
 #### Loader
@@ -2301,6 +2325,8 @@ type AccumulativeShadowsProps = JSX.IntrinsicElements['group'] & {
 
 ```tsx
 interface AccumulativeContext {
+  /** Returns the plane geometry onto which the shadow is cast */
+  getMesh: () => THREE.Mesh<THREE.PlaneGeometry, SoftShadowMaterialProps & THREE.ShaderMaterial>
   /** Resets the buffers, starting from scratch */
   reset: () => void
   /** Updates the lightmap for a number of frames accumulartively */

package/core/AccumulativeShadows.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),a=require("@react-three/fiber");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=i(e),o=n(t),l=n(r);const h=l.createContext(null),u=l.forwardRef((({children:e,temporal:t,frames:r=40,limit:i=1/0,blend:n=20,scale:s=10,opacity:u=1,alphaTest:c=.65,color:d="black",colorBlend:g=2,resolution:m=1024,encoding:f,toneMapped:v=!0,...M},b)=>{const w=a.useThree((e=>e.gl)),y=a.useThree((e=>e.scene)),S=a.useThree((e=>e.camera)),x=l.useRef(null),_=l.useRef(null),[T]=l.useState((()=>new p(w,y,m)));l.useLayoutEffect((()=>{T.configure(x.current)}),[]);const j=l.useMemo((()=>{const e=Object.assign(new o.MeshBasicMaterial({opacity:0,transparent:!0,dithering:!0,depthWrite:!1,map:T.progressiveLightMap2.texture}),{uniforms:{ucolor:{value:new o.Color(d)},ucolorBlend:{value:g},alphaTest:{value:0}}});return e.onBeforeCompile=t=>{e.uniforms=t.uniforms={...t.uniforms,...e.uniforms},t.fragmentShader=t.fragmentShader.replace("void main() {","uniform vec3 ucolor;\n           uniform float ucolorBlend;\n           uniform float alphaTest;\n           void main() {"),t.fragmentShader=t.fragmentShader.replace("#include <dithering_fragment>","#include <dithering_fragment>\n           gl_FragColor = vec4(ucolor * gl_FragColor.r * ucolorBlend, max(0.0, (1.0 - gl_FragColor.r / alphaTest)) * opacity);\n           #include <tonemapping_fragment>\n           #include <encodings_fragment>")},e}),[d,g]),E=l.useMemo((()=>({lights:new Map,temporal:!!t,frames:Math.max(2,r),blend:Math.max(2,r===1/0?n:r),count:0,reset:()=>{T.clear(),j.opacity=0,j.uniforms.alphaTest.value=0,E.count=0},update:(e=1)=>{E.temporal?(j.opacity=Math.min(u,j.opacity+u/E.blend),j.uniforms.alphaTest.value=Math.min(c,j.uniforms.alphaTest.value+c/E.blend)):(j.opacity=u,j.uniforms.alphaTest.value=c),_.current.visible=!0,T.prepare();for(let t=0;t<e;t++)E.lights.forEach((e=>e.update())),T.update(S,E.blend);_.current.visible=!1,T.finish()}})),[T,j,S,y,t,r,n,u,c]);return l.useLayoutEffect((()=>{E.reset(),E.temporal||E.frames===1/0||E.update(E.blend)})),l.useImperativeHandle(b,(()=>E),[]),a.useFrame((()=>{(E.temporal||E.frames===1/0)&&E.count<E.frames&&E.count<i&&(E.update(),E.count++)})),l.createElement("group",M,l.createElement("group",{traverse:()=>null,ref:_},l.createElement(h.Provider,{value:E},e)),l.createElement("mesh",{receiveShadow:!0,ref:x,material:j,"material-encoding":f||w.outputEncoding,"material-toneMapped":v,scale:s,rotation:[-Math.PI/2,0,0]},l.createElement("planeGeometry",null)))})),c=l.forwardRef((({castShadow:e=!0,bias:t=0,mapSize:r=512,size:a=5,near:i=.5,far:n=500,frames:u=1,position:c=[0,0,0],radius:d=1,amount:p=8,intensity:g=1,ambient:m=.5,...f},v)=>{const M=l.useRef(null),b=new o.Vector3(...c).length(),w=l.useContext(h),y=l.useCallback((()=>{let e;if(M.current)for(let t=0;t<M.current.children.length;t++)if(e=M.current.children[t],Math.random()>m)e.position.set(c[0]+o.MathUtils.randFloatSpread(d),c[1]+o.MathUtils.randFloatSpread(d),c[2]+o.MathUtils.randFloatSpread(d));else{let t=Math.acos(2*Math.random()-1)-Math.PI/2,r=2*Math.PI*Math.random();e.position.set(Math.cos(t)*Math.cos(r)*b,Math.abs(Math.cos(t)*Math.sin(r)*b),Math.sin(t)*b)}}),[d,m,b,...c]),S=l.useMemo((()=>({update:y})),[y]);return l.useImperativeHandle(v,(()=>S),[S]),l.useLayoutEffect((()=>{const e=M.current;return w&&w.lights.set(e.uuid,S),()=>{w.lights.delete(e.uuid)}}),[w,S]),l.createElement("group",s.default({ref:M},f),Array.from({length:p},((s,o)=>l.createElement("directionalLight",{key:o,castShadow:e,"shadow-bias":t,"shadow-mapSize":[r,r],intensity:g/p},l.createElement("orthographicCamera",{attach:"shadow-camera",args:[-a,a,a,-a,i,n]})))))}));class d extends o.ShaderMaterial{constructor(){super({vertexShader:"void main() { gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }",fragmentShader:"void main() { discard; }"})}}class p{constructor(e,t,r=1024){this.renderer=e,this.res=r,this.scene=t,this.scene.background=null,this.buffer1Active=!1,this.lights=[],this.meshes=[],this.object=null;const a=/(Android|iPad|iPhone|iPod)/g.test(navigator.userAgent)?o.HalfFloatType:o.FloatType;this.progressiveLightMap1=new o.WebGLRenderTarget(this.res,this.res,{type:a}),this.progressiveLightMap2=new o.WebGLRenderTarget(this.res,this.res,{type:a}),this.uvMat=new d,this.targetMat=new o.MeshPhongMaterial({shininess:0}),this.previousShadowMap={value:this.progressiveLightMap1.texture},this.averagingWindow={value:100},this.targetMat.onBeforeCompile=e=>{e.vertexShader="varying vec2 vUv;\n"+e.vertexShader.slice(0,-1)+"vUv = uv; gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }";const t=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 vUv;\n"+e.fragmentShader.slice(0,t)+"\tuniform sampler2D previousShadowMap;\n\tuniform float averagingWindow;\n"+e.fragmentShader.slice(t-1,-1)+"\nvec3 texelOld = texture2D(previousShadowMap, vUv).rgb;\n        gl_FragColor.rgb = mix(texelOld, gl_FragColor.rgb, 1.0/averagingWindow);\n      }",e.uniforms.previousShadowMap=this.previousShadowMap,e.uniforms.averagingWindow=this.averagingWindow}}clear(){this.renderer.setRenderTarget(this.progressiveLightMap1),this.renderer.clear(),this.renderer.setRenderTarget(this.progressiveLightMap2),this.renderer.clear(),this.lights=[],this.meshes=[],this.scene.traverse((e=>{!function(e){return!!e.geometry}(e)?function(e){return e.isLight}(e)&&this.lights.push({object:e,intensity:e.intensity}):this.meshes.push({object:e,material:e.material})}))}prepare(){this.lights.forEach((e=>e.object.intensity=0)),this.meshes.forEach((e=>e.object.material=this.uvMat))}finish(){this.lights.forEach((e=>e.object.intensity=e.intensity)),this.meshes.forEach((e=>e.object.material=e.material))}configure(e){this.object=e}update(e,t=100){if(!this.object)return;this.averagingWindow.value=t,this.object.material=this.targetMat;const r=this.buffer1Active?this.progressiveLightMap1:this.progressiveLightMap2,a=this.buffer1Active?this.progressiveLightMap2:this.progressiveLightMap1;this.renderer.setRenderTarget(r),this.previousShadowMap.value=a.texture,this.buffer1Active=!this.buffer1Active,this.renderer.render(this.scene,e),this.renderer.setRenderTarget(null)}}exports.AccumulativeShadows=u,exports.RandomizedLight=c,exports.accumulativeContext=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),a=require("@react-three/fiber"),i=require("./shaderMaterial.cjs.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=n(e),l=s(t),h=s(r);const c=h.createContext(null),u=i.shaderMaterial({color:new l.Color,blend:2,alphaTest:.75,opacity:0,map:null},"varying vec2 vUv;\n   void main() {\n     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n     vUv = uv;\n   }","varying vec2 vUv;\n   uniform sampler2D map;\n   uniform vec3 color;\n   uniform float opacity;\n   uniform float alphaTest;\n   uniform float blend;\n   void main() {\n     vec4 sampledDiffuseColor = texture2D(map, vUv);\n     gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);\n     #include <tonemapping_fragment>\n     #include <encodings_fragment>\n   }"),d=i.shaderMaterial({},"void main() { gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }","void main() { discard; }"),p=h.forwardRef((({children:e,temporal:t,frames:r=40,limit:i=1/0,blend:n=20,scale:s=10,opacity:o=1,alphaTest:l=.75,color:d="black",colorBlend:p=2,resolution:g=1024,toneMapped:m=!0,...v},M)=>{a.extend({SoftShadowMaterial:u});const b=a.useThree((e=>e.gl)),y=a.useThree((e=>e.scene)),w=a.useThree((e=>e.camera)),S=h.useRef(null),x=h.useRef(null),[j]=h.useState((()=>new f(b,y,g)));h.useLayoutEffect((()=>{j.configure(S.current)}),[]);const E=h.useMemo((()=>({lights:new Map,temporal:!!t,frames:Math.max(2,r),blend:Math.max(2,r===1/0?n:r),count:0,getMesh:()=>S.current,reset:()=>{j.clear();const e=S.current.material;e.opacity=0,e.alphaTest=0,E.count=0},update:(e=1)=>{const t=S.current.material;E.temporal?(t.opacity=Math.min(o,t.opacity+o/E.blend),t.alphaTest=Math.min(l,t.alphaTest+l/E.blend)):(t.opacity=o,t.alphaTest=l),x.current.visible=!0,j.prepare();for(let t=0;t<e;t++)E.lights.forEach((e=>e.update())),j.update(w,E.blend);x.current.visible=!1,j.finish()}})),[j,w,y,t,r,n,o,l]);return h.useLayoutEffect((()=>{E.reset(),E.temporal||E.frames===1/0||E.update(E.blend)})),h.useImperativeHandle(M,(()=>E),[E]),a.useFrame((()=>{(E.temporal||E.frames===1/0)&&E.count<E.frames&&E.count<i&&(E.update(),E.count++)})),h.createElement("group",v,h.createElement("group",{traverse:()=>null,ref:x},h.createElement(c.Provider,{value:E},e)),h.createElement("mesh",{receiveShadow:!0,ref:S,scale:s,rotation:[-Math.PI/2,0,0]},h.createElement("planeGeometry",null),h.createElement("softShadowMaterial",{transparent:!0,depthWrite:!1,toneMapped:m,color:d,blend:p,map:j.progressiveLightMap2.texture})))})),g=h.forwardRef((({castShadow:e=!0,bias:t=.001,mapSize:r=512,size:a=5,near:i=.5,far:n=500,frames:s=1,position:u=[0,0,0],radius:d=1,amount:p=8,intensity:g=1,ambient:f=.5,...m},v)=>{const M=h.useRef(null),b=new l.Vector3(...u).length(),y=h.useContext(c),w=h.useCallback((()=>{let e;if(M.current)for(let t=0;t<M.current.children.length;t++)if(e=M.current.children[t],Math.random()>f)e.position.set(u[0]+l.MathUtils.randFloatSpread(d),u[1]+l.MathUtils.randFloatSpread(d),u[2]+l.MathUtils.randFloatSpread(d));else{let t=Math.acos(2*Math.random()-1)-Math.PI/2,r=2*Math.PI*Math.random();e.position.set(Math.cos(t)*Math.cos(r)*b,Math.abs(Math.cos(t)*Math.sin(r)*b),Math.sin(t)*b)}}),[d,f,b,...u]),S=h.useMemo((()=>({update:w})),[w]);return h.useImperativeHandle(v,(()=>S),[S]),h.useLayoutEffect((()=>{const e=M.current;return y&&y.lights.set(e.uuid,S),()=>{y.lights.delete(e.uuid)}}),[y,S]),h.createElement("group",o.default({ref:M},m),Array.from({length:p},((s,o)=>h.createElement("directionalLight",{key:o,castShadow:e,"shadow-bias":t,"shadow-mapSize":[r,r],intensity:g/p},h.createElement("orthographicCamera",{attach:"shadow-camera",args:[-a,a,a,-a,i,n]})))))}));class f{constructor(e,t,r=1024){this.renderer=e,this.res=r,this.scene=t,this.scene.background=null,this.buffer1Active=!1,this.lights=[],this.meshes=[],this.object=null;const a=/(Android|iPad|iPhone|iPod)/g.test(navigator.userAgent)?l.HalfFloatType:l.FloatType;this.progressiveLightMap1=new l.WebGLRenderTarget(this.res,this.res,{type:a,encoding:e.outputEncoding}),this.progressiveLightMap2=new l.WebGLRenderTarget(this.res,this.res,{type:a,encoding:e.outputEncoding}),this.discardMat=new d,this.targetMat=new l.MeshPhongMaterial({shininess:0}),this.previousShadowMap={value:this.progressiveLightMap1.texture},this.averagingWindow={value:100},this.targetMat.onBeforeCompile=e=>{e.vertexShader="varying vec2 vUv;\n"+e.vertexShader.slice(0,-1)+"vUv = uv; gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }";const t=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 vUv;\n"+e.fragmentShader.slice(0,t)+"\tuniform sampler2D previousShadowMap;\n\tuniform float averagingWindow;\n"+e.fragmentShader.slice(t-1,-1)+"\nvec3 texelOld = texture2D(previousShadowMap, vUv).rgb;\n        gl_FragColor.rgb = mix(texelOld, gl_FragColor.rgb, 1.0/averagingWindow);\n      }",e.uniforms.previousShadowMap=this.previousShadowMap,e.uniforms.averagingWindow=this.averagingWindow}}clear(){this.renderer.setRenderTarget(this.progressiveLightMap1),this.renderer.clear(),this.renderer.setRenderTarget(this.progressiveLightMap2),this.renderer.clear(),this.lights=[],this.meshes=[],this.scene.traverse((e=>{!function(e){return!!e.geometry}(e)?function(e){return e.isLight}(e)&&this.lights.push({object:e,intensity:e.intensity}):this.meshes.push({object:e,material:e.material})}))}prepare(){this.lights.forEach((e=>e.object.intensity=0)),this.meshes.forEach((e=>e.object.material=this.discardMat))}finish(){this.lights.forEach((e=>e.object.intensity=e.intensity)),this.meshes.forEach((e=>e.object.material=e.material))}configure(e){this.object=e}update(e,t=100){if(!this.object)return;this.averagingWindow.value=t,this.object.material=this.targetMat;const r=this.buffer1Active?this.progressiveLightMap1:this.progressiveLightMap2,a=this.buffer1Active?this.progressiveLightMap2:this.progressiveLightMap1;this.renderer.setRenderTarget(r),this.previousShadowMap.value=a.texture,this.buffer1Active=!this.buffer1Active,this.renderer.render(this.scene,e),this.renderer.setRenderTarget(null)}}exports.AccumulativeShadows=p,exports.RandomizedLight=g,exports.accumulativeContext=c;

package/core/AccumulativeShadows.d.ts

@@ -1,35 +1,50 @@
 import * as THREE from 'three';
 import * as React from 'react';
+import { ReactThreeFiber } from '@react-three/fiber';
 interface AccumulativeContext {
     lights: Map<any, any>;
     temporal: boolean;
     frames: number;
     blend: number;
     count: number;
+    getMesh: () => THREE.Mesh<THREE.PlaneGeometry, SoftShadowMaterialProps & THREE.ShaderMaterial>;
     reset: () => void;
     update: (frames?: number) => void;
 }
 interface AccumulativeLightContext {
     update: () => void;
 }
+declare type SoftShadowMaterialProps = {
+    map: THREE.Texture;
+    color?: ReactThreeFiber.Color;
+    alphaTest?: number;
+    blend?: number;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            softShadowMaterial: JSX.IntrinsicElements['shaderMaterial'] & SoftShadowMaterialProps;
+        }
+    }
+}
 export declare const accumulativeContext: React.Context<AccumulativeContext>;
-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;
+export declare const AccumulativeShadows: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<THREE.Group>, ReactThreeFiber.NodeProps<THREE.Group, typeof THREE.Group>>>, ReactThreeFiber.NonFunctionKeys<{
+    position?: ReactThreeFiber.Vector3 | undefined;
+    up?: ReactThreeFiber.Vector3 | undefined;
+    scale?: ReactThreeFiber.Vector3 | undefined;
+    rotation?: ReactThreeFiber.Euler | undefined;
+    matrix?: ReactThreeFiber.Matrix4 | undefined;
+    quaternion?: ReactThreeFiber.Quaternion | undefined;
+    layers?: ReactThreeFiber.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;
+    position?: ReactThreeFiber.Vector3 | undefined;
+    up?: ReactThreeFiber.Vector3 | undefined;
+    scale?: ReactThreeFiber.Vector3 | undefined;
+    rotation?: ReactThreeFiber.Euler | undefined;
+    matrix?: ReactThreeFiber.Matrix4 | undefined;
+    quaternion?: ReactThreeFiber.Quaternion | undefined;
+    layers?: ReactThreeFiber.Layers | undefined;
     dispose?: (() => void) | null | undefined;
 } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
     frames?: number | undefined;
@@ -42,26 +57,25 @@ export declare const AccumulativeShadows: React.ForwardRefExoticComponent<Pick<O
     color?: string | undefined;
     colorBlend?: number | undefined;
     resolution?: number | undefined;
-    encoding?: THREE.TextureEncoding | undefined;
     toneMapped?: boolean | 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" | "toneMapped" | "resolution" | "encoding" | "frames" | "temporal" | "limit" | "blend" | "colorBlend"> & React.RefAttributes<AccumulativeContext>>;
-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;
+}, "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" | "toneMapped" | "resolution" | "frames" | "blend" | "temporal" | "limit" | "colorBlend"> & React.RefAttributes<AccumulativeContext>>;
+export declare const RandomizedLight: React.ForwardRefExoticComponent<Pick<Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<THREE.Group>, ReactThreeFiber.NodeProps<THREE.Group, typeof THREE.Group>>>, ReactThreeFiber.NonFunctionKeys<{
+    position?: ReactThreeFiber.Vector3 | undefined;
+    up?: ReactThreeFiber.Vector3 | undefined;
+    scale?: ReactThreeFiber.Vector3 | undefined;
+    rotation?: ReactThreeFiber.Euler | undefined;
+    matrix?: ReactThreeFiber.Matrix4 | undefined;
+    quaternion?: ReactThreeFiber.Quaternion | undefined;
+    layers?: ReactThreeFiber.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;
+    position?: ReactThreeFiber.Vector3 | undefined;
+    up?: ReactThreeFiber.Vector3 | undefined;
+    scale?: ReactThreeFiber.Vector3 | undefined;
+    rotation?: ReactThreeFiber.Euler | undefined;
+    matrix?: ReactThreeFiber.Matrix4 | undefined;
+    quaternion?: ReactThreeFiber.Quaternion | undefined;
+    layers?: ReactThreeFiber.Layers | undefined;
     dispose?: (() => void) | null | undefined;
 } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
     frames?: number | undefined;

package/core/AccumulativeShadows.js

@@ -1,7 +1,8 @@
 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 { extend, useThree, useFrame } from '@react-three/fiber';
+import { shaderMaterial } from './shaderMaterial.js';
 
 function isLight(object) {
   return object.isLight;
@@ -12,6 +13,29 @@ function isGeometry(object) {
 }
 
 const accumulativeContext = /*#__PURE__*/React.createContext(null);
+const SoftShadowMaterial = shaderMaterial({
+  color: new THREE.Color(),
+  blend: 2.0,
+  alphaTest: 0.75,
+  opacity: 0,
+  map: null
+}, `varying vec2 vUv;
+   void main() {
+     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);
+     vUv = uv;
+   }`, `varying vec2 vUv;
+   uniform sampler2D map;
+   uniform vec3 color;
+   uniform float opacity;
+   uniform float alphaTest;
+   uniform float blend;
+   void main() {
+     vec4 sampledDiffuseColor = texture2D(map, vUv);
+     gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);
+     #include <tonemapping_fragment>
+     #include <encodings_fragment>
+   }`);
+const DiscardMaterial = shaderMaterial({}, 'void main() { gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }', 'void main() { discard; }');
 const AccumulativeShadows = /*#__PURE__*/React.forwardRef(({
   children,
   temporal,
@@ -20,14 +44,16 @@ const AccumulativeShadows = /*#__PURE__*/React.forwardRef(({
   blend = 20,
   scale = 10,
   opacity = 1,
-  alphaTest = 0.65,
+  alphaTest = 0.75,
   color = 'black',
   colorBlend = 2,
   resolution = 1024,
-  encoding,
   toneMapped = true,
   ...props
 }, forwardRef) => {
+  extend({
+    SoftShadowMaterial
+  });
   const gl = useThree(state => state.gl);
   const scene = useThree(state => state.scene);
   const camera = useThree(state => state.camera);
@@ -36,66 +62,32 @@ const AccumulativeShadows = /*#__PURE__*/React.forwardRef(({
   const [plm] = React.useState(() => new ProgressiveLightMap(gl, scene, resolution));
   React.useLayoutEffect(() => {
     plm.configure(gPlane.current);
-  }, []); //const [lights, setLights] = React.useState<AccumulativeLightContext[]>([])
-
-  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)
-        },
-        ucolorBlend: {
-          value: colorBlend
-        },
-        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 ucolorBlend;
-           uniform float alphaTest;
-           void main() {`);
-      shader.fragmentShader = shader.fragmentShader.replace('#include <dithering_fragment>', `#include <dithering_fragment>
-           gl_FragColor = vec4(ucolor * gl_FragColor.r * ucolorBlend, max(0.0, (1.0 - gl_FragColor.r / alphaTest)) * opacity);
-           #include <tonemapping_fragment>
-           #include <encodings_fragment>`);
-    };
-
-    return mat;
-  }, [color, colorBlend]);
+  }, []);
   const api = React.useMemo(() => ({
     lights: new Map(),
     temporal: !!temporal,
     frames: Math.max(2, frames),
     blend: Math.max(2, frames === Infinity ? blend : frames),
     count: 0,
+    getMesh: () => gPlane.current,
     reset: () => {
       // Clear buffers, reset opacities, set frame count to 0
       plm.clear();
+      const material = gPlane.current.material;
       material.opacity = 0;
-      material.uniforms.alphaTest.value = 0;
+      material.alphaTest = 0;
       api.count = 0;
     },
     update: (frames = 1) => {
       // Adapt the opacity-blend ratio to the number of frames
+      const material = gPlane.current.material;
+
       if (!api.temporal) {
         material.opacity = opacity;
-        material.uniforms.alphaTest.value = alphaTest;
+        material.alphaTest = alphaTest;
       } else {
         material.opacity = Math.min(opacity, material.opacity + opacity / api.blend);
-        material.uniforms.alphaTest.value = Math.min(alphaTest, material.uniforms.alphaTest.value + alphaTest / api.blend);
+        material.alphaTest = Math.min(alphaTest, material.alphaTest + alphaTest / api.blend);
       } // Switch accumulative lights on
 
 
@@ -113,7 +105,7 @@ const AccumulativeShadows = /*#__PURE__*/React.forwardRef(({
 
       plm.finish();
     }
-  }), [plm, material, camera, scene, temporal, frames, blend, opacity, alphaTest]);
+  }), [plm, camera, scene, temporal, frames, blend, opacity, alphaTest]);
   React.useLayoutEffect(() => {
     // Reset internals, buffers, ...
     api.reset(); // Update lightmap
@@ -121,7 +113,7 @@ const AccumulativeShadows = /*#__PURE__*/React.forwardRef(({
     if (!api.temporal && api.frames !== Infinity) api.update(api.blend);
   }); // Expose api, allow children to set itself as the main light source
 
-  React.useImperativeHandle(forwardRef, () => api, []);
+  React.useImperativeHandle(forwardRef, () => api, [api]);
   useFrame(() => {
     if ((api.temporal || api.frames === Infinity) && api.count < api.frames && api.count < limit) {
       api.update();
@@ -136,16 +128,20 @@ const AccumulativeShadows = /*#__PURE__*/React.forwardRef(({
   }, children)), /*#__PURE__*/React.createElement("mesh", {
     receiveShadow: true,
     ref: gPlane,
-    material: material,
-    "material-encoding": encoding || gl.outputEncoding,
-    "material-toneMapped": toneMapped,
     scale: scale,
     rotation: [-Math.PI / 2, 0, 0]
-  }, /*#__PURE__*/React.createElement("planeGeometry", null)));
+  }, /*#__PURE__*/React.createElement("planeGeometry", null), /*#__PURE__*/React.createElement("softShadowMaterial", {
+    transparent: true,
+    depthWrite: false,
+    toneMapped: toneMapped,
+    color: color,
+    blend: colorBlend,
+    map: plm.progressiveLightMap2.texture
+  })));
 });
 const RandomizedLight = /*#__PURE__*/React.forwardRef(({
   castShadow = true,
-  bias = 0,
+  bias = 0.001,
   mapSize = 512,
   size = 5,
   near = 0.5,
@@ -201,18 +197,7 @@ const RandomizedLight = /*#__PURE__*/React.forwardRef(({
     attach: "shadow-camera",
     args: [-size, size, size, -size, near, far]
   }))));
-});
-
-class UVMaterial extends THREE.ShaderMaterial {
-  constructor() {
-    super({
-      vertexShader: 'void main() { gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }',
-      fragmentShader: 'void main() { discard; }'
-    });
-  }
-
-} // Based on "Progressive Light Map Accumulator", by [zalo](https://github.com/zalo/)
-
+}); // Based on "Progressive Light Map Accumulator", by [zalo](https://github.com/zalo/)
 
 class ProgressiveLightMap {
   constructor(renderer, scene, res = 1024) {
@@ -227,13 +212,15 @@ class ProgressiveLightMap {
 
     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
+      type: format,
+      encoding: renderer.outputEncoding
     });
     this.progressiveLightMap2 = new THREE.WebGLRenderTarget(this.res, this.res, {
-      type: format
+      type: format,
+      encoding: renderer.outputEncoding
     }); // Inject some spicy new logic into a standard phong material
 
-    this.uvMat = new UVMaterial();
+    this.discardMat = new DiscardMaterial();
     this.targetMat = new THREE.MeshPhongMaterial({
       shininess: 0
     });
@@ -283,7 +270,7 @@ class ProgressiveLightMap {
 
   prepare() {
     this.lights.forEach(light => light.object.intensity = 0);
-    this.meshes.forEach(mesh => mesh.object.material = this.uvMat);
+    this.meshes.forEach(mesh => mesh.object.material = this.discardMat);
   }
 
   finish() {