Jump to content

Multipass rendering for shader material


Shb
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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);
});

 

Link to comment
Share on other sites

@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.

ss1.png.4f91f6278e9a13f77817848380ee087b.pngss2.png.67f520c79f6deb9500a7a6f1937c262f.png

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

@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 ? 

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

@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.

 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...