Merge branch 'main' of github.com:Tresjs/post-processing

playground/.eslintrc-auto-import.json

@@ -58,7 +58,6 @@
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true,
-    "toValue": true
+    "watchSyncEffect": true
   }
 }

playground/components.d.ts

@@ -9,7 +9,9 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    copy: typeof import('./src/components/TheExperience copy.vue')['default']
+    copy: typeof import('./src/components/UnrealBloom copy.vue')['default']
+    GlitchDemo: typeof import('./src/components/GlitchDemo.vue')['default']
+    OutlineDemo: typeof import('./src/components/OutlineDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TheExperience: typeof import('./src/components/TheExperience.vue')['default']

playground/src/components/GlitchDemo.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, useTweakPane } from '@tresjs/cientos'
+import { EffectComposer, Glitch } from '@tresjs/post-processing'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import { reactive } from 'vue'
+import { GlitchMode } from 'postprocessing'
+import { Vector2 } from 'three'
+
+const gl = {
+  clearColor: '#121212',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  toneMapping: NoToneMapping,
+}
+
+const glitchParams = reactive({
+  delay: new Vector2(1.5, 3.5),
+  duration: new Vector2(0.6, 1.0),
+  strength: new Vector2(0.3, 1.0),
+  mode: GlitchMode.SPORADIC,
+  active: true,
+  ratio: 0.85,
+  columns: 2,
+  chromaticAberrationOffset: new Vector2(0.001, 0.001),
+  chromaticAberrationEnabled: true,
+  dtSize: 64,
+})
+
+const { pane } = useTweakPane()
+
+pane.addInput(glitchParams, 'delay')
+pane.addInput(glitchParams, 'duration')
+pane.addInput(glitchParams, 'strength')
+pane.addInput(glitchParams, 'mode', {
+  options: {
+    SPORADIC: GlitchMode.SPORADIC,
+    CONSTANT_MILD: GlitchMode.CONSTANT_MILD,
+    CONSTANT_WILD: GlitchMode.CONSTANT_WILD,
+  },
+})
+pane.addInput(glitchParams, 'active')
+pane.addInput(glitchParams, 'ratio', { min: 0, max: 1 })
+pane.addInput(glitchParams, 'columns', { min: 1, max: 64, step: 1 })
+pane.addInput(glitchParams, 'chromaticAberrationOffset')
+pane.addInput(glitchParams, 'dtSize', { min: 1, max: 64, step: 1 })
+</script>
+
+<template>
+  <TresCanvas v-bind="gl" disable-render>
+    <TresPerspectiveCamera :position="[5, 5, 5]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <TresMesh>
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+    <Suspense>
+      <EffectComposer>
+        <Glitch v-bind="glitchParams" />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>

playground/src/components/OutlineDemo.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, useTweakPane } from '@tresjs/cientos'
+import { reactive, ref } from 'vue'
+import { EffectComposer, Outline, Glitch } from '@tresjs/post-processing'
+import { BasicShadowMap, NoToneMapping, Object3D, Intersection } from 'three'
+
+const gl = {
+  clearColor: '#4ADE80',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  toneMapping: NoToneMapping,
+}
+
+const outlinedObjects = ref<Object3D[]>([])
+
+const toggleMeshSelectionState = ({ object }: Intersection) => {
+  if (outlinedObjects.value.some(({ uuid }) => uuid === object.uuid))
+    outlinedObjects.value = outlinedObjects.value.filter(({ uuid }) => uuid !== object.uuid)
+  else outlinedObjects.value = [...outlinedObjects.value, object]
+}
+
+const outlineParameters = reactive({
+  pulseSpeed: 0,
+  edgeStrength: 2.5,
+  visibleEdgeColor: '#ff0000',
+})
+
+const { pane } = useTweakPane()
+
+pane.addInput(outlineParameters, 'edgeStrength', { min: 0, max: 10 })
+pane.addInput(outlineParameters, 'pulseSpeed', { min: 0, max: 2 })
+pane.addInput(outlineParameters, 'visibleEdgeColor')
+</script>
+
+<template>
+  <TresCanvas v-bind="gl" disable-render>
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[2, 2, 2]" />
+    <OrbitControls />
+    <template v-for="i in 5" :key="i">
+      <TresMesh @click="toggleMeshSelectionState" :position="[i * 1.1 - 2.8, 1, 0]">
+        <TresBoxGeometry :width="4" :height="4" :depth="4" />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </template>
+
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+    <Suspense>
+      <EffectComposer>
+        <Outline :outlined-objects="outlinedObjects" v-bind="outlineParameters" />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>

playground/src/components/UnrealBloom.vue

@@ -4,6 +4,7 @@ import { TresCanvas } from '@tresjs/core'
 import { OrbitControls, useTweakPane } from '@tresjs/cientos'
 import { EffectComposer, Bloom } from '@tresjs/post-processing'
 import { BasicShadowMap, NoToneMapping } from 'three'
+import { onMounted, reactive, ref } from 'vue'
 
 const gl = {
   clearColor: '#121212',
@@ -14,11 +15,10 @@ const gl = {
 }
 
 const bloomParams = reactive({
-  luminanceThreshold: 0.1,
+  luminanceThreshold: 0.2,
   luminanceSmoothing: 0.3,
   mipmapBlur: true,
   intensity: 4.0,
-  radius: 0.85,
 })
 
 const { pane } = useTweakPane()
@@ -27,7 +27,6 @@ pane.addInput(bloomParams, 'luminanceThreshold', { min: 0, max: 1 })
 pane.addInput(bloomParams, 'luminanceSmoothing', { min: 0, max: 1 })
 pane.addInput(bloomParams, 'mipmapBlur')
 pane.addInput(bloomParams, 'intensity', { min: 0, max: 10 })
-pane.addInput(bloomParams, 'radius', { min: 0, max: 1 })
 
 const materialRef = ref(null)
 
@@ -46,7 +45,7 @@ onMounted(() => {
       <TresSphereGeometry :args="[2, 32, 32]" />
       <TresMeshStandardMaterial color="hotpink" :emissive="new Color('hotpink')" :emissive-intensity="9" />
     </TresMesh> -->
-    <TresMesh :position="[2, 2, 2]">
+    <TresMesh :position="[2, 2, -2]">
       <TresSphereGeometry :args="[2, 32, 32]" />
       <TresMeshStandardMaterial color="hotpink" />
     </TresMesh>
@@ -63,8 +62,8 @@ onMounted(() => {
     <TresAmbientLight :intensity="0.5" />
     <TresDirectionalLight :position="[3, 3, 3]" :intensity="2" />
     <Suspense>
-      <EffectComposer>
-        <Bloom v-bind="bloomParams"> </Bloom>
+      <EffectComposer :depth-buffer="true">
+        <Bloom v-bind="bloomParams"></Bloom>
       </EffectComposer>
     </Suspense>
   </TresCanvas>

playground/src/pages/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
 <template>
-  <UnrealBloom />
+  <OutlineDemo />
 </template>

src/core/EffectComposer.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { HalfFloatType, Scene } from 'three'
+import { TresCamera, TresObject, useRenderLoop } from '@tresjs/core'
+import { DepthDownsamplingPass, EffectComposer as EffectComposerImpl, NormalPass, RenderPass } from 'postprocessing'
+
+import { useCore } from './useCore'
+import { ShallowRef, provide, shallowRef, watchEffect } from 'vue'
+import { isWebGL2Available } from 'three-stdlib'
+import { useWindowSize } from '@vueuse/core'
+
+export type EffectComposerProps = {
+  enabled?: boolean
+  children?: TresObject[]
+  depthBuffer?: boolean
+  dissableNormalPass?: boolean
+  stencilBuffer?: boolean
+  resolutionScale?: number
+  /*   renderPriority?: number */
+  autoClear?: boolean
+  multisampling?: number
+  frameBufferType?: number
+  scene?: Scene
+  camera?: TresCamera
+}
+
+const { state } = useCore()
+
+const {
+  enabled = true,
+  /*   renderPriority = 1, */
+  autoClear = true,
+  multisampling = 8,
+  frameBufferType = HalfFloatType,
+  dissableNormalPass = false,
+  depthBuffer,
+  stencilBuffer,
+  scene,
+  camera,
+  resolutionScale,
+} = defineProps<EffectComposerProps>()
+
+const effectComposer: ShallowRef<EffectComposerImpl | null> = shallowRef(null)
+
+const localScene = scene || state.scene
+const localCamera = camera || state.camera
+
+let downSamplingPass = null
+let normalPass = null
+const webGL2Available = isWebGL2Available()
+
+provide('effectComposer', effectComposer)
+
+const { width, height } = useWindowSize()
+
+function setNormalPass() {
+  if (effectComposer.value) {
+    normalPass = new NormalPass(scene as Scene, camera as TresCamera)
+    normalPass.enabled = false
+    effectComposer.value.addPass(normalPass)
+    if (resolutionScale !== undefined && webGL2Available) {
+      downSamplingPass = new DepthDownsamplingPass({
+        normalBuffer: normalPass.texture,
+        resolutionScale: resolutionScale,
+      })
+      downSamplingPass.enabled = false
+      effectComposer.value.addPass(downSamplingPass)
+    }
+  }
+}
+
+watchEffect(() => {
+  if (state.renderer) {
+    state.renderer.setSize(width.value, height.value)
+    state.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+    effectComposer.value = new EffectComposerImpl(state.renderer, {
+      depthBuffer,
+      stencilBuffer,
+      multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
+      frameBufferType,
+    })
+    effectComposer.value.addPass(new RenderPass(localScene, localCamera))
+
+    if (!dissableNormalPass) {
+      setNormalPass()
+    }
+  }
+})
+
+const { onLoop } = useRenderLoop()
+
+onLoop(() => {
+  if (effectComposer.value) {
+    effectComposer.value.render()
+  }
+})
+
+onLoop(({ delta }) => {
+  if (enabled && state.renderer && effectComposer.value) {
+    const currentAutoClear = state.renderer.autoClear
+    state.renderer.autoClear = autoClear
+    if (stencilBuffer && !autoClear) state.renderer.clearStencil()
+    effectComposer.value.render(delta)
+    state.renderer.autoClear = currentAutoClear
+  }
+})
+</script>
+<template>
+  <slot />
+</template>