Search Unity

Custom Shader Example for Project Tiny

Discussion in 'Project Tiny' started by Solal_, Mar 4, 2021.

  1. Solal_

    Solal_

    Joined:
    Jan 13, 2019
    Posts:
    13
    Horion64, B_Maxime and M4n0n like this.
  2. djsell

    djsell

    Joined:
    Aug 29, 2013
    Posts:
    68
    Basically any custom shader is treated as if it were the same as Tiny's lit shader.

    This means you need only copy Tiny's lit shader to get started.

    It's located in Unity.Tiny.Rendering.Native/shadersrc~/simplelit.cg
    Copy Unity.Tiny.Rendering.Native/shadersrc~/common/simplelit.cginc to Assets/Shaders/common in your project and try this.

    Code (csharp):
    1. Shader "Custom/Normal"
    2. {
    3.     SubShader
    4.     {
    5.         Pass
    6.         {
    7.             CGPROGRAM
    8.             #pragma vertex vert
    9.             #pragma fragment frag
    10.  
    11.             #include "UnityCG.cginc"
    12.             #include "Assets/Shaders/common/simplelit.cginc"
    13.  
    14.             struct VertexInput
    15.             {
    16.                 float3 pos : POSITION;
    17.                 float2 texcoord : TEXCOORD0;
    18.                 float3 normal : NORMAL;
    19.                 float3 tangent : TANGENT;
    20.                 float3 billboardpos : TEXCOORD1;
    21.                 float4 color : COLOR;
    22.                 float2 metal_smoothness : TEXCOORD2;
    23.             };
    24.  
    25.             VertexOutput vert (VertexInput input)
    26.             {
    27.                 return LitVert(float4(input.pos, 1.0), input.texcoord, float4(input.normal, 1.0), input.tangent, input.billboardpos, input.color, input.metal_smoothness);
    28.             }
    29.  
    30.             float4 frag (VertexOutput input) : SV_Target
    31.             {
    32.                 return float4(input.normalVS, 1);
    33.                 // return LitFragColor(input);
    34.             }
    35.             ENDCG
    36.         }
    37.     }
    38. }
    39.  
    I get this in a wasm build:

    upload_2021-3-5_0-55-16.png
     
  3. Solal_

    Solal_

    Joined:
    Jan 13, 2019
    Posts:
    13
    Thank you for your answer! However, I'm now having issues with shader properties. I'm trying to display a simple color, it works fine in the editor but when I build in wasm my shader renders white. When I directly put the color value in the code without using properties it works fine.

    I would also like to know how to access and modify this property in my code.

    My Shader using the _BaseColor property
    Code (CSharp):
    1. Shader "Custom/Color"
    2. {
    3.     Properties
    4.     {
    5.         _BaseColor("Color", Color) = (1,1,1,1)
    6.     }
    7.  
    8.     SubShader
    9.     {
    10.         Pass
    11.         {
    12.             CGPROGRAM
    13.             #pragma vertex vert
    14.             #pragma fragment frag
    15.  
    16.             #include "UnityCG.cginc"
    17.             #include "Assets/Shaders/common/simplelit.cginc"
    18.  
    19.             struct VertexInput
    20.             {
    21.                 float3 pos : POSITION;
    22.                 float2 texcoord : TEXCOORD0;
    23.                 float3 normal : NORMAL;
    24.                 float3 tangent : TANGENT;
    25.                 float3 billboardpos : TEXCOORD1;
    26.                 float4 color : COLOR;
    27.                 float2 metal_smoothness : TEXCOORD2;
    28.             };
    29.  
    30.             VertexOutput vert(VertexInput input)
    31.             {
    32.                 VertexOutput output = LitVert(float4(input.pos, 1.0), input.texcoord, float4(input.normal, 1.0), input.tangent, input.billboardpos, input.color, input.metal_smoothness);
    33.                 return output;
    34.             }
    35.  
    36.             float4 _BaseColor;
    37.  
    38.             float4 frag(VertexOutput input) : SV_Target
    39.             {
    40.                 return _BaseColor;
    41.                 //return float4(1,0,0,1);
    42.             }
    43.             ENDCG
    44.         }
    45.     }
    46. }
    (wasm Build)
    upload_2021-3-9_11-37-13.png





    Same Shader without using the _BaseColor property :
    Code (CSharp):
    1. Shader "Custom/Color"
    2. {
    3.     Properties
    4.     {
    5.         _BaseColor("Color", Color) = (1,1,1,1)
    6.     }
    7.  
    8.     SubShader
    9.     {
    10.         Pass
    11.         {
    12.             CGPROGRAM
    13.             #pragma vertex vert
    14.             #pragma fragment frag
    15.  
    16.             #include "UnityCG.cginc"
    17.             #include "Assets/Shaders/common/simplelit.cginc"
    18.  
    19.             struct VertexInput
    20.             {
    21.                 float3 pos : POSITION;
    22.                 float2 texcoord : TEXCOORD0;
    23.                 float3 normal : NORMAL;
    24.                 float3 tangent : TANGENT;
    25.                 float3 billboardpos : TEXCOORD1;
    26.                 float4 color : COLOR;
    27.                 float2 metal_smoothness : TEXCOORD2;
    28.             };
    29.  
    30.             VertexOutput vert(VertexInput input)
    31.             {
    32.                 VertexOutput output = LitVert(float4(input.pos, 1.0), input.texcoord, float4(input.normal, 1.0), input.tangent, input.billboardpos, input.color, input.metal_smoothness);
    33.                 return output;
    34.             }
    35.  
    36.             float4 _BaseColor;
    37.  
    38.             float4 frag(VertexOutput input) : SV_Target
    39.             {
    40.                 //return _BaseColor;
    41.                 return float4(1,0,0,1);
    42.             }
    43.             ENDCG
    44.         }
    45.     }
    46. }
    (wasm Build)
    upload_2021-3-9_11-40-28.png
     
    aplusm, Horion64 and M4n0n like this.
  4. djsell

    djsell

    Joined:
    Aug 29, 2013
    Posts:
    68
    Sorry for the late reply. Been busy. Again, Tiny treats custom shaders EXACTLY is if they were Tiny's lit shader. This means you don't get to define new uniforms such as `float4 _BaseColor;` You have to use what is already part of Tiny lit shader.

    It does, however, try to look for certain properties from URP's lit material. This means you can use _BaseColor. It gets assigned to constAlbedo of the LitMaterial component, which you should be able to change at runtime or using _BaseColor material property. It ends up getting assigned to u_albedo_opacity in the shader.

    You can check out the conversion here as well as what properties are supported:
    Unity.Tiny.Rendering.Authoring/ConvertMaterial.cs

    This works for me in a wasm build:
    Code (csharp):
    1. Shader "Custom/Color"
    2. {
    3.     Properties
    4.     {
    5.         _BaseColor("Color", Color) = (1,1,1,1)
    6.     }
    7.  
    8.     SubShader
    9.     {
    10.         Pass
    11.         {
    12.             CGPROGRAM
    13.             #pragma vertex vert
    14.             #pragma fragment frag
    15.          
    16.             #include "UnityCG.cginc"
    17.             #include "Assets/Shaders/common/simplelit.cginc"
    18.          
    19.             struct VertexInput
    20.             {
    21.                 float3 pos : POSITION;
    22.                 float2 texcoord : TEXCOORD0;
    23.                 float3 normal : NORMAL;
    24.                 float3 tangent : TANGENT;
    25.                 float3 billboardpos : TEXCOORD1;
    26.                 float4 color : COLOR;
    27.                 float2 metal_smoothness : TEXCOORD2;
    28.             };
    29.          
    30.             VertexOutput vert(VertexInput input)
    31.             {
    32.                 VertexOutput output = LitVert(float4(input.pos, 1.0), input.texcoord, float4(input.normal, 1.0), input.tangent, input.billboardpos, input.color, input.metal_smoothness);
    33.                 return output;
    34.             }
    35.          
    36.             float4 frag(VertexOutput input) : SV_Target
    37.             {
    38.                 return u_albedo_opacity;
    39.             }
    40.             ENDCG
    41.         }
    42.     }
    43. }
     
    Horion64 and Solal_ like this.
  5. Solal_

    Solal_

    Joined:
    Jan 13, 2019
    Posts:
    13
    Thank you so much! I managed to do what I wanted!
    I hope Unity Tiny will soon support "real" custom shaders.
     
    Horion64 and djsell like this.
  6. Solal_

    Solal_

    Joined:
    Jan 13, 2019
    Posts:
    13
    Hello it's me again. I'm trying to use a material with an additive blend mode but when I build, it doesn't work even though the blending mod is still marked as additive in the Entity Material Component. I tried creating a custom shader but it doesn't work either. Any solution or ideas? Thanks.

    My Custom Shader :

    Code (CSharp):
    1. Shader "Custom/Sparkle"
    2. {
    3.     Properties
    4.     {
    5.         _BaseMap("Texture", 2D) = "white" {}
    6.         _Surface("Surface", Float) = 1.0
    7.     }
    8.  
    9.     SubShader
    10.     {
    11.         Blend One One
    12.  
    13.         Pass
    14.         {
    15.             CGPROGRAM
    16.             #pragma vertex vert
    17.             #pragma fragment frag
    18.  
    19.             #include "UnityCG.cginc"
    20.             #include "Assets/Shaders/common/simplelit.cginc"
    21.  
    22.             struct VertexInput
    23.             {
    24.                 float3 pos : POSITION;
    25.                 float2 texcoord : TEXCOORD0;
    26.                 float3 normal : NORMAL;
    27.                 float3 tangent : TANGENT;
    28.                 float3 billboardpos : TEXCOORD1;
    29.                 float4 color : COLOR;
    30.                 float2 metal_smoothness : TEXCOORD2;
    31.             };
    32.  
    33.             VertexOutput vert(VertexInput input)
    34.             {
    35.                 VertexOutput output = LitVert(float4(input.pos, 1.0), input.texcoord, float4(input.normal, 1.0), input.tangent, input.billboardpos, input.color, input.metal_smoothness);
    36.                 output.texcoord0_metal_smoothness = float4(input.texcoord, 0, 0);
    37.                 return output;
    38.             }
    39.  
    40.             sampler2D _BaseMap;
    41.  
    42.             float4 frag(VertexOutput input) : SV_Target
    43.             {
    44.                 float4 col = tex2D(_BaseMap, input.texcoord0_metal_smoothness.xy);
    45.  
    46.                 col.rgb *= col.a;
    47.  
    48.                 return col;
    49.             }
    50.             ENDCG
    51.         }
    52.     }
    53. }
    Screenshot in editor (additive blend mode):
    upload_2021-3-18_10-46-45.png

    Screenshot in build (additive becomes alpha blend mode):
    upload_2021-3-18_10-48-10.png
     
    Horion64 likes this.
  7. djsell

    djsell

    Joined:
    Aug 29, 2013
    Posts:
    68
    _Blend not Blend ?
     
  8. Solal_

    Solal_

    Joined:
    Jan 13, 2019
    Posts:
    13
    Sorry, I realy don't understand.
    What do I need to do?
     
  9. Solal_

    Solal_

    Joined:
    Jan 13, 2019
    Posts:
    13
    I would really like to know why even though the URP lit material blending mode is successfully stored inside the LitMaterial EntityComponent, the blending mode used in the build is still an alpha blending mode.
     
unityunity