@react-three/drei 9.48.6 → 9.49.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -15
- package/core/index.cjs.js +1 -1
- package/core/index.js +1 -1
- package/core/softShadows.cjs.js +1 -1
- package/core/softShadows.d.ts +3 -2
- package/core/softShadows.js +100 -33
- package/index.cjs.js +1 -1
- package/index.js +1 -1
- package/native/index.cjs.js +1 -1
- package/native/index.js +1 -1
- package/package.json +1 -1
- package/web/index.cjs.js +1 -1
- package/web/index.js +1 -1
package/README.md
CHANGED
|
@@ -88,7 +88,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
88
88
|
<li><a href="#meshdistortmaterial">MeshDistortMaterial</a></li>
|
|
89
89
|
<li><a href="#meshrefractionmaterial">MeshRefractionMaterial</a></li>
|
|
90
90
|
<li><a href="#pointmaterial">PointMaterial</a></li>
|
|
91
|
-
<li><a href="#softshadows">
|
|
91
|
+
<li><a href="#softshadows">SoftShadows</a></li>
|
|
92
92
|
<li><a href="#shadermaterial">shaderMaterial</a></li>
|
|
93
93
|
</ul>
|
|
94
94
|
<li><a href="#modifiers">Modifiers</a></li>
|
|
@@ -359,7 +359,7 @@ Scroll controls create a HTML scroll container in front of the canvas. Everythin
|
|
|
359
359
|
You can listen and react to scroll with the `useScroll` hook which gives you useful data like the current scroll `offset`, `delta` and functions for range finding: `range`, `curve` and `visible`. The latter functions are especially useful if you want to react to the scroll offset, for instance if you wanted to fade things in and out if they are in or out of view.
|
|
360
360
|
|
|
361
361
|
```jsx
|
|
362
|
-
|
|
362
|
+
;<ScrollControls
|
|
363
363
|
pages={3} // Each page takes 100% of the height of the canvas
|
|
364
364
|
distance={1} // A factor that increases scroll bar travel (default: 1)
|
|
365
365
|
damping={4} // Friction, higher is faster (default: 4)
|
|
@@ -737,10 +737,10 @@ A box buffer geometry with rounded corners, done with extrusion.
|
|
|
737
737
|
|
|
738
738
|
```jsx
|
|
739
739
|
<RoundedBox
|
|
740
|
-
args={[1, 1, 1]}
|
|
741
|
-
radius={0.05}
|
|
742
|
-
smoothness={4}
|
|
743
|
-
{...meshProps}
|
|
740
|
+
args={[1, 1, 1]} // Width, height, depth. Default is [1, 1, 1]
|
|
741
|
+
radius={0.05} // Radius of the rounded corners. Default is 0.05
|
|
742
|
+
smoothness={4} // The number of curve segments. Default is 4
|
|
743
|
+
{...meshProps} // All THREE.Mesh props are valid
|
|
744
744
|
>
|
|
745
745
|
<meshPhongMaterial color="#f3f3f3" wireframe />
|
|
746
746
|
</RoundedBox>
|
|
@@ -1487,22 +1487,16 @@ Antialiased round dots. It takes the same props as regular [THREE.PointsMaterial
|
|
|
1487
1487
|
</points>
|
|
1488
1488
|
```
|
|
1489
1489
|
|
|
1490
|
-
####
|
|
1490
|
+
#### SoftShadows
|
|
1491
1491
|
|
|
1492
1492
|
<p>
|
|
1493
1493
|
<a href="https://codesandbox.io/s/dh2jc"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/dh2jc/screenshot.png" alt="Demo"/></a>
|
|
1494
1494
|
</p>
|
|
1495
1495
|
|
|
1496
|
-
Injects [percent closer soft shadows (pcss)](https://threejs.org/examples/#webgl_shadowmap_pcss) into threes shader chunk.
|
|
1496
|
+
Injects [percent closer soft shadows (pcss)](https://threejs.org/examples/#webgl_shadowmap_pcss) into threes shader chunk. Mounting and unmounting this component will lead to all shaders being be re-compiled, although it will only cause overhead if SoftShadows is mounted after the scene has already rendered, if it mounts with everything else in your scene shaders will compile naturally.
|
|
1497
1497
|
|
|
1498
1498
|
```jsx
|
|
1499
|
-
|
|
1500
|
-
frustum: 3.75,
|
|
1501
|
-
size: 0.005,
|
|
1502
|
-
near: 9.5,
|
|
1503
|
-
samples: 17,
|
|
1504
|
-
rings: 11, // Rings (default: 11) must be a int
|
|
1505
|
-
})
|
|
1499
|
+
<SoftShadows frustum={3.75} size={0.005} near={9.5} samples={17} rings={11} />
|
|
1506
1500
|
```
|
|
1507
1501
|
|
|
1508
1502
|
#### shaderMaterial
|
package/core/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./QuadraticBezierLine.cjs.js"),t=require("./CubicBezierLine.cjs.js"),o=require("./CatmullRomLine.cjs.js"),i=require("./Line.cjs.js"),u=require("./PositionalAudio.cjs.js"),a=require("./Text.cjs.js"),c=require("./Text3D.cjs.js"),n=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),p=require("./Image.cjs.js"),x=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),d=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),m=require("./Clone.cjs.js"),h=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),S=require("./Svg.cjs.js"),M=require("./Gltf.cjs.js"),T=require("./AsciiRenderer.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./ScreenSpace.cjs.js"),s=require("./QuadraticBezierLine.cjs.js"),t=require("./CubicBezierLine.cjs.js"),o=require("./CatmullRomLine.cjs.js"),i=require("./Line.cjs.js"),u=require("./PositionalAudio.cjs.js"),a=require("./Text.cjs.js"),c=require("./Text3D.cjs.js"),n=require("./Effects.cjs.js"),j=require("./GradientTexture.cjs.js"),p=require("./Image.cjs.js"),x=require("./Edges.cjs.js"),l=require("./Trail.cjs.js"),d=require("./Sampler.cjs.js"),q=require("./ComputedAttribute.cjs.js"),m=require("./Clone.cjs.js"),h=require("./MarchingCubes.cjs.js"),C=require("./Decal.cjs.js"),S=require("./Svg.cjs.js"),M=require("./Gltf.cjs.js"),T=require("./AsciiRenderer.cjs.js"),f=require("./OrthographicCamera.cjs.js"),P=require("./PerspectiveCamera.cjs.js"),b=require("./CubeCamera.cjs.js"),B=require("./DeviceOrientationControls.cjs.js"),g=require("./FlyControls.cjs.js"),v=require("./MapControls.cjs.js"),A=require("./OrbitControls.cjs.js"),L=require("./TrackballControls.cjs.js"),k=require("./ArcballControls.cjs.js"),G=require("./TransformControls.cjs.js"),R=require("./PointerLockControls.cjs.js"),D=require("./FirstPersonControls.cjs.js"),E=require("./GizmoHelper.cjs.js"),w=require("./GizmoViewcube.cjs.js"),z=require("./GizmoViewport.cjs.js"),F=require("./Grid.cjs.js"),O=require("./useCubeTexture.cjs.js"),I=require("./useFBX.cjs.js"),H=require("./useGLTF.cjs.js"),V=require("./useKTX2.cjs.js"),y=require("./useProgress.cjs.js"),Q=require("./useTexture.cjs.js"),X=require("./useVideoTexture.cjs.js"),K=require("./Stats.cjs.js"),W=require("./useDepthBuffer.cjs.js"),N=require("./useAspect.cjs.js"),U=require("./useCamera.cjs.js"),_=require("./useDetectGPU.cjs.js"),J=require("./useHelper.cjs.js"),Y=require("./useBVH.cjs.js"),Z=require("./useContextBridge.cjs.js"),$=require("./useAnimations.cjs.js"),ee=require("./useFBO.cjs.js"),re=require("./useIntersect.cjs.js"),se=require("./useBoxProjectedEnv.cjs.js"),te=require("./BBAnchor.cjs.js"),oe=require("./useTrailTexture.cjs.js"),ie=require("./CurveModifier.cjs.js"),ue=require("./MeshDistortMaterial.cjs.js"),ae=require("./MeshWobbleMaterial.cjs.js"),ce=require("./MeshReflectorMaterial.cjs.js"),ne=require("./MeshRefractionMaterial.cjs.js"),je=require("./PointMaterial.cjs.js"),pe=require("./shaderMaterial.cjs.js"),xe=require("./softShadows.cjs.js"),le=require("./shapes.cjs.js"),de=require("./RoundedBox.cjs.js"),qe=require("./ScreenQuad.cjs.js"),me=require("./Center.cjs.js"),he=require("./Bounds.cjs.js"),Ce=require("./CameraShake.cjs.js"),Se=require("./Float.cjs.js"),Me=require("./Stage.cjs.js"),Te=require("./Backdrop.cjs.js"),fe=require("./Shadow.cjs.js"),Pe=require("./ContactShadows.cjs.js"),be=require("./AccumulativeShadows.cjs.js"),Be=require("./Reflector.cjs.js"),ge=require("./SpotLight.cjs.js"),ve=require("./Environment.cjs.js"),Ae=require("./Lightformer.cjs.js"),Le=require("./Sky.cjs.js"),ke=require("./Stars.cjs.js"),Ge=require("./Cloud.cjs.js"),Re=require("./Sparkles.cjs.js"),De=require("./useMatcapTexture.cjs.js"),Ee=require("./useNormalTexture.cjs.js"),we=require("./Points.cjs.js"),ze=require("./Instances.cjs.js"),Fe=require("./Segments.cjs.js"),Oe=require("./Detailed.cjs.js"),Ie=require("./Preload.cjs.js"),He=require("./BakeShadows.cjs.js"),Ve=require("./meshBounds.cjs.js"),ye=require("./AdaptiveDpr.cjs.js"),Qe=require("./AdaptiveEvents.cjs.js"),Xe=require("./PerformanceMonitor.cjs.js"),Ke=require("./RenderTexture.cjs.js"),We=require("./Mask.cjs.js"),Ne=require("./Hud.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("suspend-react"),require("meshline"),require("lodash.pick"),require("lodash.omit"),require("zustand"),require("stats.js"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../materials/MeshRefractionMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.ScreenSpace=r.ScreenSpace,exports.QuadraticBezierLine=s.QuadraticBezierLine,exports.CubicBezierLine=t.CubicBezierLine,exports.CatmullRomLine=o.CatmullRomLine,exports.Line=i.Line,exports.PositionalAudio=u.PositionalAudio,exports.Text=a.Text,exports.Text3D=c.Text3D,exports.Effects=n.Effects,exports.isWebGL2Available=n.isWebGL2Available,exports.GradientTexture=j.GradientTexture,exports.Image=p.Image,exports.Edges=x.Edges,exports.Trail=l.Trail,exports.useTrail=l.useTrail,exports.Sampler=d.Sampler,exports.useSurfaceSampler=d.useSurfaceSampler,exports.ComputedAttribute=q.ComputedAttribute,exports.Clone=m.Clone,exports.MarchingCube=h.MarchingCube,exports.MarchingCubes=h.MarchingCubes,exports.MarchingPlane=h.MarchingPlane,exports.Decal=C.Decal,exports.Svg=S.Svg,exports.Gltf=M.Gltf,exports.AsciiRenderer=T.AsciiRenderer,exports.OrthographicCamera=f.OrthographicCamera,exports.PerspectiveCamera=P.PerspectiveCamera,exports.CubeCamera=b.CubeCamera,exports.DeviceOrientationControls=B.DeviceOrientationControls,exports.FlyControls=g.FlyControls,exports.MapControls=v.MapControls,exports.OrbitControls=A.OrbitControls,exports.TrackballControls=L.TrackballControls,exports.ArcballControls=k.ArcballControls,exports.TransformControls=G.TransformControls,exports.PointerLockControls=R.PointerLockControls,exports.FirstPersonControls=D.FirstPersonControls,exports.GizmoHelper=E.GizmoHelper,exports.useGizmoContext=E.useGizmoContext,exports.GizmoViewcube=w.GizmoViewcube,exports.GizmoViewport=z.GizmoViewport,exports.Grid=F.Grid,exports.useCubeTexture=O.useCubeTexture,exports.useFBX=I.useFBX,exports.useGLTF=H.useGLTF,exports.useKTX2=V.useKTX2,exports.useProgress=y.useProgress,exports.IsObject=Q.IsObject,exports.useTexture=Q.useTexture,exports.useVideoTexture=X.useVideoTexture,exports.Stats=K.Stats,exports.useDepthBuffer=W.useDepthBuffer,exports.useAspect=N.useAspect,exports.useCamera=U.useCamera,exports.useDetectGPU=_.useDetectGPU,exports.useHelper=J.useHelper,exports.useBVH=Y.useBVH,exports.useContextBridge=Z.useContextBridge,exports.useAnimations=$.useAnimations,exports.useFBO=ee.useFBO,exports.useIntersect=re.useIntersect,exports.useBoxProjectedEnv=se.useBoxProjectedEnv,exports.BBAnchor=te.BBAnchor,exports.useTrailTexture=oe.useTrailTexture,exports.CurveModifier=ie.CurveModifier,exports.MeshDistortMaterial=ue.MeshDistortMaterial,exports.MeshWobbleMaterial=ae.MeshWobbleMaterial,exports.MeshReflectorMaterial=ce.MeshReflectorMaterial,exports.MeshRefractionMaterial=ne.MeshRefractionMaterial,exports.PointMaterial=je.PointMaterial,exports.PointMaterialImpl=je.PointMaterialImpl,exports.shaderMaterial=pe.shaderMaterial,exports.SoftShadows=xe.SoftShadows,exports.softShadows=xe.softShadows,exports.Box=le.Box,exports.Capsule=le.Capsule,exports.Circle=le.Circle,exports.Cone=le.Cone,exports.Cylinder=le.Cylinder,exports.Dodecahedron=le.Dodecahedron,exports.Extrude=le.Extrude,exports.Icosahedron=le.Icosahedron,exports.Lathe=le.Lathe,exports.Octahedron=le.Octahedron,exports.Plane=le.Plane,exports.Polyhedron=le.Polyhedron,exports.Ring=le.Ring,exports.Sphere=le.Sphere,exports.Tetrahedron=le.Tetrahedron,exports.Torus=le.Torus,exports.TorusKnot=le.TorusKnot,exports.Tube=le.Tube,exports.RoundedBox=de.RoundedBox,exports.ScreenQuad=qe.ScreenQuad,exports.Center=me.Center,exports.Bounds=he.Bounds,exports.useBounds=he.useBounds,exports.CameraShake=Ce.CameraShake,exports.Float=Se.Float,exports.Stage=Me.Stage,exports.Backdrop=Te.Backdrop,exports.Shadow=fe.Shadow,exports.ContactShadows=Pe.ContactShadows,exports.AccumulativeShadows=be.AccumulativeShadows,exports.RandomizedLight=be.RandomizedLight,exports.accumulativeContext=be.accumulativeContext,exports.Reflector=Be.Reflector,exports.SpotLight=ge.SpotLight,exports.SpotLightShadow=ge.SpotLightShadow,exports.Environment=ve.Environment,exports.EnvironmentCube=ve.EnvironmentCube,exports.EnvironmentMap=ve.EnvironmentMap,exports.EnvironmentPortal=ve.EnvironmentPortal,exports.useEnvironment=ve.useEnvironment,exports.Lightformer=Ae.Lightformer,exports.Sky=Le.Sky,exports.calcPosFromAngles=Le.calcPosFromAngles,exports.Stars=ke.Stars,exports.Cloud=Ge.Cloud,exports.Sparkles=Re.Sparkles,exports.useMatcapTexture=De.useMatcapTexture,exports.useNormalTexture=Ee.useNormalTexture,exports.Point=we.Point,exports.Points=we.Points,exports.PointsBuffer=we.PointsBuffer,exports.PositionPoint=we.PositionPoint,exports.Instance=ze.Instance,exports.Instances=ze.Instances,exports.Merged=ze.Merged,exports.Segment=Fe.Segment,exports.SegmentObject=Fe.SegmentObject,exports.Segments=Fe.Segments,exports.Detailed=Oe.Detailed,exports.Preload=Ie.Preload,exports.BakeShadows=He.BakeShadows,exports.meshBounds=Ve.meshBounds,exports.AdaptiveDpr=ye.AdaptiveDpr,exports.AdaptiveEvents=Qe.AdaptiveEvents,exports.PerformanceMonitor=Xe.PerformanceMonitor,exports.usePerformanceMonitor=Xe.usePerformanceMonitor,exports.RenderTexture=Ke.RenderTexture,exports.Mask=We.Mask,exports.useMask=We.useMask,exports.Hud=Ne.Hud;
|
package/core/index.js
CHANGED
|
@@ -64,7 +64,7 @@ export { MeshReflectorMaterial } from './MeshReflectorMaterial.js';
|
|
|
64
64
|
export { MeshRefractionMaterial } from './MeshRefractionMaterial.js';
|
|
65
65
|
export { PointMaterial, PointMaterialImpl } from './PointMaterial.js';
|
|
66
66
|
export { shaderMaterial } from './shaderMaterial.js';
|
|
67
|
-
export { softShadows } from './softShadows.js';
|
|
67
|
+
export { SoftShadows, softShadows } from './softShadows.js';
|
|
68
68
|
export { Box, Capsule, Circle, Cone, Cylinder, Dodecahedron, Extrude, Icosahedron, Lathe, Octahedron, Plane, Polyhedron, Ring, Sphere, Tetrahedron, Torus, TorusKnot, Tube } from './shapes.js';
|
|
69
69
|
export { RoundedBox } from './RoundedBox.js';
|
|
70
70
|
export { ScreenQuad } from './ScreenQuad.js';
|
package/core/softShadows.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("three"),a=require("@react-three/fiber");function r(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),n.default=e,Object.freeze(n)}var o=r(e),t=r(n);const s=({frustum:e=3.75,size:n=.005,near:a=9.5,samples:r=10,rings:o=11}={})=>`#define LIGHT_WORLD_SIZE ${n}\n#define LIGHT_FRUSTUM_WIDTH ${e}\n#define LIGHT_SIZE_UV (LIGHT_WORLD_SIZE / LIGHT_FRUSTUM_WIDTH)\n#define NEAR_PLANE ${a}\n\n#define NUM_SAMPLES ${r}\n#define NUM_RINGS ${o}\n#define BLOCKER_SEARCH_NUM_SAMPLES NUM_SAMPLES\n\nvec2 poissonDisk[NUM_SAMPLES];\n\nvoid initPoissonSamples( const in vec2 randomSeed ) {\n float ANGLE_STEP = PI2 * float( NUM_RINGS ) / float( NUM_SAMPLES );\n float INV_NUM_SAMPLES = 1.0 / float( NUM_SAMPLES );\n\n // jsfiddle that shows sample pattern: https://jsfiddle.net/a16ff1p7/\n float angle = rand( randomSeed ) * PI2;\n float radius = INV_NUM_SAMPLES;\n float radiusStep = radius;\n\n #pragma unroll_loop_start\n for( int i = 0; i < ${r}; i ++ ) {\n poissonDisk[i] = vec2( cos( angle ), sin( angle ) ) * pow( radius, 0.75 );\n radius += radiusStep;\n angle += ANGLE_STEP;\n }\n #pragma unroll_loop_end\n}\n\nfloat penumbraSize( const in float zReceiver, const in float zBlocker ) { // Parallel plane estimation\n return (zReceiver - zBlocker) / zBlocker;\n}\n\nfloat findBlocker( sampler2D shadowMap, const in vec2 uv, const in float zReceiver ) {\n // This uses similar triangles to compute what\n // area of the shadow map we should search\n float searchRadius = LIGHT_SIZE_UV * ( zReceiver - NEAR_PLANE ) / zReceiver;\n float blockerDepthSum = 0.0;\n float shadowMapDepth = 0.0;\n int numBlockers = 0; \n #pragma unroll_loop_start\n for( int i = 0; i < ${r}; i++ ) {\n shadowMapDepth = unpackRGBAToDepth(texture2D(shadowMap, uv + poissonDisk[i] * searchRadius));\n if ( shadowMapDepth < zReceiver ) {\n blockerDepthSum += shadowMapDepth;\n numBlockers ++;\n }\n }\n #pragma unroll_loop_end\n\n if( numBlockers == 0 ) return -1.0;\n return blockerDepthSum / float( numBlockers );\n}\n\nfloat PCF_Filter(sampler2D shadowMap, vec2 uv, float zReceiver, float filterRadius ) {\n float sum = 0.0;\n float depth;\n #pragma unroll_loop_start\n for( int i = 0; i < ${r}; i ++ ) {\n depth = unpackRGBAToDepth( texture2D( shadowMap, uv + poissonDisk[ i ] * filterRadius ) );\n if( zReceiver <= depth ) sum += 1.0;\n }\n #pragma unroll_loop_end\n #pragma unroll_loop_start\n for( int i = 0; i < ${r}; i ++ ) {\n depth = unpackRGBAToDepth( texture2D( shadowMap, uv + -poissonDisk[ i ].yx * filterRadius ) );\n if( zReceiver <= depth ) sum += 1.0;\n }\n #pragma unroll_loop_end\n return sum / ( 2.0 * float( ${r} ) );\n}\n\nfloat PCSS ( sampler2D shadowMap, vec4 coords ) {\n vec2 uv = coords.xy;\n float zReceiver = coords.z; // Assumed to be eye-space z in this code\n\n initPoissonSamples( uv );\n // STEP 1: blocker search\n float avgBlockerDepth = findBlocker( shadowMap, uv, zReceiver );\n\n //There are no occluders so early out (this saves filtering)\n if( avgBlockerDepth == -1.0 ) return 1.0;\n\n // STEP 2: penumbra size\n float penumbraRatio = penumbraSize( zReceiver, avgBlockerDepth );\n float filterRadius = penumbraRatio * LIGHT_SIZE_UV * NEAR_PLANE / zReceiver;\n\n // STEP 3: filtering\n //return avgBlockerDepth;\n return PCF_Filter( shadowMap, uv, zReceiver, filterRadius );\n}`;let i=!1;function l(e,n,a){n.traverse((n=>{n.material&&e.properties.remove(n.material)})),e.info.programs.length=0,e.compile(n,a)}exports.SoftShadows=function({frustum:e=3.75,size:n=.005,near:r=9.5,samples:i=10,rings:p=11}){const d=a.useThree((e=>e.gl)),f=a.useThree((e=>e.scene)),u=a.useThree((e=>e.camera));o.useEffect((()=>{const a=t.ShaderChunk.shadowmap_pars_fragment;let o=t.ShaderChunk.shadowmap_pars_fragment;return o=o.replace("#ifdef USE_SHADOWMAP","#ifdef USE_SHADOWMAP\n"+s({frustum:e,size:n,near:r,samples:i,rings:p})),o=o.replace("#if defined( SHADOWMAP_TYPE_PCF )","\nreturn PCSS(shadowMap, shadowCoord);\n#if defined( SHADOWMAP_TYPE_PCF )"),t.ShaderChunk.shadowmap_pars_fragment=o,l(d,f,u),()=>{t.ShaderChunk.shadowmap_pars_fragment=a,l(d,f,u)}}),[e,n,r,i,p])},exports.softShadows=e=>{if(!i){console.warn("drei/softShadows() is deprecated, use <SoftShadows> instead"),i=!0;let n=t.ShaderChunk.shadowmap_pars_fragment;n=n.replace("#ifdef USE_SHADOWMAP","#ifdef USE_SHADOWMAP\n"+s({...e})),n=n.replace("#if defined( SHADOWMAP_TYPE_PCF )","\nreturn PCSS(shadowMap, shadowCoord);\n#if defined( SHADOWMAP_TYPE_PCF )"),t.ShaderChunk.shadowmap_pars_fragment=n}};
|
package/core/softShadows.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
declare type
|
|
1
|
+
declare type SoftShadowsProps = {
|
|
2
2
|
frustum?: number;
|
|
3
3
|
size?: number;
|
|
4
4
|
near?: number;
|
|
5
5
|
samples?: number;
|
|
6
6
|
rings?: number;
|
|
7
7
|
};
|
|
8
|
-
export declare const softShadows: (props?:
|
|
8
|
+
export declare const softShadows: (props?: SoftShadowsProps) => void;
|
|
9
|
+
export declare function SoftShadows({ frustum, size, near, samples, rings }: SoftShadowsProps): void;
|
|
9
10
|
export {};
|
package/core/softShadows.js
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import * as THREE from 'three';
|
|
3
|
+
import { useThree } from '@react-three/fiber';
|
|
4
|
+
|
|
5
|
+
// From: https://github.com/mrdoob/three.js/blob/dev/examples/webgl_shadowmap_pcss.html
|
|
2
6
|
|
|
3
7
|
const pcss = ({
|
|
4
8
|
frustum = 3.75,
|
|
5
9
|
size = 0.005,
|
|
6
10
|
near = 9.5,
|
|
7
|
-
samples =
|
|
11
|
+
samples = 10,
|
|
8
12
|
rings = 11
|
|
9
13
|
} = {}) => `#define LIGHT_WORLD_SIZE ${size}
|
|
10
14
|
#define LIGHT_FRUSTUM_WIDTH ${frustum}
|
|
@@ -14,70 +18,95 @@ const pcss = ({
|
|
|
14
18
|
#define NUM_SAMPLES ${samples}
|
|
15
19
|
#define NUM_RINGS ${rings}
|
|
16
20
|
#define BLOCKER_SEARCH_NUM_SAMPLES NUM_SAMPLES
|
|
17
|
-
#define PCF_NUM_SAMPLES NUM_SAMPLES
|
|
18
21
|
|
|
19
22
|
vec2 poissonDisk[NUM_SAMPLES];
|
|
20
23
|
|
|
21
|
-
void initPoissonSamples(const in vec2 randomSeed) {
|
|
22
|
-
float ANGLE_STEP = PI2 * float(NUM_RINGS) / float(NUM_SAMPLES);
|
|
23
|
-
float INV_NUM_SAMPLES = 1.0 / float(NUM_SAMPLES);
|
|
24
|
-
|
|
24
|
+
void initPoissonSamples( const in vec2 randomSeed ) {
|
|
25
|
+
float ANGLE_STEP = PI2 * float( NUM_RINGS ) / float( NUM_SAMPLES );
|
|
26
|
+
float INV_NUM_SAMPLES = 1.0 / float( NUM_SAMPLES );
|
|
27
|
+
|
|
28
|
+
// jsfiddle that shows sample pattern: https://jsfiddle.net/a16ff1p7/
|
|
29
|
+
float angle = rand( randomSeed ) * PI2;
|
|
25
30
|
float radius = INV_NUM_SAMPLES;
|
|
26
31
|
float radiusStep = radius;
|
|
27
|
-
|
|
28
|
-
|
|
32
|
+
|
|
33
|
+
#pragma unroll_loop_start
|
|
34
|
+
for( int i = 0; i < ${samples}; i ++ ) {
|
|
35
|
+
poissonDisk[i] = vec2( cos( angle ), sin( angle ) ) * pow( radius, 0.75 );
|
|
29
36
|
radius += radiusStep;
|
|
30
37
|
angle += ANGLE_STEP;
|
|
31
38
|
}
|
|
39
|
+
#pragma unroll_loop_end
|
|
32
40
|
}
|
|
33
41
|
|
|
34
|
-
float penumbraSize(const in float zReceiver, const in float zBlocker) { // Parallel plane estimation
|
|
42
|
+
float penumbraSize( const in float zReceiver, const in float zBlocker ) { // Parallel plane estimation
|
|
35
43
|
return (zReceiver - zBlocker) / zBlocker;
|
|
36
44
|
}
|
|
37
45
|
|
|
38
|
-
float findBlocker(sampler2D shadowMap, const in vec2 uv, const in float zReceiver) {
|
|
39
|
-
|
|
46
|
+
float findBlocker( sampler2D shadowMap, const in vec2 uv, const in float zReceiver ) {
|
|
47
|
+
// This uses similar triangles to compute what
|
|
48
|
+
// area of the shadow map we should search
|
|
49
|
+
float searchRadius = LIGHT_SIZE_UV * ( zReceiver - NEAR_PLANE ) / zReceiver;
|
|
40
50
|
float blockerDepthSum = 0.0;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
51
|
+
float shadowMapDepth = 0.0;
|
|
52
|
+
int numBlockers = 0;
|
|
53
|
+
#pragma unroll_loop_start
|
|
54
|
+
for( int i = 0; i < ${samples}; i++ ) {
|
|
55
|
+
shadowMapDepth = unpackRGBAToDepth(texture2D(shadowMap, uv + poissonDisk[i] * searchRadius));
|
|
56
|
+
if ( shadowMapDepth < zReceiver ) {
|
|
45
57
|
blockerDepthSum += shadowMapDepth;
|
|
46
|
-
numBlockers++;
|
|
58
|
+
numBlockers ++;
|
|
47
59
|
}
|
|
48
60
|
}
|
|
49
|
-
|
|
50
|
-
|
|
61
|
+
#pragma unroll_loop_end
|
|
62
|
+
|
|
63
|
+
if( numBlockers == 0 ) return -1.0;
|
|
64
|
+
return blockerDepthSum / float( numBlockers );
|
|
51
65
|
}
|
|
52
66
|
|
|
53
|
-
float PCF_Filter(sampler2D shadowMap, vec2 uv, float zReceiver, float filterRadius) {
|
|
67
|
+
float PCF_Filter(sampler2D shadowMap, vec2 uv, float zReceiver, float filterRadius ) {
|
|
54
68
|
float sum = 0.0;
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
69
|
+
float depth;
|
|
70
|
+
#pragma unroll_loop_start
|
|
71
|
+
for( int i = 0; i < ${samples}; i ++ ) {
|
|
72
|
+
depth = unpackRGBAToDepth( texture2D( shadowMap, uv + poissonDisk[ i ] * filterRadius ) );
|
|
73
|
+
if( zReceiver <= depth ) sum += 1.0;
|
|
58
74
|
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
75
|
+
#pragma unroll_loop_end
|
|
76
|
+
#pragma unroll_loop_start
|
|
77
|
+
for( int i = 0; i < ${samples}; i ++ ) {
|
|
78
|
+
depth = unpackRGBAToDepth( texture2D( shadowMap, uv + -poissonDisk[ i ].yx * filterRadius ) );
|
|
79
|
+
if( zReceiver <= depth ) sum += 1.0;
|
|
62
80
|
}
|
|
63
|
-
|
|
81
|
+
#pragma unroll_loop_end
|
|
82
|
+
return sum / ( 2.0 * float( ${samples} ) );
|
|
64
83
|
}
|
|
65
84
|
|
|
66
|
-
float PCSS(sampler2D shadowMap, vec4 coords) {
|
|
85
|
+
float PCSS ( sampler2D shadowMap, vec4 coords ) {
|
|
67
86
|
vec2 uv = coords.xy;
|
|
68
87
|
float zReceiver = coords.z; // Assumed to be eye-space z in this code
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
float
|
|
88
|
+
|
|
89
|
+
initPoissonSamples( uv );
|
|
90
|
+
// STEP 1: blocker search
|
|
91
|
+
float avgBlockerDepth = findBlocker( shadowMap, uv, zReceiver );
|
|
92
|
+
|
|
93
|
+
//There are no occluders so early out (this saves filtering)
|
|
94
|
+
if( avgBlockerDepth == -1.0 ) return 1.0;
|
|
95
|
+
|
|
96
|
+
// STEP 2: penumbra size
|
|
97
|
+
float penumbraRatio = penumbraSize( zReceiver, avgBlockerDepth );
|
|
73
98
|
float filterRadius = penumbraRatio * LIGHT_SIZE_UV * NEAR_PLANE / zReceiver;
|
|
74
|
-
|
|
99
|
+
|
|
100
|
+
// STEP 3: filtering
|
|
101
|
+
//return avgBlockerDepth;
|
|
102
|
+
return PCF_Filter( shadowMap, uv, zReceiver, filterRadius );
|
|
75
103
|
}`;
|
|
76
104
|
|
|
77
105
|
let deployed = false;
|
|
78
106
|
const softShadows = props => {
|
|
79
107
|
// Avoid adding the effect twice, which may happen in HMR scenarios
|
|
80
108
|
if (!deployed) {
|
|
109
|
+
console.warn('drei/softShadows() is deprecated, use <SoftShadows> instead');
|
|
81
110
|
deployed = true;
|
|
82
111
|
let shader = THREE.ShaderChunk.shadowmap_pars_fragment;
|
|
83
112
|
shader = shader.replace('#ifdef USE_SHADOWMAP', '#ifdef USE_SHADOWMAP\n' + pcss({ ...props
|
|
@@ -87,4 +116,42 @@ const softShadows = props => {
|
|
|
87
116
|
}
|
|
88
117
|
};
|
|
89
118
|
|
|
90
|
-
|
|
119
|
+
function reset(gl, scene, camera) {
|
|
120
|
+
scene.traverse(object => {
|
|
121
|
+
if (object.material) gl.properties.remove(object.material);
|
|
122
|
+
});
|
|
123
|
+
gl.info.programs.length = 0;
|
|
124
|
+
gl.compile(scene, camera);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
function SoftShadows({
|
|
128
|
+
frustum = 3.75,
|
|
129
|
+
size = 0.005,
|
|
130
|
+
near = 9.5,
|
|
131
|
+
samples = 10,
|
|
132
|
+
rings = 11
|
|
133
|
+
}) {
|
|
134
|
+
const gl = useThree(state => state.gl);
|
|
135
|
+
const scene = useThree(state => state.scene);
|
|
136
|
+
const camera = useThree(state => state.camera);
|
|
137
|
+
React.useEffect(() => {
|
|
138
|
+
const original = THREE.ShaderChunk.shadowmap_pars_fragment;
|
|
139
|
+
let shader = THREE.ShaderChunk.shadowmap_pars_fragment;
|
|
140
|
+
shader = shader.replace('#ifdef USE_SHADOWMAP', '#ifdef USE_SHADOWMAP\n' + pcss({
|
|
141
|
+
frustum,
|
|
142
|
+
size,
|
|
143
|
+
near,
|
|
144
|
+
samples,
|
|
145
|
+
rings
|
|
146
|
+
}));
|
|
147
|
+
shader = shader.replace('#if defined( SHADOWMAP_TYPE_PCF )', '\nreturn PCSS(shadowMap, shadowCoord);\n#if defined( SHADOWMAP_TYPE_PCF )');
|
|
148
|
+
THREE.ShaderChunk.shadowmap_pars_fragment = shader;
|
|
149
|
+
reset(gl, scene, camera);
|
|
150
|
+
return () => {
|
|
151
|
+
THREE.ShaderChunk.shadowmap_pars_fragment = original;
|
|
152
|
+
reset(gl, scene, camera);
|
|
153
|
+
};
|
|
154
|
+
}, [frustum, size, near, samples, rings]);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
export { SoftShadows, softShadows };
|