Skip to content

Commit

Permalink
fix: merge conflicts for sprite-animator
Browse files Browse the repository at this point in the history
  • Loading branch information
Michalis Dobekidis committed Dec 19, 2023
2 parents a8d7c5d + 583564f commit c2c8515
Show file tree
Hide file tree
Showing 111 changed files with 3,097 additions and 1,776 deletions.
3 changes: 2 additions & 1 deletion .prettierrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@
"singleQuote": true,
"tabWidth": 2,
"printWidth": 120,
"useTabs": false
"useTabs": false,
"endOfLine": "auto"
}
41 changes: 41 additions & 0 deletions .storybook/stories/ShadowAlpha.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
178 changes: 159 additions & 19 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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)
})
}

Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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>
```
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand All @@ -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
}
```
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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 &
Expand Down Expand Up @@ -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
Expand All @@ -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 */
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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() {
Expand All @@ -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
Expand Down Expand Up @@ -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>
```
Expand Down Expand Up @@ -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.
Loading

0 comments on commit c2c8515

Please sign in to comment.