Compatibility renderer web export: Directional shadows malfunction on Mac browsers (Chrome, Safari), function correctly on Mac native app and Windows browsers

[cosformula]

Tested versions

• Reproducible in 4.2.2.stable, 4.3.beta2

System information

Godot v4.2.2.stable - macOS 14.5.0 - GLES3 (Compatibility) - Apple M1 Max - Apple M1 Max (10 Threads)

Issue description

Directional shadows not working correctly on mac browser(both chrome and safari), but working correctly on mac native and windows browser.

Running preview on mac

Running preview on mac chrome(v126.0.6478.115 arm64) (both shadow and color seems wrong)

Running preview on windows chrome(v126.0.6478.115)

Additional notes:
By changing the ground color, we can see that the shadow was actualy there, but in a light color

Steps to reproduce

• Download the minimal reproduction project
• Run project in the browser

Minimal reproduction project (MRP)

DirectionalShadow.zip

[akien-mga]

Might be related to #85567.

[cosformula]

This issue is resolved when I choose OpenGL instead of Metal as the ANGLE backend:

I am currently debugging and believe the problem is related to the directional shadow atlas rendering stage. However, I am not very familiar with the rendering process and would appreciate any guidance or hints from the community.

[cosformula]

I found a workaround to solve the issue, modifying sample_shadow function in drivers/gles3/scene.glsl :

float sample_shadow(highp sampler2DShadow shadow, float shadow_pixel_size, vec4 pos) {
	// float avg = textureProj(shadow, pos);
	vec3 pos3 = vec3(pos.x,pos.y,pos.z);
	float avg = texture(shadow, pos3);
	return avg;

Not a perfect solution, and spot light shadow still broken, but it might help someone else.

Still don't know why this happeds, I'll continue working on this.

[cosformula]

It seems like textureProj is broken on the Metal-backend for WebGL2. I've created a test page to demonstrate the issue:
https://jsgist.org/?src=60e40e12f617541a28c777523c23208d
On Safari/Chrome:

On Firefox :

A workaround is to simulate textureProj with the following code:

float textureProjSimulated(highp sampler2DShadow shadow, vec4 pos) {
	float d = texture(shadow, pos.xyz/pos.w);
	return d;
}

or use textureProjLod, which gives correct result.

As this seems to be an upstream issue(Angle, I've file an issue), I'm not sure if this is the best solution. Should I open a PR to implement this workaround?

[akien-mga]

As this seems to be an upstream issue(Angle, I've file an issue), I'm not sure if this is the best solution. Should I open a PR to implement this workaround?

I'll defer to @clayjohn to decide if the workaround is acceptable, or would incur too big a performance penalty.

I'd suggest also filing a WebKit bug report, they have a WebGL component and Apple developers might be more likely to be notified of the issue there than on upstream ANGLE, I suppose. The bug reports can cross-reference each other.

And maybe even an Apple Feedback ticket? https://developer.apple.com/bug-reporting/

[cosformula]

As this seems to be an upstream issue(Angle, I've file an issue), I'm not sure if this is the best solution. Should I open a PR to implement this workaround?由于这似乎是一个上游问题（角度，我已经提交了一个问题），我不确定这是否是最好的解决方案。我应该打开 PR 来实施此解决方法吗？

I'll defer to @clayjohn to decide if the workaround is acceptable, or would incur too big a performance penalty.我将推迟决定解决方法是否可以接受，或者会导致太大的性能损失。

I'd suggest also filing a WebKit bug report, they have a WebGL component and Apple developers might be more likely to be notified of the issue there than on upstream ANGLE, I suppose. The bug reports can cross-reference each other.我建议还提交一份 WebKit 错误报告，他们有一个 WebGL 组件，我想苹果开发人员可能比上游 ANGLE 更有可能收到有关该问题的通知。错误报告可以相互交叉引用。

And maybe even an Apple Feedback ticket? https://developer.apple.com/bug-reporting/甚至可能还有 Apple 反馈票？ https://developer.apple.com/bug-reporting/

Thanks!
Reports for both Safari and Chrome have been submitted. Looking forward to the new progress.

[clayjohn]

@cosformula If textureProjLod works, let's use that. The shadow map does not have mipmaps anyway. So the result should be exactly the same if we use textureProj or textureProjLod with an LOD of 0 and the speed should also be the same.

[cosformula]

@cosformula If textureProjLod works, let's use that. The shadow map does not have mipmaps anyway. So the result should be exactly the same if we use textureProj or textureProjLod with an LOD of 0 and the speed should also be the same.

Thanks! Made a draft PR, I'll do more test to ensure it does't cause any regression.