feat: sub modules for pmndrs and native components (#123)

* 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

* seperated builds

* fixed playground

* adjusted imports in docs

* adjusted more imports

* added pkg pr workflow

* added repository url to package.json

* omitted compact option from pkg-pr-new

* renamed import

* adjusted vite config

* added HalftoneShape enum

* added invalidation on pass changes for native three effects

* added invalidation on prop change for pmndrs effects

* added renderer invalidation to glitch effects

* removed disableRender prop

* tiny readme update

* auto created files update

* lint fix

* lint fix

* docs: fixed broken docs, added new structure

* docs: three glitch guide

* docs: pixelation three

* docs: correct glitch demo component name

* docs: halftone

* docs: smaa

* docs: unreal bloom

* added some links to threejs examples

* added output pass docs

* eslint ignored a console output

* dependency updates

* Update docs/guide/three/glitch.md

Co-authored-by: Tino Koch <[email protected]>

* Update docs/guide/three/glitch.md

Co-authored-by: Tino Koch <[email protected]>

* docs: remove redundant info

---------

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

Author: Tinoooo

.github/workflows/pkg.pr.new.yml

@@ -0,0 +1,37 @@
+name: Publish Any Commit
+on:
+  push:
+    branches:
+      - '**'
+    tags:
+      - '!**'
+
+env:
+  PNPM_CACHE_FOLDER: .pnpm-store
+
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build
+        run: pnpm build
+      - run: pnpm dlx pkg-pr-new publish --pnpm

README.md

@@ -57,10 +57,6 @@ And then to run the development server on http://localhost:5173
 pnpm run playground
 ```
 
-### Test
-
-TODO...
-
 ### Docs
 
 To run de docs in dev mode

docs/.eslintrc.json

@@ -47,15 +47,26 @@ export default defineConfig({
         items: [{ text: 'Introduction', link: '/guide/' }],
       },
       {
-        text: 'Effects',
+        text: 'Pmndrs',
         items: [
-          { text: 'Bloom', link: '/guide/effects/bloom' },
-          { text: 'Depth of Field', link: '/guide/effects/depth-of-field' },
-          { text: 'Glitch', link: '/guide/effects/glitch' },
-          { text: 'Noise', link: '/guide/effects/noise' },
-          { text: 'Outline', link: '/guide/effects/outline' },
-          { text: 'Pixelation', link: '/guide/effects/pixelation' },
-          { text: 'Vignette', link: '/guide/effects/vignette' },
+          { text: 'Bloom', link: '/guide/pmndrs/bloom' },
+          { text: 'Depth of Field', link: '/guide/pmndrs/depth-of-field' },
+          { text: 'Glitch', link: '/guide/pmndrs/glitch' },
+          { text: 'Noise', link: '/guide/pmndrs/noise' },
+          { text: 'Outline', link: '/guide/pmndrs/outline' },
+          { text: 'Pixelation', link: '/guide/pmndrs/pixelation' },
+          { text: 'Vignette', link: '/guide/pmndrs/vignette' },
+        ],
+      },
+      {
+        text: 'Three',
+        items: [
+          { text: 'Glitch', link: '/guide/three/glitch' },
+          { text: 'Halftone', link: '/guide/three/halftone' },
+          { text: 'Output', link: '/guide/three/output' },
+          { text: 'Pixelation', link: '/guide/three/pixelation' },
+          { text: 'SMAA', link: '/guide/three/smaa' },
+          { text: 'Unreal Bloom', link: '/guide/three/unreal-bloom' },
         ],
       },
     ],
@@ -78,9 +89,10 @@ export default defineConfig({
     },
     resolve: {
       alias: {
-        '@tresjs/post-processing': resolve(__dirname, '../../dist/tres-postprocessing.js'),
+        '@tresjs/post-processing/three': resolve(__dirname, '../../src/core/three'),
+        '@tresjs/post-processing/pmndrs': resolve(__dirname, '../../src/core/pmndrs'),
       },
-      dedupe: ['three'],
+      dedupe: ['three', '@tresjs/core'],
     },
   },
   vue: {

docs/.vitepress/config.ts

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { Bloom, EffectComposer } from '@tresjs/post-processing'
+import { Bloom, EffectComposer } from '@tresjs/post-processing/pmndrs'
 import { BlendFunction } from 'postprocessing'
 import { Color } from 'three'
 import { reactive } from 'vue'
 
-import { useRouteDisposal } from '../composables/useRouteDisposal'
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
 const gl = {
   clearColor: '#121212',
@@ -19,7 +19,6 @@ const bloomParams = reactive({
   mipmapBlur: true,
   intensity: 8,
   radius: 0.5,
-  disableRender: true,
   blendFunction: BlendFunction.ADD,
 })
 

docs/.vitepress/theme/components/BloomDemo.vue renamed to docs/.vitepress/theme/components/pmdrs/BloomDemo.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { TresCanvas } from '@tresjs/core'
-import { DepthOfField, EffectComposer } from '@tresjs/post-processing'
+import { DepthOfField, EffectComposer } from '@tresjs/post-processing/pmndrs'
 import { gsap } from 'gsap'
 import { ref } from 'vue'
 
-import { useRouteDisposal } from '../composables/useRouteDisposal'
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
 const dofEffect = ref<InstanceType<typeof DepthOfField> | null>(null)
 

docs/.vitepress/theme/components/DepthOfFieldDemo.vue renamed to docs/.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue

@@ -1,17 +1,16 @@
 <script setup lang="ts">
 import { Text3D } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Glitch } from '@tresjs/post-processing'
+import { EffectComposer, Glitch } from '@tresjs/post-processing/pmndrs'
 
 import { Color } from 'three'
 
-import { useRouteDisposal } from '../composables/useRouteDisposal'
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
 const gl = {
   clearColor: '#121212',
   shadows: true,
   alpha: false,
-  disableRender: true,
 }
 
 // Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
@@ -22,7 +21,7 @@ const { effectComposer } = useRouteDisposal()
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera
       :position="[0, 1, 5]"
-      :look-at="[0, 0, 0]"
+      :look-at="[0, 1, 0]"
     />
     <Suspense>
       <Text3D

docs/.vitepress/theme/components/GlitchDemo.vue renamed to docs/.vitepress/theme/components/pmdrs/GlitchDemo.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Noise } from '@tresjs/post-processing'
+import { EffectComposer, Noise } from '@tresjs/post-processing/pmndrs'
 import { BlendFunction } from 'postprocessing'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
-import { useRouteDisposal } from '../composables/useRouteDisposal'
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
 const gl = {
   clearColor: '#82DBC5',

docs/.vitepress/theme/components/NoiseDemo.vue renamed to docs/.vitepress/theme/components/pmdrs/NoiseDemo.vue

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

docs/.vitepress/theme/components/OutlineDemo.vue renamed to docs/.vitepress/theme/components/pmdrs/OutlineDemo.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposer, Pixelation } from '@tresjs/post-processing'
+import { EffectComposer, Pixelation } from '@tresjs/post-processing/pmndrs'
 
-import { useRouteDisposal } from '../composables/useRouteDisposal'
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
 // Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
 const { effectComposer } = useRouteDisposal()

docs/.vitepress/theme/components/PixelationDemo.vue renamed to docs/.vitepress/theme/components/pmdrs/PixelationDemo.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { DepthOfField, EffectComposer, Vignette } from '@tresjs/post-processing'
+import { DepthOfField, EffectComposer, Vignette } from '@tresjs/post-processing/pmndrs'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
-import { useRouteDisposal } from '../composables/useRouteDisposal'
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
-import BlenderCube from './BlenderCube.vue'
+import BlenderCube from '../BlenderCube.vue'
 
 const gl = {
   clearColor: '#4f4f4f',
@@ -30,15 +30,8 @@ const { effectComposer } = useRouteDisposal()
       <BlenderCube />
     </Suspense>
     <EffectComposer ref="effectComposer">
-      <DepthOfField
-        :focus-distance="0"
-        :focal-length="0.02"
-        :bokeh-scale="2"
-      />
-      <Vignette
-        :darkness="0.9"
-        :offset="0.3"
-      />
+      <DepthOfField :focus-distance="0" :focal-length="0.02" :bokeh-scale="2" />
+      <Vignette :darkness="0.9" :offset="0.3" />
     </EffectComposer>
     <TresAmbientLight :intensity="1" />
   </TresCanvas>

docs/.vitepress/theme/components/VignetteDemo.vue renamed to docs/.vitepress/theme/components/pmdrs/VignetteDemo.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { Text3D } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { EffectComposer, Glitch } from '@tresjs/post-processing/three'
+
+import { Color } from 'three'
+
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
+
+const gl = {
+  clearColor: '#121212',
+  shadows: true,
+  alpha: false,
+}
+
+// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
+const { effectComposer } = useRouteDisposal()
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera
+      :position="[0, 1, 5]"
+      :look-at="[0, 1, 0]"
+    />
+    <Suspense>
+      <Text3D
+        :position="[0, 1, 0]"
+        text="Three glitch"
+        font="https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json"
+      >
+        <TresMeshStandardMaterial
+          color="hotpink"
+          :emissive="new Color('hotpink')"
+          :emissive-intensity="1.2"
+        />
+      </Text3D>
+    </Suspense>
+    <TresGridHelper />
+
+    <TresAmbientLight :intensity="2" />
+    <TresDirectionalLight
+      :position="[3, 3, 3]"
+      :intensity="1"
+    />
+    <Suspense>
+      <EffectComposer ref="effectComposer">
+        <Glitch />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>

docs/.vitepress/theme/components/three/GlitchThreeDemo.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { EffectComposer, Halftone } from '@tresjs/post-processing/three'
+
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
+
+// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
+const { effectComposer } = useRouteDisposal()
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#121212"
+    :alpha="false"
+    :shadows="true"
+  >
+    <TresPerspectiveCamera
+      :position="[3, 2, 4]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <TresMesh
+      :position="[1, 0.5, 1]"
+    >
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial
+        color="hotpink"
+      />
+    </TresMesh>
+    <TresMesh
+      :position="[-1.5, 0.75, 0]"
+    >
+      <TresConeGeometry :args="[1, 1.5, 4, 1, false, Math.PI * 0.25]" />
+      <TresMeshNormalMaterial />
+      <TresMeshStandardMaterial
+        color="aqua"
+      />
+    </TresMesh>
+
+    <TresGridHelper />
+    <TresAmbientLight :intensity="0.9" />
+    <TresDirectionalLight
+      :position="[-10, 5, 8]"
+      :intensity="2"
+    />
+
+    <Suspense>
+      <EffectComposer ref="effectComposer">
+        <Halftone :shape="1" :radius="4" :rotateR="Math.PI / 12" :rotateG="Math.PI / 3" :rotateB="Math.PI / 6" :scatter="0" :blending="1" :greyscale="false" />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>