WebGL URP materials pink when build but look fine in editor (shader created with Amplify Shader Editor)

Question

My problem is very similar to Unity WebGL ok in editor, pink screen in build but the offered solution does not work. Like in the question, the materials look fine viewed in the Editor but when clicking on build & run most materials turn pink. I have added the shaders that are used for the material under Project Settings > Graphics > Built-in Shader Settings and made sure that I am using the correct URP asset by deleting all but one and making sure it's used by WebGL when building unless I missed something. This did not solve the problem.

Disclaimer: I didn't create the shader myself but it came with an asset that I bought so unfortunately I can't post the shader here. I therefore have to describe the shader as best as I can but my knowledge of shaders in general as well as the tool that was used for them is very limited (please let me know if I can provide more information).

Description of the shader and what tried so far

• Initially the shader didn't even compile for WebGL but the creator thankfully changed it but they don't have capacity to make more changes to this, which is why I am here.
• The shader seems to be created with Amplify Shader Editor (v1.9.6.2)
• There are multiple shaders that are part of the asset but the one that blends to textures together doesn't work after importing it. All of the shaders use Shader type: Universal Lit
• I tried playing around with the Amplify Shader Editor to see if I can fix the problem myself but I haven't been able to.
  • E.g. I removed all inputs to output of the shader but it still pink.
  • This is when I noticed that even when I edit the previously working shader using the Amplify Shader Editor it turns pink (e.g. also just using a fixed base colour). This is also true when I create a material with a completely new shader that I created with this tool.
  • In the inspector view of the shader I did click on compile and show code after making changes via the editor but this did not solve the issue.
  • After reimporting the shader, the previously working shader works again but the blending shader still doesn't work.

Is it possible that Amplify Shader Editor is not compatible with WebGL? Why does any edit to the shader using this editor result in pink materials? What am I doing wrong. Bear in mind I am not familiar with the tool but as it stands I cannot create a working shader using the editor that will not look pink in the browser but looks as expected in the editor view.

Other information

• Unity version: 2022.3.30f1
• Browser tested: Firefox 129.0.2 (64-bit) & Edge Version 128.0.2739.54 (Official build) (64-bit)

Answer 1

I've poked around further and I finally found a solution for my problem. The shaders used shader model 4.5, which doesn't seem to work with WebGL.

Under Output Node > SubShader > Shader Model I changed the value from 4.5 to 4.0 and now it seems to work without a problem. I also tried newer models, which didn't work.