feat: native threejs effects #121
Conversation
There was a problem hiding this comment.
Hey @Tinoooo amazing job with this, I think it was a great idea to separate both postprocessing and native ones.
Only 3 merge-blocking topics:
- Replace all the
three/examples/jsmwiththree-stdlib - Effects like Glitch and Noise which are similar to animations should invalidate frames when on-demand, otherwise they will only render one frame
- We need to invalidate all effects on props change, similar to what we did in cientos https://github.com/Tresjs/cientos/blob/main/src/core/materials/meshWobbleMaterial/index.vue#L24
Let me know if you need help with any of those
| <script lang="ts"> | ||
| import { useLoop, useTresContext } from '@tresjs/core' | ||
| import { useDevicePixelRatio } from '@vueuse/core' | ||
| import { EffectComposer as EffectComposerThreejs } from 'three/examples/jsm/postprocessing/EffectComposer.js' |
There was a problem hiding this comment.
Hi @Tinoooo change all the three/examples/jsm imports to three-stdlib which is a stand-alone version of threejs/examples/jsm written in Typescript & built for ESM & CJS. This way we ensure proper tree-shaking
There was a problem hiding this comment.
I would like to use three-stdlib, but their EffectComposer work differently. It does not have a dispose method, which is important for memory stuff.
There was a problem hiding this comment.
Well this changed: pmndrs/three-stdlib#378
But I was suggested by the three-stdlib dev not to use their package if we only want to support ESM. three-stdlib also does not have the OutputPass. I suggest sticking to /examples/jsm.
| @@ -0,0 +1,30 @@ | |||
| <script lang="ts"> | |||
| import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js' | |||
There was a problem hiding this comment.
| import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js' | |
| import { GlitchPass } from 'three-stdlib' |
There was a problem hiding this comment.
please see comment above
| import type { Blending } from 'three/src/constants.js' | ||
| import { useEffect } from './composables/useEffect' | ||
|
|
||
| export const Dot = 1 |
There was a problem hiding this comment.
Maybe enum? (Non-blocking)
export enum HalftoneShape {
Dot = 1,
Ellipse = 2,
Line = 3,
Square = 4
}
There was a problem hiding this comment.
Yes! Much better 👍. I added that.
| @@ -0,0 +1,8 @@ | |||
| <script lang="ts" setup> | |||
| import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js' | |||
There was a problem hiding this comment.
| import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js' | |
| import { OutputPass } from 'three-stdlib' |
There was a problem hiding this comment.
please see comment above
| <script lang="ts" setup> | ||
| const props = defineProps<GlitchProps>() | ||
|
|
||
| const { pass } = useEffect(() => new GlitchPass(props.dtSize)) |
There was a problem hiding this comment.
@Tinoooo does this pass have a callback every time they trigger the glitch? Since it could be considered as an animation we should invalidate the frames otherwise it will only render the effect once while using on-demand (see image below)
If the effect has no callback, maybe we can fake it by only adding an onBeforeRender that invalidates once this is mounted
There was a problem hiding this comment.
I added it for glitch and noise. For some reason the outline effect does not work with on-demand rendering. Also on main. I added a bug issue for that (#125).
I added the prop change watcher. Let's handle the rest in their respective PR threads. |
There was a problem hiding this comment.
Thanks for taking the time to work on this and address all the comments. Amazing work as always @Tinoooo
No description provided.