Skip to content

Commit

Permalink
fix: reimplement ContactShadows for v4 (#449)
Browse files Browse the repository at this point in the history
* chore(deps): update deps to latest

* chore: on demand invalidation composable with prop change detection

* feat: on-demand orbit-controls

* feat: on-demand camera controls

* feat: invalidate also on autoRotate

* feat: on-demand map controls and refactor

* feat: on-demand transform controls

* feat: on-demand keyboard controls

* feat: on-demand keybaord controls

* chore: added demo suffix to control pages to avoid confusions

* feat: on-demand pointer lock controls

* feat: on-demand scroll controls

* feat: on-demand levioso

* feat: correct orbit controls auto rotate invalidation

* feat: on-demand text3d

* feat: on-demand mouse-parallax

* feat: on-demand fbo and size watcher refactor

* chore(playground): refactor to use useLoop and sub components

* chore: remove unused import for lint fix

* chore(playground): refactor lensflare demo to use useLoop

* feat: on-demand sampler

* feat: on-demand invaldiation on reflector prop change

* chore: added render activity graph and try to make on-demand work on AnimatedSprite

* chore: renamed positional audio demo

* chore: on-demand smoke

* feat: on-demand precipitation

* feat: on-dermand stars

* feat: on-demand Environment

* feat: on-demand sky

* feat: on-demand Ocean component

* chore: testing on-demand on fit

* feat: on-demand Wobble Material

* feat: on-demand invalidation holographic material

* feat: on-demand reflection material

* feat: on-demand custom shader material

* chore: rename bakeshadows demo

* chore: misc route

* chore: ci, update action setup

* chore: update Tres core

* fix: reimplement ContactShadows for v4 core

* docs: change link name

* fix(ContactShadows): add invalidate to updates

---------

Co-authored-by: alvarosabu <alvaro.saburido@gmail.com>
  • Loading branch information
andretchen0 and alvarosabu authored Jul 24, 2024
1 parent 1a88ebc commit d71c328
Show file tree
Hide file tree
Showing 8 changed files with 384 additions and 337 deletions.
2 changes: 1 addition & 1 deletion docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export default defineConfig({
{ text: 'Sky', link: '/guide/staging/sky' },
{ text: 'Stars', link: '/guide/staging/stars' },
{ text: 'Smoke', link: '/guide/staging/smoke' },
{ text: 'Contact Shadows', link: '/guide/staging/contact-shadows' },
{ text: 'ContactShadows', link: '/guide/staging/contact-shadows' },
{ text: 'Precipitation', link: '/guide/staging/precipitation' },
{ text: 'Sparkles', link: '/guide/staging/sparkles' },
{ text: 'Ocean', link: '/guide/staging/ocean' },
Expand Down
75 changes: 0 additions & 75 deletions docs/.vitepress/theme/components/ContactShadowDemo.vue

This file was deleted.

15 changes: 15 additions & 0 deletions docs/.vitepress/theme/components/ContactShadowsDemo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { ContactShadows, Levioso, TorusKnot } from '@tresjs/cientos'
</script>

<template>
<TresCanvas clear-color="white">
<Levioso :speed="2" :range="[0, 0.7]" :rotation-factor="9">
<TorusKnot :scale="0.45">
<TresMeshNormalMaterial />
</TorusKnot>
</Levioso>
<ContactShadows :position-y="-1" color="#335" :scale="20" />
</TresCanvas>
</template>
2 changes: 1 addition & 1 deletion docs/component-list/components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export default [
{ text: 'Sky', link: '/guide/staging/sky' },
{ text: 'Stars', link: '/guide/staging/stars' },
{ text: 'Smoke', link: '/guide/staging/smoke' },
{ text: 'Contact Shadows', link: '/guide/staging/contact-shadows' },
{ text: 'ContactShadows', link: '/guide/staging/contact-shadows' },
{ text: 'Precipitation', link: '/guide/staging/precipitation' },
{ text: 'Sparkles', link: '/guide/staging/sparkles' },
{ text: 'Ocean', link: '/guide/staging/ocean' },
Expand Down
57 changes: 20 additions & 37 deletions docs/guide/staging/contact-shadows.md
Original file line number Diff line number Diff line change
@@ -1,45 +1,28 @@
# Contact Shadows
# ContactShadows

<DocsDemo>
<ContactShadowDemo />
<ContactShadowsDemo />
</DocsDemo>

A contact shadow implementation is a technique used in 3D graphics to create shadows that appear where objects meet or "contact" each other. This is different from traditional shadowing techniques, which often only create shadows based on the position of a light source relative to an object.

This component is used to create and manage contact shadows in a 3D scene. It is based on the original code by [@mrdoob](https://twitter.com/mrdoob) and the implementation in [pmndrs drei](https://github.com/pmndrs/drei/blob/master/src/core/ContactShadows.tsx#L113) but adapted for Vue Composition API.
`<ContactShadows />` is a "fake", non-lighting-based shadow component. It displays shadows on a single plane. The component is based on the [THREE.js contact shadows example](https://threejs.org/examples/webgl_shadow_contact.html) by [@mrdoob](https://twitter.com/mrdoob).

## Usage

```vue{11}
<template>
<TresCanvas v-bind="gl">
<TresPerspectiveCamera :position="[11, 11, 11]" />
<OrbitControls />
<Box ref="boxRef" :args="[0.4, 0.4, 0.4]" :position="[0, 1, 0]">
<TresMeshNormalMaterial />
</Box>
<Icosahedron ref="icoRef" :args="[0.3]" :position="[1, 1, 1]">
<TresMeshNormalMaterial />
</Icosahedron>
<ContactShadows :blur="0.5" :resolution="512" :opacity="0.2" />
<Plane :args="[10, 10, 10]" :position="[0, -0.02, 0]">
<TresMeshBasicMaterial :color="'#ffffff'" />
</Plane>
<TresAmbientLight :intensity="1" />
</TresCanvas>
</template>
```
<<< @/.vitepress/theme/components/ContactShadowsDemo.vue

## Props

| Prop | Description | Default |
| ------------ | ------------------------------------------------------------------------------ | --------- |
| `opacity` | The opacity of the shadows. | 1 |
| `width` | The width of the shadows. | 1 |
| `height` | The height of the shadows. | 1 |
| `blur` | The blur of the shadows. | 1 |
| `far` | How far the OrthographicCamera should be to capture the shadows. | 10 |
| `smooth` | Whether the shadows should be smooth or not. | true |
| `resolution` | The resolution of the shadows. | 512 |
| `frames` | The number of frames to render the shadows. | Infinity |
| `scale` | The scale of the shadows. Can be a number or an array of two numbers `[x, y]`. | 10 |
| `color` | The color of the shadows. | '#000000' |
| `depthWrite` | Whether the shadows should write to the depth buffer or not. | false |
| Prop | Description | Default |
| ------------ | ------------------------------------------------------------------------------ | ----------- |
| `opacity` | The opacity of the shadows. | `1` |
| `blur` | The blur of the shadows. | `1` |
| `color` | The color of the shadows. | `'#000000'` |
| `tint` | If provided, the color of the "core" of the shadows. "Added" to `color`. | `undefined` |
| `scale` | The scale of the shadows/shadow plane. Can be a number or an array of two numbers `[x, y]`. | 10 |
| `width` | The width of the shadow plane. | `1` |
| `height` | The height of the shadow plane. | `1` |
| `far` | The distance of the orthographic shadow camera extends above the shadow plane. | `10` |
| `smooth` | Whether the shadows should be smoothed to reduce artifacts. | `true` |
| `resolution` | The resolution of the shadow textures. | `512` |
| `frames` | For performance, optionally stop updating shadows after `frames` frames. | `Math.POSITIVE_INFINITY` |
| `depthWrite` | Whether the shadows should write to the depth buffer or not. | `false` |
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
"prepare": "node .husky/install.mjs"
},
"peerDependencies": {
"@tresjs/core": ">=3.2",
"@tresjs/core": ">=4.2.1",
"three": ">=0.133",
"vue": ">=3.3"
},
Expand Down
Loading

0 comments on commit d71c328

Please sign in to comment.