Heat air effect shader

Hello. I have a spaceship with two engines and I wanna achieve an effect when air is refracting because of heat.

image

So I see only one possible way to get it - post effect.
I’m not sure, but seems like I have to render my scene twice - first is for all objects and the secondly render only my engines’ splines in order use it as mask.

When since I would have inputTarget and this mask, I just pass it to shader and render it to outputTarget.

It feels to be terrible for performance. But I don’t know how to refract something behind the entity by it’s own shader.

My questions are:

  • is it possible to make refractive effect by regular shader, not by post-effect which is more heavy.
  • How can I render this masked scene?
  • And sure, Is it right way to achieve this effect?

Thanks a lot.

Anybody? Please :cold_sweat:

1 Like

Okay, thanks to me, I finally did it. I spent the whole night, eh.

I made two shaders, one is for the whole scene and one is for air.
Then I render my device.drawCalls again, but with this shaders and into the custom target.
And then use it it post-effect.


Click on gif to see the effect (preview has terrible quality)

But i think it’s a dirty solution. I have to render the whole scene twice!

I still wonder is there a single-shader solution, not a post-effect.

2 Likes

Not my area of expertise here: I would have thought you could use a pixel shader to displace the rendered pixel. Similar to a glass refraction shader?

In Unity I was using a GrabPass in the shader. It’s a sort of automation that takes the rendered buffer and makes it available in your shader as a texture that you can sample.
I tried to search for something similar in WebGL, but no luck.
In theory you should render to texture your whole scene except for the air effect, then pass this texture in the shader of the air effect so that it can be used as source, and keep rendering on the same render target (not sure).
Then finally blit it on the canvas.

Hm, sounds nice, but is it possible to control render order?

Oh I got it now. I have to try!

Exactly, this is how post-effects work - pixel shader for whole screen quad.

I’ve seen that a new layer system should be integrated soon in PlayCanvas. Maybe this could be a possible solution.

I found that pc.Layer was removed, hm.

But i still can render entities by hands. Thanks!

1 Like

The API documentation slipped into the main release but the actual functionality was not yet ready :sweat_smile:. I believe it is due VERY soon.

Lol, I still able to read it, so, seems like it is really what do I need!