Is there a way to do multiple shader passes?

MathieuChillon · September 13, 2021, 9:14am

Hi,

I’m currently trying to implement an outline shader as the one we currently use is too performance intensive on Retina screens!

I found a shader on the web that does not need to read a fullscreen texture multiple times per frame but simply displace the model by its normals along with front face culling and some other stuff. I assume this would yield better performance.

Alas, this shader requires two passes, one rendering the model and one displacing it to draw the outline, and I don’t see how I could do this in Playcanvas so any help would be appreciated!

Thanks in advance!

mvaligursky · September 13, 2021, 9:55am

I think your best bet here would be to create an additional camera with higher priority, so that it renders on top. Disable any clears on it. Meshes that you need outlines on would be in the main camera, but additional add them to this camera. I think you’d need to clone the entities and change their materials to the outline pass material.

mvaligursky · September 13, 2021, 10:03am

Actually, if you clone the entities as I suggested, you don’t need additional camera. Just have additional layer on the same camera that renders perhaps after all opaque layers. And add those cloned entities with outline hull shader to it.

MathieuChillon · September 13, 2021, 1:53pm

Yes, I managed to make it work, thanks a lot !

Astra · November 22, 2022, 10:10am

Hey, I’m facing a similar issue: I’m doing a post-processing effect in PlayCanvas that requires multiple shader passes, and I’m not entirely sure how to go about this. However, I am pretty sure a workaround like mentioned above would not work in my case.

I noticed there has been some work on improving the render pass pipeline: https://github.com/playcanvas/engine/issues/4271
So was hoping perhaps it would be more feasible to do this now.

Anyone know how to go about doing multiple shader passes now?

mvaligursky · November 22, 2022, 10:40am

Post-processing effects are a special case that already handles multiple passes, perhaps that would work for you? See for example a bloom filter:

github.com

playcanvas/engine/blob/722b93ab8069851e4b467699e24f711b4e492b95/scripts/posteffects/posteffect-bloom.js#L247-L275

      
        
            // Pass 1: draw the scene into rendertarget 1, using a
            // shader that extracts only the brightest parts of the image.
            scope.resolve("uBloomThreshold").setValue(this.bloomThreshold);
            scope.resolve("uBaseTexture").setValue(inputTarget.colorBuffer);
            pc.drawFullscreenQuad(device, this.targets[0], this.vertexBuffer, this.extractShader);
            
            
// Pass 2: draw from rendertarget 1 into rendertarget 2,
            // using a shader to apply a horizontal gaussian blur filter.
            calculateBlurValues(this.sampleWeights, this.sampleOffsets, 1.0 / this.targets[1].width, 0, this.blurAmount);
            scope.resolve("uBlurWeights[0]").setValue(this.sampleWeights);
            scope.resolve("uBlurOffsets[0]").setValue(this.sampleOffsets);
            scope.resolve("uBloomTexture").setValue(this.targets[0].colorBuffer);
            pc.drawFullscreenQuad(device, this.targets[1], this.vertexBuffer, this.blurShader);
            
            
// Pass 3: draw from rendertarget 2 back into rendertarget 1,
            // using a shader to apply a vertical gaussian blur filter.
            calculateBlurValues(this.sampleWeights, this.sampleOffsets, 0, 1.0 / this.targets[0].height, this.blurAmount);
            scope.resolve("uBlurWeights[0]").setValue(this.sampleWeights);
            scope.resolve("uBlurOffsets[0]").setValue(this.sampleOffsets);
            scope.resolve("uBloomTexture").setValue(this.targets[1].colorBuffer);

This file has been truncated. show original