Mobile WebGL Error with Directional Shadow Map in Custom Shader

[SoundAndColour]

Hi Shawn,

got another one :-)

I'm using a directional shadow map with my custom ShaderMaterial. This works as expected on desktop (Chrome & FF ). But on my mobile Chrome (Note 10 Lite) I get an error:

[.WebGL-0xc4e8c200]GL ERROR :GL_INVALID_OPERATION : glDrawElements: Texture bound to texture unit 0 with internal format GL_RGBA is not compatible with sampler type GL_SAMPLER_2D_SHADOW_EXT

Here's what I do: 1) Render a huge DirectionalLightShadow once ( 4096x4096 ) 2) Disable shadow updates 3) Use the "baked" shadowmap in a custom shader 4) Custom shader does not compile 5) Built-In shaders work just fine

As I already use your pre-built shadow shader chunks, I'm a bit lost here... Am I missing a flag, a render texture setup or something?

Thanks in advance & best regards!

[shawn0326]

I guess you are using sampler2DShadow uniform in your custom shader. And this uniform type requires a special texture:

var depthTexture = new Texture2D();
depthTexture.type = WEBGL_PIXEL_TYPE.FLOAT_32_UNSIGNED_INT_24_8_REV;
depthTexture.format = WEBGL_PIXEL_FORMAT.DEPTH_STENCIL;
depthTexture.internalformat = WEBGL_PIXEL_FORMAT.DEPTH32F_STENCIL8;
depthTexture.magFilter = WEBGL_TEXTURE_FILTER.LINEAR;
depthTexture.minFilter = WEBGL_TEXTURE_FILTER.LINEAR;
depthTexture.compare = WEBGL_COMPARE_FUNC.LESS;

But i don't know why it works as expected on desktop. If this doesn’t help, you can send me the demo or the shader code.

[SoundAndColour]

Hi Shawn!

I'm not creating a custom depth texture, just using zen3d's shadowMapRenderer. Here's a demo.

public_html.zip

On desktop it renders the landscape just fine, on mobile there's the texture format issue.

Thanks for your time & best regards!

[shawn0326]

Oh yes, I ran into the same problem on my android phone, thanks. I will try to solve this problem, any progress will be updated here. And by the way, you can avoid this problem if you use WebGL1 on android device.

[shawn0326]

It seems that the texture unit caused confusion. 'sampler2DShadow' should use texture unit 3 but why log error with texture unit 0 ? Maybe we should provide an option to turn off the Shadow Sampler feature ...

[SoundAndColour]

Thanks for your help, will give WebGL1 a try! What do you mean by "option to turn it off" ? An automated fallback?

[SoundAndColour]

Just tried glES 2 context... Oh my, errors all over the place. Transpose, textureLod not working. I think I'd rather skip the shadows...

[shawn0326]

Updated dev branch.

Try this scene.disableShadowSampler = true

[SoundAndColour]

Wow, nice! Works!

This switches to using a tex2D sampler with RGBA-packed shadowmap instead of the shadowsampler?

Thanks a lot for your time & best regards!

[shawn0326]

yes, it fallbacks to texture2D sampler

[shawn0326]

Update. This problem has been resolved in v0.0.4, and no need to close shadowSampler. It seems that the texture unit bound to uniforms of the shadow sampler type needs to be arranged in front of other types of texture units.