@react-three/drei 9.48.5 → 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 +25 -13
- 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/ScrollControls.cjs.js +1 -1
- package/web/ScrollControls.js +7 -2
- 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>
|
|
@@ -709,12 +709,25 @@ useHelper(condition && mesh, BoxHelper, 'red') // you can passe false instead of
|
|
|
709
709
|
|
|
710
710
|
# Shapes
|
|
711
711
|
|
|
712
|
-
|
|
712
|
+
#### Plane, Box, Sphere, Circle, Cone, Cylinder, Tube, Torus, TorusKnot, Ring, Tetrahedron, Polyhedron, Icosahedron, Octahedron, Dodecahedron, Extrude, Lathe
|
|
713
|
+
|
|
714
|
+
Short-cuts for a [mesh](https://threejs.org/docs/#api/en/objects/Mesh) with a [buffer geometry](https://threejs.org/docs/#api/en/core/BufferGeometry).
|
|
713
715
|
|
|
714
716
|
```jsx
|
|
717
|
+
<Box
|
|
718
|
+
args={[1, 1, 1]} // Args for the buffer geometry
|
|
719
|
+
{...meshProps} // All THREE.Mesh props are valid
|
|
720
|
+
/>
|
|
721
|
+
|
|
722
|
+
// Plane with buffer geometry args
|
|
715
723
|
<Plane args={[2, 2]} />
|
|
724
|
+
|
|
725
|
+
// Box with color set on the default MeshBasicMaterial
|
|
726
|
+
<Box material-color="hotpink" />
|
|
727
|
+
|
|
728
|
+
// Sphere with a MeshStandardMaterial
|
|
716
729
|
<Sphere>
|
|
717
|
-
<
|
|
730
|
+
<meshStandardMaterial color="hotpink" />
|
|
718
731
|
</Sphere>
|
|
719
732
|
```
|
|
720
733
|
|
|
@@ -723,7 +736,12 @@ useHelper(condition && mesh, BoxHelper, 'red') // you can passe false instead of
|
|
|
723
736
|
A box buffer geometry with rounded corners, done with extrusion.
|
|
724
737
|
|
|
725
738
|
```jsx
|
|
726
|
-
<RoundedBox
|
|
739
|
+
<RoundedBox
|
|
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
|
+
>
|
|
727
745
|
<meshPhongMaterial color="#f3f3f3" wireframe />
|
|
728
746
|
</RoundedBox>
|
|
729
747
|
```
|
|
@@ -1469,22 +1487,16 @@ Antialiased round dots. It takes the same props as regular [THREE.PointsMaterial
|
|
|
1469
1487
|
</points>
|
|
1470
1488
|
```
|
|
1471
1489
|
|
|
1472
|
-
####
|
|
1490
|
+
#### SoftShadows
|
|
1473
1491
|
|
|
1474
1492
|
<p>
|
|
1475
1493
|
<a href="https://codesandbox.io/s/dh2jc"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/dh2jc/screenshot.png" alt="Demo"/></a>
|
|
1476
1494
|
</p>
|
|
1477
1495
|
|
|
1478
|
-
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.
|
|
1479
1497
|
|
|
1480
1498
|
```jsx
|
|
1481
|
-
|
|
1482
|
-
frustum: 3.75,
|
|
1483
|
-
size: 0.005,
|
|
1484
|
-
near: 9.5,
|
|
1485
|
-
samples: 17,
|
|
1486
|
-
rings: 11, // Rings (default: 11) must be a int
|
|
1487
|
-
})
|
|
1499
|
+
<SoftShadows frustum={3.75} size={0.005} near={9.5} samples={17} rings={11} />
|
|
1488
1500
|
```
|
|
1489
1501
|
|
|
1490
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 };
|