Skip to content

Commit

Permalink
feat(post-processing): pixelation effect (#68)
Browse files Browse the repository at this point in the history
* feat: added pixelation effect component

* chore: added playground code for pixelation effect

* docs: pixelation effect docs

* chore: removed debug code
  • Loading branch information
Tinoooo committed Oct 21, 2023
1 parent a2afd3f commit 8e3e583
Show file tree
Hide file tree
Showing 9 changed files with 173 additions and 2 deletions.
1 change: 1 addition & 0 deletions docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default defineConfig({
{ text: 'Depth of Field', link: '/guide/effects/depth-of-field' },
{ text: 'Glitch', link: '/guide/effects/glitch' },
{ text: 'Outline', link: '/guide/effects/outline' },
{ text: 'Pixelation', link: '/guide/effects/pixelation' },
],
},
],
Expand Down
54 changes: 54 additions & 0 deletions docs/.vitepress/theme/components/PixelationDemo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<script lang="ts" setup>
import { Color } from 'three'
import { TresCanvas } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos'
import { EffectComposer, Pixelation } from '@tresjs/post-processing'
const boxWidth = 2
</script>

<template>
<TresCanvas
clear-color="#121212"
:alpha="false"
:shadows="true"
:disable-render="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="1"
/>

<Suspense>
<EffectComposer>
<Pixelation :granularity="8" />
</EffectComposer>
</Suspense>
</TresCanvas>
</template>

1 change: 1 addition & 0 deletions docs/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
GlitchDemo: typeof import('./.vitepress/theme/components/GlitchDemo.vue')['default']
LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']
OutlineDemo: typeof import('./.vitepress/theme/components/OutlineDemo.vue')['default']
PixelationDemo: typeof import('./.vitepress/theme/components/PixelationDemo.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
Expand Down
30 changes: 30 additions & 0 deletions docs/guide/effects/pixelation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Pixelation

<DocsDemo>
<PixelationDemo />
</DocsDemo>

Pixelation is an effect that pixelates the scene.

## Usage

```vue
<script setup lang="ts">
import { EffectComposer, Pixelation } from '@tresjs/post-processing'
</script>
<template>
<EffectComposer>
<Pixelation />
</EffectComposer>
</template>
```

## Props

| Prop | Description | Default |
| ----------- | ------------------------------ | ------- |
| granularity | The granularity of the pixels. | 30 |

## Further Reading
see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/PixelationEffect.js~PixelationEffect.html)
51 changes: 51 additions & 0 deletions playground/src/pages/pixelation.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<script lang="ts" setup>
import { computed } from 'vue'
import { TresCanvas } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos'
import { EffectComposer, Pixelation } from '@tresjs/post-processing'
import { TresLeches, useControls } from '@tresjs/leches'
import '@tresjs/leches/styles'
useControls('fpsgraph')
const { granularity } = useControls({
granularity: {
value: 10,
min: 1,
max: 30,
step: 1,
},
})
</script>

<template>
<TresLeches />
<TresCanvas>
<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 />
</TresMesh>

<TresMesh :position="[0, 1, 0]">
<TresBoxGeometry :args="[2, 2, 2]" />
<TresMeshNormalMaterial />
</TresMesh>

<TresMesh :position="[3.5, 1, 0]">
<TresSphereGeometry />
<TresMeshNormalMaterial />
</TresMesh>

<TresGridHelper />

<EffectComposer>
<Pixelation :granularity="granularity" />
</EffectComposer>
</TresCanvas>
</template>
1 change: 1 addition & 0 deletions playground/src/router.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const routes = [
makeRoute('Outline'),
makeRoute('Glitch'),
makeRoute('Depth of Field'),
makeRoute('Pixelation'),
]

export const router = createRouter({
Expand Down
25 changes: 25 additions & 0 deletions src/core/effects/Pixelation.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<script lang="ts" setup>
import { PixelationEffect } from 'postprocessing'
import { useEffect } from '../composables/effect'
import { makePropWatchersUsingAllProps } from '../../util/prop'
export interface PixelationProps {
/**
* The pixel granularity.
*/
granularity?: number
}
const props = defineProps<PixelationProps>()
const { pass, effect } = useEffect(() => new PixelationEffect(props.granularity))
defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref
makePropWatchersUsingAllProps(
props,
effect,
() => new PixelationEffect(),
)
</script>

<template></template>
10 changes: 9 additions & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
import Bloom from './core/effects/Bloom.vue'
import Glitch from './core/effects/Glitch.vue'
import Outline from './core/effects/Outline.vue'
import Pixelation from './core/effects/Pixelation.vue'
import DepthOfField from './core/effects/DepthOfField.vue'

import EffectComposer from './core/EffectComposer.vue'

export { EffectComposer, Bloom, Outline, Glitch, DepthOfField }
export {
Bloom,
Glitch,
Outline,
Pixelation,
DepthOfField,
EffectComposer,
}
2 changes: 1 addition & 1 deletion stats.html

Large diffs are not rendered by default.

0 comments on commit 8e3e583

Please sign in to comment.