Multipass rendering for shader material

[Shb]

Hi all,

I was wondering if it was possible to access variables from a previous pass in the shader, i.e color of fragment or something along those lines.

I want to have something that changes color over time after an event occurs. So if I can access a time delta plus a previous color then I can slowly modify it to a new state, is this possible?

*Note this is my first time working with shaders, please excuse any stupid questions ?

Thanks.

[thrice]

It's possible, just not directly from within the shader. Instead you pass the data to the shader on the JS side of things, i.e. assuming you have an instance of shader material, pseudocode:

shader_material.setVector3('inputColor', new BABYLON.Vector3(1,0,0);
shader_material.setFloat('time', 0.0);

Then after event occurs you can do something like

current_time = 0.0;
time_step = 0.01;
scene.onBeforeRenderObservable.add(() => {
  shader_material.setFloat('time', current_time + time_step);
});

 

[Shb]

@thrice

Thanks for the quick response

The event in this case is local to that part of the mesh and is calculated by passing an array of objects_positions into the shader

I wanted to retain the values calculated by the previous render because calculating them again seems inefficient (as I'd need to pass in old values & new values, then do the calculation for both, which still doesn't achieve what I want to do as it gets rid of the calculations done before the immediately last one).

 

For example in the pictures below I wan there to be slow transition between the color not an instant one on movement of the sphere.

 

[Shb]

Basically something like what the OP of this question was trying to do

https://stackoverflow.com/questions/2740874/how-do-i-get-the-current-color-of-a-fragment

(I couldn't really get an answer that I understood from this either)

[thrice]

Ya so, you'd either have to do the calculations on the javascript side, and pass it to the shader as a uniform, or something else, but you can't store computed variables in the shader for the next pass if that's what you are asking. Are the sphere / background 2 different textures you're passing into the shader?

[Shb]

@thrice

The sphere is a mesh, the ground is a separate mesh (height map), then there is a custom mesh on top of both of them ( https://playground.babylonjs.com/#KDUJ4Z like this, except using the material to set the opacity ) which is where the shader does it's work, I pass the shader the location of the sphere (and all objects like it) along with their radius of influence, using a float array (i.e [obj1.x,obj1.z,radius,obj2.x,obj2.z,radius,...]) for a lack of a better way of passing the data.

I had been doing the computation on the cpu but wanted to move it to the gpu side to reduce the load but it seems like that's not possible if I want the fade out effect ? 

[thrice]

Eh, not like that at least, you def can't store variables within the fragment shader itself. Part of your question sounds like maybe it could be solved with vertex shader, which is mostly outside my knowledge domain, but maybe not. However It also sounds like there might be a better way of doing what you are trying to achieve. You could probably use a custom render target to essentially bake the image as the sphere moves through it, or something to that effect? Then you'd just pass the baked image as a sampler to the main shader and use that to diff it? IDK I don't have much experience with render targets, but that is essentially how I would try to approach the problem, baking the image as some sort of 2d map of the fog of war as it's lifted, then you'd only need to update it as the circle is moving. (And you'd probably simulate that in another shader, in which you could pass the heightmap texture, and draw a circle on it, at the same scale of the main sphere / ground ratio, then you'd move the sphere by just passing in a xy offset to the circle, as the sphere moves, which would be drawn on top of the height map, which would be the thing you'd be baking)

[thrice]

Could also maybe create a ribbon and update that as the sphere moves, and use that to track the spheres path, if that's what you are trying to do? (i'm assuming you're going for a 2d fog of war effect i.e. warcraft/diablo?) idk: https://doc.babylonjs.com/how_to/ribbon_tutorial 

[Shb]

@thrice

Thanks for all your input

Yea I was going for a fog of war effect, I am actually doing the calculation on the vertex shader, and passing it down to the fragment shader. 

7 hours ago, thrice said:

You could probably use a custom render target to essentially bake the image as the sphere moves through it, or something to that effect? Then you'd just pass the baked image as a sampler to the main shader and use that to diff it?

Never heard of custom render targets I guess that's something I could look into.