Unable to access depth texture when running in browser. Godot 3.5.2 OpenGL ES 2.0

Help Shaders
, , , ,
1

Godot Version

3.5.2

Question

Hi, I’m trying to implement a custom post-processing fog shader, since i want to add some screen space gradients to the fog. I’m using the OpenGL ES 2.0 renderer.

When running the game in the browser, the whole shader breaks down.

The problem

(white fog in editor)

fog_correct
fog_correct1842×962 146 KB

(white fog in browser)

fog_incorrect
fog_incorrect1576×816 97.1 KB

The fog is rendered as an post-processing effect on a MeshInstance quad in front of the camera. (since access to the depth buffer is only possible in the spatial shader_type)

The problematic line

I nailed the error down to this line in the shader:

float non_linear_depth = texture(DEPTH_TEXTURE, SCREEN_UV).r;

The non_linear_depth is then linearised and used like this:

float depth = linearize_depth(non_linear_depth, cam_near, cam_far) / cam_far;
ALPHA = depth;

Testing the problem

Setting the ALPHA to some constant value (from 0.0 to 1.0), also does not change anything. (expected result should be a slightly tinted screen)

Only when i remove the texture(DEPTH_TEXTURE, SCREEN_UV).r I’m able to get the slightly tinted result.

expected result when ALPHA is set to 0.5

tinted_screen
tinted_screen1742×907 125 KB

So im pretty sure it is in the texture(DEPTH_TEXTURE, SCREEN_UV).r function.

I’ve also tried the lod variant and still no changes.

float non_linear_depth = textureLod(DEPTH_TEXTURE, SCREEN_UV, 0.0).r;

The Question

Is there any alternative to texture(DEPTH_TEXTURE, SCREEN_UV).r, or some secret export setting I’ve missed? Please let me know!

2

What’s linearize_depth?

3

Its my function that takes the cameras near and far planes and linearizes the depth between theese values. Output depth then goes linearly from 0.0 to 1.0. (The input depth alos goes from 0.0 to 1.0, but nonlinearly)

float linearize_depth(float depth, float near, float far) { 
	return (2.0 * near * far) / (far + near - (depth * 2.0 - 1.0) * (far - near));
}

It works fine, I’ve used it in my previous projects, but the whole shader stops working when accessing the DEPTH_TEXTURE.

Thanks for asking!

4

What happens if you just draw the depth texture?

5

What happens if you just draw the depth texture?

Nothing :D, It will cancel the shading process anyway.

As a matter of fact, it will stop the shader even if the depth value is never used.

(this stops the shader)

float depth_nolinear = texture(DEPTH_TEXTURE, SCREEN_UV).r;
	
ALBEDO = fog_color.rgb;
ALPHA = 0.5;

(this works fine)

//float depth_nolinear = texture(DEPTH_TEXTURE, SCREEN_UV).r;
	
ALBEDO = fog_color.rgb;
ALPHA = 0.5;
6

Your hardware might not support it. The only thing I could find in 3.5 docs:

While GLES2 supports DEPTH_TEXTURE in shaders, it may not work on some old hardware (especially mobile).

1 Like
7

Yeah I’ve also read. The only workoround I could think of is adding some next pass shader to every material at loadtime, but this will be much slower.

Seems that godot is currently not targeting web support… I’ve read that Godot 4 is even worse for web developement than Godot 3. Hope they’ll fix things up when C# support for web comes around.

I’ll dig arround in the project setting for some fix or mybe switch to Godot 3.6.2. I’ll come back if i find anything. Thanks for your help.

1 Like