babylon.js Pass a high-res texture and a low-res texture into a fragment shader, and output a new high-res texture

[williamqin]

A part of my game's post-process render pipeline:

1. Downscale render to 25% size
2. Do some post-processing on the downscaled image
3. Pass both the image before step 1 and the image after step 2 into a GLSL fragment shader with effect.setTextureFromPostProcessOutput(...)
4. Fragment shader outputs the low-res processed image overlaid on top of the original high-res render

Problem: The final render is pixelated. I guess the initial downscale made it so the shader doesn't use the higher-res input texture as the "base resolution"? What's going on here? How do I properly set fragment shader input textures of different resolutions in a post-processes?

[kcoley]

Hi @williamqin, can you make a playground that repros your issue?

[williamqin]

12 hours ago, kcoley said:

Hi @williamqin, can you make a playground that repros your issue?

@kcoley

https://playground.babylonjs.com/#1YTJCG

Edited October 13, 2018 by williamqin

[BitOfGold]

Hi!
Here you are:
https://playground.babylonjs.com/#1YTJCG#1

You need a full res pass to store the original.

[williamqin]

14 hours ago, BitOfGold said:

Hi!
Here you are:
https://playground.babylonjs.com/#1YTJCG#1

You need a full res pass to store the original.

Thank you so much! One more question: what's the difference between setTextureFromPostProcess and setTextureFromPostProcessOutput?

[BitOfGold]

setTextureFromPostProcess gets the input texture of the post process, setTextureFromPostProcessOutput gets the result.

but a Pass possprocess's output should be the same. I don't know why...

 

[Guest]

On 10/13/2018 at 11:07 PM, BitOfGold said:

but a Pass possprocess's output should be the same. I don't know why...

Well because it is a Pass postprocess  It just pass the data (but can be used to scale up/down)