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]>
Tresjs · Oct 12, 2024 · c8df59f · c8df59f
1 parent cd24a57
commit c8df59f
Show file tree

Hide file tree

Showing 78 changed files with 2,616 additions and 2,201 deletions.
diff --git a/.github/workflows/pkg.pr.new.yml b/.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
diff --git a/README.md b/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

diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -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: {

diff --git a/....vitepress/theme/components/BloomDemo.vue → ...ress/theme/components/pmdrs/BloomDemo.vue b/....vitepress/theme/components/BloomDemo.vue → ...ress/theme/components/pmdrs/BloomDemo.vue
@@ -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,
 })
 

diff --git a/...ess/theme/components/DepthOfFieldDemo.vue → ...eme/components/pmdrs/DepthOfFieldDemo.vue b/...ess/theme/components/DepthOfFieldDemo.vue → ...eme/components/pmdrs/DepthOfFieldDemo.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)
 

diff --git a/...vitepress/theme/components/GlitchDemo.vue → ...ess/theme/components/pmdrs/GlitchDemo.vue b/...vitepress/theme/components/GlitchDemo.vue → ...ess/theme/components/pmdrs/GlitchDemo.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

diff --git a/....vitepress/theme/components/NoiseDemo.vue → ...ress/theme/components/pmdrs/NoiseDemo.vue b/....vitepress/theme/components/NoiseDemo.vue → ...ress/theme/components/pmdrs/NoiseDemo.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',

diff --git a/...itepress/theme/components/OutlineDemo.vue → ...ss/theme/components/pmdrs/OutlineDemo.vue b/...itepress/theme/components/OutlineDemo.vue → ...ss/theme/components/pmdrs/OutlineDemo.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()

diff --git a/...press/theme/components/PixelationDemo.vue → ...theme/components/pmdrs/PixelationDemo.vue b/...press/theme/components/PixelationDemo.vue → ...theme/components/pmdrs/PixelationDemo.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()

diff --git a/...tepress/theme/components/VignetteDemo.vue → ...s/theme/components/pmdrs/VignetteDemo.vue b/...tepress/theme/components/VignetteDemo.vue → ...s/theme/components/pmdrs/VignetteDemo.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>

diff --git a/docs/.vitepress/theme/components/three/GlitchThreeDemo.vue b/docs/.vitepress/theme/components/three/GlitchThreeDemo.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>
diff --git a/docs/.vitepress/theme/components/three/HalftoneThreeDemo.vue b/docs/.vitepress/theme/components/three/HalftoneThreeDemo.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>