feat: native threejs effects (#121)

* added EffectComposer and some debugging files

* wip

* added composable

* cleanup

* added more props to native pixelation effect

* restructured playground

* added glitch Effect

* added glitch effect

* renamed folder

* added check to prevent console warning

* added smaa effect

* added output pass

* moved injectionKey

* added prop to EffectComposer

* added halftone effect

* added unreal bloom effect

* removed obsolete computed

* added on demand rendering support

* lint fixes

* added enabled prop to effect composer component

* removed obsolete code

* eslint stuff

* rebuilt pnpm lock file

* moved files

* type fixes and removed dependency

* added renderer invalidation to glitch effects

* added invalidation for noise effect

* lint fix

---------

Co-authored-by: Alvaro Saburido <[email protected]>

Author: Tinoooo

docs/.vitepress/config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'vitepress'
-import { resolve } from 'pathe'
 import { templateCompilerOptions } from '@tresjs/core'
+import { resolve } from 'pathe'
+import { defineConfig } from 'vitepress'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({

docs/.vitepress/theme/components/BloomDemo.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Color } from 'three'
-import { reactive } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-import { BlendFunction } from 'postprocessing'
 import { Bloom, EffectComposer } from '@tresjs/post-processing'
+import { BlendFunction } from 'postprocessing'
+import { Color } from 'three'
+import { reactive } from 'vue'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 

docs/.vitepress/theme/components/DepthOfFieldDemo.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { gsap } from 'gsap'
 import { TresCanvas } from '@tresjs/core'
 import { DepthOfField, EffectComposer } from '@tresjs/post-processing'
+import { gsap } from 'gsap'
+import { ref } from 'vue'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 

docs/.vitepress/theme/components/GlitchDemo.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Color } from 'three'
-import { TresCanvas } from '@tresjs/core'
 import { Text3D } from '@tresjs/cientos'
-
+import { TresCanvas } from '@tresjs/core'
 import { EffectComposer, Glitch } from '@tresjs/post-processing'
 
+import { Color } from 'three'
+
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 
 const gl = {

docs/.vitepress/theme/components/LoveVueThreeJS.vue

@@ -2,9 +2,9 @@
 /// <reference types="vite-svg-loader" />
 import { gsap } from 'gsap'
 import { onMounted, ref } from 'vue'
-import Triangle from '../assets/triangle.svg'
 import SecondRow from '../assets/second-row.svg'
 import ThirdRow from '../assets/third-row.svg'
+import Triangle from '../assets/triangle.svg'
 
 const triangleRef = ref()
 const secondRowRef = ref()

docs/.vitepress/theme/components/NoiseDemo.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { EffectComposer, Noise } from '@tresjs/post-processing'
-import { OrbitControls } from '@tresjs/cientos'
 import { BlendFunction } from 'postprocessing'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 

docs/.vitepress/theme/components/OutlineDemo.vue

@@ -1,17 +1,17 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import type { Intersection, Object3D } from 'three'
-import { NoToneMapping } from 'three'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
 import { EffectComposer, Outline } from '@tresjs/post-processing'
 import { KernelSize } from 'postprocessing'
+import { NoToneMapping } from 'three'
 
-import { TresLeches, useControls } from '@tresjs/leches'
-import '@tresjs/leches/styles'
-
+import { ref } from 'vue'
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 
+import '@tresjs/leches/styles'
+
 const gl = {
   clearColor: '#121212',
   toneMapping: NoToneMapping,

docs/.vitepress/theme/components/PixelationDemo.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 import { EffectComposer, Pixelation } from '@tresjs/post-processing'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'

docs/.vitepress/theme/components/VignetteDemo.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 import { DepthOfField, EffectComposer, Vignette } from '@tresjs/post-processing'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 

docs/.vitepress/theme/composables/useRouteDisposal.ts

@@ -1,6 +1,6 @@
-import { ref, watch } from 'vue'
-import { useRouter } from 'vitepress'
 import type { EffectComposer } from '@tresjs/post-processing'
+import { useRouter } from 'vitepress'
+import { ref, watch } from 'vue'
 
 export function useRouteDisposal() {
   const router = useRouter()

docs/.vitepress/theme/index.ts

@@ -1,9 +1,9 @@
 // https://vitepress.dev/guide/custom-theme
-import 'uno.css'
 import Theme from 'vitepress/theme'
+import TresLayout from './TresLayout.vue'
 import './style.css'
 
-import TresLayout from './TresLayout.vue'
+import 'uno.css'
 
 export default {
   ...Theme,

docs/guide/effects/noise.md

@@ -10,9 +10,9 @@ Noise is an effect that adds Gaussian noise to the scene. This can be used to si
 
 ```vue
 <script setup lang="ts">
-import { BlendFunction } from 'postprocessing'
-
 import { Bloom, EffectComposer } from '@tresjs/post-processing'
+
+import { BlendFunction } from 'postprocessing'
 </script>
 
 <template>

docs/vite.config.ts

@@ -1,8 +1,8 @@
-import { defineConfig } from 'vite'
+import { templateCompilerOptions } from '@tresjs/core'
 import Unocss from 'unocss/vite'
-import svgLoader from 'vite-svg-loader'
 import Components from 'unplugin-vue-components/vite'
-import { templateCompilerOptions } from '@tresjs/core'
+import { defineConfig } from 'vite'
+import svgLoader from 'vite-svg-loader'
 
 export default defineConfig({
   plugins: [

package.json

@@ -54,8 +54,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.11.0",
-    "postprocessing": "^6.36.0",
-    "three-stdlib": "^2.30.5"
+    "postprocessing": "^6.36.0"
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^8.0.1",

playground-nuxt/pages/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { Bloom, EffectComposer } from '@tresjs/post-processing'
 import { BlendFunction } from 'postprocessing'
 import { BasicShadowMap, Color, NoToneMapping, SRGBColorSpace } from 'three'
 import { reactive } from 'vue'
-import { Bloom, EffectComposer } from '@tresjs/post-processing'
 
 const gl = {
   clearColor: '#82DBC5',

playground/components.d.ts

@@ -7,12 +7,15 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    BasicScene: typeof import('./src/components/BasicScene.vue')['default']
     BlenderCube: typeof import('./src/components/BlenderCube.vue')['default']
     copy: typeof import('./src/components/UnrealBloom copy.vue')['default']
+    EffectListItem: typeof import('./src/components/EffectListItem.vue')['default']
     GlitchDemo: typeof import('./src/components/GlitchDemo.vue')['default']
     GraphPane: typeof import('./src/components/GraphPane.vue')['default']
     NoiseDemo: typeof import('./src/components/NoiseDemo.vue')['default']
     OutlineDemo: typeof import('./src/components/OutlineDemo.vue')['default']
+    RouteListItem: typeof import('./src/components/RouteListItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TheExperience: typeof import('./src/components/TheExperience.vue')['default']

playground/package.json

@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/cientos": "^3.9.0",
-    "@tresjs/core": "4.0.2",
+    "@tresjs/cientos": "^4.0.2",
+    "@tresjs/core": "4.2.10",
     "vue-router": "^4.3.2"
   },
   "devDependencies": {

playground/src/components/BasicScene.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { EffectComposerThree } from '@tresjs/post-processing'
+
+defineProps<{
+  wireframe?: boolean
+}>()
+</script>
+
+<template>
+  <TresCanvas render-mode="on-demand">
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <TresMesh
+      :position="[-3.5, 1, 0]"
+    >
+      <TresConeGeometry :args="[1.25, 2, 4, 1, false, Math.PI * 0.25]" />
+      <TresMeshNormalMaterial :wireframe="wireframe" />
+    </TresMesh>
+
+    <TresMesh :position="[0, 1, 0]">
+      <TresBoxGeometry :args="[2, 2, 2]" />
+      <TresMeshNormalMaterial :wireframe="wireframe" />
+    </TresMesh>
+
+    <TresMesh :position="[3.5, 1, 0]">
+      <TresSphereGeometry />
+      <TresMeshNormalMaterial :wireframe="wireframe" />
+    </TresMesh>
+
+    <TresGridHelper />
+    <EffectComposerThree>
+      <slot name="effects"></slot>
+    </EffectComposerThree>
+  </TresCanvas>
+</template>

playground/src/components/EffectListItem.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { RouteRecordRaw } from 'vue-router'
+
+defineProps<{
+  route: RouteRecordRaw
+}>()
+</script>
+
+<template>
+  <router-link
+    :key="route.name"
+    :to="route.path"
+    class="p-4 leading-normal no-underline size-m weight-600 bg-zinc-50 rounded"
+  >
+    <div v-if="route.meta?.icon" class="inline-block p-2 p-x-3 m-b-3 text-2xl bg-zinc-200 rounded">
+      {{ route.meta.icon }}
+    </div>
+    <h3 class="text-sm p-0 m-0 mb-1.5 font-semibold text-zinc-600">
+      {{ route.meta?.name }}
+    </h3>
+  </router-link>
+</template>

playground/src/components/GraphPane.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { useRafFn } from '@vueuse/core'
+import { ref } from 'vue'
 import { useState } from '../composables/state'
 
 const width = 160

playground/src/components/OutlineDemo.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
+import type { Intersection, Object3D } from 'three'
 import { OrbitControls, useTweakPane } from '@tresjs/cientos'
-import { reactive, ref } from 'vue'
+import { TresCanvas } from '@tresjs/core'
 import { EffectComposer, Outline } from '@tresjs/post-processing'
-import type { Intersection, Object3D } from 'three'
 import { BasicShadowMap, NoToneMapping } from 'three'
+import { reactive, ref } from 'vue'
 
 const gl = {
   alpha: false,

playground/src/main.ts

@@ -1,11 +1,18 @@
 import { createApp } from 'vue'
-import './style.css'
 import App from './App.vue'
 import { router } from './router'
+import './style.css'
 import 'uno.css'
 
 const app = createApp(App)
 
 app.use(router)
 
 app.mount('#app')
+
+const orginalWarn = console.warn
+console.warn = (...args: any[]) => {
+  if (!args[0].includes('Component is missing template or render function')) {
+    orginalWarn.apply(console, args)
+  }
+}

playground/src/pages/index.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import {
-  advancedRoutes,
-  routes,
+  postProcessingRoutes,
+  threeRoutes,
 } from '../router'
 
-const [_home, ...restRoutes] = routes
-
 const sections = [
   {
-    icon: '🤓',
-    title: 'Advanced',
-    routes: advancedRoutes,
+    title: 'three',
+    routes: threeRoutes,
+  },
+  {
+    title: 'postprocessing',
+    routes: postProcessingRoutes,
   },
 ]
 </script>
@@ -51,51 +52,19 @@ const sections = [
           </p>
         </div>
       </div>
-      <div class="text-center sm:text-left sm:grid sm:grid-cols-2 md:grid-cols-3 gap-4">
-        <router-link
-          v-for="{ name, path, meta } in restRoutes"
-          :key="name"
-          :to="path"
-          class="
-          p-4 my-4 leading-normal no-underline size-m weight-600 bg-zinc-50 rounded
-          sm:my-0
-          "
-        >
-          <div class="inline-block p-2 p-x-3 m-b-3 text-2xl bg-zinc-200 rounded">
-            {{ meta.icon }}
-          </div>
-          <h2 class="text-sm p-0 m-0 mb-1.5 font-semibold text-zinc-600">
-            {{ name }}
-          </h2>
-        </router-link>
-        <div
-          v-for="{ title, routes: internalRoutes, icon } in sections"
-          :key="title"
-          class="
-          p-4 my-4 leading-normal size-m weight-600 bg-zinc-50 rounded
-          sm:my-0
-          "
-        >
-          <div class="inline-block p-2 p-x-3 m-b-3 text-2xl bg-zinc-200 rounded">
-            {{ icon }}
-          </div>
-          <h2 class="text-sm p-0 m-0 mb-1.5 font-semibold text-zinc-600">
-            {{ title }}
-          </h2>
-          <div
-            v-for="route in internalRoutes"
+      <template v-for="(section, index) in sections" :key="index">
+        <h2 class="text-2xl mb-4 font-semibold text-zinc-600">
+          {{ section.title }}
+        </h2>
+        <div class="text-center sm:text-left sm:grid sm:grid-cols-2 md:grid-cols-3 gap-4">
+          <EffectListItem
+            v-for="route in section.routes"
             :key="route.name"
-            class="link-wrapper"
-          >
-            <router-link
-              class="no-underline text-zinc-700 visited:text-zinc-400 hover:text-cientos-blue"
-              :to="route.path"
-            >
-              <span>{{ route.name }} </span>
-            </router-link>
-          </div>
+            :route="route"
+            class="my-4 sm:my-0"
+          />
         </div>
-      </div>
+      </template>
     </div>
   </div>
 </template>