Skip to content

Commit b812099

Browse files
alvarosabualvarosabu
committed
docs: fixed broken docs, added new structure
1 parent dba4a70 commit b812099

23 files changed

+1218
-1206
lines changed

‎docs/.eslintrc.json

-3
This file was deleted.

‎docs/.vitepress/config.ts

+17-10
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,21 @@ export default defineConfig({
4747
items: [{ text: 'Introduction', link: '/guide/' }],
4848
},
4949
{
50-
text: 'Effects',
50+
text: 'Pmndrs',
5151
items: [
52-
{ text: 'Bloom', link: '/guide/effects/bloom' },
53-
{ text: 'Depth of Field', link: '/guide/effects/depth-of-field' },
54-
{ text: 'Glitch', link: '/guide/effects/glitch' },
55-
{ text: 'Noise', link: '/guide/effects/noise' },
56-
{ text: 'Outline', link: '/guide/effects/outline' },
57-
{ text: 'Pixelation', link: '/guide/effects/pixelation' },
58-
{ text: 'Vignette', link: '/guide/effects/vignette' },
52+
{ text: 'Bloom', link: '/guide/pmndrs/bloom' },
53+
{ text: 'Depth of Field', link: '/guide/pmndrs/depth-of-field' },
54+
{ text: 'Glitch', link: '/guide/pmndrs/glitch' },
55+
{ text: 'Noise', link: '/guide/pmndrs/noise' },
56+
{ text: 'Outline', link: '/guide/pmndrs/outline' },
57+
{ text: 'Pixelation', link: '/guide/pmndrs/pixelation' },
58+
{ text: 'Vignette', link: '/guide/pmndrs/vignette' },
59+
],
60+
},
61+
{
62+
text: 'Three',
63+
items: [
64+
5965
],
6066
},
6167
],
@@ -78,9 +84,10 @@ export default defineConfig({
7884
},
7985
resolve: {
8086
alias: {
81-
'@tresjs/post-processing': resolve(__dirname, '../../dist/tres-postprocessing.js'),
87+
'@tresjs/post-processing/three': resolve(__dirname, '../../src/core/three'),
88+
'@tresjs/post-processing/pmndrs': resolve(__dirname, '../../src/core/pmndrs'),
8289
},
83-
dedupe: ['three'],
90+
dedupe: ['three', '@tresjs/core'],
8491
},
8592
},
8693
vue: {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { BlendFunction } from 'postprocessing'
55
import { Color } from 'three'
66
import { reactive } from 'vue'
77
8-
import { useRouteDisposal } from '../composables/useRouteDisposal'
8+
import { useRouteDisposal } from '../../composables/useRouteDisposal'
99
1010
const gl = {
1111
clearColor: '#121212',

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { DepthOfField, EffectComposer } from '@tresjs/post-processing/pmndrs'
44
import { gsap } from 'gsap'
55
import { ref } from 'vue'
66
7-
import { useRouteDisposal } from '../composables/useRouteDisposal'
7+
import { useRouteDisposal } from '../../composables/useRouteDisposal'
88
99
const dofEffect = ref<InstanceType<typeof DepthOfField> | null>(null)
1010

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { EffectComposer, Glitch } from '@tresjs/post-processing/pmndrs'
55
66
import { Color } from 'three'
77
8-
import { useRouteDisposal } from '../composables/useRouteDisposal'
8+
import { useRouteDisposal } from '../../composables/useRouteDisposal'
99
1010
const gl = {
1111
clearColor: '#121212',

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { EffectComposer, Noise } from '@tresjs/post-processing/pmndrs'
55
import { BlendFunction } from 'postprocessing'
66
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
77
8-
import { useRouteDisposal } from '../composables/useRouteDisposal'
8+
import { useRouteDisposal } from '../../composables/useRouteDisposal'
99
1010
const gl = {
1111
clearColor: '#82DBC5',

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { KernelSize } from 'postprocessing'
77
import { NoToneMapping } from 'three'
88
import { ref } from 'vue'
99
10-
import { useRouteDisposal } from '../composables/useRouteDisposal'
10+
import { useRouteDisposal } from '../../composables/useRouteDisposal'
1111
1212
import '@tresjs/leches/styles'
1313

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { OrbitControls } from '@tresjs/cientos'
33
import { TresCanvas } from '@tresjs/core'
44
import { EffectComposer, Pixelation } from '@tresjs/post-processing/pmndrs'
55
6-
import { useRouteDisposal } from '../composables/useRouteDisposal'
6+
import { useRouteDisposal } from '../../composables/useRouteDisposal'
77
88
// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
99
const { effectComposer } = useRouteDisposal()

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

+4-11
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { TresCanvas } from '@tresjs/core'
44
import { DepthOfField, EffectComposer, Vignette } from '@tresjs/post-processing/pmndrs'
55
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
66
7-
import { useRouteDisposal } from '../composables/useRouteDisposal'
7+
import { useRouteDisposal } from '../../composables/useRouteDisposal'
88
9-
import BlenderCube from './BlenderCube.vue'
9+
import BlenderCube from '../BlenderCube.vue'
1010
1111
const gl = {
1212
clearColor: '#4f4f4f',
@@ -30,15 +30,8 @@ const { effectComposer } = useRouteDisposal()
3030
<BlenderCube />
3131
</Suspense>
3232
<EffectComposer ref="effectComposer">
33-
<DepthOfField
34-
:focus-distance="0"
35-
:focal-length="0.02"
36-
:bokeh-scale="2"
37-
/>
38-
<Vignette
39-
:darkness="0.9"
40-
:offset="0.3"
41-
/>
33+
<DepthOfField :focus-distance="0" :focal-length="0.02" :bokeh-scale="2" />
34+
<Vignette :darkness="0.9" :offset="0.3" />
4235
</EffectComposer>
4336
<TresAmbientLight :intensity="1" />
4437
</TresCanvas>

‎docs/components.d.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
/* eslint-disable */
2-
/* prettier-ignore */
32
// @ts-nocheck
43
// Generated by unplugin-vue-components
54
// Read more: https://github.com/vuejs/core/pull/3399
65
export {}
76

7+
/* prettier-ignore */
88
declare module 'vue' {
99
export interface GlobalComponents {
1010
BlenderCube: typeof import('./.vitepress/theme/components/BlenderCube.vue')['default']
11-
BloomDemo: typeof import('./.vitepress/theme/components/BloomDemo.vue')['default']
12-
DepthOfFieldDemo: typeof import('./.vitepress/theme/components/DepthOfFieldDemo.vue')['default']
11+
BloomDemo: typeof import('./.vitepress/theme/components/pmdrs/BloomDemo.vue')['default']
12+
DepthOfFieldDemo: typeof import('./.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue')['default']
1313
DocsDemo: typeof import('./.vitepress/theme/components/DocsDemo.vue')['default']
14-
GlitchDemo: typeof import('./.vitepress/theme/components/GlitchDemo.vue')['default']
14+
GlitchDemo: typeof import('./.vitepress/theme/components/pmdrs/GlitchDemo.vue')['default']
1515
LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']
16-
NoiseDemo: typeof import('./.vitepress/theme/components/NoiseDemo.vue')['default']
17-
OutlineDemo: typeof import('./.vitepress/theme/components/OutlineDemo.vue')['default']
18-
PixelationDemo: typeof import('./.vitepress/theme/components/PixelationDemo.vue')['default']
16+
NoiseDemo: typeof import('./.vitepress/theme/components/pmdrs/NoiseDemo.vue')['default']
17+
OutlineDemo: typeof import('./.vitepress/theme/components/pmdrs/OutlineDemo.vue')['default']
18+
PixelationDemo: typeof import('./.vitepress/theme/components/pmdrs/PixelationDemo.vue')['default']
1919
RouterLink: typeof import('vue-router')['RouterLink']
2020
RouterView: typeof import('vue-router')['RouterView']
21-
VignetteDemo: typeof import('./.vitepress/theme/components/VignetteDemo.vue')['default']
21+
VignetteDemo: typeof import('./.vitepress/theme/components/pmdrs/VignetteDemo.vue')['default']
2222
}
2323
}

‎docs/guide/index.md

+25-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
> Post-processing, in simple terms, consist in applying visual effects to your 3D scenes after they have been rendered. It allows you to add beautiful effects such as depth-of-field, bloom, motion blur, and many more. These effects can greatly enhance the overall look and feel of your projects, making them more immersive and visually captivating.
66
7-
The `post-processing` package leverages the excellent work done by the pmndrs [postprocessing](https://github.com/pmndrs/postprocessing) package , providing you with an easy-to-use, Vue-centric solution that makes the developer experience (DX) smoother and more delightful.
7+
The `post-processing` package leverages both the excellent work done by the pmndrs [postprocessing](https://github.com/pmndrs/postprocessing) package and native [Three.js post-processing effects](https://threejs.org/examples/?q=postprocessing#webgl_postprocessing). Providing you with an easy-to-use, Vue-centric solution that makes the developer experience (DX) smoother and more delightful.
88

99
Because Post-processing, is not an easy task, fortunate now it is 😜.
1010

@@ -32,19 +32,39 @@ pnpm add @tresjs/post-processing
3232

3333
## Basic Usage
3434

35-
```ts
36-
import { Bloom, DepthOfField, EffectComposer } from '@tresjs/post-processing/pmndrs'
35+
You can import post-processing effects from both pmndrs and native Three.js.
36+
37+
### Using native Three.js effects
38+
39+
```html
40+
<script setup lang="ts">
41+
import { EffectComposer, UnrealBloom, Glitch } from '@tresjs/post-processing/three'
42+
</script>
43+
44+
<template>
45+
<TresCanvas shadows alpha>
46+
<TresPerspectiveCamera :args="[45," 1, 0.1, 1000] />
47+
<EffectComposer>
48+
<UnrealBloom />
49+
<Glitch />
50+
</EffectComposer>
51+
</TresCanvas>
52+
</template>
3753
```
3854

39-
Now you can use the `EffectComposer` component in your scene.
55+
### Using pmndrs effects
4056

4157
```html
58+
<script setup lang="ts">
59+
import { EffectComposer, Bloom, Glitch } from '@tresjs/post-processing/pmndrs'
60+
</script>
61+
4262
<template>
4363
<TresCanvas shadows alpha>
4464
<TresPerspectiveCamera :args="[45," 1, 0.1, 1000] />
4565
<EffectComposer>
46-
<DepthOfField />
4766
<Bloom />
67+
<Glitch />
4868
</EffectComposer>
4969
</TresCanvas>
5070
</template>

‎docs/guide/effects/bloom.md renamed to ‎docs/guide/pmndrs/bloom.md

File renamed without changes.

‎docs/guide/effects/depth-of-field.md renamed to ‎docs/guide/pmndrs/depth-of-field.md

File renamed without changes.

‎docs/guide/effects/glitch.md renamed to ‎docs/guide/pmndrs/glitch.md

File renamed without changes.

‎docs/guide/effects/noise.md renamed to ‎docs/guide/pmndrs/noise.md

File renamed without changes.

‎docs/guide/effects/outline.md renamed to ‎docs/guide/pmndrs/outline.md

File renamed without changes.

‎docs/guide/effects/pixelation.md renamed to ‎docs/guide/pmndrs/pixelation.md

File renamed without changes.

‎docs/guide/effects/vignette.md renamed to ‎docs/guide/pmndrs/vignette.md

File renamed without changes.

‎docs/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@
99
"preview": "vitepress preview"
1010
},
1111
"dependencies": {
12-
"@tresjs/cientos": "^3.6.0",
13-
"@tresjs/core": "^3.5.1",
12+
"@tresjs/cientos": "^4.0.2",
13+
"@tresjs/core": "^4.2.10",
1414
"@tresjs/post-processing": "workspace:^",
1515
"gsap": "^3.12.3"
1616
},
1717
"devDependencies": {
1818
"@tresjs/leches": "^0.14.0",
19-
"unocss": "^0.58.0",
20-
"unplugin-vue-components": "^0.26.0",
19+
"unocss": "^0.63.0",
20+
"unplugin-vue-components": "^0.27.4",
2121
"vite-svg-loader": "^5.1.0",
22-
"vitepress": "1.0.0-rc.31"
22+
"vitepress": "1.3.4"
2323
}
2424
}

‎docs/vite.config.ts

-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { templateCompilerOptions } from '@tresjs/core'
21
import Unocss from 'unocss/vite'
32
import Components from 'unplugin-vue-components/vite'
43
import { defineConfig } from 'vite'
@@ -17,7 +16,4 @@ export default defineConfig({
1716
dts: 'components.d.ts',
1817
}),
1918
],
20-
vue: {
21-
...templateCompilerOptions,
22-
},
2319
})

‎playground/.eslintrc-auto-import.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,9 @@
6666
"onWatcherCleanup": true,
6767
"useId": true,
6868
"useModel": true,
69-
"useTemplateRef": true
69+
"useTemplateRef": true,
70+
"DirectiveBinding": true,
71+
"MaybeRef": true,
72+
"MaybeRefOrGetter": true
7073
}
7174
}

‎playground/auto-imports.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,6 @@ declare global {
6565
// for type re-export
6666
declare global {
6767
// @ts-ignore
68-
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
68+
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
6969
import('vue')
7070
}

0 commit comments

Comments
 (0)