Merge branch 'master' into fix/troika-text

pmndrs · Dec 15, 2022 · afcb8f3 · afcb8f3
2 parents f029279 + a1098f8
commit afcb8f3
Show file tree

Hide file tree

Showing 36 changed files with 2,662 additions and 959 deletions.
diff --git a/.storybook/public/textures/grassy_cobble/grassy_cobblestone_ao_2k.jpg b/.storybook/public/textures/grassy_cobble/grassy_cobblestone_ao_2k.jpg
diff --git a/.storybook/public/textures/grassy_cobble/grassy_cobblestone_diff_2k.jpg b/.storybook/public/textures/grassy_cobble/grassy_cobblestone_diff_2k.jpg
diff --git a/.storybook/public/textures/grassy_cobble/grassy_cobblestone_nor_gl_2k.jpg b/.storybook/public/textures/grassy_cobble/grassy_cobblestone_nor_gl_2k.jpg
diff --git a/.storybook/public/textures/grassy_cobble/grassy_cobblestone_rough_2k.jpg b/.storybook/public/textures/grassy_cobble/grassy_cobblestone_rough_2k.jpg
diff --git a/.storybook/public/textures/other/leaves.jpg b/.storybook/public/textures/other/leaves.jpg
diff --git a/.storybook/stories/ScreenSpace.stories.tsx b/.storybook/stories/ScreenSpace.stories.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { Box, OrbitControls, Html, ScreenSpace } from '../../src'
+import { Vector3 } from 'three'
+
+import { Setup } from '../Setup'
+
+export default {
+  title: 'Abstractions/ScreenSpace',
+  component: ScreenSpace,
+  decorators: [
+    (storyFn) => (
+      <Setup controls={false} cameraPosition={new Vector3(0, 0, 10)}>
+        {storyFn()}
+      </Setup>
+    ),
+  ],
+}
+
+export const ScreenSpaceStory = ({ depth }) => (
+  <>
+    <Box args={[1, 1, 1]}>
+      <meshPhysicalMaterial />
+    </Box>
+    <ScreenSpace depth={depth}>
+      <Box args={[0.1, 0.1, 0.1]} position={[0.5, 0.1, 0]}>
+        <meshPhysicalMaterial color={'blue'} />
+        <Html center sprite>
+          <div style={{ color: 'hotpink' }}>Hi i'm in screen space</div>
+        </Html>
+      </Box>
+    </ScreenSpace>
+
+    <OrbitControls enablePan={true} zoomSpeed={0.5} />
+  </>
+)
+
+ScreenSpaceStory.args = {
+  depth: 1,
+}
diff --git a/.storybook/stories/Spotlight.stories.tsx b/.storybook/stories/Spotlight.stories.tsx
@@ -2,7 +2,18 @@ import * as React from 'react'
 import { withKnobs, number } from '@storybook/addon-knobs'
 
 import { Setup } from '../Setup'
-import { Plane, SpotLight, useDepthBuffer } from '../../src'
+import {
+  Circle,
+  Environment,
+  OrbitControls,
+  PerspectiveCamera,
+  Plane,
+  SpotLight,
+  SpotLightShadow,
+  useDepthBuffer,
+  useTexture,
+} from '../../src'
+import { MathUtils, RepeatWrapping } from 'three'
 
 export default {
   title: 'Staging/Spotlight',
@@ -48,3 +59,109 @@ function SpotLightScene() {
 
 export const SpotlightSt = () => <SpotLightScene />
 SpotlightSt.storyName = 'Default'
+
+function SpotLightShadowsScene({ debug, wind }: { debug: boolean; wind: boolean }) {
+  const [diffuse, normal, roughness, ao] = useTexture(
+    [
+      '/textures/grassy_cobble/grassy_cobblestone_diff_2k.jpg',
+      '/textures/grassy_cobble/grassy_cobblestone_nor_gl_2k.jpg', //
+      '/textures/grassy_cobble/grassy_cobblestone_rough_2k.jpg',
+      '/textures/grassy_cobble/grassy_cobblestone_ao_2k.jpg',
+    ],
+    (texs: any) => {
+      for (const tex of texs) {
+        tex.wrapS = tex.wrapT = RepeatWrapping
+        tex.repeat.set(2, 2)
+      }
+    }
+  )
+  const leafTexture = useTexture('/textures/other/leaves.jpg')
+
+  return (
+    <>
+      <OrbitControls
+        makeDefault //
+        autoRotate={true}
+        autoRotateSpeed={0.5}
+        minDistance={2}
+        maxDistance={10}
+      />
+      <PerspectiveCamera
+        near={0.01} //
+        far={50}
+        position={[1, 3, 1]}
+        makeDefault
+        fov={60}
+      />
+
+      <Environment preset="sunset" />
+
+      <hemisphereLight args={[0xffffbb, 0x080820, 1]} />
+
+      <Circle receiveShadow args={[5, 64, 64]} rotation-x={-Math.PI / 2}>
+        <meshStandardMaterial
+          map={diffuse} //
+          normalMap={normal}
+          roughnessMap={roughness}
+          aoMap={ao}
+          envMapIntensity={0.2}
+        />
+      </Circle>
+
+      <SpotLight
+        distance={20}
+        intensity={5}
+        angle={MathUtils.degToRad(45)}
+        color={'#fadcb9'}
+        position={[5, 7, -2]}
+        volumetric={false}
+        debug={debug}
+      >
+        <SpotLightShadow
+          scale={4}
+          distance={0.4}
+          width={2048}
+          height={2048}
+          map={leafTexture}
+          shader={
+            wind
+              ? /* glsl */ `
+            varying vec2 vUv;
+
+            uniform sampler2D uShadowMap;
+            uniform float uTime;
+
+            void main() {
+              // material.repeat.set(2.5) - Since repeat is a shader feature not texture
+              // we need to implement it manually
+              vec2 uv = mod(vUv, 0.4) * 2.5;
+
+              // Fake wind distortion
+              uv.x += sin(uv.y * 10.0 + uTime * 0.5) * 0.02;
+              uv.y += sin(uv.x * 10.0 + uTime * 0.5) * 0.02;
+
+              vec3 color = texture2D(uShadowMap, uv).xyz;
+              gl_FragColor = vec4(color, 1.);
+            }
+          `
+              : undefined
+          }
+        />
+      </SpotLight>
+    </>
+  )
+}
+
+export const SpotlightShadowsSt = (props) => (
+  <React.Suspense fallback={null}>
+    <SpotLightShadowsScene {...props} />
+  </React.Suspense>
+)
+SpotlightShadowsSt.storyName = 'Shadows'
+
+SpotlightShadowsSt.args = {
+  debug: false,
+  wind: true,
+}
+
+SpotlightShadowsSt.argTypes = {}
diff --git a/.storybook/stories/Stage.stories.tsx b/.storybook/stories/Stage.stories.tsx
@@ -3,9 +3,7 @@ import { withKnobs, select, number, boolean, object } from '@storybook/addon-kno
 import { Vector3 } from 'three'
 
 import { Setup } from '../Setup'
-
 import { Stage, Sphere } from '../../src'
-
 import { presetsObj, PresetsType } from '../../src/helpers/environment-assets'
 
 export default {
@@ -30,17 +28,7 @@ function StageStory() {
   return (
     <React.Suspense fallback={null}>
       <color attach="background" args={['white']} />
-      <Stage
-        contactShadow={object('ContactShadow', {
-          blur: 2,
-          opacity: 0.5,
-          position: [0, 0, 0],
-        })}
-        shadows={boolean('Shadow', true)}
-        intensity={intensity}
-        environment={envPreset as PresetsType}
-        preset={presetKnob}
-      >
+      <Stage intensity={intensity} environment={envPreset as PresetsType} preset={presetKnob}>
         <Sphere args={[1, 64, 64]}>
           <meshStandardMaterial roughness={0} color="royalblue" />
         </Sphere>

diff --git a/.storybook/stories/Stats.stories.tsx b/.storybook/stories/Stats.stories.tsx
@@ -10,18 +10,10 @@ export default {
   decorators: [(storyFn) => <Setup>{storyFn()}</Setup>],
 }
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      axisHelper: object
-    }
-  }
-}
-
 function Scene() {
   return (
     <>
-      <axisHelper />
+      <axesHelper />
       <Stats />
     </>
   )

diff --git a/.storybook/stories/Trail.stories.tsx b/.storybook/stories/Trail.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import { Setup } from '../Setup'
 
-import { Sphere, Trail, useTrail, Html, Stats, Float } from '../../src'
+import { Sphere, Trail, useTrail, Html, Stats, Float, PerspectiveCamera } from '../../src'
 import { useFrame } from '@react-three/fiber'
 import { InstancedMesh, Mesh, Object3D, Vector3 } from 'three'
 
@@ -13,28 +13,36 @@ export default {
 }
 
 function TrailScene() {
+  const group = React.useRef<Mesh>(null!)
   const sphere = React.useRef<Mesh>(null!)
   useFrame(({ clock }) => {
     const t = clock.getElapsedTime()
 
-    sphere.current.position.x = Math.sin(t) * 3
-    sphere.current.position.y = Math.cos(t) * 3
+    group.current.rotation.z = t
+
+    sphere.current.position.x = Math.sin(t * 2) * 2
+    sphere.current.position.z = Math.cos(t * 2) * 2
   })
 
   return (
     <>
-      <Trail
-        width={1}
-        length={4}
-        color={'#F8D628'}
-        attenuation={(t: number) => {
-          return t * t
-        }}
-      >
-        <Sphere ref={sphere} args={[0.1, 32, 32]} position-x={0} position-y={3}>
-          <meshNormalMaterial />
-        </Sphere>
-      </Trail>
+      <group ref={group}>
+        <Trail
+          width={1}
+          length={4}
+          color={'#F8D628'}
+          attenuation={(t: number) => {
+            return t * t
+          }}
+        >
+          <Sphere ref={sphere} args={[0.1, 32, 32]} position-y={3}>
+            <meshNormalMaterial />
+          </Sphere>
+        </Trail>
+      </group>
+
+      <PerspectiveCamera makeDefault position={[5, 5, 5]} />
+      <axesHelper />
     </>
   )
 }
@@ -60,7 +68,7 @@ function UseTrailScene() {
     if (!instancesRef.current) return
 
     for (let i = 0; i < n; i += 1) {
-      const x = trailPositions.current.slice(i * 3, i * 3 + 3)
+      const x = trailPositions.current?.slice(i * 3, i * 3 + 3)
       // @ts-ignore
       o.position.set(...x)
 
@@ -82,7 +90,7 @@ function UseTrailScene() {
         <meshNormalMaterial />
       </Sphere>
 
-      <instancedMesh ref={instancesRef} args={[null, null, n]}>
+      <instancedMesh ref={instancesRef} args={[null!, null!, n]}>
         <boxGeometry args={[0.1, 0.1, 0.1]} />
         <meshNormalMaterial />
       </instancedMesh>

diff --git a/.storybook/stories/useTrailTexture.stories.tsx b/.storybook/stories/useTrailTexture.stories.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react'
+import { withKnobs, number } from '@storybook/addon-knobs'
+
+import { Setup } from '../Setup'
+
+import { useTrailTexture } from '../../src'
+
+export default {
+  title: 'misc/useTrailTexture',
+  component: useTrailTexture,
+  decorators: [withKnobs, (storyFn) => <Setup>{storyFn()}</Setup>],
+}
+
+function TrailMesh() {
+  // a convenience hook that uses useLoader and TextureLoader
+  const [texture, onMove] = useTrailTexture({
+    size: number('Size', 256, { min: 64, step: 8 }),
+    radius: number('Radius', 0.3, { range: true, min: 0.1, max: 1, step: 0.1 }),
+    maxAge: number('Max age', 750, { range: true, min: 300, max: 1000, step: 100 }),
+  })
+
+  return (
+    <mesh scale={7} onPointerMove={onMove}>
+      <planeGeometry />
+      <meshBasicMaterial map={texture} />
+    </mesh>
+  )
+}
+
+function UseTrailTextureScene() {
+  return (
+    <React.Suspense fallback={null}>
+      <TrailMesh />
+    </React.Suspense>
+  )
+}
+
+export const UseTextureSceneSt = () => <UseTrailTextureScene />
+UseTextureSceneSt.story = {
+  name: 'Default',
+}