tresjs / post-processing Goto Github PK

View Code? Open in Web Editor NEW

20.0 3.0 5.0 12.95 MB

Post-processing library for TresJS

License: MIT License

HTML 0.55% Vue 57.39% TypeScript 18.89% CSS 0.17% JavaScript 22.99%

effects postprocessing three tres tresjs

post-processing's Introduction

Post-Processing

Collection of useful helpers and fully functional, ready-made post-processing effects for Tres

💡 Build your effects with Vue components only.
⚡️ Powered by Vite
🦾 Fully Typed

Installation

pnpm i @tresjs/post-processing

Docs

Checkout the docs

Demos

Stackblitz Collection

Contributing

We are open to contributions, please read the contributing guide to get started.

Build

To build the package run:

pnpm run build

Playground

To run the playground run, its a great way to test the components and helpers locally:

First install dependencies

pnpm i

And then to run the development server on http://localhost:5173

pnpm run playground

Test

TODO...

Docs

To run de docs in dev mode

pnpm run docs:dev

To build them

pnpm run docs:build

License

MIT

post-processing's People

Contributors

Stargazers

Watchers

Forkers

krmao dotmot whereiswolf antoninrousset haixeefrontend

post-processing's Issues

Support for OutlinePass

Is your feature request related to a problem? Please describe.
Outlinepass is not available as a component in this module.

Describe the solution you'd like
Have a component available to add the OutlinePass to the EffectComposer.

Suggested solution
Adding the component. 😄

https://postprocessing.tresjs.org/ is being referenced in README.md and doesn't work

Describe the bug
https://postprocessing.tresjs.org/ is being referenced in README.md and doesn't work (dead link)

pixelation effect

Describe the solution you'd like
The library should support the pixelation effect of postprocessing.

Noise

😊 https://docs.pmnd.rs/react-postprocessing/effects/noise

depth of field and outline effect docs are broken

Describe the bug
For some reason the dof and outline effect demos got broken.

Reproduction
check docs

Docs link broken in README

Describe the bug

The link to the docs is broken in README.txt.

Steps

Steps to reproduce the behavior:

Go to https://github.com/Tresjs/post-processing/blob/main/README.md
Click on 'Checkout the docs' under the "Docs" heading.

Expected behavior

Link should work. 😊

god rays effect

Describe the solution you'd like
The library should support the god rays effect of postprocessing.

Multisampling prop isn't passed corerctly to EffectComposer

Describe the bug

The multisampling prop on <EffectComposer /> is incorrectly passed to postprocessing's EffectComposer constructor.

Reproduction
A Stackblitz example: https://stackblitz.com/edit/tresjs-multisampling-bug?file=src%2Fcomponents%2FNoAliasing.vue

Steps
Steps to reproduce the behavior:

In a scene add <EffectComposer :multisampling="8" /> and any other effect you want (tested on Outline / Vignette)
The aliasing occurs.

Expected behavior
The EffectComposer passess multisampling prop correctly to postprocessing's EffectComposer, and enables mutlisampling.

Screenshots
If applicable, add screenshots to help explain your problem.

👇 With <EffectComposer :multisampling="8" />

☝️ Without post-processing and with default antialiasing.

System Info

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 287.05 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    bun: 1.0.27 - ~/.bun/bin/bun
  Browsers:
    Chrome: 122.0.6261.129
    Safari: 17.3.1
  npmPackages:
    @tresjs/cientos: ^3.8.0 => 3.8.0 
    @tresjs/core: ^3.7.0 => 3.7.0 
    @tresjs/leches: ^0.14.0 => 0.14.0 
    @tresjs/post-processing: link:@tresjs/post-processing => 0.7.0 
    vite: ^5.1.5 => 5.1.6

Additional context
The problem's with a reverse order of multisampling checks in effectComposerParams:

// src/core/EffectComposer.vue
...
const effectComposerParams = computed(() => {
  const plainEffectComposer = new EffectComposerImpl()
  const params = {
    depthBuffer: props.depthBuffer !== undefined ? props.depthBuffer : plainEffectComposer.inputBuffer.depthBuffer,
    stencilBuffer:
      props.stencilBuffer !== undefined ? props.stencilBuffer : plainEffectComposer.inputBuffer.stencilBuffer,
    multisampling: isWebGL2Available()
-      ? 0
-      : props.multisampling !== undefined
-        ? props.multisampling
-        : plainEffectComposer.multisampling,
+      ? props.multisampling !== undefined
+        ? props.multisampling
+        : plainEffectComposer.multisampling
+      : 0,
    frameBufferType: props.frameBufferType !== undefined ? props.frameBufferType : HalfFloatType,
  }
  plainEffectComposer.dispose()

  return params
})
...

need help, How can we pass custom effect?

thanks for this great package, it's so elagant, really appreciate

I'm having difficulty in passing custom shader effect into the EffectComposer, is it possible currently?

<Suspense>
       <EffectComposer ref="composer">
            <Bloom   />
       </EffectComposer>
</Suspense>

Suppose besides Bloom Effect, i still want to pass another shader effect, how could i achieve that?

import { ShaderPass } from 'postprocessing';
import Shader from './shader.js

<script setup>
    const shaderEffect = new ShaderPass(Shader)
    const composer  = ref()

   onMounted(()=>{
        if (composer.value) {
            composer.value.addPass(shaderEffect)
            composer.value.render()
          }
    })
</script>

That's my first attempt, but it didn't work, any help? thanks

Improve bloom docs

Is your feature request related to a problem? Please describe.
The bloom effect seems like it is not working when used with the default parameters.

Describe the solution you'd like
The docs should convey how to use the bloom effect so it is visible in the scene.

Similar linting rules throughout the Tresjs packages

Is your feature request related to a problem? Please describe.
As a developer using post-processing, I would like to have clear linting rules in the Tresjs ecosystem.

Describe the solution you'd like
Follow the rules of Tresjs/core

Postprocessing breaks on Nuxt

Describe the bug
Postprocessing Render seems to break on Nuxt.

Reproduction
https://stackblitz.com/edit/nuxt-starter-2qaqwx?file=nuxt.config.ts,components%2FTheExperience.vue,package.json,app.vue

Steps
Steps to reproduce the behavior:

Go to Reproduction
Resize

Reproduction
When resizing the clear color also goes blank. Effects don't work etc

Expected behavior
All smooth and working lol

Screenshots

System Info
Output of npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.10 - /usr/local/bin/pnpm
  npmPackages:
    @tresjs/nuxt: ^1.1.7 => 1.1.7 
    @tresjs/post-processing: ^0.4.0 => 0.4.0

Additional context
Add any other context about the problem here.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

github-actions

.github/workflows/lint-pr.yml

amannn/action-semantic-pull-request v5

.github/workflows/lint.yml

actions/checkout v4

pnpm/action-setup v2

actions/setup-node v4

ubuntu 20.04

npm

docs/package.json

@tresjs/cientos ^3.6.0

@tresjs/core ^3.5.1

gsap ^3.12.3

@tresjs/leches ^0.14.0

unocss ^0.58.0

unplugin-vue-components ^0.26.0

vite-svg-loader ^5.1.0

vitepress 1.0.0-rc.31

package.json

@tresjs/core ^3.5.1

@unocss/core ^0.58.0

@vueuse/core ^10.6.1

postprocessing ^6.33.4

three-stdlib ^2.28.7

@release-it/conventional-changelog ^8.0.1

@tresjs/eslint-config-vue ^0.2.1

@types/three ^0.159.0

@vitejs/plugin-vue ^4.5.1

gsap ^3.12.3

kolorist ^1.8.0

pathe ^1.1.1

prettier ^3.1.0

release-it ^17.0.0

rollup-plugin-analyzer ^4.0.0

rollup-plugin-visualizer ^5.10.0

three ^0.159.0

typescript ^5.3.2

unocss ^0.58.0

vite ^5.0.4

vite-plugin-banner ^0.7.1

vite-plugin-dts 3.6.4

vite-svg-loader ^5.1.0

vitepress 1.0.0-rc.31

vue ^3.3.9

vue-tsc ^1.8.24

three >=0.133

vue >=3.3

pnpm 8.11.0

playground-nuxt/package.json

@tresjs/cientos ^3.5.1

@tresjs/nuxt ^1.2.2

@types/three ^0.152.1

nuxt ^3.8.0

vue ^3.3.7

vue-router ^4.2.5

playground/package.json

@tresjs/cientos ^3.6.0

@tresjs/core 3.5.1

vue-router ^4.2.5

@tresjs/leches ^0.14.0

@types/three ^0.159.0

unplugin-auto-import ^0.17.2

unplugin-vue-components ^0.26.0

vite-plugin-qrcode ^0.2.2

playground/public/nuxt-stones/package.json

@tresjs/cientos ^3.0.1

@tresjs/core ^3.2.2

gsap ^3.11.5

unocss ^0.52.3

unplugin-vue-components ^0.24.1

vite-svg-loader ^4.0.0

vitepress 1.0.0-beta.1

Check this box to trigger a request for Renovate to run again on this repository

docs are broken in productive build

Describe the bug
The docs need some maintenance so they are displayed correctly.

vignette effect

I would like to have a vignette effect available for this library

Depth of Field effect

Describe the solution you'd like
A clear and concise description of what you want to happen.

Additional context
Add any other context or screenshots about the feature request here.

prevent creation of effect composer when canvas has zero height or width

To make the changes made in Tresjs/tres#365 work with postprocessing, the effect composer component should check wether the canvas has a height and width larger than 0.

Refactor useCore to new state context provider

Is your feature request related to a problem? Please describe.
The package should adapt to the changes made in Tresjs/tres#331

Describe the solution you'd like
We should refactor useCore and any use of the state.

Cannot read properties of undefined (reading 'canvas')

Describe the bug
A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!

Hi! Fist of all, What a great library! I'm playing with it, and so far... I LOVE IT! now... to the error, I am currently trying to use the post-processing package on a scene and I get the following error when I use it:

Reproduction
This same happens whenever you check the examples:
https://playground.tresjs.org/experiments/nuxt-stones

Steps
Steps to reproduce the behavior:

Just adding the EffectComposer with a default bloom effect.

Expected behavior
For the effect composer component to work

Screenshots
If applicable, add screenshots to help explain your problem.

System Info
Output of npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers

System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1
    Memory: 323.22 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.110
    Safari: 16.5.2
  npmPackages:
    @tresjs/cientos: ^3.1.0 => 3.1.0 
    @tresjs/core: ^3.1.0 => 3.1.0 
    @tresjs/post-processing: ^0.3.0 => 0.3.0 
    vite: ^2.8.0 => 2.9.16

Additional context
Add any other context about the problem here.

Bloom demo is broken

When looking at docs for Bloom I can see empty canvas box with console message saying:

framework.8oxMyIc2.js:1 TypeError: Class constructor ue cannot be invoked without 'new'
    at guide_effects_bloom.md.7kCtuEBS.js:1:914
    at Object.i [as default] (framework.8oxMyIc2.js:1:16078)
    at Proxy.<anonymous> (useRouteDisposal.tyh0ETgK.js:3645:321145)
    at ei (framework.8oxMyIc2.js:1:16394)
    at Mi.F [as fn] (framework.8oxMyIc2.js:1:49505)
    at Mi.run (framework.8oxMyIc2.js:1:4163)
    at B.p.update (framework.8oxMyIc2.js:1:49779)
    at B (framework.8oxMyIc2.js:1:49805)
    at ie (framework.8oxMyIc2.js:1:48650)
    at V (framework.8oxMyIc2.js:1:48444)

Docs Vitepress

Provide docs

[Nuxt - Astro] Maximum recursive updates exceeded on window resize

Describe the bug
A scene using EffectComposer gets broken when resizing the screen

Reproduction
Reproduction

Steps
Steps to reproduce the behavior:

Go to '...'
Resize Scene

Expected behavior
Scene with post-processing doesn't break

Screenshots

Screen.Recording.2023-11-14.at.10.42.19.mov

System Info
Output of npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers

  System:
    OS: macOS 14.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 89.77 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.1/bin/npm
  Browsers:
    Brave Browser: 118.1.59.124
    Chrome: 119.0.6045.105
    Firefox: 118.0.1
    Safari: 17.1
  npmPackages:
    @tresjs/cientos: ^3.6.0 => 3.6.0 
    @tresjs/leches: 0.14.0-next.0 => 0.14.0-next.0 
    @tresjs/nuxt: ^1.2.2 => 1.2.2 
    @tresjs/post-processing: 0.6.0 => 0.6.0

Additional context
Add any other context about the problem here.

depth of effects is wrong

Describe the bug
The effects seem to happen on a different layer. Examples would be the outside not being visible, the bloom being behind other objects and the glitch happening behind the object being glitched.

Reproduction
See demos in playground.

Steps
check demos in playground

Refactor existing effects

Is your feature request related to a problem? Please describe.
The existing effects have some code parts in common that can probably be shared.

Describe the solution you'd like
Share common code parts.

Refactor Effects to .vue files

Is your feature request related to a problem? Please describe.
As of now, effects are typescript .ts files with defineComponent.

export const Glitch = defineComponent<GlitchProps>({
  name: 'Glitch',
  props: [
    'delay',
    'duration',
    'strength',
    'mode',
    'active',
    'ratio',
    'columns',
    'chromaticAberrationOffset',
    'peturbationMap',
    'dtSize',
  ] as unknown as undefined,

  async setup(props, { expose }) {
    const { state } = useCore()
    const composer = inject<any>('effectComposer')
    const pass = ref<EffectPass | null>(null)

    expose({ getPass: () => pass.value })

    watchEffect(() => {
      if (state.camera && composer && composer.value) {
        pass.value = new EffectPass(unref(state.camera), new GlitchEffect(props))
        composer.value?.addPass(toRaw(pass.value))
      }
    })

    watch(
      () => props.active,
      value => {
        if (pass.value) {
          pass.value.enabled = value as boolean
        }
      },
    )

    return () => {
      pass
    }
  },
})

Describe the solution you'd like

Use a similar approach as cientos and use vue SFC components

EffectComposer does not correctly react to canvas resizing

Describe the bug
When resizing the viewport with an active effect composer, the scene gets distorted.

Reproduction
Steps

open demo (in playground for example)
change canvas size

Expected behavior
The scene should not become distorted

Screenshots

tresjs / post-processing Goto Github PK

post-processing's Introduction

Post-Processing

Installation

Docs

Demos

Contributing

Build

Playground

Test

Docs

License

Sponsors

post-processing's People

Contributors

Stargazers

Watchers

Forkers

post-processing's Issues

Rate-Limited

Open

Ignored or Blocked

Detected dependencies

Recommend Projects

Recommend Topics

Recommend Org