Rendering just part of the screen

Help & Support
1

hi everyone!
im really enjoying the fog option here on playcanvas, but was wondering whether it be possible to have it just affect the lower part of the screen? Im kinda wanting to create a mystic pond vibe

in advance, thanks again for your support!

2

Hi @linelineline,

What you are looking for is a height based fog, where the effect is stronger at lower elevations.

For that you will have to write a shader to override the default one provided by the engine.

3

since im def not a highskilled programmer, could you give me any leads on where to start or look :slight_smile: ?

1 Like
4

Iā€™d say start with two things:

  • Study in the forums posts on how to start overriding shaders chunks, to get some experience writing Playcanvas shaders
  • Search online for a height based fog shader, check how the algorithm works to be able to update the existing fog shader Playcanvas provides.

You can try posting a feature request on the engine repo, since this is a feature that would be nice to have in Playcanvas, in general.

5

thanks Leonidas,
would you have any specific forum equipped to help out?
any hint would be helpfull as I am blanking this one

thanks again!

6

Hi @linelineline,

Here is a great article on how a fog shader works:

https://iquilezles.org/www/articles/fog/fog.htm

That can be quite advanced though to implement as a custom Playcanvas shader if you are starting now. Do post a feature request in the engine repo about it.

You will have to first start learning how to add custom shaders in Playcanvas, start with these examples:

https://developer.playcanvas.com/en/tutorials/?tags=shaders

7

well as I need the effect soonish I might have to go a different road.
would it be possible to make a sort of particle system/smoke that just would hang low in the space?

8

Yes, for a small space it may do the trick for you.

9

For a small space, but i guess also for a larger one, you can use a transparent material with some moving effect to replicate the fog appearence.

1 Like
10

Just a quick test
https://playcanvas.com/editor/scene/970366