Postprocessing: Problem with input-output between passes

Created on 6 Mar 2019  路  4Comments  路  Source: vanruesc/postprocessing

I was trying to create a simple ShaderPass and I was struggling with the tDiffuse uniform because it looked it doesn't work. So I tried to create a EffectPass with Bloom and Vignette just for testing and the output was correct as the filter but the "content" of the scene was missing, just like the ShaderPass.
I remembered that I created something similar last week so I dig into the code I wrote looking for some errors but it looked everything right to me.
I tried to copy that code into this new demo and it doesn't work neither.
So I thought it could be a bug or something similar, so I got another version of the package 5.6.0 and without any changes in my code it starts to work again.

UPDATE: Looks like that is something wrong with only the objects in the scene, because if I change the clearColor or the renderer renderer.setClearColor(color) it displays that color, without any mesh

import * as THREE from 'three'
import { EffectComposer, RenderPass, ShaderPass } from 'postprocessing'

import vertexShader from './shaders/toon.vert'
import fragmentShader from './shaders/toon.frag'

export default class Postprocessing {
  constructor (renderer, camera, scene) {
    this.composer = new EffectComposer(renderer)
    this.renderPass = new RenderPass(scene, camera)

    this.composer.addPass(this.renderPass)

    const shaderMaterial = new THREE.ShaderMaterial({
      uniforms: {
        tDiffuse: { type: 't', value: null }
      },
      vertexShader: vertexShader,
      fragmentShader: fragmentShader
    })

    this.shaderPass = new ShaderPass(shaderMaterial, 'tDiffuse')
    this.composer.addPass(this.shaderPass)

    this.shaderPass.renderToScreen = true
  }

  render () {
    this.composer.render()
  }
}

This snippet works fine in 5.6.0 and not in 6.0.1

RENDERED USING 5.6.0
schermata 2019-03-06 alle 12 47 45

RENDERED USING 6.0.1
schermata 2019-03-06 alle 12 48 31

Most helpful comment

! Nevermind, I didn't notice that you're already doing that in your code 馃槆

Yeah, I'm quite familiar with this awesome library, I use this for quite a while ;)
Btw, I was using three r100, now I upgraded it to r102 and everything works fine.
My bad I didn't noticed, sorry for the opening issue.

All 4 comments

Hi dghez,

which version of three are you using? The latest postprocessing version requires three r102.

Also, if you're having trouble with the ShaderPass, the following example might help you: https://jsfiddle.net/6sctr5yn/

~Note that the ShaderPass assumes the name of the input buffer uniform to be "inputBuffer" as described in the documentation. If the uniform in your ShaderMaterial is called "tDiffuse", you'll have to provide that name to the constructor!~ Nevermind, I didn't notice that you're already doing that in your code 馃槆

! Nevermind, I didn't notice that you're already doing that in your code 馃槆

Yeah, I'm quite familiar with this awesome library, I use this for quite a while ;)
Btw, I was using three r100, now I upgraded it to r102 and everything works fine.
My bad I didn't noticed, sorry for the opening issue.

My bad I didn't noticed, sorry for the opening issue.

No problem, I'm glad you were able to resolve your issue!

Was this page helpful?
0 / 5 - 0 ratings