Tresjs / post-processing

Post-processing library for TresJS
MIT License
34 stars 5 forks source link

Multisampling prop isn't passed corerctly to EffectComposer #101

Closed whereiswolf closed 7 months ago

whereiswolf commented 7 months ago

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:

  1. In a scene add <EffectComposer :multisampling="8" /> and any other effect you want (tested on Outline / Vignette)
  2. 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" />

image

☝️ 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
})
...