WebGPU fails on iOS Safari

Hi, I’ve enabled WebGPU in settings, with WebGL2.0 as fallback. However, if I do - my site renders black on iOS safari and Chrome. If I uncheck the box so that webgl2 is the only device it works again.

This is not expected right? First I was under the impression Safari had support for WebGPU, and even if it didn’t It should use the fallback no? I get no errors in console.

The PlayCanvas Examples works fine however, so must be something app specific in combination. Is the iOS support for WebGL not as mature as the desktop stuff yet?

Regards

Björn

That is not expected. Are you using up to date engine? (2.17).

Also, can you test that using debug engine to see if there are some errors / warnings in the console.

Hi, Yes, latest engine. I added on screen display of the console output but no, I can not see any error messages. Using the build in debug flag causes my I18N to fail on fetching strings btw.

I’d still recommend remove debugging from Safari running on Mac, it might show more than the console output. Or run that on browser-stack, they can display the console.

But if nothing is there at all, the next step would be to try to either hack the code (on a branch) to try and see what might be causing it, by stripping / disabling parts.

I think I’ve found it. When I disabled one particular game object using a particular material (actually removing the reference to the material was enough) it stopped failing and showed my app. I’ve attached the material as it looks when downloaded from playcanvas editor:

{"shader":"blinn","blendType":2,"cull":0,"useLighting":true,"twoSidedLighting":true,"useMetalness":true,"useMetalnessSpecularColor":false,"depthWrite":true,"emissiveTint":true,"glossInvert":true,"clearCoatGlossInvert":false,"sheenGlossInvert":false,"useDynamicRefraction":false,"useSheen":false,"diffuseTint":true,"specularTint":false,"sheenTint":true,"useIridescence":false,"metalness":0,"shininess":100,"opacity":1,"bumpMapFactor":1,"reflectivity":1,"alphaTest":0.5,"clearCoat":0,"clearCoatGloss":1,"clearCoatBumpiness":1,"specularityFactor":1,"refractionIndex":0.666667,"refraction":0,"sheenGloss":0,"thickness":0,"attenuationDistance":0,"emissiveIntensity":1,"iridescence":0,"iridescenceRefractionIndex":0.666667,"iridescenceThicknessMin":0,"iridescenceThicknessMax":0,"ambient":[1,1,1],"diffuse":[0.5254901960784314,0.7843137254901961,0.7372549019607844],"emissive":[0.5254901960784314,0.7843137254901961,0.7372549019607844],"specular":[1,1,1],"sheen":[1,1,1],"attenuation":[1,1,1],"ambientTint":true,"aoMapChannel":"r","aoMapUv":0,"aoMapTiling":[25,25],"aoMapOffset":[0,0],"aoMapRotation":0,"diffuseMapChannel":"rgb","diffuseMapUv":0,"diffuseMapTiling":[25,25],"diffuseMapOffset":[0,0],"diffuseMapRotation":0,"specularMapChannel":"rgb","specularMapUv":0,"specularMapTiling":[25,25],"specularMapOffset":[0,0],"specularMapRotation":0,"specularAntialias":true,"occludeSpecular":1,"specularityFactorMap":null,"specularityFactorMapChannel":"r","specularityFactorMapUv":0,"specularityFactorMapTiling":[25,25],"specularityFactorMapOffset":[0,0],"specularityFactorMapRotation":0,"enableGGXSpecular":false,"anisotropy":0,"metalnessMapChannel":"r","metalnessMapUv":0,"metalnessMapTiling":[25,25],"metalnessMapOffset":[0,0],"metalnessMapRotation":0,"conserveEnergy":true,"glossMapChannel":"r","glossMapUv":0,"glossMapTiling":[25,25],"glossMapOffset":[0,0],"glossMapRotation":0,"clearCoatMapChannel":"r","clearCoatMapUv":0,"clearCoatMapTiling":[25,25],"clearCoatMapOffset":[0,0],"clearCoatMapRotation":0,"clearCoatVertexColor":false,"clearCoatVertexColorChannel":"r","clearCoatGlossMapChannel":"r","clearCoatGlossMapUv":0,"clearCoatGlossMapTiling":[25,25],"clearCoatGlossMapOffset":[0,0],"clearCoatGlossMapRotation":0,"clearCoatGlossVertexColor":false,"clearCoatGlossVertexColorChannel":"r","clearCoatNormalMapUv":0,"clearCoatNormalMapTiling":[25,25],"clearCoatNormalMapOffset":[0,0],"clearCoatNormalMapRotation":0,"sheenMap":null,"sheenMapChannel":"rgb","sheenMapUv":0,"sheenMapTiling":[25,25],"sheenMapOffset":[0,0],"sheenMapRotation":0,"sheenGlossMap":null,"sheenGlossMapChannel":"r","sheenGlossMapUv":0,"sheenGlossMapTiling":[25,25],"sheenGlossMapOffset":[0,0],"sheenGlossMapRotation":0,"emissiveMapChannel":"rgb","emissiveMapUv":0,"emissiveMapTiling":[25,25],"emissiveMapOffset":[0,0],"emissiveMapRotation":0,"normalMapUv":0,"normalMapTiling":[25,25],"normalMapOffset":[0,0],"normalMapRotation":0,"refractionMap":null,"refractionMapChannel":"r","refractionMapUv":0,"refractionMapTiling":[25,25],"refractionMapOffset":[0,0],"refractionMapRotation":0,"refractionVertexColor":false,"refractionVertexColorChannel":"r","dispersion":0,"thicknessMap":null,"thicknessMapChannel":"r","thicknessMapUv":0,"thicknessMapTiling":[25,25],"thicknessMapOffset":[0,0],"thicknessMapRotation":0,"thicknessVertexColor":false,"thicknessVertexColorChannel":"r","iridescenceMap":null,"iridescenceMapChannel":"r","iridescenceMapUv":0,"iridescenceMapTiling":[25,25],"iridescenceMapOffset":[0,0],"iridescenceMapRotation":0,"iridescenceThicknessMap":null,"iridescenceThicknessMapChannel":"r","iridescenceThicknessMapUv":0,"iridescenceThicknessMapTiling":[25,25],"iridescenceThicknessMapOffset":[0,0],"iridescenceThicknessMapRotation":0,"heightMapChannel":"r","heightMapUv":0,"heightMapTiling":[25,25],"heightMapOffset":[0,0],"heightMapRotation":0,"heightMapFactor":1,"alphaToCoverage":false,"alphaFade":1,"opacityMap":"../186476082/White stripe 2x2.png","opacityMapChannel":"a","opacityMapUv":0,"opacityMapTiling":[25,25],"opacityMapOffset":[0,0],"opacityMapRotation":0,"opacityFadesSpecular":true,"opacityDither":"none","opacityShadowDither":"none","cubeMapProjection":0,"cubeMapProjectionBox":{"center":[0,0,0],"halfExtents":[0.5,0.5,0.5]},"lightMapChannel":"rgb","lightMapUv":0,"lightMapTiling":[25,25],"lightMapOffset":[0,0],"lightMapRotation":0,"depthTest":true,"useFog":true,"useSkybox":true,"useGammaTonemap":true,"anisotropyIntensity":0,"anisotropyRotation":0,"metalnessTint":true,"sheenGlossTint":true,"mapping_format":"path"}

White stripe 2x2

Seems related to the usage of this 2x2px texture as opacity map.

I replaced the picture with a 16x16px, and now WebGPU works on iOS. (chrome + safari)

Nice, I added an error log in the engine to catch those issues, thanks fort he report.

2 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.