3D SDF Capsule Shader

2024-06-02 15:14 UTC gpt-4o Open in ChatGPT ↗

You

I want to create a 3D raymarched SDF shader that displays elongated capsules contained inside a quad. The length of the quad will become the length of the capsule, and the width will become the diameter of the capsule

ChatGPT

Creating a 3D raymarched SDF (Signed Distance Field) shader to display elongated capsules contained within a quad involves several steps. Below is a guide to achieve this using GLSL (OpenGL Shading Language).

Step-by-Step Guide

1. Define the SDF for a Capsule:

   • An elongated capsule can be defined by combining a cylinder and two hemispheres at the ends.
   • The length of the quad will determine the length of the capsule, and the width will determine its diameter.

2. Raymarching Setup:

   • Raymarching involves casting rays from the camera and marching them through the scene until they hit an object or exceed a maximum distance.

3. Shader Implementation:

   Here’s an example GLSL shader code to achieve this:

#ifdef GL_ES
precision mediump float;
#endif

uniform

You

In Unity URP

ChatGPT

In Unity URP (Universal Render Pipeline), we can create a raymarched SDF shader using HLSL within a custom shader. Below is an example shader that demonstrates how to display elongated capsules contained inside a quad.

Unity Shader

1. Shader Setup:

   • Create a new shader file in Unity.
   • Define the SDF for a capsule.
   • Implement the raymarching algorithm.

2. HLSL Code:

   • This shader will use HLSL code embedded within the ShaderLab syntax.

Here’s the complete shader code:

Shader "Custom/RaymarchedCapsule"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _CapsuleLength ("Capsule Length", Float) = 1.0
        _CapsuleWidth ("Capsule Width", Float) = 0.2
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float _CapsuleLength;
            float _CapsuleWidth;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            float sdCapsule(float3 p, float3 a, float3 b, float r)
            {
                float3 pa = p - a, ba = b - a;
                float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
                return length(pa - ba * h) - r;
            }

            float map(float3 p)
            {
                float3 a = float3(-_CapsuleLength / 2.0, 0.0, 0.0);
                float3 b = float3(_CapsuleLength / 2.0, 0.0, 0.0);
                return sdCapsule(p, a, b, _CapsuleWidth / 2.0);
            }

            float3 getNormal(float3 p)
            {
                float d = 0.001;
                return normalize(float3(
                    map(p + float3(d, 0.0, 0.0)) - map(p - float3(d, 0.0, 0.0)),
                    map(p + float3(0.0, d, 0.0)) - map(p - float3(0.0, d, 0.0)),
                    map(p + float3(0.0, 0.0, d)) - map(p - float3(0.0, 0.0, d))
                ));
            }

            float rayMarch(float3 ro, float3 rd)
            {
                float dO = 0.0;
                for (int i = 0; i < 100; i++)
                {
                    float3 p = ro + rd * dO;
                    float dS = map(p);
                    if (dS < 0.001)
                        return dO;
                    dO += dS;
                    if (dO > 100.0)
                        break;
                }
                return 100.0;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                float2 uv = i.uv * 2.0 - 1.0;
                float3 ro = float3(0.0, 0.0, -3.0);
                float3 rd = normalize(float3(uv, 1.0));

                float d = rayMarch(ro, rd);
                float3 p = ro + rd * d;
                float3 normal = getNormal(p);
                float3 lightDir = normalize(float3(0.5, 1.0, 0.75));

                float diff = max(dot(normal, lightDir), 0.0);

                fixed4 col = diff * fixed4(1.0, 0.5, 0.2, 1.0);

                if (d > 50.0)
                    col = fixed4(0.0, 0.0, 0.0, 1.0);

                return col;
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}

Explanation:

1. Shader Properties:

   • _MainTex for the texture.
   • _CapsuleLength and _CapsuleWidth to define the dimensions of the capsule.

2. Vertex and Fragment Shaders:

   • vert function transforms the vertices.
   • frag function implements the raymarching algorithm.

3. SDF and Raymarching:

   • sdCapsule function computes the signed distance for an elongated capsule.
   • map function returns the distance field value for a point in space.
   • getNormal computes the normal at a point on the surface.
   • rayMarch performs the raymarching to find the intersection with the SDF.

4. Lighting:

   • Simple diffuse lighting based on the surface normal and a light direction.

Using the Shader

1. Create a Material:

   • Create a new material in Unity and assign this shader to it.

2. Apply to a Quad:

   • Create a quad in the scene and assign the material to it.

3. Adjust Parameters:

   • Adjust the capsule length and width through the material properties to see the effect.

This shader provides a basic framework to display elongated capsules within a quad using raymarched SDF. You can further enhance it by adding more advanced lighting, shadows, and optimizations.

You

Get the main light direction

ChatGPT

To get the main light direction in Unity and use it in your shader, you can pass the direction of the main light (typically the directional light in your scene) to the shader. Here’s how you can do it:

1. Create a Script to Pass the Light Direction:

   Create a C# script that will pass the main light direction to the shader.

   using UnityEngine;
   
   [ExecuteAlways]
   public class LightDirectionSetter : MonoBehaviour
   {
       public Light mainLight;
       private Material material;
   
       void Start()
       {
           Renderer renderer = GetComponent<Renderer>();
           if (renderer != null)
           {
               material = renderer.sharedMaterial;
           }
       }
   
       void Update()
       {
           if (mainLight != null && material != null)
           {
               Vector3 lightDirection = -mainLight.transform.forward;
               material.SetVector("_LightDirection", new Vector4(lightDirection.x, lightDirection.y, lightDirection.z, 0.0f));
           }
       }
   }

2. Attach the Script:

   Attach this script to the quad or any object that uses the shader.

3. Modify the Shader to Use the Light Direction:

   Modify the shader to accept the light direction as a uniform variable and use it in the fragment shader for lighting calculations.

   Shader "Custom/RaymarchedCapsule"
   {
       Properties
       {
           _MainTex ("Texture", 2D) = "white" {}
           _CapsuleLength ("Capsule Length", Float) = 1.0
           _CapsuleWidth ("Capsule Width", Float) = 0.2
       }
       SubShader
       {
           Tags { "RenderType"="Opaque" }
           LOD 200
   
           Pass
           {
               CGPROGRAM
               #pragma vertex vert
               #pragma fragment frag
               #include "UnityCG.cginc"
   
               struct appdata
               {
                   float4 vertex : POSITION;
                   float2 uv : TEXCOORD0;
               };
   
               struct v2f
               {
                   float2 uv : TEXCOORD0;
                   float4 vertex : SV_POSITION;
               };
   
               sampler2D _MainTex;
               float _CapsuleLength;
               float _CapsuleWidth;
               float4 _LightDirection;
   
               v2f vert (appdata v)
               {
                   v2f o;
                   o.vertex = UnityObjectToClipPos(v.vertex);
                   o.uv = v.uv;
                   return o;
               }
   
               float sdCapsule(float3 p, float3 a, float3 b, float r)
               {
                   float3 pa = p - a, ba = b - a;
                   float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
                   return length(pa - ba * h) - r;
               }
   
               float map(float3 p)
               {
                   float3 a = float3(-_CapsuleLength / 2.0, 0.0, 0.0);
                   float3 b = float3(_CapsuleLength / 2.0, 0.0, 0.0);
                   return sdCapsule(p, a, b, _CapsuleWidth / 2.0);
               }
   
               float3 getNormal(float3 p)
               {
                   float d = 0.001;
                   return normalize(float3(
                       map(p + float3(d, 0.0, 0.0)) - map(p - float3(d, 0.0, 0.0)),
                       map(p + float3(0.0, d, 0.0)) - map(p - float3(0.0, d, 0.0)),
                       map(p + float3(0.0, 0.0, d)) - map(p - float3(0.0, 0.0, d))
                   ));
               }
   
               float rayMarch(float3 ro, float3 rd)
               {
                   float dO = 0.0;
                   for (int i = 0; i < 100; i++)
                   {
                       float3 p = ro + rd * dO;
                       float dS = map(p);
                       if (dS < 0.001)
                           return dO;
                       dO += dS;
                       if (dO > 100.0)
                           break;
                   }
                   return 100.0;
               }
   
               fixed4 frag (v2f i) : SV_Target
               {
                   float2 uv = i.uv * 2.0 - 1.0;
                   float3 ro = float3(0.0, 0.0, -3.0);
                   float3 rd = normalize(float3(uv, 1.0));
   
                   float d = rayMarch(ro, rd);
                   float3 p = ro + rd * d;
                   float3 normal = getNormal(p);
                   float3 lightDir = normalize(_LightDirection.xyz);
   
                   float diff = max(dot(normal, lightDir), 0.0);
   
                   fixed4 col = diff * fixed4(1.0, 0.5, 0.2, 1.0);
   
                   if (d > 50.0)
                       col = fixed4(0.0, 0.0, 0.0, 1.0);
   
                   return col;
               }
               ENDCG
           }
       }
       FallBack "Diffuse"
   }

Explanation:

1. C# Script:

   • LightDirectionSetter script fetches the main light direction and sets it as a shader parameter.

2. Shader Modifications:

   • Added _LightDirection to the shader properties.
   • The fragment shader (frag) uses _LightDirection to compute lighting.

Using the Shader

1. Attach the Script:

   • Attach the LightDirectionSetter script to the object with the shader.
   • Assign the main directional light to the mainLight field in the script.

2. Adjust Parameters:

   • You can adjust the capsule length and width through the material properties to see the effect.

This will ensure that the shader receives the main light direction dynamically and uses it for lighting calculations.

You

make it world-space, so that even if I scale the object, the capsule doesnt deform

ChatGPT

To ensure that the capsule remains unaffected by the scaling of the object, you need to work in world space. This involves modifying the shader to perform calculations in world space and ensuring the raymarching and SDF computations are based on world coordinates. Below is the updated shader and C# script to achieve this.

Updated C# Script

Ensure the LightDirectionSetter script passes the world-space light direction to the shader.

using UnityEngine;

[ExecuteAlways]
public class LightDirectionSetter : MonoBehaviour
{
    public Light mainLight;
    private Material material;

    void Start()
    {
        Renderer renderer = GetComponent<Renderer>();
        if (renderer != null)
        {
            material = renderer.sharedMaterial;
        }
    }

    void Update()
    {
        if (mainLight != null && material != null)
        {
            Vector3 lightDirection = -mainLight.transform.forward;
            material.SetVector("_LightDirection", new Vector4(lightDirection.x, lightDirection.y, lightDirection.z, 0.0f));
        }
    }
}

Updated Shader

Modify the shader to work in world space:

Shader "Custom/RaymarchedCapsuleWorldSpace"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _CapsuleLength ("Capsule Length", Float) = 1.0
        _CapsuleWidth ("Capsule Width", Float) = 0.2
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
                float3 worldPos : TEXCOORD1;
            };

            sampler2D _MainTex;
            float _CapsuleLength;
            float _CapsuleWidth;
            float4 _LightDirection;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
                return o;
            }

            float sdCapsule(float3 p, float3 a, float3 b, float r)
            {
                float3 pa = p - a, ba = b - a;
                float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
                return length(pa - ba * h) - r;
            }

            float map(float3 p)
            {
                float3 a = float3(-_CapsuleLength / 2.0, 0.0, 0.0);
                float3 b = float3(_CapsuleLength / 2.0, 0.0, 0.0);
                return sdCapsule(p, a, b, _CapsuleWidth / 2.0);
            }

            float3 getNormal(float3 p)
            {
                float d = 0.001;
                return normalize(float3(
                    map(p + float3(d, 0.0, 0.0)) - map(p - float3(d, 0.0, 0.0)),
                    map(p + float3(0.0, d, 0.0)) - map(p - float3(0.0, d, 0.0)),
                    map(p + float3(0.0, 0.0, d)) - map(p - float3(0.0, 0.0, d))
                ));
            }

            float rayMarch(float3 ro, float3 rd)
            {
                float dO = 0.0;
                for (int i = 0; i < 100; i++)
                {
                    float3 p = ro + rd * dO;
                    float dS = map(p);
                    if (dS < 0.001)
                        return dO;
                    dO += dS;
                    if (dO > 100.0)
                        break;
                }
                return 100.0;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                float2 uv = i.uv * 2.0 - 1.0;
                float3 ro = i.worldPos;
                float3 rd = normalize(float3(uv, 1.0));

                float d = rayMarch(ro, rd);
                float3 p = ro + rd * d;
                float3 normal = getNormal(p);
                float3 lightDir = normalize(_LightDirection.xyz);

                float diff = max(dot(normal, lightDir), 0.0);

                fixed4 col = diff * fixed4(1.0, 0.5, 0.2, 1.0);

                if (d > 50.0)
                    col = fixed4(0.0, 0.0, 0.0, 1.0);

                return col;
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}

Explanation:

1. C# Script:

   • LightDirectionSetter script fetches the main light direction and sets it as a shader parameter.

2. Shader Modifications:

   • Added _LightDirection to the shader properties.
   • vert function now calculates the world position of each vertex and passes it to the fragment shader.
   • The fragment shader (frag) now performs raymarching in world space, ensuring that scaling of the object does not affect the capsule shape.

Using the Shader

1. Attach the Script:

   • Attach the LightDirectionSetter script to the object with the shader.
   • Assign the main directional light to the mainLight field in the script.

2. Adjust Parameters:

   • Adjust the capsule length and width through the material properties to see the effect.

By ensuring that the shader operates in world space, the capsule will not deform when the object is scaled.

You

add specular highlights and soft rim light

ChatGPT

To add specular highlights and a soft rim light to the shader, we can enhance the lighting calculations in the fragment shader. The specular highlights will add a shiny effect based on the view direction, and the rim light will give a soft glow around the edges of the capsule.

Here is the updated shader with these effects:

Shader "Custom/RaymarchedCapsuleWorldSpace"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _CapsuleLength ("Capsule Length", Float) = 1.0
        _CapsuleWidth ("Capsule Width", Float) = 0.2
        _SpecularColor ("Specular Color", Color) = (1.0, 1.0, 1.0, 1.0)
        _Shininess ("Shininess", Float) = 32.0
        _RimColor ("Rim Color", Color) = (0.5, 0.5, 0.5, 1.0)
        _RimPower ("Rim Power", Float) = 2.0
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
                float3 worldPos : TEXCOORD1;
            };

            sampler2D _MainTex;
            float _CapsuleLength;
            float _CapsuleWidth;
            float4 _LightDirection;
            float4 _SpecularColor;
            float _Shininess;
            float4 _RimColor;
            float _RimPower;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
                return o;
            }

            float sdCapsule(float3 p, float3 a, float3 b, float r)
            {
                float3 pa = p - a, ba = b - a;
                float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
                return length(pa - ba * h) - r;
            }

            float map(float3 p)
            {
                float3 a = float3(-_CapsuleLength / 2.0, 0.0, 0.0);
                float3 b = float3(_CapsuleLength / 2.0, 0.0, 0.0);
                return sdCapsule(p, a, b, _CapsuleWidth / 2.0);
            }

            float3 getNormal(float3 p)
            {
                float d = 0.001;
                return normalize(float3(
                    map(p + float3(d, 0.0, 0.0)) - map(p - float3(d, 0.0, 0.0)),
                    map(p + float3(0.0, d, 0.0)) - map(p - float3(0.0, d, 0.0)),
                    map(p + float3(0.0, 0.0, d)) - map(p - float3(0.0, 0.0, d))
                ));
            }

            float rayMarch(float3 ro, float3 rd)
            {
                float dO = 0.0;
                for (int i = 0; i < 100; i++)
                {
                    float3 p = ro + rd * dO;
                    float dS = map(p);
                    if (dS < 0.001)
                        return dO;
                    dO += dS;
                    if (dO > 100.0)
                        break;
                }
                return 100.0;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                float2 uv = i.uv * 2.0 - 1.0;
                float3 ro = i.worldPos;
                float3 rd = normalize(float3(uv, 1.0));

                float d = rayMarch(ro, rd);
                float3 p = ro + rd * d;
                float3 normal = getNormal(p);
                float3 lightDir = normalize(_LightDirection.xyz);
                float3 viewDir = normalize(ro - p);

                // Diffuse lighting
                float diff = max(dot(normal, lightDir), 0.0);

                // Specular lighting
                float3 reflectDir = reflect(-lightDir, normal);
                float spec = pow(max(dot(viewDir, reflectDir), 0.0), _Shininess);
                fixed4 specular = spec * _SpecularColor;

                // Rim lighting
                float rim = pow(1.0 - max(dot(viewDir, normal), 0.0), _RimPower);
                fixed4 rimLight = rim * _RimColor;

                // Combine lighting
                fixed4 col = diff * fixed4(1.0, 0.5, 0.2, 1.0) + specular + rimLight;

                if (d > 50.0)
                    col = fixed4(0.0, 0.0, 0.0, 1.0);

                return col;
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}

Explanation:

1. Shader Properties:

   • _SpecularColor and _Shininess for specular highlights.
   • _RimColor and _RimPower for rim lighting.

2. Fragment Shader:

   • viewDir is the direction from the surface point to the camera.
   • reflectDir is the reflection direction of the light.
   • spec is the specular intensity calculated using the Blinn-Phong model.
   • rim is the intensity of the rim light effect.
   • The final color col combines diffuse, specular, and rim lighting.

Using the Shader

1. Attach the Script:

   • Attach the LightDirectionSetter script to the object with the shader.
   • Assign the main directional light to the mainLight field in the script.

2. Adjust Parameters:

   • Adjust the capsule length and width through the material properties.
   • Adjust the specular color, shininess, rim color, and rim power to see the effects.

This shader now includes diffuse lighting, specular highlights, and a soft rim light, providing a more visually appealing result.