fix: merge conflicts for sprite-animator

Author: Michalis Dobekidis

.prettierrc

@@ -4,5 +4,6 @@
   "singleQuote": true,
   "tabWidth": 2,
   "printWidth": 120,
-  "useTabs": false
+  "useTabs": false,
+  "endOfLine": "auto"
 }

.storybook/stories/ShadowAlpha.stories.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+
+import { Setup } from '../Setup'
+
+import { useFrame } from '@react-three/fiber'
+import { BufferGeometry, MeshStandardMaterial, type Mesh } from 'three'
+import { Icosahedron, Plane, ShadowAlpha } from '../../src'
+
+export default {
+  title: 'Misc/ShadowAlpha',
+  component: ShadowAlpha,
+  decorators: [(storyFn) => <Setup lights={false}> {storyFn()}</Setup>],
+}
+
+function ShadowAlphaScene() {
+  const mesh = React.useRef<Mesh<BufferGeometry, MeshStandardMaterial>>(null!)
+
+  useFrame(({ clock }) => {
+    const time = clock.elapsedTime
+    mesh.current.material.opacity = Math.sin(time * 2) * 0.5 + 0.5
+  })
+
+  return (
+    <>
+      <Icosahedron castShadow ref={mesh} args={[1, 2]} position-y={2}>
+        <meshStandardMaterial color="lightblue" transparent />
+        <ShadowAlpha />
+      </Icosahedron>
+
+      <Plane receiveShadow args={[4, 4]} rotation={[-Math.PI / 2, 0, 0]}>
+        <meshStandardMaterial color="white" />
+      </Plane>
+
+      <directionalLight castShadow position={[10, 40, 10]} />
+      <ambientLight intensity={0.5} />
+    </>
+  )
+}
+
+export const ShadowAlphaSt = () => <ShadowAlphaScene />
+ShadowAlphaSt.storyName = 'Default'

README.md

@@ -77,14 +77,15 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#outlines">Outlines</a></li>
           <li><a href="#trail">Trail</a></li>
           <li><a href="#sampler">Sampler</a></li>
-          <li><a href="#computedattribute">Computed Attribute</a></li>
+          <li><a href="#computedattribute">ComputedAttribute</a></li>
           <li><a href="#clone">Clone</a></li>
           <li><a href="#useanimations">useAnimations</a></li>
           <li><a href="#marchingcubes">MarchingCubes</a></li>
           <li><a href="#decal">Decal</a></li>
           <li><a href="#svg">Svg</a></li>
           <li><a href="#gltf">Gltf</a></li>
           <li><a href="#asciirenderer">AsciiRenderer</a></li>
+          <li><a href="#splat">Splat</a></li>
         </ul>
         <li><a href="#shaders">Shaders</a></li>
         <ul>
@@ -160,7 +161,8 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#view">View</a></li>
           <li><a href="#rendertexture">RenderTexture</a></li>
           <li><a href="#rendercubetexture">RenderCubeTexture</a></li>
-          <li><a href="#mask">Mask</a></li>
+          <li><a href="#fisheye">Fisheye</a></li>
+          <li><a href="#mask">Mask</a></li>          
           <li><a href="#meshportalmaterial">MeshPortalMaterial</a></li>
         </ul>
         <li><a href="#modifiers">Modifiers</a></li>
@@ -225,6 +227,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
           <li><a href="#useenvironment">useEnvironment</a></li>
           <li><a href="#usematcaptexture">useMatcapTexture</a></li>
           <li><a href="#usenormaltexture">useNormalTexture</a></li>
+          <li><a href="#shadowalpha">ShadowAlpha</a></li>
         </ul>
       </ul>
     </td>
@@ -855,7 +858,7 @@ function Loop() {
     // Set the current position along the curve, you can increment indiscriminately for a loop
     motion.current += delta
     // Look ahead on the curve
-    motion.object.lookAt(motion.next)
+    motion.object.current.lookAt(motion.next)
   })
 }
 
@@ -1325,6 +1328,20 @@ To make the material transparent:
 <Image url="/file.jpg" transparent opacity={0.5} />
 ```
 
+You can have custom planes, for instance a rounded-corner plane.
+
+```jsx
+import { extend } from '@react-three/fiber'
+import { Image } from '@react-three/drei'
+import { easing, geometry } from 'maath'
+
+extend({ RoundedPlaneGeometry: geometry.RoundedPlaneGeometry })
+
+<Image url="/file.jpg">
+  <roundedPlaneGeometry args={[1, 2, 0.15]} />
+</Image>
+```
+
 #### Text
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.vercel.app/?path=/story/abstractions-text--text-st) ![](https://img.shields.io/badge/-suspense-brightgreen)
@@ -1768,10 +1785,12 @@ The decal box has to intersect the surface, otherwise it will not be visible. if
     position={[0, 0, 0]} // Position of the decal
     rotation={[0, 0, 0]} // Rotation of the decal (can be a vector or a degree in radians)
     scale={1} // Scale of the decal
-    polygonOffset
-    polygonOffsetFactor={-1} // The mesh should take precedence over the original
   >
-    <meshBasicMaterial map={texture} />
+    <meshBasicMaterial
+      map={texture}
+      polygonOffset
+      polygonOffsetFactor={-1} // The material should take precedence over the original
+    />
   </Decal>
 </mesh>
 ```
@@ -1846,6 +1865,46 @@ type AsciiRendererProps = {
   <AsciiRenderer />
 ```
 
+#### Splat
+
+<p>
+  <a href="https://codesandbox.io/s/qp4jmf"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/qp4jmf/screenshot.png" alt="Demo"/></a>
+</p>
+
+A declarative abstraction around [antimatter15/splat](https://github.com/antimatter15/splat). It supports re-use, multiple splats with correct depth sorting, splats can move and behave as a regular object3d's, supports alphahash & alphatest, and stream-loading.
+
+```tsx
+type SplatProps = {
+  /** Url towards a *.splat file, no support for *.ply */
+  src: string
+  /** Whether to use tone mapping, default: false */
+  toneMapped?: boolean
+  /** Alpha test value, , default: 0 */
+  alphaTest?: number
+  /** Whether to use alpha hashing, default: false */
+  alphaHash?: boolean
+  /** Chunk size for lazy loading, prevents chokings the worker, default: 25000 (25kb) */
+  chunkSize?: number
+} & JSX.IntrinsicElements['mesh']
+```
+
+```jsx
+<Splat src="https://huggingface.co/cakewalk/splat-data/resolve/main/nike.splat" />
+```
+
+In order to depth sort multiple splats correectly you can either use alphaTest, for instance with a low value. But keep in mind that this can show a slight outline under some viewing conditions.
+
+```jsx
+<Splat alphaTest={0.1} src="foo.splat" />
+<Splat alphaTest={0.1} src="bar.splat" />
+```
+
+You can also use alphaHash, but this can be slower and create some noise, you would typically get rid of the noise in postprocessing with a TAA pass. You don't have to use alphaHash on all splats.
+
+```jsx
+<Splat alphaHash src="foo.splat" />
+```
+
 # Shaders
 
 #### MeshReflectorMaterial
@@ -2368,6 +2427,16 @@ Enable shadows using the `castShadow` and `recieveShadow` prop.
 
 > Note: Html 'blending' mode only correctly occludes rectangular HTML elements by default. Use the `geometry` prop to swap the backing geometry to a custom one if your Html has a different shape.
 
+If transform mode is enabled, the dimensions of the rendered html will depend on the position relative to the camera, the camera fov and the distanceFactor. For example, an Html component placed at (0,0,0) and with a distanceFactor of 10, rendered inside a scene with a perspective camera positioned at (0,0,2.45) and a FOV of 75, will have the same dimensions as a "plain" html element like in [this example](https://codesandbox.io/s/drei-html-magic-number-6mzt6m).
+
+A caveat of transform mode is that on some devices and browsers, the rendered html may appear blurry, as discussed in [#859](https://github.com/pmndrs/drei/issues/859). The issue can be at least mitigated by scaling down the Html parent and scaling up the html children:
+
+```jsx
+<Html transform scale={0.5}>
+  <div style={{ transform: 'scale(2)' }}>Some text</div>
+</Html>
+```
+
 #### CycleRaycast
 
 ![](https://img.shields.io/badge/-Dom only-red)
@@ -2466,7 +2535,7 @@ type Props = {
   onLoopEnd?: Function
   /** Event callback when each frame changes */
   onFrame?: Function
-  /** Control when the animation runs */
+  /** @deprecated Control when the animation runs*/
   play?: boolean
   /** Control when the animation pauses */
   pause?: boolean
@@ -2480,6 +2549,8 @@ type Props = {
   offset?: number
   /** Allows the sprite animation to start from the end towards the start */
   playBackwards: boolean
+  /** Allows the animation to be paused after it ended so it can be restarted on demand via auto */
+  resetOnEnd?: boolean
 }
 ```
 
@@ -3266,7 +3337,12 @@ A wrapper around [THREE.LineSegments](https://threejs.org/docs/#api/en/objects/L
 ##### Prop based:
 
 ```jsx
-<Segments limit={1000} lineWidth={1.0}>
+<Segments
+  limit={1000}
+  lineWidth={1.0}
+  // All THREE.LineMaterial props are valid
+  {...materialProps}
+>
   <Segment start={[0, 0, 0]} end={[0, 10, 0]} color="red" />
   <Segment start={[0, 0, 0]} end={[0, 10, 10]} color={[1, 0, 1]} />
 </Segments>
@@ -3378,6 +3454,14 @@ export interface BVHOptions {
   maxDepth?: number
   /** The number of triangles to aim for in a leaf node, default: 10 */
   maxLeafTris?: number
+  /** If false then an index buffer is created if it does not exist and is rearranged */
+  /** to hold the bvh structure. If false then a separate buffer is created to store the */
+  /** structure and the index buffer (or lack thereof) is retained. This can be used */
+  /** when the existing index layout is important or groups are being used so a */
+  /** single BVH hierarchy can be created to improve performance. */
+  /** default: false */
+  /** Note: This setting is experimental */
+  indirect?: boolean
 }
 
 export type BvhProps = BVHOptions &
@@ -3621,10 +3705,6 @@ type Props = JSX.IntrinsicElements['texture'] & {
 
 #### RenderCubeTexture
 
-<p>
-  <a href="https://codesandbox.io/s/7qytdw"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/7qytdw/screenshot.png" alt="Demo"/></a>  
-</p>
-
 This component allows you to render a live scene into a cubetexture which you can then apply to a material, for instance as an environment map (via the envMap property). The contents of it run inside a portal and are separate from the rest of the canvas, therefore you can have events in there, environment maps, etc.
 
 ```tsx
@@ -3642,7 +3722,7 @@ export type RenderCubeTextureProps = Omit<JSX.IntrinsicElements['texture'], 'rot
   /** Optional frame count, defaults to Infinity. If you set it to 1, it would only render a single frame, etc */
   frames?: number
   /** Optional event compute, defaults to undefined */
-  compute?: (event: any, state: any, previous: any) => false | undefined
+  compute?: ComputeFunction
   /** Flip cubemap, see https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLCubeRenderTarget.js */
   flip?: boolean
   /** Cubemap resolution (for each of the 6 takes), null === full screen resolution, default: 896 */
@@ -3676,6 +3756,37 @@ const api = useRef<RenderCubeTextureApi>(null!)
         <mesh />
 ```
 
+### Fisheye
+
+<p>
+  <a href="https://codesandbox.io/s/7qytdw"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/7qytdw/screenshot.png" alt="Demo"/></a>  
+</p>
+
+```tsx
+export type FisheyeProps = JSX.IntrinsicElements['mesh'] & {
+  /** Zoom factor, 0..1, 0 */
+  zoom?: number
+  /** Number of segments, 64 */
+  segments?: number
+  /** Cubemap resolution (for each of the 6 takes), null === full screen resolution, default: 896 */
+  resolution?: number
+  /** Children will be projected into the fisheye */
+  children: React.ReactNode
+  /** Optional render priority, defaults to 1 */
+  renderPriority?: number
+}
+```
+
+This component will take over system rendering. It portals its children into a cubemap which is then projected onto a sphere. The sphere is rendered out on the screen, filling it. You can lower the resolution to increase performance. Six renders per frame are necessary to construct a full fisheye view, and since each facet of the cubemap only takes a portion of the screen full resolution is not necessary. You can also reduce the amount of segments (resulting in edgier rounds).
+
+```jsx
+<Canvas camera={{ position: [0, 0, 5] }}>
+  <Fisheye>
+    <YourScene />
+  </Fisheye>
+  <OrbitControls />
+```
+
 #### Mask
 
 <p>
@@ -3936,15 +4047,19 @@ For instance, one could want the Html component to be pinned to `positive x`, `p
   <a href="https://codesandbox.io/s/42glz0"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/42glz0/screenshot.png" alt="Demo"/></a>
 </p>
 
-Calculates a boundary box and centers the camera accordingly. If you are using camera controls, make sure to pass them the `makeDefault` prop. `fit` fits the current view on first render. `clip` sets the cameras near/far planes. `observe` will trigger on window resize.
+Calculates a boundary box and centers the camera accordingly. If you are using camera controls, make sure to pass them the `makeDefault` prop. `fit` fits the current view on first render. `clip` sets the cameras near/far planes. `observe` will trigger on window resize. To control the damping animation, use `maxDuration` to set the animation length in seconds, and `interpolateFunc` to define how the animation changes over time (should be an increasing function in [0, 1] interval, `interpolateFunc(0) === 0`, `interpolateFunc(1) === 1`).
 
 ```jsx
-<Bounds fit clip observe damping={6} margin={1.2}>
+const interpolateFunc = (t: number) => 1 - Math.exp(-5 * t) + 0.007 * t // Matches the default Bounds behavior
+const interpolateFunc1 = (t: number) => -t * t * t + 2 * t * t          // Start smoothly, finish linearly
+const interpolateFunc2 = (t: number) => -t * t * t + t * t + t          // Start linearly, finish smoothly
+
+<Bounds fit clip observe margin={1.2} maxDuration={1} interpolateFunc={interpolateFunc}>
   <mesh />
 </Bounds>
 ```
 
-The Bounds component also acts as a context provider, use the `useBounds` hook to refresh the bounds, fit the camera, clip near/far planes, go to camera orientations or focus objects. `refresh(object?: THREE.Object3D | THREE.Box3)` will recalculate bounds, since this can be expensive only call it when you know the view has changed. `clip` sets the cameras near/far planes. `to` sets a position and target for the camera. `fit` zooms and centers the view.
+The Bounds component also acts as a context provider, use the `useBounds` hook to refresh the bounds, fit the camera, clip near/far planes, go to camera orientations or focus objects. `refresh(object?: THREE.Object3D | THREE.Box3)` will recalculate bounds, since this can be expensive only call it when you know the view has changed. `reset` centers the view. `moveTo` changes the camera position. `lookAt` changes the camera orientation, with the respect to up-vector, if specified. `clip` sets the cameras near/far planes. `fit` centers the view for non-orthographic cameras (same as reset) or zooms the view for orthographic cameras.
 
 ```jsx
 function Foo() {
@@ -3957,10 +4072,17 @@ function Foo() {
     // bounds.refresh(ref.current).clip().fit()
     // bounds.refresh(new THREE.Box3()).clip().fit()
 
-    // Or, send the camera to a specific orientatin
-    // bounds.to({position: [0, 10, 10], target: {[5, 5, 0]}})
+    // Or, move the camera to a specific position, and change its orientation
+    // bounds.moveTo([0, 10, 10]).lookAt({ target: [5, 5, 0], up: [0, -1, 0] })
+
+    // For orthographic cameras, reset has to be used to center the view (fit would only change its zoom to match the bounding box)
+    // bounds.refresh().reset().clip().fit()
+  }, [...])
+}
+
 <Bounds>
   <Foo />
+</Bounds>
 ```
 
 #### CameraShake
@@ -4078,7 +4200,7 @@ For a little more realistic results enable accumulative shadows, which requires
 ```jsx
 <Canvas shadows>
   <Stage shadows="accumulative">
-    <mesh castShadows />
+    <mesh castShadow />
   </Stage>
 </Canvas>
 ```
@@ -4706,3 +4828,21 @@ return (
   ...
 )
 ```
+
+#### ShadowAlpha
+
+Makes an object's shadow respect its opacity and alphaMap.
+
+```jsx
+<mesh>
+  <geometry />
+  <material transparent opacity={0.5} />
+
+  <ShadowAlpha
+    opacity={undefined} // number. Override the opacity of the shadow.
+    alphaMap={undefined} // THREE.Texture. Override the alphaMap of the shadow
+  />
+</mesh>
+```
+
+> Note: This component uses Screendoor transparency using a dither pattern. This pattern is notacible when the camera gets close to the shadow.