WebGPU and shaders

Unity Engine
, , ,
1

I created the shader below to implement a fog of war for a character.

  • Player has a object called Field of View that generates a raycast mesh cone in front where they can see with the applied shader to cut through the fog via stencils & layers.
  • It uses Renderer feature on the Universal Render Pipeline to assign layers for the stencil values.
  • Then I put a transparent black plane over the top when looking down.

I am trying to get this to work with WebGPU and I am not sure which part is not playing nicely sense I upgraded to unity 6 preview. I don’t know if this type of effect is not possible because of the custom shader I am using or if it has something to do with preprocessing of the URP, or something new with WebGPU

Shader "Custom/FogOfWarRadialFadeReversed"
{
    Properties
    {
        _FadeColor ("Fade Color", Color) = (0, 0, 0, 1)  // The fog color (dark)
        _EdgeFade ("Edge Fade", Float) = 0.5  // How quickly to fade at the edge
    }
    SubShader
    {
        Tags { "RenderPipeline"="UniversalRenderPipeline" "Queue"="Transparent+10" }
        Pass
        {
            Name "FogOfWarRadialFadeReversed"
            Tags { "LightMode"="UniversalForward" }

            Blend SrcAlpha OneMinusSrcAlpha  // Standard alpha blending
            ZWrite Off  // Disable Z-write

            HLSLPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"

            float4 _FadeColor;
            float _EdgeFade;

            struct Attributes
            {
                float4 positionOS : POSITION;  // Object space position
                float2 uv : TEXCOORD0;         // UV coordinates
            };

            struct Varyings
            {
                float4 positionHCS : SV_POSITION;  // Homogeneous clip space position
                float2 uv : TEXCOORD0;             // Pass UV coordinates to the fragment shader
            };

            Varyings vert(Attributes IN)
            {
                Varyings OUT;
                OUT.positionHCS = TransformObjectToHClip(IN.positionOS);
                OUT.uv = IN.uv; 
                return OUT;
            }

            float4 frag(Varyings IN) : SV_Target
            {
                // Reverse the fade so that it starts at the edges and fades towards the center
                float fade = smoothstep(0.0, _EdgeFade, IN.uv.x);  // Radial fade reversed

                // Apply the fade to the color
                return float4(_FadeColor.rgb, fade * _FadeColor.a);  // Fade the alpha channel
            }

            ENDHLSL
        }
    }
}

shader
shader997×897 426 KB

2

I assume this works in the editor. Does this work in WebGL, and it’s just WebGPU that’s not working correctly? Any chance you can DM me a repo so I can take a look?

3

Yes it works in the editor when I turn off websockets on the network transform and use udp for the lobby/relay related connection instead of wss.

I have not gotten it working with WebGL or WebGPU as of yet. I tried with WebGL and it broke a lot of things, then I tried WebGPU and unity 6 preview and a lot of things were fix and working minus this shader functionality.

I can DM the repo.

4

@brendanduncan_u3d helped me figure out that

There was an error in my shader. I had
Tags { "RenderPipeline"="UniversalRenderPipeline" "Queue"="Transparent+10" }
should be
Tags { "RenderPipeline"="UniversalPipeline" "RenderType"="Transparent" "Queue"="Transparent+10" }

This did not have to do with webgl or webgpu issue.