Alexander Ameye

Screen Space Cavity Shader

2025-10-16T00:00:00Z

Jump to heading Installation Guide

You can download Screen Space Cavity Shader from the Unity Asset Store.

https://assetstore.unity.com/screen-space-cavity

Jump to heading Installing, updating and removing the package

After having obtained a license, the Screen Space Cavity Shader package can be installed through Unity's package manager (Window > Package Manager).

To update, see https://docs.unity3d.com/Manual/upm-ui-update2.html.
To remove, see https://docs.unity3d.com/Manual/upm-ui-remove.html.

Jump to heading Checking for compatibility issues

To check for compatibility issues between Screen Space Cavity Shader and your project, open up the compatibility check window (Window > Screen Space Cavity > Compatibility).

Click on the Check Compatibility button and see if all checkmarks are green (pass) or white (informational). If not, you can click on any of them to see an explanation.

Jump to heading Using the Cavity Shader

After installation, you can simply start using the effect by adding the Screen Space Cavity Renderer Feature to your active Renderer. Not sure what your active Renderer is? Check Edit > Project Settings > Graphics and you will see the Default Render Pipeline there. This Pipeline Asset has a Renderer of type Universal Renderer Data assigned to it within the Renderer List. You need to add the Screen Space Cavity Renderer Feature to the Renderer Features list of that Renderer.

Jump to heading Settings

The Screen Space Cavity Renderer Feature has the following settings:

Rendering

Injection Point**: Controls when the render pass executes.
Show In Scene View: Sets whether to render the pass in the scene view.
Debug: Show the calculated cavity as a debug view (R: ridges, G: valleys, B: cavity).

Selective Application

Enable: Only selectively apply the cavity effect to specific mesh renderers in the scene.
Rendering Layer: Only mesh renderers on this rendering layer will be influenced by the cavity effect.
Layer Mask: Only gameobjects on this layer will be influenced by the cavity effect.
Queue: Only gameobjects using this render queue will be influenced by the cavity effect.

Curvature

Enable: Enable curvature effect.
Width: The width that the curvature calculation takes into account.
Ridge Strength: How strongly ridges should be shown.
Valley Strength: How strongly valleys should be shown.

Cavity

Enable: Enable cavity effect
Samples: How many samples are used to calculate cavity. More samples means more performance intensive.
Softness: How soft the cavity effect should look.
Contrast: A contrast modifier to limit.
Cavity Strength: Controls when the render pass executes.

Fade

Fade By Distance: Fade the edges by distance.
Fade By Height: Fade the edges by height.
Start (meters): The distance/height from which to start fading the edges.
Distance (meters): The distance/height over which the edges are faded.

Jump to heading Changelog

Jump to heading [1.0.0] - 2025-10-22

Initial Release.

Jump to heading Contact

Need help? Contact me at alexanderameye@gmail.com.

The easiest way to render an outline in Unity

2025-06-17T00:00:00Z

Jump to heading Introduction

When using the Unity game engine, most developers will at some point want to render an outline. I wanted to share the easiest way to render an outline (that I know of) that produces decent results.

This method I will share requires no knowledge about custom render passes. There is no custom C# code, just existing Unity features and a single outline shader.

🖍️ Looking for an advanced outline rendering toolkit for your game? Check out Linework which I have lovingly developed!

Jump to heading How does it work?

The outline will work like this:

Render the object (that we want to outline) using a stencil mask
Render the object again but extruded (made bigger), and draw it only where the stencil mask is not present
No step 3, you are done!

You can do this in Unity right now, without writing any code other than the simple outline shader.

Jump to heading Step by step

To render our outline we will use 2 Render Objects passes which are pre-made render passes made by Unity which you can simply add to your Renderer Features list on your Render Pipeline Asset.

Jump to heading 1. Outline Shader + Material

First, we will create an outline shader + material. Use the following shader and make an outline material from it.

This shader simply extrudes the vertices of a mesh in the vertex stage of the shader. How far the vertices are extruded controls the width of the outline.

The fragment stage returns a single flat color (the outline color).

Shader "Unlit/Fast Outline"
{
    Properties
    {
        _OutlineColor ("Outline Color", Color) = (0,1,0,1)
        _OutlineWidth ("Outline Width", Range (0, 10)) = 0.5
    }

    SubShader
    {
        Tags
        {
            "RenderType" = "Opaque"
            "RenderPipeline" = "UniversalPipeline"
        }

        ZWrite Off
        Cull Off
        ZTest LEqual
        Blend SrcAlpha OneMinusSrcAlpha

        HLSLINCLUDE
        #pragma fragment frag

        #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"

        CBUFFER_START(UnityPerMaterial)
            half4 _OutlineColor;
            half _OutlineWidth;
        CBUFFER_END

        struct Attributes
        {
            float4 positionOS : POSITION;
            half3 normalOS : NORMAL;
            UNITY_VERTEX_INPUT_INSTANCE_ID
        };

        struct Varyings
        {
            float4 positionHCS : SV_POSITION;
            UNITY_VERTEX_OUTPUT_STEREO
        };

        half4 frag(Varyings IN) : SV_Target
        {
            return _OutlineColor;
        }
        ENDHLSL

        Pass
        {
            Name "NORMAL VECTOR (CLIP SPACE)"

            HLSLPROGRAM
            #pragma vertex vert

            Varyings vert(Attributes IN)
            {
                Varyings OUT;
                UNITY_SETUP_INSTANCE_ID(IN);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);

                half width = _OutlineWidth;

                OUT.positionHCS = TransformObjectToHClip(IN.positionOS.xyz);

                float3 normalHCS = mul((float3x3)UNITY_MATRIX_VP, mul((float3x3)UNITY_MATRIX_M, IN.normalOS));
                OUT.positionHCS.xy += normalize(normalHCS.xy) / _ScreenParams.xy * OUT.positionHCS.w * width * 2;

                return OUT;
            }
            ENDHLSL
        }
    }
}

If you would like more information on how this outline shader works exactly, you can read 5 ways to draw an outline.

Jump to heading 2. Stencil Pass

We will use a first pass to render the object with a stencil mask. This pass has the following settings.

The Layer Mask set to Everything
The Stencil Options set to Ref 1, Comp Always, Pass Replace

Simply said, this renders the objects with a stencil mask.

💡 I am using the Universal Render Pipeline. You'll need to use this for the Render Objects pass to be available.

Jump to heading 3. Outline Pass

We will use a second pass to render the outline. This pass has the following settings.

The Layer Mask set to Everything (matching with the first pass)
The Override Material set to our outline material we created in step 1
The Depth Test set to Less Equal
The Stencil Options set to Ref 1, Comp Not Equal, Pass Keep

Simply said, this renders the extruded version of the objects except where the stencil mask is present. Doing this produces the outline.

Jump to heading What now

You have an outline! Congratulations!

Some considerations:

Jump to heading Layer Masks

You can use the Layer Mask option to configure which objects receive an outline. You can at runtime change the layer of an object to add/remove outlines.

Jump to heading Other Outline Techniques

This outline is rendered using the vertex extrusion technique. There are many other possible techniques, each with their own drawbacks and advantages. Read 5 ways to draw an outline for an overview.

Jump to heading Custom Renderer Feature

You could make a custom Renderer Feature that is specifically made for rendering outlines like this. This would work similarly to the Render Objects pass (made by Unity), but you will only need to add a single pass in this case. See this documentation on how to start with this.

Jump to heading Rendering Layers

The Render Objects pass has a Layer Mask option. This can be used to only apply outlines selectively to specific objects. However, Unity also has Rendering Layers which are better suited for this. If you make a custom pass, you can add support for these.

Jump to heading Single Pass

Instead of using a stencil mask, you could remove the first pass and change your shader from Cull Off to Cull Front. This will cull the front-facing triangles of your extruded mesh and might be acceptable for your use case.

Edge Detection Outlines

2024-12-01T00:00:00Z

💡 This tutorial is made for Unity 6 or Unity 2022.3+ and the Universal Render Pipeline.

Jump to heading Introduction

Edge detection outlines have been commonly used in multiple games over the past years. They add a comic-book-like style to the scene which many game developers are after.

Mars First Logistics.

Rollerdrome.

In this tutorial, I will show you how to set up an edge detection shader in Unity 6 and Unity 2022.

🖍️ Interested in an outline rendering toolkit for Unity? Check out Linework!

Jump to heading Full-Screen Render Pass

Our edge detection shader will need to affect the whole screen. For this, we will first make a full-screen render pass. In Unity 6, we can make use of the new render graph API. Make a new C# script called EdgeDetection.cs

I won't go over every line of code, but the full-screen render pass performs these steps:

The AddRenderPasses method creates the edge detection material, sets up the render pass and passes it to the ScriptableRenderer using EnqueuePass.

The Setup method passes the edge detection settings to the edge detection material

The RecordRenderGraph method contains the actual render pass. We do a blit using the edge detection material.

You can find the complete code below for either Unity 2022 or Unity 6.

Unity 2022

using System;
using UnityEngine;
using UnityEngine.Rendering;
using UnityEngine.Rendering.Universal;

public class EdgeDetection : ScriptableRendererFeature
{
    private class EdgeDetectionPass : ScriptableRenderPass
    {
        private Material material;

        private static readonly int OutlineThicknessProperty = Shader.PropertyToID("_OutlineThickness");
        private static readonly int OutlineColorProperty = Shader.PropertyToID("_OutlineColor");

        public EdgeDetectionPass()
        {
            profilingSampler = new ProfilingSampler(nameof(EdgeDetectionPass));
        }

        public void Setup(ref EdgeDetectionSettings settings, ref Material edgeDetectionMaterial)
        {
            material = edgeDetectionMaterial;
            renderPassEvent = settings.renderPassEvent;

            material.SetFloat(OutlineThicknessProperty, settings.outlineThickness);
            material.SetColor(OutlineColorProperty, settings.outlineColor);
        }
        
        public override void Execute(ScriptableRenderContext context, ref RenderingData renderingData)
        {
            var outlineCmd = CommandBufferPool.Get();

            using (new ProfilingScope(outlineCmd, profilingSampler))
            {
                CoreUtils.SetRenderTarget(outlineCmd, renderingData.cameraData.renderer.cameraColorTargetHandle);
                context.ExecuteCommandBuffer(outlineCmd);
                outlineCmd.Clear();
                   
                Blitter.BlitTexture(outlineCmd, Vector2.one, material, 0);
            }

            context.ExecuteCommandBuffer(outlineCmd);
            CommandBufferPool.Release(outlineCmd);
        }
        
        public override void OnCameraCleanup(CommandBuffer cmd)
        {
            if (cmd == null)
            {
                throw new ArgumentNullException(nameof(cmd));
            }
        }
    }

    [Serializable]
    public class EdgeDetectionSettings
    {
        public RenderPassEvent renderPassEvent = RenderPassEvent.AfterRenderingTransparents;
        [Range(0, 15)] public int outlineThickness = 3;
        public Color outlineColor = Color.black;
    }

    [SerializeField] private EdgeDetectionSettings settings;
    private Material edgeDetectionMaterial;
    private EdgeDetectionPass edgeDetectionPass;

    /// <summary>
    /// Called
    /// - When the Scriptable Renderer Feature loads the first time.
    /// - When you enable or disable the Scriptable Renderer Feature.
    /// - When you change a property in the Inspector window of the Renderer Feature.
    /// </summary>
    public override void Create()
    {
        edgeDetectionPass ??= new EdgeDetectionPass();
    }

    /// <summary>
    /// Called
    /// - Every frame, once for each camera.
    /// </summary>
    public override void AddRenderPasses(ScriptableRenderer renderer, ref RenderingData renderingData)
    {
        // Don't render for some views.
        if (renderingData.cameraData.cameraType is CameraType.Preview or CameraType.Reflection) return;
        
        if (edgeDetectionMaterial == null)
        {
            edgeDetectionMaterial = CoreUtils.CreateEngineMaterial(Shader.Find("Hidden/Edge Detection"));
            if (edgeDetectionMaterial == null)
            {
                Debug.LogWarning("Not all required materials could be created. Edge Detection will not render.");
                return;
            }
        }

        edgeDetectionPass.ConfigureInput(ScriptableRenderPassInput.Depth | ScriptableRenderPassInput.Normal | ScriptableRenderPassInput.Color);
        edgeDetectionPass.Setup(ref settings, ref edgeDetectionMaterial);

        renderer.EnqueuePass(edgeDetectionPass);
    }

    /// <summary>
    /// Clean up resources allocated to the Scriptable Renderer Feature such as materials.
    /// </summary>
    override protected void Dispose(bool disposing)
    {
        edgeDetectionPass = null;
        CoreUtils.Destroy(edgeDetectionMaterial);
    }
}

Unity 6

using System;
using UnityEngine;
using UnityEngine.Rendering;
using UnityEngine.Rendering.RenderGraphModule;
using UnityEngine.Rendering.Universal;

public class EdgeDetection : ScriptableRendererFeature
{
    private class EdgeDetectionPass : ScriptableRenderPass
    {
        private Material material;

        private static readonly int OutlineThicknessProperty = Shader.PropertyToID("_OutlineThickness");
        private static readonly int OutlineColorProperty = Shader.PropertyToID("_OutlineColor");

        public EdgeDetectionPass()
        {
            profilingSampler = new ProfilingSampler(nameof(EdgeDetectionPass));
        }

        public void Setup(ref EdgeDetectionSettings settings, ref Material edgeDetectionMaterial)
        {
            material = edgeDetectionMaterial;
            renderPassEvent = settings.renderPassEvent;

            material.SetFloat(OutlineThicknessProperty, settings.outlineThickness);
            material.SetColor(OutlineColorProperty, settings.outlineColor);
        }

        private class PassData
        {
        }

        public override void RecordRenderGraph(RenderGraph renderGraph, ContextContainer frameData)
        {
            var resourceData = frameData.Get<UniversalResourceData>();

            using var builder = renderGraph.AddRasterRenderPass<PassData>("Edge Detection", out _);

            builder.SetRenderAttachment(resourceData.activeColorTexture, 0);
            builder.UseAllGlobalTextures(true);
            builder.AllowPassCulling(false);
            builder.SetRenderFunc((PassData _, RasterGraphContext context) => { Blitter.BlitTexture(context.cmd, Vector2.one, material, 0); });
        }
    }

    [Serializable]
    public class EdgeDetectionSettings
    {
        public RenderPassEvent renderPassEvent = RenderPassEvent.AfterRenderingTransparents;
        [Range(0, 15)] public int outlineThickness = 3;
        public Color outlineColor = Color.black;
    }

    [SerializeField] private EdgeDetectionSettings settings;
    private Material edgeDetectionMaterial;
    private EdgeDetectionPass edgeDetectionPass;

    /// <summary>
    /// Called
    /// - When the Scriptable Renderer Feature loads the first time.
    /// - When you enable or disable the Scriptable Renderer Feature.
    /// - When you change a property in the Inspector window of the Renderer Feature.
    /// </summary>
    public override void Create()
    {
        edgeDetectionPass ??= new EdgeDetectionPass();
    }

    /// <summary>
    /// Called
    /// - Every frame, once for each camera.
    /// </summary>
    public override void AddRenderPasses(ScriptableRenderer renderer, ref RenderingData renderingData)
    {
        // Don't render for some views.
        if (renderingData.cameraData.cameraType == CameraType.Preview
            || renderingData.cameraData.cameraType == CameraType.Reflection
            || UniversalRenderer.IsOffscreenDepthTexture(ref renderingData.cameraData))
            return;
        
        if (edgeDetectionMaterial == null)
        {
            edgeDetectionMaterial = CoreUtils.CreateEngineMaterial(Shader.Find("Hidden/Edge Detection"));
            if (edgeDetectionMaterial == null)
            {
                Debug.LogWarning("Not all required materials could be created. Edge Detection will not render.");
                return;
            }
        }

        edgeDetectionPass.ConfigureInput(ScriptableRenderPassInput.Depth | ScriptableRenderPassInput.Normal | ScriptableRenderPassInput.Color);
        edgeDetectionPass.requiresIntermediateTexture = true;
        edgeDetectionPass.Setup(ref settings, ref edgeDetectionMaterial);

        renderer.EnqueuePass(edgeDetectionPass);
    }

    /// <summary>
    /// Clean up resources allocated to the Scriptable Renderer Feature such as materials.
    /// </summary>
    override protected void Dispose(bool disposing)
    {
        edgeDetectionPass = null;
        CoreUtils.Destroy(edgeDetectionMaterial);
    }
}

Now in our Universal Renderer Data asset we can add the Full Screen Edge Detection renderer feature.

Jump to heading Edge Detection Shader

Now let's make the edge detection shader! Start by making a new shader. You can do this by going Create > Shader > Unlit Shader in your project window.

Jump to heading Discontinuities

An edge detection shader works by looking at discontinuities in the scene. Where a discontinuity is great enough, an edge can be drawn.

Color: Let's say our shader sees the image on the left and we want to draw an edge. We could simply detect if there is a sudden color discontinuity, and if that is the case, draw an edge.
Normals: Now let's say our shader sees the image in the middle. In this case, the 2 edges of the cube are blue and so not color discontinuity can be found. Instead, we will look at the orientation of the edge (the normal vector).
Depth: If our shader sees the image on the right where the cube has the same color as the background, we cannot rely on color or orientation. Instead, we will look at the depth difference in the scene since the background is much farther than the cube.

The solution to creating an effective edge detection shader that will work for all geometry and colors, is to take into account color, normal vector and depth discontinuities.

Jump to heading Edge Detection

The edge detection shader will look at the scene color, depth and normals, and check for edges using an edge detection kernel. We will use the Roberts cross operator which computes an edge based on the differences between diagonally adjacent pixels. For each pixel in the scene, we take 4 corner samples and compute the edge.

See the comments in the shader to see what each part does.

❗ Make sure to keep the Hidden/Edge Detection name of the shader since the full-screen render pass refers to this name.

Shader "Hidden/Edge Detection"
{
    Properties
    {
        _OutlineThickness ("Outline Thickness", Float) = 1
        _OutlineColor ("Outline Color", Color) = (0, 0, 0, 1)
    }

    SubShader
    {
        Tags
        {
            "RenderPipeline" = "UniversalPipeline"
            "RenderType"="Opaque"
        }

        ZWrite Off
        Cull Off
        Blend SrcAlpha OneMinusSrcAlpha

        Pass 
        {
            Name "EDGE DETECTION OUTLINE"
            
            HLSLPROGRAM
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
            #include "Packages/com.unity.render-pipelines.core/Runtime/Utilities/Blit.hlsl"
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareDepthTexture.hlsl" // needed to sample scene depth
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareNormalsTexture.hlsl" // needed to sample scene normals
            #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/DeclareOpaqueTexture.hlsl" // needed to sample scene color/luminance

            float _OutlineThickness;
            float4 _OutlineColor;

            #pragma vertex Vert // vertex shader is provided by the Blit.hlsl include
            #pragma fragment frag

            // Edge detection kernel that works by taking the sum of the squares of the differences between diagonally adjacent pixels (Roberts Cross).
            float RobertsCross(float3 samples[4])
            {
                const float3 difference_1 = samples[1] - samples[2];
                const float3 difference_2 = samples[0] - samples[3];
                return sqrt(dot(difference_1, difference_1) + dot(difference_2, difference_2));
            }

            // The same kernel logic as above, but for a single-value instead of a vector3.
            float RobertsCross(float samples[4])
            {
                const float difference_1 = samples[1] - samples[2];
                const float difference_2 = samples[0] - samples[3];
                return sqrt(difference_1 * difference_1 + difference_2 * difference_2);
            }
            
            // Helper function to sample scene normals remapped from [-1, 1] range to [0, 1].
            float3 SampleSceneNormalsRemapped(float2 uv)
            {
                return SampleSceneNormals(uv) * 0.5 + 0.5;
            }

            // Helper function to sample scene luminance.
            float SampleSceneLuminance(float2 uv)
            {
                float3 color = SampleSceneColor(uv);
                return color.r * 0.3 + color.g * 0.59 + color.b * 0.11;
            }

            half4 frag(Varyings IN) : SV_TARGET
            {
                // Screen-space coordinates which we will use to sample.
                float2 uv = IN.texcoord;
                float2 texel_size = float2(1.0 / _ScreenParams.x, 1.0 / _ScreenParams.y);
                
                // Generate 4 diagonally placed samples.
                const float half_width_f = floor(_OutlineThickness * 0.5);
                const float half_width_c = ceil(_OutlineThickness * 0.5);

                float2 uvs[4];
                uvs[0] = uv + texel_size * float2(half_width_f, half_width_c) * float2(-1, 1);  // top left
                uvs[1] = uv + texel_size * float2(half_width_c, half_width_c) * float2(1, 1);   // top right
                uvs[2] = uv + texel_size * float2(half_width_f, half_width_f) * float2(-1, -1); // bottom left
                uvs[3] = uv + texel_size * float2(half_width_c, half_width_f) * float2(1, -1);  // bottom right
                
                float3 normal_samples[4];
                float depth_samples[4], luminance_samples[4];
                
                for (int i = 0; i < 4; i++) {
                    depth_samples[i] = SampleSceneDepth(uvs[i]);
                    normal_samples[i] = SampleSceneNormalsRemapped(uvs[i]);
                    luminance_samples[i] = SampleSceneLuminance(uvs[i]);
                }
                
                // Apply edge detection kernel on the samples to compute edges.
                float edge_depth = RobertsCross(depth_samples);
                float edge_normal = RobertsCross(normal_samples);
                float edge_luminance = RobertsCross(luminance_samples);
                
                // Threshold the edges (discontinuity must be above certain threshold to be counted as an edge). The sensitivities are hardcoded here.
                float depth_threshold = 1 / 200.0f;
                edge_depth = edge_depth > depth_threshold ? 1 : 0;
                
                float normal_threshold = 1 / 4.0f;
                edge_normal = edge_normal > normal_threshold ? 1 : 0;
                
                float luminance_threshold = 1 / 0.5f;
                edge_luminance = edge_luminance > luminance_threshold ? 1 : 0;
                
                // Combine the edges from depth/normals/luminance using the max operator.
                float edge = max(edge_depth, max(edge_normal, edge_luminance));
                
                // Color the edge with a custom color.
                return edge * _OutlineColor;
            }
            ENDHLSL
        }
    }
}

And that's it! You should now see an outline in your scene and be able to control the outline settings through the outline material inspector.

Jump to heading Next Steps

There you go! A very basic edge detection shader in Unity but a great starting point to build upon. You can go ahead and add many features to this shader. Some ideas:

Instead of hardcoding the depth/normals/color sensitivities in the shader, pass them as settings just like the color and thickness. This will allow you to better configure the edge detection shader.
Implement some of the techniques in the Roystan outline tutorial linked below to get rid of some artifacts for sharp surface angles.
Use the depth of the scene to fade out edges towards the distance.

If you're interested in outline rendering, please check out Linework, an outline rendering toolkit I made for Unity. It contains an advanced edge detection shader as well as 3 other outline types for rendering per-object outlines.

Jump to heading Additional Resources

Linework - A Practical Toolkit for Rendering Outlines

https://roystan.net/articles/outline-shader/

https://www.alanzucconi.com/2022/04/19/edge-detection/

A cursor for augmented reality

2023-09-05T00:00:00Z

Jump to heading Introduction

A few years ago I was working on a mobile augmented reality application where users were able to use their phone to place objects within the environment. To help them with this, there was a 3D reticle visible on the screen that reacted to the environment.

There are several key components that needed to be brought together to create a smooth experience. I will go over each of these techniques, and explain what they add to the final effect.

Jump to heading Hit testing

In augmented reality, you can point at your surroundings and the AR system on your phone (ARKit or ARCore depending on your operating system) will figure out the 3D position of the point you are aiming at.

It does this by casting a virtual ray outwards from the screen of the phone, onto the environment. The position where the ray hits the environment, is called the hit point.

AR raycasting.

In Unity, we can use ARRaycastManager together with ARRaycastHit to retrieve a hit every frame and determine the position of the cursor.

// Determining the target position of the cursor in 3D space.
Pose targetPose = ARHitProvider.hit.pose;
Vector3 targetPosition = targetPose.position;

Jump to heading Cursor movement

While the user moves around, the raycast of the AR system is also updated and so is the hit point (intersection with the environment). The cursor should move corresponding with this hit point.

Jump to heading Movement smoothing

If we would directly set the position of the cursor to the position of the hit point, the movement would appear very jittery. To fix this, we smooth the movement using Vector3.MoveTowards in Unity. The code is as follows:

// Coroutine that moves the cursor.
IEnumerator MoveCursor(Vector3 destination)
{
    // Calculate the distance between the current cursor position and the target position.
    float distance = (destination - cursor.transform.position).magnitude;
    while (distance > 0)
    {
        // Control the movement step (you can control the smoothing here).
        float step = distance * Time.deltaTime / 0.2f;

        // Smoothly move the cursor.
        cursor.transform.position = Vector3.MoveTowards(cursor.transform.position, destination, step);

        // Update the distance.
        distance = (destination - cursor.transform.position).magnitude;
        yield return null;
    }
}

Jump to heading Movement threshold

While operating the phone, the user will often move in a noisy manner. There are always tiny vibrations and movements that we make when moving around. If the cursor would follow this movement 1:1 then the cursor movement would also be noisy and jittery.

To avoid this, we only move the cursor once a certain threshold has been reached. Every frame, we calculate the desired target position of the cursor and compare it with the actual cursor position. If the difference between the current position and the target position is above a certain movement threshold, only then do we move the cursor. The code looks as follows:

targetPose = hitProvider.hit.pose;
float distanceFromTarget = (targetPose.position - currentCursorPosition).magnitude;

if (distanceFromTarget >= movementThreshold) {
    // move the cursor
}

Jump to heading Cursor visibility

In order to not overload the user with information, we only make the cursor visible in contexts where the user should actually be able to place objects. There are 3 checks that we perform to determine whether or not we should show the cursor.

Jump to heading 1. Feature count check

Firstly, we check if the AR system has detected enough feature points in the environment. Since the AR system requires environmental features to detect a surface to be able to accurately place an object, we only want to show the cursor when the environment is being accurately tracked.

We compare the feature count with a threshold and if the feature count is too low, we hide the cursor,

if (PointCloudProvider.FeatureCount < featureThreshold) DisableCursor();
else ShowCursor();

To get the number of feature points, we use Unity's AR Point Cloud Manager.

Jump to heading 2. Point cloud update check

While moving around, the AR system updates the point cloud of features that is generated for the environment. If it has been too long since the last update of this point cloud, it means that the environment is no longer being accurately tracked.

If the last update has been too long ago we hide the cursor.

if (Time.time - pointCloudProvider.LastPointCloudUpdate > timeOutThreshold) DisableCursor();
else ShowCursor();

Just like for the feature count, we use Unity's AR Point Cloud Manager to get the last point cloud update time.

Jump to heading 3. Distance check

Lastly, if the user points far into the distance, they should not be able to place objects since either:

the distant surface is not accurately tracked
the placed object would be too small

Because of this, we only display the cursor if phone is pointing to point that is in the near vicinity of the user. We check the distance between the hit point and the position of the camera. If this distance is too great, we do not show the cursor.

float distanceFromCamera = Vector3.Distance(targetPose.position, mainCamera.transform.position);
if (distanceFromCamera > distanceThreshold) DisableCursor();
else ShowCursor();

If we would leave the code like this, we would get very jittery behaviour right near the edge of the distance threshold. The distance check will constantly switch between evaluating to true.false and as a result, the cursor will flicker on and off.

A neat way to combat this, is to make use of a Hysteresis function. In short, this function enables use to have a different threshold, based on the direction (going out of distance to within distance vs going within distance to out of distance). This will completely avoid the flickering effect and give a smooth result.

In code it looks like this:

if (withinDistance == false && distanceFromCamera > (distanceThreshold - distanceHysteresis * 0.5)) DisableCursor();
else if (withinDistance == true && distanceFromCamera > (distanceThreshold + distanceHysteresis * 0.5))
{
    withinDistance = false;
    EnableCursor();
}
else
{
    withinDistance = true;
    EnableCursor();
}

Jump to heading Object placement

When the users clicks the placement button, the cursor plays a short feedback animation. This is a sample scale-in-scale-out during a period of 300 milliseconds.

For this effect, I use the DOTween tweening package for Unity. You could of course use any tweening library. The code looks as follows:

DOTween.Sequence()
    .Append(cursor.transform.DOScale(0.5f, 0.1f))
    .Append(cursor.transform.DOScale(1f, 0.2f));

Jump to heading Conclusion

The final result is a smooth 3D cursor that can be used in AR applications. The movement is smooth and there is no jitter at all. The cursor only appears when needed and provides the user with appropriate feedback.

The code can be found below. I just lifted it from my project and so you will probably not be able to just copy-paste it, but the important ideas are there.

Render adventures 2: progress!

2023-07-20T00:00:00Z

Jump to heading In the last episode of ...

In my previous post, I talked about how I created a physically-based CPU path tracer in Rust from scratch. It was a good start, but one of the limiting factors while developing it was iteration speed. Each time I modified the scene or changed some parameters, I had to wait a few seconds or minutes for it to generate a result and then look at the image file it generated.

From what I've seen, all the serious renderers have some sort of interactive viewport. This feature is something I really wanted to implement in my renderer and so I finally took the plunge.

Jump to heading I have the power of wgpu and winit on my side

I figured that to get a realtime, progressive viewport going on, I needed to have some windowed application and have that render a texture that gets updated in realtime. The path tracer would then continuously render its output to this texture.

After a bit of investigating I landed on using wgpu-rs for the rendering.

💡 wgpu-rs is a graphics API written in Rust that provides an interface to the WebGPU API

For the windowing itself, I used winit. It was fairly easy (with some tutorials) to get a basic window going and render (boring) pixels to the screen.

Rendering a window using wgpu and winit.

Jump to heading Continuous texture updates

This is where the real fun began. It took me a while to figure out how I could efficiently and continuously update the buffer that I was rendering to the screen. Ultimately, I got it working by using Queue.write_texture to schedule a write of some data into a texture every frame. The input for this data was of type Vec<u8>.

let width = 100;
let height = 100;
let mut buffer = vec![0u8; width * height * 4];

self.queue.write_texture(
    self.output_texture.as_image_copy(),
    &buffer,
    ImageDataLayout {
        offset: 0,
        bytes_per_row: Some(4 * dimensions.0),
        rows_per_image: Some(dimensions.1)
    }
    // ...
);

I am note sure about the performance of doing this every frame, and maybe there is a better way to do this. However, since the documentation had this to say:

📖 This method is intended to have low performance costs. As such, the write is not immediately submitted, and instead enqueued internally to happen at the start of the next submit() call.

I figured that this was a good starting point, and it looks smooth enough. Here you can see me continuously updating the frame buffer using queue.write_texture.

Jump to heading Async adventures

Now that I could continuously update the frame buffer, the next step was to link it up to the path tracer I had already made in the previous post. The plan was as follows.

Spawn a new thread and let the path tracer render into a Vec<f32> buffer

Let the wgpu-side pull data from this buffer every frame

Update the output texture using this data

The challenge here is that the path-traced rendering calculation should happen on a different thread than rendering the realtime progressive view. This would allow the CPU path tracer to do its thing independently of the GPU viewer, which pulls data from the CPU-generated buffer.

To make this work, I make use of Rust's RwLock and apply it to a target buffer. The documentation has the following to say.

📖 This type of lock allows a number of readers or at most one writer at any point in time.

The code looks roughly like this.

let handle = thread::spawn(move || {
    let mut sample = 0;
    let total_samples = settings.total_samples;

    while sample < total_samples {
        buffer.
            .par_chunks_exact_mut(4)
            .enumerate()
            .for_each(|(index, pixel)| {
                let mut radiance = Vec3::zero();
                let view_ray = camera.generate_view_ray();
                radiance = integrator.integrate(view_ray);

                // accumulate radiance
                pixel.r += radiance.x;
                pixel.g += radiance.y;
                pixel.b += radiance.z;
            });
            sample += 1;
            render_target.try_push();
    }
});

Jump to heading Next steps

Now that I have a windowed application where I can see the progressively updated output of the path tracer, I can get back to working on the path tracer itself.

I really want to turn this project into a more complete renderer with an interface, path tracing on the CPU + GPU and many other features. The next steps will be to clean up much of the code, and to add a testing framework to verify the correctness of my path tracer. I will document my progress through these blog posts.

Jump to heading Additional Resources

Jump to heading wgpu

https://sotrh.github.io/learn-wgpu/

How this site works

2023-07-19T00:00:00Z

Jump to heading How this site works

Over the years, I've reworked this site multiple times. Some of the technologies I have used have changed over the years, but this is the current stack.

📄 github-pages for free hosting

⚙️ 11ty for static site generation

🐐 goatcounter for lightweight analytics

💎 giscus for comments

📐 katex for math rendering

🫶 vanilla html and css for all the rest

🚀 github-actions for CI/CD

(last updated July 2023)

Circular menus in the Unity Editor

2023-04-28T00:00:00Z

Jump to heading Introduction

This weekend I was working in Blender and noticed their easy to use circular menu. By pressing a button, the menu appears and then by pointing your mouse in a direction, you can select one of the options.

Pie menu in Blender.

Using UI Toolkit and the new Vector API I added a circular menu to the Unity Editor. I hooked it up to my scene view debug views which allows me to quickly switch between views.

The circular menu has the following features

nested radial menus

a label showing the current 'directory'

a mouse angle indicator

hover highlights

Jump to heading Show me the code!

The code for this was inspired by BennyKok's original prototype. A big thank you to them for sharing their original code. You can find the code that I used for my circular menu here.

https://gist.github.com/alexanderameye/1eef648d7d1699a9548bc2de3dde2a45

⚠️ Use this code at your own risk! It was quickly thrown together, is a bit messy and may contain bugs.

The gist contains 3 scripts

CircularMenu.cs
CircularMenuButton.cs
CircularMenuAttribute.cs

You can add a method to the circular menu simply by using the following method attribute and specifying a path and an icon.

[CircularMenu(Path = "Debug Views/Normals", Icon = "d_DirectionalLight Icon")]
public static void ShowDebugNormals()
{
    EnableDebugView(true);
    SetDebugView(DebugView.Normals);
}

That's all! Now that I am using this circular menu in my own project I will probably continue iterating on it and updating the gists as well.

Stylized Water Shader

2023-03-09T00:00:00Z

Jump to heading Introduction

In this tutorial I will explain step-by-step how to create a beautiful stylized water shader in Unity using Shader Graph. The goal is not to create a physically accurate result, but rather to achieve a real-time, controllable and good-looking stylized water shader.

Jump to heading 1. Initial set up

⚠️ This tutorial has been made with Unity 2022.2.6f1 and Universal RP 14.0.6.

Before starting this tutorial, there are a few things that need to be set up.

Jump to heading Render settings

Make sure to enable the depth and opaque textures in the URP pipeline asset.

URP renderer settings.

Jump to heading Shader and material

Create a new Unlit Shader Graph shader. The shader material should be set the Unlit and the surface type to Opaque.

Shader settings.

You can then create a material that uses this shader.

Stylized water material.

Select this material and in the Advanced Options, change the Render Queue to be Transparent.

Material settings.

Jump to heading Scene

For the scene, I am using The Illustrated Nature by Artkovski but you can use any scene you want.

In the scene, I created a plane and assigned it the material that we created before.

Start scene.

Now let's get started!

💡 During this tutorial, newly added nodes will be marked in green so you can easily follow along to create the shader yourself from the ground up.

Jump to heading 2. Figuring out the depth of the water

The single most important step in creating our water shader is figuring out the depth of the water. We will use the depth value it to drive many other effects of our water such as color, opacity, refraction and foam.

Jump to heading Camera-relative depth

Most water shader tutorials use some variation of the following node setup to calculate a depth fade value that goes from shallow (1, white) to deep (0, black).

Camera-relative depth fade.

In this node setup, the Scene Depth (Eye) node returns the distance (in world space units, meters) between the camera and the objects below the water. You can imagine it by tracing an imaginary ray from the camera towards the water that stops when it first hits an object under the water surface. The distance of this ray is what is returned by the node.

Scene depth - screen position = water depth.

What we actually care about is not the distance between the camera and the objects under the water, but the distance between the surface of the water and the objects under the water. For this, we can use the alpha component of the Screen Position (Raw) node which gives us the distance between the camera and the water surface. We can then Subtract the 2 distances to get the desired distance which represents the Water Depth. This is visualized in the diagram above.

Depth subtraction.

Finally we Divide by a depth range/distance control parameter, Saturate the output (clamp between 0 and 1) and then perform a One Minus operation to get a white value near the shore and a black value in the deep parts of the water.

Depth division.

It is very important to note that this calculated depth value is not the vertical depth of the water. If you were looking at the water and shooting an invisible ray from your eye towards a point of the water, the distance that the ray would travel between hitting the surface of the water and hitting the ground below the water surface is the distance that you get here from these nodes. This means that when looking at the same point on the water surface, the returned depth value depends on how shallow the angle is under which you are looking at the water surface.

This effect/artifact can be seen in the video below when moving around the camera. You can especially see it on the rocks where the same spots on the water get either a black or a white color based on on shallow the viewing angle is.

Jump to heading World-space depth

Personally I am not a fan of how the depth effect looks using the previous method. The perceived depth values change when moving around your camera and I would rather have a constant depth value that is independent of camera position.

💡 This is just a personal preference and you can keep using the camera-relative depth calculation if you like.

To 'fix' this camera-relative depth, I have figured out an alternative way to calculate the depth which happens in world space.

World-space depth fade.

This node setup gives you the depth of the water as if you would put a measuring tape vertically into the water and measure the distance from the surface of the water to the seabed. When moving the camera around, the calculated depth values do not change in appearance.

Jump to heading Depth Fade subgraph

It is a good idea to put all of the nodes we just created into a Depth Fade subgraph. This will make our main graph more clean and organized.

Depth fade subgraph.

Jump to heading 3. Colors and opacity

In this section we will add color to our water surface using the depth values we just calculated.

Jump to heading Shallow and deep

Now that we know the depth of our water, we can use it to drive the colors and transparency of our water. We can simply use the output of our Depth Fade subgraph (which is a value between 0 and 1) to Lerp between a shallow water color and a deep water color.

Shallow and deep water colors.

Lerping between a shallow and a deep water color already gives us a nice effect for our water.

Going the extra mile: HSV lerping

As explained by Alan Zucconi in this great article about colour interpolation, we can improve the appearance of the color of our water by lerping in HSV space instead of RGB space. To do this in Shader Graph, a custom function node can be used that converts our RGB colors to HSV, lerps in HSV space and then converts them back to RGB.

half3 RGBToHSV(half3 In)
{
    half4 K = half4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
    half4 P = lerp(half4(In.bg, K.wz), half4(In.gb, K.xy), step(In.b, In.g));
    half4 Q = lerp(half4(P.xyw, In.r), half4(In.r, P.yzx), step(P.x, In.r));
    half D = Q.x - min(Q.w, Q.y);
    half E = 1e-10;
    return half3(abs(Q.z + (Q.w - Q.y)/(6.0 * D + E)), D / (Q.x + E), Q.x);
}

half3 HSVToRGB(half3 In)
{
    half4 K = half4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    half3 P = abs(frac(In.xxx + K.xyz) * 6.0 - K.www);
    return In.z * lerp(K.xxx, saturate(P - K.xxx), In.y);
}

void HSVLerp_half(half4 A, half4 B, half T, out half4 Out)
{
    A.xyz = RGBToHSV(A.xyz);
    B.xyz = RGBToHSV(B.xyz);

    half t = T; // used to lerp alpha, needs to remain unchanged

    half hue;
    half d = B.x - A.x; // hue difference

    if(A.x > B.x)
    {
        half temp = B.x;
        B.x = A.x;
        A.x = temp;

        d = -d;
        T = 1-T;
    }

    if(d > 0.5)
    {
        A.x = A.x + 1;
        hue = (A.x + T * (B.x - A.x)) % 1;
    }

    if(d <= 0.5) hue = A.x + T * d;

    half sat = A.y + T * (B.y - A.y);
    half val = A.z + T * (B.z - A.z);
    half alpha = A.w + t * (B.w - A.w);

    half3 rgb = HSVToRGB(half3(hue,sat,val));

    Out = half4(rgb, alpha);
}

The custom function node then fits in like this with the rest of our nodes.

HSV color lerping.

When looking at the water, the intermediate colors between shallow and deep will appear more vibrant.

Going the extra mile: Posterize

A cool and easy effect to add is posterization. We simply add the Posterize node and add a property to control the number of steps.

Color posterization.

A good example of where such a posterization technique was used is in the game A Short Hike. In the image below you can see the different color bands which are a result of the posterization.

A Short Hike water.

Bonus tip: Use a gradient

If you want even more control over the colors of your water, you can make use of a gradient texture to drive the color. In the example below I have a gradient that I turn into a 256x1 texture that I then sample using the [0,1] depth value. The step to convert from a gradient to a texture is needed because Shader Graph does not support gradient properties.

Gradient coloring.

This setup allows you to do both hard and soft transitions of colors.

Below is the code I used to convert from a gradient to a texture.

using UnityEngine;
#if UNITY_EDITOR
using UnityEditor;
#endif
using System.IO;

public static class GradientTextureMaker
{
    public static int width = 128;
    public static int height = 4; // needs to be multiple of 4 for DXT1 format compression

    public static Texture2D CreateGradientTexture(Material targetMaterial, Gradient gradient)
    {
        Texture2D gradientTexture = new Texture2D(width, height, TextureFormat.ARGB32, false, false)
        {
            name = "_gradient",
            filterMode = FilterMode.Point,
            wrapMode = TextureWrapMode.Clamp
        };

        for (int j = 0; j < height; j++)
        {
            for (int i = 0; i < width; i++) gradientTexture.SetPixel(i, j, gradient.Evaluate((float)i / (float)width));
        }

        gradientTexture.Apply(false);
        gradientTexture = SaveAndGetTexture(targetMaterial, gradientTexture);
        return gradientTexture;
    }

    private static Texture2D SaveAndGetTexture(Material targetMaterial, Texture2D sourceTexture)
    {
        string targetFolder = AssetDatabase.GetAssetPath(targetMaterial);
        targetFolder = targetFolder.Replace(targetMaterial.name + ".mat", string.Empty);

        targetFolder += "Gradient Textures/";

        if (!Directory.Exists(targetFolder))
        {
            Directory.CreateDirectory(targetFolder);
            AssetDatabase.Refresh();
        }

        string path = targetFolder + targetMaterial.name + sourceTexture.name + ".png";
        File.WriteAllBytes(path, sourceTexture.EncodeToPNG());
        AssetDatabase.Refresh();
        AssetDatabase.ImportAsset(path, ImportAssetOptions.Default);
        sourceTexture = (Texture2D)AssetDatabase.LoadAssetAtPath(path, typeof(Texture2D));
        return sourceTexture;
    }
}

Jump to heading Horizon color

Next, we will add a color to the parts of the water at the horizon. For this, we will use a Fresnel Effect node with a horizon color and horizon distance parameter. We will use the the output of the Depth Color from the previous section and lerp between that and the Horizon Color.

Horizon color.

When you look at the water at a very sharp angle, the horizon color will show up in the distance.

Jump to heading Underwater color

Right now we are directly setting the color of the water but because we do this, the colors of the objects beneath the water get kind lost. To fix this, we will take the underwater color into account when shading the surface of the water.

Underwater color.

We sample the Scene Color node which returns the color of the geometry below the water surface. Then where we set the other colors to be transparent, we will use the underwater color instead. This is done using the One Minus node. Finally we add the colors we already had to the underwater color to get the final color.

By changing the alpha components of the shallow and deep water colors, we can control how much the underwater color is added.

Jump to heading 4. Refraction

Let's add a cool effect, refraction!

Jump to heading Refracted UVs

Many nodes that we have already used like the Scene Color and Scene Depth nodes have a UV input parameter that we left to the default up until now. We will start by adding a UV parameter to the Depth Fade subgraph and connect it up to the Scene Depth node inside of the subgraph.

Scene depth UVs.

Now that we can control the UVs which the Depth Fade subgraph uses, we can distort those UVs to add a refraction effect. Let's use the following node setup to create refracted UVs.

Refracted UVs

In the node setup above, we tile and move some Gradient Noise that we then Remap to a [-1,1] range, Multiply with a refraction strength parameter and then add to the Screen Position (default) (which are the regular, undistorted UVs).

It is a good idea to put these nodes in their own Refracted UV subgraph to make the graph clean and organized. We can then use this refracted UVs and connect them to the UV input of the Depth Fade subgraph as well as the UV input of the Scene Color node that we used for the underwater color.

Now we get a nice refraction effect!

Going the extra mile: Fixing refraction artifacts

As you might have seen in the previous clip, the refraction we have right now is flawed. When an object sticks out of the water you'll see that the refraction effect is present in places where it should not be.

Refraction artifacts.

One way to solve this is to perform a depth check to see if we should use the distorted or the undistorted UVS. The Scene Position subgraph is a subgraph I created that contains the nodes to calculate the world space scene position that was shown in the first section about calculating the world space depth.

Fixing refraction artifacts.

With this fix implemented, the effect looks much better and only shows up where you can actually see the object inside of the water.

Fixed refraction.

Jump to heading 5. Foam

The next step is to add foam to the water.

Jump to heading Surface foam

We will start by adding foam that gets drawn on top of the water surface.

Panning UVs

We will add surface foam to the shader step by step. We will start by setting up the UVs that we will use to sample a surface foam texture. Let's create a subgraph called Panning UVs and add the following nodes.

Panning UVs.

This subgraph takes in UVs and then adds movement to them as well as some Tiling and an Offset.

The nodes on the left are used to convert the direction parameter which is a value between 0 and 1 into a direction vector for the UV movement. You could as well have just a vector input parameter and set the direction yourself, but this approach allows you to work with a single direction slider between 0 and 1 and control the full 360° range of movement. For performance reasons, you could leave this out and just directly set the direction.

Distorted UVs

Next, we will take the panning UVs and distort them using some sine functions. For this, we will use a Custom Function node because it would be a hassle to recreate the math in nodes.

Distorted UVs.

We take the output of the Panning UV subgraph and plug it into a Custom Function node. For the custom function, we use the following code.

void DistortUV_float(float2 UV, float Amount, out float2 Out)
{
    float time = _Time.y;

    UV.y += Amount * 0.01 * (sin(UV.x * 3.5 + time * 0.35) + sin(UV.x * 4.8 + time * 1.05) + sin(UV.x * 7.3 + time * 0.45)) / 3.0;
    UV.x += Amount * 0.12 * (sin(UV.y * 4.0 + time * 0.50) + sin(UV.y * 6.8 + time * 0.75) + sin(UV.y * 11.3 + time * 0.2)) / 3.0;
    UV.y += Amount * 0.12 * (sin(UV.x * 4.2 + time * 0.64) + sin(UV.x * 6.3 + time * 1.65) + sin(UV.x * 8.2 + time * 0.45)) / 3.0;

    Out = UV;
}

This code adds a distortion to the UVs using sine functions to make the foam a bit more interesting when moving around. It looks like this.

Sampling the foam texture

Now that we have moving and distorted UVs, we can use them to sample a foam texture and add it to the surface of our water.

Sampling the foam texture.

We simply use a Sample Texture 2D node to sample the foam texture and then use a Step node to add a cutoff. Lastly we multiply by a foam color property.

💡 You could also use a Smoothstep node here to potentially get a smoother sampling of the foam texture.

We could simply add the surface foam to the water color using the Add node however I believe we can do a bit better by blending it using an Overlay subgraph that we can create. This subgraph contains the following nodes.

Adding the foam.

We can then use this Overlay subgraph to blend between the water color we already had (Base) and the output of the surface foam nodes (Overlay).

Blending the foam.

Using this, the surface foam can get blended more nicely with the water by taking into account the base color of the water underneath the foam. It is subtle, but quite nice.

Jump to heading Intersection foam

Next we will add foam that gets drawn at the edges of an object where it intersects the water surface.

Intersection foam mask

We will start by creating a mask that will define where the intersection foam should show up. For this, we will be using the Depth Fade subgraph we created before.

Intersection foam mask.

We use the Depth Fade subgraph to create a depth-based mask and use the Intersection Foam Fade parameter to control the hardness of the mask. When just showing this intersection mask, it looks like this.

Sampling the intersection foam

For the intersection foam, the setup is similar to the surface foam. Again we use the Panning UV subgraph and use those UVs to sample an Intersection Foam Texture. We use an Intersection Foam Cutoff parameter to control where we cut off the foam texture using a Step node. We multiply this Intersection Foam Cutoff parameter by the output of the Depth Fade subgraph that we used in the nodes for the depth-based mask. The reasoning is that we want the foam to be fully formed near the edges of the object, but disintegrate as it goes further away from the shore.

Intersection foam.

The other nodes are used to set the color of the intersection foam. We also multiply the alpha (transparency) of the intersection foam by the output of the nodes of the intersection foam mask that we created before. This makes sure that the intersection foam only shows up where we want it to (inside of the mask).

The sampled intersection foam texture could for example look like this.

Intersection foam texture.

Adding the intersection foam

Just like for the surface foam, we use the Overlay subgraph we created to nicely blend the intersection foam with the rest of the colors.

Intersection foam blending.

Now we have added a nice intersection foam effect to the water!

Going the extra mile: Use signed distance fields for intersection foam

One issue with the current implementation of the intersection foam is that it requires geometry underneath the water to be present before the intersection foam will show up. One more advanced technique to solve this is to have a top down orthographic camera that renders geometry to a mask and then generate an SDF texture from that mask. This is shown in this tweet by Harry Alisavakis. The SDF texture could then be sampled to generate a more uniform intersection foam mask.

Jump to heading 6. Lighting

An important feature of the water shader is how lighting interacts with it. We will go for a stylized look instead of a physically accurate one.

Jump to heading Surface normals

First, we will generate surface normals for the water by sampling a Normals Texture. We will use a common trick which is to sample the texture twice using slightly different sampling properties. We then combine these 2 samples by using the Normal Blend node.

Surface normals.

Notice that we only use a single value for the Normals Scale and Normals Speed. We just slightly modify them before sampling the Normals Texture for a second time. Again, we use the Panning UV subgraph we created earlier to move the normals textures.

I have put the nodes from the screenshot above in a subgraph called Blended Normals. We can then use the output of these normals and apply a strength to them using the Normal Strength node. Finally we transform them to world space using the Transform node.

Blended normals

We now have moving normals for our water that we can use where we can adjust the speed, scale and strength.

Jump to heading Lighting calculations

Next, we will use the normals we just created to generate lighting effects. Again, we will two Custom Function nodes. Our custom function nodes take in a normal vector, position and view direction (all in world space). The nodes then output a Specular lighting term. For the normals, we use the output of our world-space transformed normals from earlier. For the position and view direction, we can use the Position and View Direction nodes respectively (both in world space). We have one custom function node for Main Lighting and another one for Additional Lights. This will make it possible for our light to react to the main light as well as additional point lights.

Lighting.

We can put all of the code for the lighting in one file. The code looks like this.

float LightingSpecular(float3 L, float3 N, float3 V, float smoothness)
{
    float3 H = SafeNormalize(float3(L) + float3(V));
    float NdotH = saturate(dot(N, H));
    return pow(NdotH, smoothness);
}

void MainLighting_float(float3 normalWS, float3 positionWS, float3 viewWS, float smoothness, out float specular)
{
    specular = 0.0;

    #ifndef SHADERGRAPH_PREVIEW
    smoothness = exp2(10 * smoothness + 1);

    normalWS = normalize(normalWS);
    viewWS = SafeNormalize(viewWS);

    Light mainLight = GetMainLight(TransformWorldToShadowCoord(positionWS));
    specular = LightingSpecular(mainLight.direction, normalWS, viewWS, smoothness);
    #endif
}

void AdditionalLighting_float(float3 normalWS, float3 positionWS, float3 viewWS, float smoothness, float hardness, out float3 specular)
{
    specular = 0;

    #ifndef SHADERGRAPH_PREVIEW
    smoothness = exp2(10 * smoothness + 1);

    normalWS = normalize(normalWS);
    viewWS = SafeNormalize(viewWS);

    // additional lights
    int pixelLightCount = GetAdditionalLightsCount();
    for (int i = 0; i < pixelLightCount; ++i)
    {
        Light light = GetAdditionalLight(i, positionWS);
        float3 attenuatedLight = light.color * light.distanceAttenuation * light.shadowAttenuation;

        float specular_soft = LightingSpecular(light.direction, normalWS, viewWS, smoothness);
        float specular_hard = smoothstep(0.005,0.01,specular_soft);
        float specular_term = lerp(specular_soft, specular_hard, hardness);

        specular += specular_term * attenuatedLight;
    }
    #endif
}

We can then combine the Main Lighting and Additional Lighting by first running the main lighting through a Step node to get hard lighting and we then multiply by a Specular Color

Combined lighting.

Finally we can quite literally Add the lighting to the current output of the graph.

Adding lighting.

We now have pretty complex lighting effects for our water, allowing us to switch between smooth/rough water surfaces, hard/soft lighting, support for the main light and support for additional point lights.

Bonus tip: Using surface normals to influence refraction

Instead of using gradient noise to generate the refraction like we did before, it might be a better idea to use the surface normals to influence the strength of the refraction. This looks better visually. For this, you will have to transform the generated normals from Tangent space to View space, then Multiply by a Refraction Strength parameter and then add the result to the Screen Position to generate the refracted UVs.

Refraction using normals.

Jump to heading 7. Waves

A big part of the look of our water shader is now complete so let's add some movement.

Jump to heading Vertex displacement

We will be adding wave movement by displacing the vertices of the water plane in the vertex shader. For this to work nicely, you need to make sure that your water plane has a high enough vertex density so that there are enough vertices to displace.

The nodes below show a very basic example of vertex displacement. We take the original world position of the vertex and add an offset (0,0,0 in this case). We then convert from World Space to Object space and link it up with the vertex position slot.

Vertex displacement.

Jump to heading Gerstner waves

There are many levels of simulating wave displacement. You could start by adding simple sine waves or go all in and create a FFT wave simulation. We will use something between the two in terms of graphical fidelity: Gerstner Waves. There are many good tutorials about Gerstner Waves. I will just explain how I use them in my shader. If you want more information, I recommend this tutorial about waves by Catlike Coding.

Because the code for the waves is math-heavy, we again use a Custom Function node and add the output as an offset to the world position like we did in the previous section.

Gerstner waves.

The following code generates 4 waves in total and then adds them together.

float3 GerstnerWave(float3 position, float steepness, float wavelength, float speed, float direction, inout float3 tangent, inout float3 binormal)
{
    direction = direction * 2 - 1;
    float2 d = normalize(float2(cos(3.14 * direction), sin(3.14 * direction)));
    float k = 2 * 3.14 / wavelength;
    float f = k * (dot(d, position.xz) - speed * _Time.y);
    float a = steepness / k;

    tangent += float3(
    -d.x * d.x * (steepness * sin(f)),
    d.x * (steepness * cos(f)),
    -d.x * d.y * (steepness * sin(f))
    );

    binormal += float3(
    -d.x * d.y * (steepness * sin(f)),
    d.y * (steepness * cos(f)),
    -d.y * d.y * (steepness * sin(f))
    );

    return float3(
    d.x * (a * cos(f)),
    a * sin(f),
    d.y * (a * cos(f))
    );
}

void GerstnerWaves_float(float3 position, float steepness, float wavelength, float speed, float4 directions, out float3 Offset, out float3 normal)
{
    Offset = 0;
    float3 tangent = float3(1, 0, 0);
    float3 binormal = float3(0, 0, 1);

    Offset += GerstnerWave(position, steepness, wavelength, speed, directions.x, tangent, binormal);
    Offset += GerstnerWave(position, steepness, wavelength, speed, directions.y, tangent, binormal);
    Offset += GerstnerWave(position, steepness, wavelength, speed, directions.z, tangent, binormal);
    Offset += GerstnerWave(position, steepness, wavelength, speed, directions.w, tangent, binormal);

    normal = normalize(cross(binormal, tangent));
    //TBN = transpose(float3x3(tangent, binormal, normal));
}

The custom function takes in values for the Steepness, Wavelength and Speed of the waves as well as 4 Direction values between [0,1] which can each control an individual wave. The normal vector is calculated as well.

💡 Feel free to add even more waves, but I think 4 waves is already a nice starting point.

Our waves look simple, but it is already quite nice.

Bonus tip: Using wave height to drive color

An additional thing you can do is use the Y component of the Offset output of the Gerstner Waves custom function node to influence the colors of the water. This way you can give the tops of the waves a slightly different color.

Jump to heading 8. Buoyancy

Buoyancy is a big and complicated topic if you want to achieve a realistic simulation. However, I wanted to share how you can go about adding basic buoyancy to your water.

Jump to heading Simulation on the CPU

Currently we are simulating the waves on the GPU through the vertex shader of our water. To create a buoyancy simulation, we will recreate the wave movement on the CPU in a C# script. This way we can use this CPU simulation to create buoyancy effects for floating objects. The setup looks pretty similar to what we already did in our shader. We create a function GetWaveDisplacement which takes in a position and some wave parameters, It then returns an offset which is generated by adding 4 waves together. I added the script below. The goal is to have the exact same thing as we did in the vertex shader, but then running on the CPU.

Script: GerstnerWaveDisplacement.cs

using UnityEngine;

public static class GerstnerWaveDisplacement
{
    private static Vector3 GerstnerWave(Vector3 position, float steepness, float wavelength, float speed, float direction)
    {
        direction = direction * 2 - 1;
        Vector2 d = new Vector2(Mathf.Cos(Mathf.PI * direction), Mathf.Sin(Mathf.PI * direction)).normalized;
        float k = 2 * Mathf.PI / wavelength;
        float a = steepness / k;
        float f = k * (Vector2.Dot(d, new Vector2(position.x, position.z)) - speed * Time.time);

        return new Vector3(d.x * a * Mathf.Cos(f), a * Mathf.Sin(f), d.y * a * Mathf.Cos(f));
    }

    public static Vector3 GetWaveDisplacement(Vector3 position, float steepness, float wavelength, float speed, float[] directions)
    {
        Vector3 offset = Vector3.zero;

        offset += GerstnerWave(position, steepness, wavelength, speed, directions[0]);
        offset += GerstnerWave(position, steepness, wavelength, speed, directions[1]);
        offset += GerstnerWave(position, steepness, wavelength, speed, directions[2]);
        offset += GerstnerWave(position, steepness, wavelength, speed, directions[3]);

        return offset;
    }
}

Jump to heading Buoyancy script

Next, we want to use the CPU simulation of the waves we did to actually make an object float on the water surface. For this I will use an approach that works using buoyancy effectors. These are points on an object where the wave offset is sampled and an appropriate force is added to the object. An object can have multiple effectors positioned around the surface of the object.

In my scene, I just have these effectors as empty gameobjects as children of the object that I want to simulate buoyancy for.

Effectors as children.

We can then create a script called BuoyantObject which will take in a reference to these effectors and apply force to them.

Effectors.

Script: BuoyantObject.cs

[RequireComponent(typeof(Rigidbody))]
public class BuoyantObject : MonoBehaviour
{
    private readonly Color red = new(0.92f, 0.25f, 0.2f);
    private readonly Color green = new(0.2f, 0.92f, 0.51f);
    private readonly Color blue = new(0.2f, 0.67f, 0.92f);
    private readonly Color orange = new(0.97f, 0.79f, 0.26f);

    [Header("Water")]
    [SerializeField] private float waterHeight = 0.0f;

    [Header("Waves")]
    [SerializeField] float steepness;
    [SerializeField] float wavelength;
    [SerializeField] float speed;
    [SerializeField] float[] directions = new float[4];

    [Header("Buoyancy")]
    [Range(1, 5)] public float strength = 1f;
    [Range(0.2f, 5)] public float objectDepth = 1f;

    public float velocityDrag = 0.99f;
    public float angularDrag = 0.5f;

    [Header("Effectors")]
    public Transform[] effectors;

    private Rigidbody rb;
    private Vector3[] effectorProjections;

    private void Awake()
    {
        // Get rigidbody
        rb = GetComponent<Rigidbody>();
        rb.useGravity = false;

        effectorProjections = new Vector3[effectors.Length];
        for (var i = 0; i < effectors.Length; i++) effectorProjections[i] = effectors[i].position;
    }

    private void OnDisable()
    {
        rb.useGravity = true;
    }

    private void FixedUpdate()
    {
        var effectorAmount = effectors.Length;

        for (var i = 0; i < effectorAmount; i++)
        {
            var effectorPosition = effectors[i].position;

            effectorProjections[i] = effectorPosition;
            effectorProjections[i].y = waterHeight + GerstnerWaveDisplacement.GetWaveDisplacement(effectorPosition, steepness, wavelength, speed, directions).y;

            // gravity
            rb.AddForceAtPosition(Physics.gravity / effectorAmount, effectorPosition, ForceMode.Acceleration);

            var waveHeight = effectorProjections[i].y;
            var effectorHeight = effectorPosition.y;

            if (!(effectorHeight < waveHeight)) continue; // submerged

            var submersion = Mathf.Clamp01(waveHeight - effectorHeight) / objectDepth;
            var buoyancy = Mathf.Abs(Physics.gravity.y) * submersion * strength;

            // buoyancy
            rb.AddForceAtPosition(Vector3.up * buoyancy, effectorPosition, ForceMode.Acceleration);

            // drag
            rb.AddForce(-rb.velocity * (velocityDrag * Time.fixedDeltaTime), ForceMode.VelocityChange);

            // torque
            rb.AddTorque(-rb.angularVelocity * (angularDrag * Time.fixedDeltaTime), ForceMode.Impulse);
        }
    }

    private void OnDrawGizmos()
    {
        if (effectors == null) return;

        for (var i = 0; i < effectors.Length; i++)
        {
            if (!Application.isPlaying && effectors[i] != null)
            {
                Gizmos.color = green;
                Gizmos.DrawSphere(effectors[i].position, 0.06f);
            }

            else
            {
                if (effectors[i] == null) return;

                Gizmos.color = effectors[i].position.y < effectorProjections[i].y ? red : green; // submerged

                Gizmos.DrawSphere(effectors[i].position, 0.06f);

                Gizmos.color = orange;
                Gizmos.DrawSphere(effectorProjections[i], 0.06f);

                Gizmos.color = blue;
                Gizmos.DrawLine(effectors[i].position, effectorProjections[i]);
            }
        }
    }
}

What's important for the BuoyantObject script is that the wave parameters should match the ones that you use in your water shader. In my own projects I usually make it so the BuoyantObject script holds a reference to the water and then just reads out those properties instead having to set them manually.

Wave properties.

This gives us some simple but nice buoyancy!

Jump to heading Caustics

Caustics are a really nice effect that you can add to your water. If you have enjoyed this tutorial so far, you can check out my caustics asset which can be added to any water shader and has several nice features. Here is a video showing the effect.

Support would be greatly appreciated! ❤️

Bonus tip: Reflections

Planar reflections can be added by using the following script (use at your own risk, has not been tested in a while 😅). Essentially it renders everything upside down to a texture called _PlanarReflectionTexture. You can then sample this texture in your shader using the following nodes.

Planar reflections.

Bonus tip: World space UVs

Instead of using regular UVs for things like sampling your textures, you can make use of world space UVs. This will enable you to use water tiles that you place next to each other, and then all of the effects will line up nicely!

World space UVs.

Bonus tip: Fog

Support for fog can be easily added like this.

Fog.

Bonus tip: Water trails

Water trails can be created using particle effects. Here is a great tutorial by Minions Art.

Jump to heading Conclusion

I hope you liked this tutorial. Please let me know what you think over on Twitter!

You can get the shader files here.

stylized-water.unitypackage

Jump to heading Additional resources

https://www.alanzucconi.com/2019/09/13/believable-caustics-reflections/

https://www.patreon.com/posts/making-water-24192529

https://catlikecoding.com/unity/tutorials/flow/waves/

Comic book (halftone) shader

2023-03-04T00:00:00Z

Jump to heading Introduction

A while ago, I made a shader for a project of mine to simulate halftone shading. This note quickly explains how I created the effect.

Jump to heading Creating a dots pattern

To start, I created a Dots Pattern subgraph to create the actual grid of dots. This subgraph contains the following nodes.

Dots pattern subgraph.

The dots pattern is created using a Voronoi node. The UVs are rotated using the Rotate node. I then influence the cell density using some Gradient Noise together with a Scale property. Then finally I use the Dot Size property to decided how large the dots are by using the Step node.

The subgraph takes takes in the following parameters.

UVs

Dot Size

Scale (how many dots there are)

Randomness (to add noise to the pattern)

Noise scale (for the shape of the dots)

Noise strength (for the shape of the dots)

Rotation (in degrees)

All these settings allow for creating a dynamic and configurable dots pattern.

Jump to heading Converting RGB to CMYK

The next step is to take an input image and convert the RGB color values to CMYK values (Cyan, Magenta, Yellow, Black). We use these 4 colors because a printer uses these colors as ink to generate an image. To perform the RGB -> CMYK conversion, I used a Custom Function node with the following code. The outputs are saturated to ensure an output between 0 and 1.

void RGBtoCMYK_float(float3 rgb, out float4 cmyk)
{
    float k = 1.0 - max(rgb.r, max(rgb.g, rgb.b));
    float c = (1.0 - rgb.r - k) / (1.0 - k);
    float m = (1.0 - rgb.g - k) / (1.0 - k);
    float y = (1.0 - rgb.b - k) / (1.0 - k);
    cmyk = float4(saturate(c), saturate(m), saturate(y), saturate(k));
}

I then take the CMYK outputs of this subgraph and multiply them with a Dot Size property before connecting them to the dot size input of the dots pattern subgraph I created earlier. The reasoning is that the higher the value of the CMYK output is, the bigger the size of the dot should be.

Connecting CMYK outputs with the dots pattern.

The image above does not show it, but the graph just has the same set of nodes for M, Y and K similarly to what is shown in the image for C. This way we end up with 4 different patterns, one for each color (CMYK).

Jump to heading Combining the patterns

Finally, I combine the 4 different dot patterns I created using Blend nodes. For the first blend, I use a background color property as the base. For this I usually just use white. I then use each of the 4 print colors (Cyan Magenta, Yellow and Black) as the blend values, each time using the appropriate dot pattern as the opacity input.

Blending the patterns.

This way, all of the colored dot patterns get overlayed on top of each other. Finally we just output the result to the main color output of the graph.

Jump to heading Rotating the patterns

Remember that the dots pattern subgraph has a rotation input to rotate the pattern. I have created 4 rotation properties in total, one for each print color (CMYK) so that I can rotate the patterns individually. The reason for this is that to avoid Moiré pattern artifacts, the individual patterns can be rotated in relation to each other. The image below shows some typical orientations.

Examples of typical CMYK halftone screen angles (1).

I use the following orientations for my patterns.

Used pattern orientations.

Jump to heading Screen-space UVs

In my graph, I also used the following nodes as the UV input for the dots pattern subgraph so that I could apply the halftone shader as an image effect for the whole screen.

Screen space UVs.

Jump to heading Download

The shader can be downloaded below as a Unity package.

halftone-shader.unitypackage

Jump to heading Additional resources

(1) https://en.wikipedia.org/wiki/Halftone

Render adventures 1: first steps

2022-07-11T00:00:00Z

Some renders made with my path tracer.

Jump to heading First Steps

As so many people out there that want to get into writing a raytracer, I started with raytracing in one weekend. I can 100% recommend this as a starting point, even if you are not familiar with ray tracing at all.

While there exists a second and a third book, I started diverging after the first book and ended up using the later books only as a reference, instead of following them step-by-step.

Jump to heading Naive Path Tracing

After roughly following the raytracing in one weekend book, I ended up with a naive path tracer that just randomly sends out rays and results in a radiance contribution if the ray ends up hitting a light source.

Naive path tracing.

As you can see in the image above, the result is noisy. When the ray bounces throughout the scene, it will only result in a non-zero contribution only if it happens to hit the light source. A lot of rays will simply miss the light source and not produce a contribution, which causes longer convergence times. This is illustrated in the images below where a scene is shown with a light source that varies in size (power is kept constant).

(a) Indirect illumination small size light source (100spp).

(b) Indirect illumination medium size light source (100spp).

Because the lighting contribution depends on the ray randomly hitting the light, a small light source will rarely be hit and result in a darker scene. A large light source will be hit by most rays and the scene will be bright.

Jump to heading Explicit Light Sampling

To avoid the noisy result we got from naive path tracing, lights may be explicitly sampled. For each surface interaction, the direct lighting is explicitly evaluated by sending a shadow ray towards the light source.

(a) Direct illumination.

(b) Indirect illumination with explicit light sampling.

By explicitly sampling the lights, there no longer is a dependency on the probability of the light path randomly hitting a light source to get a non-zero contribution. Instead, each bounce gets a non-zero contribution because the light sources are explicitly sampled.

(a) Indirect illumination without explicit light sampling (1spp).

(b) Indirect illumination without explicit light sampling (49spp).

(a) Indirect illumination with explicit light sampling (1spp).

(b) Indirect illumination with explicit light sampling (49spp).

When looking at the convergence between implicit light sampling (naive path tracing) and explicit light sampling, the render converges much quicker when explicitly sampling the lights. Below, a graph is shown that quantifies the convergence by measuring the MSE (mean-squared-error).

Convergence of direct illumination and brute-force/hybrid methods.

The term Brute-force is used for naive path tracing and the term Hybrid is used to denote the method where direct illumination is evaluated by explicitly sampling the light sources.

Jump to heading BRDF Importance Sampling

Instead of randomly generating a ray direction within the hemisphere whenever a ray bounces on a surface, an importance-sampling scheme could be used. Using a cosine-weighted sampling scheme, rays do not get randomly generated but are instead generated according to a probability proportional to a cosine-lobe (for diffuse materials). This is in an attempt to generate fewer rays that would result in a low contribution.

(a) Uniform sampling (16spp).

(b) Cosine-weighted sampling (16spp).

In the images above, a scene with a diffuse sphere and a white environment light are shown. By sampling proportional to the BRDF (diffuse so cosine-weighted in this case), the noise is reduced. Different sampling schemes may be used for different BRDFs. This is discussed further in my note about sampling the hemisphere. An example is shown below where a Cook-Torrance BRDF is used and both a cosine-weighted and BRDF-weighted sampling scheme are used. By properly generating samples proportionally to the Cook-Torrance BRDF, the noise is greatly reduced.

(a) Cosine-weighted sampling.

(b) BRDF importance-sampling

Especially for sharp BRDFs, generating random samples in the hemisphere will result in a lot of samples that result in a near-zero contribution of the BRDF factor. This is illustrated in the BRDF plot below.

BRDF plot for ss440 material by Ngan et al.

Jump to heading Materials

Support was added for several material type such as mirrors, metallic surfaces and dielectrics (glass). The combination of a glass object with an environment light results in pretty renders and caustics.

Dielectric caustics

Jump to heading Future Work

My current toy path tracer supports much of the basics that any path tracer needs

explicit light sampling
dielectrics (refraction and caustics)
BRDF importance-sampling
anti-aliasing
bounding volume hierarchy (BVH)
environment lights
.obj loading with texture support

Much work is still to be done and I have future plans for this so stay tuned!

Jump to heading Additional Resources

Jump to heading General

https://raytracing.github.io/books/RayTracingInOneWeekend.html

https://youtu.be/gfW1Fhd9u9Q

https://pbrt.org/

Jump to heading Example projects

https://aras-p.info/blog/2018/03/28/Daily-Pathtracer-Part-0-Intro/

https://www.mattkeeter.com/projects/rayray/

Sampling the hemisphere

2022-05-07T00:00:00Z

Jump to heading Introduction

Generating samples within a hemisphere around a point is needed when doing Monte-Carlo path tracing. These samples can be chosen in a smart way, to be proportional to the BRDF. The following sections explain how to generate these samples, and how to properly weight them using the pdf, for several BRDF models.

The result of importance sampling can be a significant reduction in noise. In the following image, the sphere on the left uses cosine-weighted sampling while the sphere on the right uses BRDF importance-sampling.

Cosine-weighted sampling.

BRDF importance-sampling

Jump to heading Spherical and cartesian coordinates

When generating samples in the hemisphere, this is usually done using spherical coordinates by calculating a $\theta$ and $\phi$ angle. These can then be converted to cartesian coordinates using the following formula.

\left\{\begin{matrix} \begin{aligned} x&=\cos(\phi) \cdot \sin(\theta)\\ y&=\sin(\phi) \cdot \sin(\theta)\\ z&=\cos(\theta) \end{aligned} \end{matrix}\right.

In these snippets you'll see that the sine/cosine is often calculated directly instead of calculating the angle $\theta$ and then taking the sine/cosine.

Jump to heading Technique

The following steps are performed.

Calculate the normalized PDF
Split up the PDF (one for $\theta$ , one for $\phi$ )
Calculate the CDF by integrating the PDF
Set the CDF equal to some random number between 0 and 1 to obtain a $\theta$ and $\phi$ angle which define the sample

A common action that is performed throughout the following equations is going from an integral over the hemisphere using solid angles, to an integral over the hemisphere using spherical coordinates. This transformation is done as follows.

\int _{\Omega }f(\theta)dw = \int_{0}^{2\pi }\int_{0}^{\frac{\pi}{2}}f(\theta, \phi) \sin\theta d \theta d \phi

Jump to heading Uniform hemisphere

\left\{\begin{matrix} \begin{aligned} \theta &= \cos^{-1}(\varepsilon_{0}) \\ \phi &= 2\pi \varepsilon_{1} \end{aligned}\end{matrix}\right.

pdf(w_{i}) = \frac{1}{2\pi}

Derivation

For uniform sampling, the PDF should be proportional to 1. We PDF is normalized by dividing by the PDF, integrated over the whole hemisphere.

\begin{aligned} pdf(\omega) &= \frac{1}{\int _{\Omega }1d\omega} = \frac{1}{\int_{0}^{2\pi }\int_{0}^{\frac{\pi}{2}}1\sin\theta d \theta d \phi} = \frac{1}{2\pi} \\ pdf(\theta,\phi) &= pdf(\omega ) \sin\theta = \frac{\sin\theta}{2\pi} \end{aligned}

Next, the PDF is split up. We obtain the pdf for $\theta$ by integrating over the whole domain of the $\phi$ angle which is the same as multiplying by $2\pi$ since the pdf is isotropic. The pdf for $\phi$ may be obtained by using conditional probabilities and the rule of Bayes.

\begin{aligned} pdf(\theta) &= \int_{0}^{2\pi}pdf(\theta, \phi) d\phi = \sin\theta \\ pdf(\phi|\theta) &= \frac{pdf(\theta, \phi)}{pdf(\theta)} = \frac{\frac{\sin\theta}{2\pi}}{\sin\theta} = \frac{1}{2\pi} \end{aligned}

We can then integrate the PDF to get the CDF.

\begin{aligned} cdf(\theta) &= \int_{0}^{\theta}pdf(\theta)d\theta = \int_{0}^{\theta}\sin\theta d\theta = 1-\cos\theta \\ cdf(\phi|\theta) &= \int_{0}^{\phi}pdf(\phi|\theta) d\theta = \int_{0}^{\phi}\frac{1}{2\pi} d\phi = \frac{1\phi}{2\pi} \end{aligned}

By setting these CDFs equal to a random number $\varepsilon, \epsilon \left [ 0, 1 \right ]$ , we can find an equation for the angle $\theta$ and $\phi$ that we can use for our sample.

\begin{alignat*}{2} cdf(\theta) &= 1-\cos\theta {}& =\varepsilon_{0} \rightarrow \theta &= \cos^{-1}(1-\varepsilon_{0}) \\ cdf(\phi|\theta) &= \frac{1\phi}{2\pi} {}& =\varepsilon_{1} \rightarrow \phi &= 2\pi \varepsilon_{1} \end{alignat*}

Since $\varepsilon$ is a number between 0 and 1, these equations can be written a bit cleaner as follows.

\left\{\begin{matrix} \begin{aligned} \theta &= \cos^{-1}(\varepsilon_{0}) \\ \phi &= 2\pi \varepsilon_{1} \end{aligned} \end{matrix}\right.

Jump to heading Cosine-weighted hemisphere

\left\{\begin{matrix} \begin{aligned} \theta &= \cos^{-1}(\sqrt{\varepsilon_{0}}) \\ \phi &= 2\pi \varepsilon_{1} \end{aligned} \end{matrix}\right.

pdf(w_{i}) = \frac{\cos\theta}{\pi}

Derivation

For cosine-weighted sampling, the PDF should be proportional to a cosine. The PDF is normalized by dividing by the result of integrating the PDF over the whole hemisphere.

\begin{aligned} pdf(\omega) &= \frac{\cos\theta}{\int _{\Omega }\cos\theta d\omega} = \frac{\cos\theta}{\int_{0}^{2\pi }\int_{0}^{\frac{\pi}{2}}\sin\theta\cos\theta d \theta d \phi} = \frac{\cos\theta}{\pi} \\ pdf(\theta,\phi) &= pdf(\omega ) \sin\theta = \frac{\sin\theta\cos\theta}{\pi} \end{aligned}

\begin{aligned} pdf(\theta) &= \int_{0}^{2\pi}pdf(\theta, \phi) d\phi = 2\sin\theta\cos\theta \\ pdf(\phi|\theta) &= \frac{pdf(\theta, \phi)}{pdf(\theta)} = \frac{\frac{\sin\theta\cos\theta}{\pi}}{2\sin\theta\cos\theta} = \frac{1}{2\pi} \end{aligned}

We can then integrate the PDF to get the CDF.

\begin{aligned} cdf(\theta) &= \int_{0}^{\theta}pdf(\theta)d\theta = \int_{0}^{\theta}2\sin\theta\cos\theta d\theta = \sin^2\theta \\ cdf(\phi|\theta) &= \int_{0}^{\phi}pdf(\phi|\theta) d\theta = \int_{0}^{\phi}\frac{1}{2\pi} d\phi = \frac{1\phi}{2\pi} \end{aligned}

By setting these CDFs equal to a random number $\varepsilon, \epsilon \left [ 0, 1 \right ]$ , we can find an equation for the angle $\theta$ and $\phi$ that we can use for our sample.

\begin{alignat*}{2} cdf(\theta) &= \sin^2\theta {}& =\varepsilon_{0} \rightarrow \theta &= \sin^{-1}(\sqrt{\varepsilon_{0}}) = \cos^{-1}(\sqrt{1-\varepsilon_{0}}) \\ cdf(\phi|\theta) &= \frac{1\phi}{2\pi} {}& =\varepsilon_{1} \rightarrow \phi &= 2\pi \varepsilon_{1} \end{alignat*}

Since $\varepsilon$ is a number between 0 and 1, these equations can be written a bit cleaner as follows.

\left\{\begin{matrix} \begin{aligned} \theta &= \cos^{-1}(\sqrt{\varepsilon_{0}}) \\ \phi &= 2\pi \varepsilon_{1} \end{aligned} \end{matrix}\right.

Jump to heading Power cosine-weighted hemisphere

This is a generalization of the cosine-weighted sampling scheme in the previous section. Instead of sampling proportional to $\cos\theta$ , here we sample proportional to $\cos^{\alpha}\theta$ .

\left\{\begin{matrix} \begin{aligned} \theta &= \cos^{-1}(\varepsilon_{0}^{\frac{1}{\alpha+1}}) \\ \phi &= 2\pi \varepsilon_{1} \end{aligned} \end{matrix}\right.

pdf(w_{i}) = \frac{(\alpha+1)\cos^{\alpha}\theta}{2\pi}

Derivation

For power cosine-weighted sampling, the PDF should be proportional to a cosine with a power exponent. The PDF is normalized by dividing by the result of integrating the PDF over the whole hemisphere

\begin{aligned} pdf(\omega) &= \frac{\cos^{\alpha}\theta}{\int _{\Omega }\cos^{\alpha}\theta d\omega} = \frac{\cos^{\alpha}\theta}{\int_{0}^{2\pi }\int_{0}^{\frac{\pi}{2}}\sin\theta\cos^{\alpha}\theta d \theta d \phi} = \frac{(\alpha+1)\cos^{\alpha}\theta}{2\pi} \\ pdf(\theta,\phi) &= pdf(\omega ) \sin\theta = \frac{(\alpha+1)\cos^{\alpha}\theta\sin\theta}{2\pi} \end{aligned}

\begin{aligned} pdf(\theta) &= \int_{0}^{2\pi}pdf(\theta, \phi) d\phi = (\alpha+1)\cos^{\alpha}\theta\sin\theta \\ pdf(\phi|\theta) &= \frac{pdf(\theta, \phi)}{pdf(\theta)} = \frac{\frac{(\alpha+1)\cos^{\alpha}\theta\sin\theta}{2\pi}}{(\alpha+1)\cos^{\alpha}\theta\sin\theta} = \frac{1}{2\pi} \end{aligned}

We can then integrate the PDF to get the CDF.

\begin{aligned} cdf(\theta) &= \int_{0}^{\theta}pdf(\theta)d\theta = \int_{0}^{\theta}(\alpha+1)\cos^{\alpha}\theta\sin\theta d\theta = 1-\cos^{(\alpha+1)}\theta \\ cdf(\phi|\theta) &= \int_{0}^{\phi}pdf(\phi|\theta) d\theta = \int_{0}^{\phi}\frac{1}{2\pi} d\phi = \frac{1\phi}{2\pi} \end{aligned}

By setting these CDFs equal to a random number $\varepsilon, \epsilon \left [ 0, 1 \right ]$ , we can find an equation for the angle $\theta$ and $\phi$ that we can use for our sample.

\begin{alignat*}{2} cdf(\theta) &= 1-\cos^{(\alpha+1)}\theta {}& =\varepsilon_{0} \rightarrow \theta &= \cos^{-1}((1-\varepsilon_{0})^{\frac{1}{\alpha+1}}) \\ cdf(\phi|\theta) &= \frac{1\phi}{2\pi} {}& =\varepsilon_{1} \rightarrow \phi &= 2\pi \varepsilon_{1} \end{alignat*}

Since $\varepsilon$ is a number between 0 and 1, these equations can be written a bit cleaner as follows.

\left\{\begin{matrix} \begin{aligned} \theta &= \cos^{-1}(\varepsilon_{0}^{\frac{1}{\alpha+1}}) \\ \phi &= 2\pi \varepsilon_{1} \end{aligned} \end{matrix}\right.

Jump to heading Microfacet-BRDF hemisphere

For microfacet BRDFs, the sampling can be made proportional to the used normal distribution function $D(h)$ . The steps are similar for each normal distribution function. The PDFs may be calculated by noting that NDFs need to satisfy the following equation where $\theta$ is the angle between the normal vector NN and the halfway vector $H$ .

\int _{\Omega }D(h)\cos\theta dh = 1

Jump to heading Blinn-Phong

D(h) = \frac{(\alpha+2)\cos\theta^{\alpha}}{2\pi}

\left\{\begin{matrix} \begin{aligned} \theta &= \cos^{-1}(\varepsilon_{0}^{\frac{1}{\alpha+2}}) \\ \phi &= 2\pi \varepsilon_{1} \end{aligned} \end{matrix}\right.

pdf(w_{i}) = \frac{(\alpha+2)\cos\theta^{(\alpha+1)}}{2\pi}

Derivation

\begin{aligned} pdf(\omega) &= D(h)\cos\theta = \frac{(\alpha+2)\cos\theta^{\alpha}\cos\theta}{2\pi} = \frac{(\alpha+2)\cos\theta^{(\alpha+1)}}{2\pi} \\ pdf(\theta,\phi) &= pdf(\omega ) \sin\theta = \frac{(\alpha+2)\cos\theta^{(\alpha+1)}\sin\theta}{2\pi} \end{aligned}

\begin{aligned} pdf(\theta) &= \int_{0}^{2\pi}pdf(\theta, \phi) d\phi = (\alpha+2)\cos\theta^{(\alpha+1)}\sin\theta \\ pdf(\phi|\theta) &= \frac{pdf(\theta, \phi)}{pdf(\theta)} = \frac{\frac{(\alpha+2)\cos\theta^{(\alpha+1)}\sin\theta}{2\pi}}{(\alpha+2)\cos\theta^{(\alpha+1)}\sin\theta} = \frac{1}{2\pi} \end{aligned}

We can then integrate the PDF to get the CDF.

\begin{aligned} cdf(\theta) &= \int_{0}^{\theta}pdf(\theta)d\theta = \int_{0}^{\theta}(\alpha+2)\cos\theta^{(\alpha+1)}\sin\theta d\theta = 1-\cos\theta^{(\alpha+2)} \\ cdf(\phi|\theta) &= \int_{0}^{\phi}pdf(\phi|\theta) d\theta = \int_{0}^{\phi}\frac{1}{2\pi} d\phi = \frac{1\phi}{2\pi} \end{aligned}

By setting these CDFs equal to a random number $\varepsilon, \epsilon \left [ 0, 1 \right ]$ , we can find an equation for the angle $\theta$ and $\phi$ that we can use for our sample.

\begin{alignat*}{2} cdf(\theta) &= 1-\cos\theta^{(\alpha+2)}\theta {}& =\varepsilon_{0} \rightarrow \theta &= \cos^{-1}((1-\varepsilon_{0})^{\frac{1}{\alpha+2}}) \\ cdf(\phi|\theta) &= \frac{1\phi}{2\pi} {}& =\varepsilon_{1} \rightarrow \phi &= 2\pi \varepsilon_{1} \end{alignat*}

Since $\varepsilon$ is a number between 0 and 1, these equations can be written a bit cleaner as follows.

\left\{\begin{matrix} \begin{aligned} \theta &= \cos^{-1}(\varepsilon_{0}^{\frac{1}{\alpha+2}}) \\ \phi &= 2\pi \varepsilon_{1} \end{aligned} \end{matrix}\right.

Jump to heading Beckmann

D(h) = \frac{e^{\frac{-\tan\theta^{2}}{\alpha^{2}}}}{\alpha^{2}\cos^4\theta}

\left\{\begin{matrix} \begin{aligned} \theta &= \tan^{-1}\sqrt{-\alpha^2\ln(1-\frac{\varepsilon_{0}}{\pi})} \\ \phi &= 2\pi \varepsilon_{1} \end{aligned} \end{matrix}\right.

pdf(w_{i}) = \frac{e^{\frac{-\tan\theta^{2}}{\alpha^{2}}}}{\alpha^{2}\cos^3\theta}

Derivation

\begin{aligned} pdf(\omega) &= D(h)\cos\theta = \frac{e^{\frac{-\tan\theta^{2}}{\alpha^{2}}}\cos\theta}{\alpha^{2}\cos^4\theta} = \frac{e^{\frac{-\tan\theta^{2}}{\alpha^{2}}}}{\alpha^{2}\cos^3\theta} \\ pdf(\theta,\phi) &= pdf(\omega ) \sin\theta = \frac{e^{\frac{-\tan\theta^{2}}{\alpha^{2}}}\sin\theta}{\alpha^{2}\cos^3\theta} \end{aligned}

\begin{aligned} pdf(\theta) &= \int_{0}^{2\pi}pdf(\theta, \phi) d\phi = \frac{2\pi e^{\frac{-\tan\theta^{2}}{\alpha^{2}}}\sin\theta}{\alpha^{2}\cos^3\theta} \\ pdf(\phi|\theta) &= \frac{pdf(\theta, \phi)}{pdf(\theta)} = \frac{\frac{e^{\frac{-\tan\theta^{2}}{\alpha^{2}}}\sin\theta}{\alpha^{2}\cos^3\theta}}{\frac{2\pi e^{\frac{-\tan\theta^{2}}{\alpha^{2}}}\sin\theta}{\alpha^{2}\cos^3\theta}} = \frac{1}{2\pi} \end{aligned}

We can then integrate the PDF to get the CDF.

\begin{aligned} cdf(\theta) &= \int_{0}^{\theta}pdf(\theta)d\theta = \int_{0}^{\theta}\frac{2\pi e^{\frac{-\tan\theta^{2}}{\alpha^{2}}}\sin\theta}{\alpha^{2}\cos^3\theta} d\theta = \pi(1-e^{\frac{-\tan\theta^{2}}{\alpha^{2}}})\\ cdf(\phi|\theta) &= \int_{0}^{\phi}pdf(\phi|\theta) d\theta = \int_{0}^{\phi}\frac{1}{2\pi} d\phi = \frac{1\phi}{2\pi} \end{aligned}

By setting these CDFs equal to a random number $\varepsilon, \epsilon \left [ 0, 1 \right ]$ , we can find an equation for the angle $\theta$ and $\phi$ that we can use for our sample.

\begin{alignat*}{2} cdf(\theta) &= \pi(1-e^{\frac{-\tan\theta^{2}}{\alpha^{2}}}) {}& =\varepsilon_{0} \rightarrow \theta &= \tan^{-1}\sqrt{-\alpha^2\ln(1-\frac{\varepsilon_{0}}{\pi})} \\ cdf(\phi|\theta) &= \frac{1\phi}{2\pi} {}& =\varepsilon_{1} \rightarrow \phi &= 2\pi \varepsilon_{1} \end{alignat*}

This gives us the following samples.

\left\{\begin{matrix} \begin{aligned} \theta &= \tan^{-1}\sqrt{-\alpha^2\ln(1-\frac{\varepsilon_{0}}{\pi})} \\ \phi &= 2\pi \varepsilon_{1} \end{aligned} \end{matrix}\right.

Jump to heading Additional resources

http://www.igorsklyar.com/system/documents/papers/4/fiscourse.comp.pdf

https://agraphicsguynotes.com/posts/sample_microfacet_brdf/

https://www.reedbeta.com/blog/hows-the-ndf-really-defined/

https://www.graphics.cornell.edu/~bjw/wardnotes.pdf

https://cseweb.ucsd.edu/~ravir/6998/papers/p265-ward.pdf

https://schuttejoe.github.io/post/ggximportancesamplingpart1/

Writing a chess engine in C++

2022-03-11T00:00:00Z

Jump to heading Introduction

For a university course this semester we had to write a chess engine in C++. I'm not a chess player and was only familiar with the most basic chess rules so this was quite a challenge. Below is a video of my engine winning a game during a chess tournament (playing as white).

Jump to heading Board representation

In my chess engine, a board gets represented using bitboards. A bitboard is basically just 64 bits. By having this simple representation, the computer is able to very rapidly perform certain operations on it. Having just 1 bitboard representation for the whole board is not enough since 1 bit is not enough to store what is going on at a specific square. That is why in total, 12 bitboards are defined. The starting position of a chess board is shown below. The board has 64 squares, 6 types of pieces and 2 colors. In total, I use 12 bitboards to represent this because there are 12 piece types if you take into account the color of a piece.

The chess starting position.

In C++, I use the uint64_t type for representing bitboards. I also define several operations in order to work with them more easily. For some of these operation, you can use so called built-in functions like __builtin_ctzll which will return the total number of trailing 0-bits. Because we store a bitboard as 64 bits, it is very easy to represent things like the 'A file' or the '5th rank' in just a single line.

typedef uint64_t U64;

const U64 FILE_A = 0x8080808080808080ULL;
const U64 RANK_5 = 0xff00000000ULL;

#define set_bit(b, i) ((b) |= (1ULL << i))
#define get_bit(b, i) ((b) & (1ULL << i))
#define clear_bit(b, i) ((b) &= ~(1ULL << i))
#define get_LSB(b) (__builtin_ctzll(b))

inline int pop_LSB(U64 &b) {
    int i = get_LSB(b);
    b &= b - 1;
    return i;
}

Once you have your bitboards, you can work with them by using bitwise operations. As an example let's say we want to get all the possible promotions of the white pawns. All of the possible promotions are shown in the image below.

Pawn promotions.

In code, the following steps are performed.

// only look at the pawns on the 7th rank
U64 promotions = (bitboards[P] & RANK_7)

// promote north if the square is empty
U64 north_promotions = north(promotions) & empties;

// promote west/east if there is an enemy piece there that we may capture
U64 west_promotions = north_west(promotions) & blacks;
U64 east_promotions = north_east(promotions) & blacks;

This is a good example of why we use bitboards. We just need to use some bitwise operations and we're done. The north/west/etc. are helper functions to perform bit-shift operations.

constexpr U64 west(U64 b) { return (b & ~FILE_A) << 1; }
constexpr U64 east(U64 b) { return (b & ~FILE_H) >> 1; }
constexpr U64 north_west(U64 b) { return (b & ~FILE_A) << 9; }
constexpr U64 north_east(U64 b) { return (b & ~FILE_H) << 7; }
// ... etc

When performing the bit-shift operations, I also do out-of-bounds checks which makes these helper functions useful.

Jump to heading Attack tables

In a chess game there are 2 kind of pieces:

🐇 Leaping pieces: pawns, knights, kings

⛸️ Sliding pieces: bishop, rook, queen

Leaping pieces can just immediately jump to their target square and do not need to take into account any blocking pieces. Sliding pieces are pieces that cannot jump over other pieces. Instead, they slide towards their target and may be blocked by other pieces during the process.

Jump to heading Leaping pieces

For leaping pieces, all of the attacks are pre-calculated and put in a simple lookup table. During the game when we want to find the possible attacks for a piece, we query the lookup table by index using the position of the piece and in return we get a bitboard that has 1-bits wherever the possible attacks of the piece are located. These attack tables are pre-calculated before the game which saves on runtime-performance. For example the knight attack table is generated as follows.

U64 attacks, knights = 0ULL;

// place knight on board
set_bit(knights, square);

// add attacks
attacks = (((knights >> 6)  | (knights << 10)) & ~FILE_GH) |
          (((knights >> 10) | (knights << 6))  & ~FILE_AB) |
          (((knights >> 15) | (knights << 17)) & ~FILE_H)  |
          (((knights >> 17) | (knights << 15)) & ~FILE_A);

Again, bitwise operations are used to easily generate these, but it doesn't really matter whether this attack generation is fast or not since it's precalculated anyway.

The image below shows the possible attacks for a given knight piece. All of these attacks can be generated using straightforward bit-shift operations (>>, <<). Each attack is added together using a bitwise-OR operation (|) and finally it is checked if the attack ends up out of bounds of the board.

Knight attack pattern.

At runtime, the potential moves can easily be queried. For example, querying the potential moves for a king is shown below. We perform a bitwise-AND operation to get the actual possible moves since the king can not move to a square where there already is a piece with the same color.

U64 attacks = KING_ATTACKS[from] & targets;

Jump to heading Sliding pieces

For the sliding pieces, generating the attacks is a bit more complicated since possible attacks depend on possible blocking pieces that are placed on the board. The image below shows how the attack pattern of a queen is influenced by blocking pieces on the board.

Queen piece blockers.

I won't go too much into detail but essentially we use magic bitboards which is a hashing technique. The idea is that for each sliding piece, for each square, for each possible blocking pattern, we generate the possible attacks.

The sentence above has a lot of 'for each' in it and so as expected, storing all these combinations take up a significant amount of space. The pre-calculation involves generating all of the possible attack patterns and storing them, indexable by a key. The payoff is worth it. We end up with an easy lookup of possible attacks, given a square and blocker pattern. The attack patterns are stored in a 2D array where the square of the piece is used as a first index, and then a key is generated based on the blocker pattern and the square.

U64 ROOK_ATTACKS[64][4096];

U64 Board::getRookAttacks(int square, U64 blockers) const {
  return ROOK_ATTACKS[square][getRookKey(blockers, square)];
}

If you want to know more about magic bitboards, I put some links at the bottom.

💬 Disclaimer: magic bitboards are not actually magic :/

Now that we have handled both board representation and pre-calculating attack tables, we can get to actually generating the moves.

Jump to heading Move generation

For a given board position, we want to be able to calculate all the possible moves so that the engine can pick one of them to perform. The main function looks like this:

Board::MoveVec Board::generateMoves<LEGAL>(MoveVec &moves) const {
  // if the king is in check then the legal moves can only be evasions
  isKingInCheck(boardTurn) ? generateMoves<EVASIONS>(moves) : generateMoves<PSEUDO_LEGAL>(moves);

  // extract legal moves from pseudo-legal moves
  std::vector<Move> legal_moves;
  legal_moves.reserve(MOVES_RESERVE_SIZE);

  for (auto &move: moves) {
    if (isMoveLegal(move)) legal_moves.push_back(move);
  }
  return legal_moves;
}

I do a test to see if the king is in check, because then we only need to generate a subset of all the possible moves since the only legal move is to resolve the check. If the king is not in check, we generate pseudo-legal moves (moves that could leave the king in check) and then we filter out the non-legal moves.

Jump to heading Pseudo-legal moves

Generating pseudo-legal moves is fairly straightforward for most pieces since we have the attack tables pre-calculated. For example for the queen moves are generated as follows:

MoveVec &moves;
generateQueenMoves(moves, friendly_queens, ~friendlies);

void Board::generateQueenMoves(MoveVec &moves, U64 queens, U64 targets) const {
  // for each of our queens
  while (queens) {
    // get the position of the queen
    int from = pop_LSB(queens);
    // get the (pre-calculated) attacks of the queen
    // we limit the attacks to contain enemy squares (captures) and
    // empty squares (regular moves), moving to a friendly square is not possible
    U64 attacks = getQueenAttacks(from, all) & targets;
    // add a move for each attack
    while (attacks) addMove(Move(getSquare(from), getSquare(pop_LSB(attacks))), moves);
  }
}

The generated moves are pseudo-legal since they might leave the king in check. For example in the image below, the white bishop has 4 moves generated for it but none of them are legal since they all would leave the king in check. It is easier and faster to generate pseudo-legal moves, and then check if they are legal, compared to generating only legal moves in the first place, so that is why we do it this way.

Pseudo-legal bishop moves.

Jump to heading Pawn moves

Pawn moves are more complicated because pawns can move in more complex ways. For example in the image below, the pawn on rank 2 is in its starting position so it could move 1 or 2 squares upwards. The pawn on rank 5 could move either 1 square upwards or do an en-passant capture since black did a double pawn-push in the previous move. The pawn on rank 7 could go for a promotion by moving upwards or by capturing the black rook.

The complexity of pawn moves.

Luckily, our bitboard-approach makes this relatively easy to do. The code below shows how pawn moves are generated. Some of the code is left out since the original code is quite long and contains additional things that need to happen based on whether we're generating captures, evasions or general moves, but you should get the idea.

// promotion-eligible pawns are on rank 7
U64 promotions = pawns & RANK_7;
U64 non_promotions = pawns & ~RANK_7;

// pawns can be pushed if there is an empty space
U64 singles = north(non_promotions) & empties;
U64 doubles = north(singles & RANK_3) & empties;

if (promotions) {
  // north promotions are regular pushes and need an empty square
  U64 north_promotions = north(promotions) & empties;

  // west/east promotions can only be captures
  U64 west_promotions = north_west(promotions) & blacks;
  U64 east_promotions = north_east(promotions) & blacks;
}

// captures can happen left/right and need an enemy piece
U64 west_captures = north_west(non_promotions) & blacks;
U64 east_captures = north_east(non_promotions) & blacks;

if (enpassant) {
  U64 enpassants = non_promotions & PAWN_ATTACKS[0][get_LSB(enpassant)];
}

Jump to heading Castling

Castling is a special move involving the king and the rook. Before you can perform the move, several criteria need to be met.

The conditions are checked using the following code.

if (turn == WHITE && hasCastlingRights(CastlingRights::WhiteKingside)) {
  if (!get_bit(all, f1) && !get_bit(all, g1) &&
    !isSquareAttackedBy(e1, BLACK) &&
    !isSquareAttackedBy(f1, BLACK))
    addMove(Move(Square::E1, Square::G1), moves);
}

The castling rights (whether or not we can castle) are updated after a move (that has an effect on the castling rules) is performed. The code above checks if the necessary preconditions like squares being empty/not attacked are met.

Jump to heading Check evasions

When our king is in check, we need to resolve the check. In the board setup below, the black king is attacked and check evasion can be done by either moving the king to one of the marked spots, or alternatively we can use the black queen to capture the white knight, which would also resolve the check.

Check evasion.

I will not go into detail of how the evasion code works, but it involves finding out the attackers of the king and figuring out the attack lines between the attackers and the king. The possible moves for pieces to resolve the check then include:

king moves that resolve the check
moves that capture the attacker (if the attacker is a sliding or leaping piece)
moves that block the attack line between enemy attacker and king (if the attacker is a sliding piece)

Jump to heading Testing for correctness

Now that our move generation is done, we want to know if it actually is correct. The easiest way to test if your move generation code is correct is by using perft tests. Basically, given a initial board position, you generate all the possible moves. For each generated move, you perform the move and recursively call the perft function again. Then you undo the move which restores the board to its previous position.

The perft function will essentially count all possible moves up to a specified depth, given an intial board setup. This is useful because if you try this function up to a depth of 5 or 6 and the result is the same as what some established chess engines get as a result, you can be fairly certain that your move generation is correct. The perft function is shown below.

uint64_t perft(Board &board, int depth) {
  std::vector<Move> moves;
  moves.reserve(MOVES_RESERVE_SIZE);
  moves = board.generateMoves<LEGAL>(moves);

  uint64_t nodes = 0;

  if (depth == 1) return moves.size();

  for (const auto &move: moves) {
    Position position = board.copyBoard(board);
    board.makeMove(move);
    nodes += perft(board, depth - 1);
    board.restorePosition(board, position);
  }
  return nodes;
}

I wrote some unit tests where around 10 board positions are evaluated up until a depth of 6. This is very useful to make sure that a change to your engine does not mess up move generation. If your perft result does not match the expected result, you can compare the amount of moves branch-by-branch using another chess engine that you 'know' is correct, and track down where your move generation goes wrong.

Jump to heading Move selection and search

Jump to heading Board evaluation

Now that we can correctly generate moves, we can write an algorithm that picks the best move for us, given a board position. At the core of this, there is an evaluation function that evaluates whether or not a position is 'good'. At this stage, it probably helps if you are a good chess player so that you can come up with some good heuristics. I evaluate boards based on 2 criteria:

material
positional

Material means that some pieces are worth more than others. Positional means that a piece on some square, is better than that piece being on a different square. In code, this looks like this.

const int PIECE_SCORES_MATERIAL[6] = {
    // pawn, knight, bishop, rook, queen, king
    100, 300, 300, 500, 900, 12000
};

const int KNIGHT_SCORES_POSITIONAL[64] = {
  // a score for each square on the board
  -58, -38, -13, -28, -31, -27, -63, -99,
  -25,  -8, -25,  -2,  -9, -25, -24, -52,
  -24, -20,  10,   9,  -1,  -9, -19, -41,
  -17,   3,  22,  22,  22,  11,   8, -18,
  -18,  -6,  16,  25,  16,  17,   4, -18,
  -23,  -3,  -1,  15,  10,  -3, -20, -22,
  -42, -20, -10,  -5,  -2, -20, -23, -44,
  -29, -51, -23, -15, -22, -18, -50, -64,
};

The material scores are pretty straightforward, the king is worth the most, a pawn the least. For the positional scores, I found some tables online that seemed to work well. A good example is the knight: it has a better evaluation if the knight is positioned in the center of the board since that means that it can reach more squares and thus has a larger influence. If the knight is put in the corner of the board, many of its usual attacks fall out of bounds of the board.

I have defined these scores for 3 stages of the game: start, middle and end and depending on the stage of the game, a linear interpolation occurs between them.

Jump to heading Finding the best move

My chess engine uses an alpha-beta pruning search algorithm. In short, it goes over the game tree (all possible moves up to a certain depth) and finds the best move. The pruning part is useful because by encountering certain good positions, it can remove huge chunks of the tree that are guaranteed not to give a better result.

In order to help the algorithm, moves are sorted because the earlier the search algorithm encounters a good move, the more branches can be pruned and less board positions have to be evaluated. The move ordering uses some heuristics to estimate whether or not a move will be good. I use a scoring system that among other things considers capturing moves and promotion moves to be good.

Captures are evaluated using the most valuable victim, least valuable attacked principle where a pawn capturing a queen is seen as the best, and a queen capturing a pawn is seen as the worst. Promotions to more valuable pieces are considered better.

for (auto &move: moves) {
  int score = 0;

  // capture moves (10010 - 10055)
  if (captured.has_value()) {
    score = 10000 + MVV_LVA[moved.value().toInt() - 6 * (moved.value().toInt() >= 6)][captured.value().toInt()
        - 6 * (captured.value().toInt() >= 6)];
  }

  // promotion moves (9300 - 9900)
  if (promotion.has_value()) {
    score = 9000 + PIECE_SCORES[static_cast<int>(promotion.value())];
  }

  move.setScore(score);
}

This move ordering results in a significant reduction in nodes of the tree that need to be evaluated. Lastly, the search algorithm uses an iterative-deepening approach which allows the engine to keep search depth-by-depth, until the time for searching is up. This allows the engine to use up all the time that is allocated for a search, without using up too much time.

Jump to heading Conclusion

Writing a chess engine is complex, and frustrating. I can highly recommend it.

Jump to heading Additional resources

Jump to heading Magic Bitboards

https://www.chessprogramming.org/Magic_Bitboards

Jump to heading Chess engines

Sebastian Lague chess engine

Rendering realtime caustics

2022-03-01T00:00:00Z

Jump to heading Introduction

I will go over my method of rendering real-time caustics. The goal is not to generate a physically accurate result, but rather to achieve real-time, controllable, good-looking water caustics effects.

A good way of working with caustics is by creating caustics volumes. Essentially we create a volume, and position it where the caustics should show up in our scene.

Jump to heading World-space UVs

The caustics volume needs to render caustics onto the scene. For this, we will use a caustics texture. Since the caustics should be mapped to the geometry of the scene in world-space, we need to use world-space UVs. To get the world position, we will perform a reconstruction using the depth buffer. This is explained in the following sections.

Jump to heading 1. Reading the depth buffer

First we sample the depth buffer using screen-space coordinates.

struct Attributes
{
    float4 positionOS : POSITION;
};

struct Varyings
{
    float4 positionCS : SV_POSITION;
};

Varyings vert(Attributes IN)
{
    Varyings OUT;
    OUT.positionCS = TransformObjectToHClip(IN.positionOS.xyz);
    return OUT;
}

half4 frag(Varyings IN) : SV_Target
{
    // calculate position in screen-space coordinates
    float2 positionNDC = IN.positionCS.xy / _ScaledScreenParams.xy;

    // sample scene depth using screen-space coordinates
    #if UNITY_REVERSED_Z
    real depth = SampleSceneDepth(positionNDC);
    #else
        real depth = lerp(UNITY_NEAR_CLIP_VALUE, 1, SampleSceneDepth(UV));
    #endif
}

In the code above we simply sample the scene depth texture using normalized screen-space coordinates.

💡 The UNITY_REVERSED_Z block is used to handle platform-specific differences related to the depth buffer.

Jump to heading 2. Reconstructing world position from depth

Now that we have access to the value of the depth buffer given a screen-space coordinate, we can use it to compute a position in world-space coordinates using the following code in the fragment shader.

// calculate position in world-space coordinates
float3 positionWS = ComputeWorldSpacePosition(positionNDC, depth, UNITY_MATRIX_I_VP);

If we want, we can visualize this in the scene using the following code in the fragment shader, where we take the fractional part of the world-space position (you can leave it out in the final shader, it is just for debugging).

half4 color = half4(frac(positionWS), 1.0);
#if UNITY_REVERSED_Z
    if(depth < 0.0001) return half4(0,0,0,1);
#else
    if(depth > 0.9999) return half4(0,0,0,1);
#endif
return color;

As you can see, this gives us world-space positions to map our caustics texture to.

Jump to heading 3. Caustics volume

We want the caustics volume to act like some sort of decal, where caustics show up wherever the volume intersects with the scene geometry. In order to achieve this, we calculate a bounding box mask in object space to limit the output of our shader.

// calculate position in object-space coordinates
float3 positionOS = TransformWorldToObject(positionWS);

// create bounding box mask
float boundingBoxMask = all(step(positionOS, 0.5) * (1 - step(positionOS, -0.5)));

The way this bounding box mask works is by relying on the fact that the positions of the vertices of the box volume in object space, have a min/max of -0.5 and 0.5 respectively. We use a step function to mask out any pixels that are out of these bounds. The all function is used to make sure this happens in all of the x/y/z axes.

By multiplying our output with this bounding box mask, we can limit the caustics to only be rendered where needed.

Bounding box mask.

Jump to heading Caustics

We now have everything required to start displaying caustics. We will do this in multiple steps, each step improving on the effect.

Jump to heading 1. Mapping

We can map the caustics to the scene geometry by using the world-space coordinates as UVs. If you use the x and z components of the world-space position as UVs, the caustics will appear to be projected top-down onto the scene geometry. However, nstead of using a fixed direction, it would be better to let the direction of the light play a role in how the caustics are oriented.

half4x4 _MainLightDirection;

TEXTURE2D(_CausticsTexture);
SAMPLER(sampler_CausticsTexture);

// calculate caustics texture UV coordinates (influenced by light direction)
half2 uv = mul(positionWS, _MainLightDirection).xy;
half4 caustics = SAMPLE_TEXTURE2D(_CausticsTexture, sampler_CausticsTexture, uv);

In the code above, we use the main light direction to influence the UVs that we use to sample the caustics texture. By doing this, the caustics follow the direction of light and appear to be projected onto the scene.

Mapping caustics to the scene geometry.

To be able to access the light direction in our shader, a C# script is used with the following code.

var sunMatrix = RenderSettings.sun.transform.localToWorldMatrix;
causticsMaterial.SetMatrix("_MainLightDirection", sunMatrix);

This code will simply write the direction of the light to the appropriate shader property so that it can be used in the shader.

Jump to heading 2. Scaling and movement

Now that we have the caustics mapped to the scene geometry, let's get them moving. We can use a simple panner function to move the caustics texture. There is a parameter for controlling the speed, as well as the scale of the texture.

half2 Panner(half2 uv, half speed, half tiling)
{
    return (half2(1, 0) * _Time.y * speed) + (uv * tiling);
}

half2 moving_uv = Panner(uv, _CausticsSpeed, 1 / _CausticsScale);

By using these modified UVs to sample the texture, we get moving caustics.

Jump to heading 3. Multiple textures

Having just a single caustics texture moving around looks kind of weird. To fix this, we will put a second caustics texture on top of the first one. The trick here is to move the textures with a different strength and scale.

// create panning UVs for the caustics
half2 uv1 = Panner(uv, 0.75 * _CausticsSpeed, 1 / _CausticsScale);
half2 uv2 = Panner(uv, 1 * _CausticsSpeed, -1 / _CausticsScale);

half4 tex1 = SAMPLE_TEXTURE2D(_CausticsTexture, sampler_CausticsTexture, uv1);
half4 tex2 = SAMPLE_TEXTURE2D(_CausticsTexture, sampler_CausticsTexture, uv2);

half3 caustics = min(tex1, tex2) * _CausticsStrength;

We combine the 2 moving textures using a min operation which will return the minimum of the inputs. We multiply the result with a strength parameter to control how bright the caustics appear.

In the code above, I use 1 single speed/scale parameter and use it for both textures by multiplying by some magic numbers, but you can of course expose the parameters so you have full control over it. The idea is just that the textures should have a different scale/speed and then the min operation will blend them.

Jump to heading 4. Chromatic aberration

In real life, the light rays passing through the water surface get refracted because a change of medium occurs from air to water. During this process, different wavelength components of the light get refracted under different angles, causing the light ray to fall out into a rainbow pattern. This looks really beautiful and we will try to mimic it in our caustics effect.

The idea is to create function that will sample the caustics texture 3 times, each time adding an offset to the UVs. We then use these 3 samples as our r/g/b components of the final result.

half3 SampleCaustics(half2 uv, half split)
{
    half2 uv1 = uv + half2(split, split);
    half2 uv2 = uv + half2(split, -split);
    half2 uv3 = uv + half2(-split, -split);

    half r = SAMPLE_TEXTURE2D(_CausticsTexture, sampler_CausticsTexture, uv1).r;
    half g = SAMPLE_TEXTURE2D(_CausticsTexture, sampler_CausticsTexture, uv2).r;
    half b = SAMPLE_TEXTURE2D(_CausticsTexture, sampler_CausticsTexture, uv3).r;

    return half3(r, g, b);
}

// sample the caustics
half3 tex1 = SampleCaustics(uv1, _CausticsSplit);
half3 tex2 = SampleCaustics(uv2, _CausticsSplit);

I got the idea to generate chromatic aberration like this from this article by Alan Zucconi.

Jump to heading 5. Luminance mask

Next, we will improve our caustics effect by masking the caustics based on the luminance in the scene. This will make it so that the caustics appear less prominent in shadowed areas.

// luminance mask
half3 sceneColor = SampleSceneColor(positionNDC);
half sceneLuminance = Luminance(sceneColor);
half luminanceMask = lerp(1, sceneLuminance, _CausticsLuminanceMaskStrength);

The steps are simple. We sample the scene color, calculate the luminance, and then create a mask using a masking strength parameter.

Since the luminance value will almost never be zero, the caustics will still show up in shadowed areas, just less bright. If you really do not want caustics to show up there, you could work with a threshold value where caustics only show up if the luminance is over a certain value.

half luminanceMask = smoothstep(_CausticsLuminanceMaskStrength, _CausticsLuminanceMaskStrength + 0.1, sceneLuminance);

Another option is to sample the shadow map of the scene, and mask the caustics that way. This will result in hard cutoffs where the shadows are.

Jump to heading 6. Edge fade

Currently the caustics have a hard cutoff at the edge of the caustics volume. To make the transition a bit softer, we introduce a soft edge fade mask.

half edgeFadeMask = 1 - saturate((distance(positionOS, 0) - _CausticsFadeRadius) / (1 - _CausticsFadeStrength));

We can control the radius and the strength of the mask. Using this, the edges of the caustics volume look a bit less harsh.

Jump to heading 7. Underwater camera

To allow the camera to go inside of the caustics volume, we apply a cool trick where we use Cull Front to not render the front-facing polygons of the volume mesh, but only the back-facing (inside) polygons. We also use ZTest Always to always render those back-faces, even if other scene geometry is blocking it.

Cull Front
ZTest Always

This simple change allows the camera to enter the caustics volume without any problem.

This approach was kindly explained to me by A Beginner's Dev Blog, Harry Heath, Mike V and Anton Kudin on Twitter, thanks!

Jump to heading Conclusion

And that's it! A nice looking caustics effect, as a result of many little techniques coming together.

You can get this shader including an additional volume system for easy placement on the Unity asset store. Any support would be greatly appreciated!

Jump to heading Additional resources

https://www.alanzucconi.com/2019/09/13/believable-caustics-reflections/

https://twitter.com/flogelz/status/1165251296720576512?ref_src=twsrc%5Etfw

5 ways to draw an outline

2021-08-16T00:00:00Z

Jump to heading Introduction

Rendering outlines is a technique that is often used in games either for aesthetic reasons or for supporting gameplay by using it for highlights and selections around an object. For example in the game Sable, outlines are used to create a comic-book-like style. In The Last of Us, outlines are used to highlight enemies when the player goes into stealth mode.

Sable.

The Last of Us.

In this post, I will discuss 5 techniques for rendering an outline around an object.

🖍️ Interested in an outline rendering toolkit for Unity? 3 years after making this post I made Linework!

Jump to heading Rim Effects

Jump to heading Technique

One of the most basic outline effects can be achieved by using a so called fresnel effect which can be used to render an outline on the rim/edge of an object. The fresnel effect describes the reflection/transmission of light when falling onto a transparent surface. However, when using it for rendering outlines, this physical meaning of the effect is not important. The following formula is used to form the outline.

Out = pow((1.0 - saturate(dot(N, V))), P)

The formula takes the dot product between the normalized normal vector $N$ and the normalized view direction $V$ . Then, this gets exponentiated with a power $P$ . It is important to note that this is only an approximation of the fresnel effect, but it works well for our outlines.

When putting this fresnel-based outline on a sphere, you see that when we approach the grazing angle (the edge/rim of the object), the effect gets stronger.

Jump to heading Implementation

For this approach, the objects that need to have an outline get rendered using a custom shader. This shader implements the fresnel effect and allows us to set the width, power, softness and color of the outline.

float edge1 = 1 - _OutlineWidth;
float edge2 = edge1 + _OutlineSoftness;
float fresnel = pow(1.0 - saturate(dot(normalWS, viewWS)), _OutlinePower);
return lerp(1, smoothstep(edge1, edge2, fresnel), step(0, edge1)) * _OutlineColor;

The technique produces an outline that is always an inner line and is not visible outside of the object and so maybe shouldn't even be called an outline. By controlling the width, power and softness of the outline, it is possible to create hard lines or a more soft/glowy effect.

Characteristic for this approach is that it works well for objects like spheres and capsules with smooth and round edges, but it breaks down for objects like cubes or more complex models that have sharp edges.

For a cube for example, the outline will look really bad and not even resemble an outline. For a more complex model, you will have the issue of getting lots of uneven line widths, although the overall outline effect can look alright.

💬 Rim effect outlines are simple but only work well on spherical objects.

Jump to heading Vertex Extrusion

Jump to heading Technique

The second technique uses a re-rendered/duplicate version of the original object/mesh to form the outline. This duplicate object gets shown behind the original object and its vertices get extruded in order to make the duplicate object larger than the original one. The duplicate object is usually just rendered with a flat color.

Jump to heading Extrusion direction

In order to make the duplicate mesh larger, we need to change the positions of its vertices. We will be moving the vertices a certain distance along a certain direction. The first step is to pick this direction.

1. Vertex position

The first method to enlarge the mesh is to simply scale it up. This is done by moving each vertex position along the vertex position. This may sound weird but the vertex position in local space, can be seen as a vector between the center of the object and the vertex position itself and so we can move the original vertex position along that vector. For the distance, we use a width parameter.

// Move vertex along vertex position in object space.
positionOS += positionOS * width;

Doing this just kind of inflates the mesh.

For a sphere, all of the vertices have the same distance from the center point of the object and so they all get moved an equal amount. However, for other objects, these distances may vary and so vertices that are distanced further away from the center of the object, will get moved more. To fix this, you can normalize the vector along which the movement occurs.

// Move vertex along normalized vertex position in object space.
positionOS += normalize(positionOS) * width;

The result is that now all the vertices get moved an equal distance in object space, usually resulting in an outline that looks more equal-width.

However, due to working in object space, the outline still isn't a perfect equal-width outline. We will address this later.

2. Normal vector

A second method is to move the vertices along their normal vector.

// Move vertex along normal vector in object space.
positionOS += normalOS * width;

The result is a pretty nice-looking outline for objects with smooth corners such as spheres and capsules. We're still working in object space so again, the outline isn't a perfect equal-width outline.

For objects with sharper corners such as cubes, you will get visible gaps in the outline. Any model with sharp angles will have these kind of artifacts.

This can be resolved by using custom-authored normals, addressed in the next method.

3. Vertex color

A third method is to move the vertices along their vertex color. The logic behind this is that you can generate custom normals and store those in the vertex color channels of the mesh. For example you could bake spherical (smooth) normals into vertex colors and use those for a cube mesh.

// Move vertex along normal vector in object space.
positionOS += vertexColor * width;

You can see the the outline around the cube looks much better when using custom normals.

This method can avoid artifacts with models that have sharp edges but the big downside is the manual setup involved since you need to generate custom normals for your mesh, although this process can be automated using a script that bakes the normals.

Jump to heading Extrusion space

Once we have decided the direction along which we want to move the vertices, we need to choose in which coordinate space this extrusion should happen. During the vertex stage of our shader, the coordinates of the vertices start out being defined in object space and end up being transformed to clip space. This is done by applying the MVP (model/view/projection) matrix. Throughout the whole rendering pipeline, the coordinates of the vertices go through these spaces.

1. 📦 object/model/local space

2. 🌍 world space

3. 📷 camera/eye/view space

4. ✂️ (homogeneous) clip space

5. 🖥️ screen space

6. 🖼️ viewport/window space

The significance of these coordinate spaces for our outlines will be explained below.

Object space

The first method is to translate the vertices in object space.

// Move vertex along vertex position in object space.
IN.positionOS.xyz += IN.positionOS.xyz * width;

There are 2 big issues with doing the outline in object space. This is because when working in object space, the MVP transformations are yet to be applied. These transformations will alter the shape of the outline, distorting it in the process. The issues are as follows:

Scaling of the outline

-> when going from object space to world space (applying model matrix M)
Foreshortening

-> due to the perspective divide happening when going from clip space to screen space

Another consideration is that when translating the vertices in object space, this is done in a 3D space. This means that some translations will be done directly towards or away from the camera, not contributing to the apparent-width of the outline. Instead of using object-space units, it might be better to be able to control the outline width in terms of screen-space pixels.

Clip space

A second method is to perform the translations of the vertices in clip space.

// Transform vertex from object space to clip space.
OUT.positionHCS = TransformObjectToHClip(IN.positionOS.xyz);

// Transform normal vector from object space to clip space.
float3 normalHCS = mul((float3x3)UNITY_MATRIX_VP, mul((float3x3)UNITY_MATRIX_M, IN.normalOS));

// Move vertex along normal vector in clip space.
OUT.positionHCS.xy += normalize(normalHCS.xy) / _ScreenParams.xy * OUT.positionHCS.w * width * 2;

As a first step, the vertex position and normal vector are both transformed from object space to clip space. As a second step, the vertex gets translated along its normal vector. Since we are working in a 2D space now, only the x and y coordinates of the vertex positions get altered. The offset gets divided by the width and height of the screen to account for the aspect ratio of the screen. Then, the offset gets multiplied by the w component of the clip space vertex position. This is done because in the next stage, the clip space coordinates will be converted to screen space coordinates with a so-called perspective divide which will divide the clip space x/y/z coordinates by the clip space w coordinate. Since we want to end up with the same outline after this transformation to screen space, we pre-multiply by this clip space w coordinate so that the perspective divide will have no net effect on the outline. Finally, the offset gets multiplied by our desired outline width and a factor 2 so that a width unit 1 will correspond with exactly 1 pixel on the screen.

Phew!

I recommend reading this post on creating an outline in clip space. Having something explained in different ways is always useful.

The result of this whole process is a very clean outline. Since we're working in clip space, the outline is equal-width, extending the same amount (visually) around the object.

Still, (if not using custom-authored normals) the method has issues with meshes that have sharp-corners, resulting in gaps in the outline. This will be apparent in meshes that are more complex. Also, if the normals of the mesh are not set up correctly and some of them are facing the wrong way, the vertices of the outline will be moved in the opposite direction, resulting in gaps in the outline. This method being dependent on the normal vectors of the mesh is the most important downside. This is visible for the mesh in the image below.

Jump to heading Masking

The duplicate mesh should be rendered so that only the outline sticking out is visible. The most common solution for this is to cull the front-facing geometry of the duplicated mesh, using the backfaces of the geometry to form the outline. A depth test of less than or equal to is used to make sure the backfaces only show up where the outlines should go.

Another option is to use a stencil mask to prevent the duplicate mesh from showing up in front of the original mesh. When using this stencil mask method, no culling is needed. One side-effect is that there will be absolutely no inner lines on the inside of the object and if two objects overlap, the outline will also only be visible around those 2 objects.

💬 Vertex extrusion outlines are simple and look good when done in clip space. There are issues with sharp corners but these can be mitigated by using custom normals, which do require some extra setup.

Jump to heading Blurred Buffer

Jump to heading Technique

A third method to render an outline is by using something that I call a blurred buffer. For this technique, the silhouette of an object gets rendered to a buffer. This silhouette buffer is then blurred which expands the silhouette which is then used to render the outline.

Jump to heading 1. Silhouette Buffer

The first step of this technique is creating the silhouette buffer. For this, each object gets rendered to a texture using a shader that outputs a plain color.

You can use the color white for all silhouettes, allowing you to choose a single color for all outlines at the end by multiplying with the desired outline color. Alternatively, you can render each object silhouette with a specific color if you want each object to have a different colored outline.

Jump to heading 2. Blur Pass

The blur pass is used for expanding the silhouette buffer. This is usually done using a box blur or gaussian blur. To improve performance, the silhouette buffer can be scaled down before blurring. This is advantageous because blur passes can be expensive, having to process multiple pixels per pixel since they work by taking a (weighted) average of the pixels surrounding a given pixel.

Additionally, the blur pass should be done in 2 passes. This brings down the complexity of the algorithm from $O(N^2)$ to $O(2N)$ . This can be done if the used blur algorithm is a so-called separable filter which is the case both for a box blur and a gaussian blur. When doing the blur in 2 passes, the pixels get first blurred vertically, and then the vertically-blurred buffer gets blurred horizontally resulting in the final blur.

Vertical blur.

Horizontal blur.

A simple seperable box blur can be implemented by taking the non-weighted average around a given pixel. For a gaussian blur, the used kernel will be a gaussian kernel so that the weighted-average will be taken.

// Vertical box blur.
half4 sum = 0;
int samples = 2 * _KernelSize + 1;
for (float y = 0; y < samples; y++)
{
    float2 offset = float2(0, y - _KernelSize);
    sum += SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, IN.uv + offset * _MainTex_TexelSize.xy);
}
return sum / samples;

// Horizontal box blur.
half4 sum = 0;
int samples = 2 * _KernelSize + 1;
for (float x = 0; x < samples; x++)
{
    float2 offset = float2(x - _KernelSize, 0);
    sum += SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, IN.uv + offset * _MainTex_TexelSize.xy);
}
return sum / samples;

The outline width is controlled by the _KernelSize parameter of the blur shader.

Jump to heading 3. Outline Pass

After the blur pass, the blurred silhouette gets combined with the original scene to form the outline.

Using a blurred buffer is great for having soft or glowing outlines, but the buffer can also be stepped to render a hard outline.

Jump to heading Masking

Just like for the vertex extrusion method, a stencil mask can be used to make sure the outline only gets rendered behind the geometry.

💬 Blurred buffer outlines are great for soft and glowy outlines but can have a bigger impact on performance compared to other methods.

Jump to heading Jump Flood Algorithm

The fourth method is to use the Jump Flood algorithm to render outlines. The main advantage of this technique is that it can render really wide outlines, at a very reasonable performance cost. I won't go into details at this time since the technique has a good explanation in this article from Ben Golus.

💬 Jump flood outlines are a great option when you need performant, wide outlines.

Jump to heading Edge Detection

Jump to heading Technique

A fifth method is to use an edge-detection pass for rendering outlines. This full-screen pass draws lines by detecting discontinuities in the scene and rendering an outline between areas that have a large enough discontinuity between them. Discontinuities can be detected between the depth buffer value, the normal vector, the albedo color or any other data that is made available.

Jump to heading Detection of discontinuity

Roberts cross

Detecting discontinuities can be done by using an edge detection operator such as the Roberts cross operator. This operator works as a differential operator by calculating the sum of the squares of the differences between diagonal pixels resulting in a cross-like pattern. In practice, edge detection operators can be applied by convolving the original image with kernels. There are 2 kernels, one for the x direction and one for the y direction. For Roberts cross, the diagonal pixels get sampled and convolved with these kernels. The kernels have a size of $2x2$ .

static const int RobertsCrossX[4] = {
    1, 0,
    0, -1
};

static const int RobertsCrossY[4] = {
    0, 1,
    -1, 0
};

These kernels can then be used as follows.

horizontal += samples[0] * RobertsCrossX[0]; // top left (factor +1)
horizontal += samples[3] * RobertsCrossX[3]; // bottom right (factor -1)

vertical += samples[2] * RobertsCrossY[2]; // bottom left (factor -1)
vertical += samples[1] * RobertsCrossY[1]; // top right (factor +1)

edge =  sqrt(dot(horizontal, horizontal) + dot(vertical, vertical));

Roberts cross is a very simple operator but can already give nice results. The operator only needs 4 samples around a given pixel.

Sobel operator

Another method is to use a Sobel operator. Again, 2 kernels are used but this time the kernels have a size of $3x3$ .

static const int SobelX[9] = {
    1, 0, -1,
    2, 0, -2,
    1, 0, -1
};

static const int SobelY[9] = {
    1, 2, 1,
    0, 0, 0,
    -1, -2, -1
};

This time, 9 samples are used around a given pixel. The Sobel kernels can be used like this.

horizontal += samples[0] * SobelX[0]; // top left (factor +1)
horizontal += samples[2] * SobelX[2]; // top right (factor -1)
horizontal += samples[3] * SobelX[3]; // center left (factor +2)
horizontal += samples[4] * SobelX[4]; // center right (factor -2)
horizontal += samples[5] * SobelX[5]; // bottom left (factor +1)
horizontal += samples[7] * SobelX[7]; // bottom right (factor -1)

vertical += samples[0] * SobelY[0]; // top left (factor +1)
vertical += samples[1] * SobelY[1]; // top center (factor +2)
vertical += samples[2] * SobelY[2]; // top right (factor +1)
vertical += samples[5] * SobelY[5]; // bottom left (factor -1)
vertical += samples[6] * SobelY[6]; // bottom center (factor -2)
vertical += samples[7] * SobelY[7]; // bottom right (factor -1)

edge = sqrt(dot(horizontal, horizontal) + dot(vertical, vertical));

You can read this blog post on Sobel filters if you want to learn more about how Sobel filters work.

Jump to heading Sources of discontinuity

A common approach is to look for discontinuities in the textures that the render pipeline generates for the scene such as the depth texture, normals texture and color texture.

During the edge-detection pass, these textures are sampled and discontinuities are detected using the edge detection operators mentioned earlier. The resulting edge that is drawn can be caused by any discontinuity that was found in one of the 3 buffers. With this technique, the outline gets applied to all the objects that write to these buffers and so you have less control over the outlines on a per-object basis. In the image below, edge contributions by depth/normals/color are represented by the color red/green/blue respectively.

Allowing discontinuities to be detected from different sources makes for a more robust outlining system. In the debug image above you can see that while some edges would be detected by all three discontinuity sources, a lot of them only get picked up from a contribution of a specific discontinuity source. Each discontinuity source can be given a different weight and different thresholds can be used for each of them, allowing you to control the visual of the outline.

Jump to heading Edge detection modulation

Usually, just using an edge detection operator on the discontinuity source buffers is not enough to get a result without artifacts. Some modulation has to be done to get rid of these artifacts. For example, since the depth buffer is implemented non-linearly in a lot of render pipelines, two objects 1m apart located close to the camera will have a larger depth difference than two objects 1m apart located far away from the camera. To accommodate for this, the threshold used for detecting discontinuities in depth can be modulated by the depth buffer itself so that geometry located close to the camera will need to have a larger discontinuity in depth value before being detected as an edge.

depthThreshold *= _DepthDistanceModulation * SampleSceneDepth(uv);

A second common artifact is unwanted edges showing up on objects at small grazing angles. To resolve this, you can modulate with a mask that is generated from the dot product between the normal vector $N$ and the view direction $V$ . This is the same fresnel mask that was used in the initial outlining technique using a rim effect.

float fresnel = pow(1.0 - saturate(dot(normalWS, viewWS)), _Power);
float grazingAngleMask = saturate((fresnel + _GrazingAngleMaskPower - 1) / _GrazingAngleMaskPower);
depthThreshold *= 1 + smoothstep(0, 1 - _GrazingAngleMaskHardness, grazingAngleMask);

Other modulation techniques can be used, depending on the visual fidelity you want to achieve but these depend on the specific effect that you're after.

Jump to heading Custom discontinuity source

It is also possible to provide the outline shader with a custom discontinuity source. This would be a render texture that you create yourself during the render process, containing custom data that you wish to use to generate outlines. The advantage is that since you control what writes to this custom buffer, you can control which objects receive an outline.

For example in the scene above, the discontinuity source is generated by rendering the vertex colors of a mesh to a texture. Other techniques that come to mind are coloring faces based on their world position or creating a custom buffer that combines both information from the depth buffer and the normals buffer.

💡 Want more info? Check out https://linework.ameye.dev/section-map.

💬 Edge detection outlines are good when you need a full-screen outlining effect. Some finetuning is needed to prevent lines from showing up where you don't want them to.

Jump to heading Conclusion

There you go, 5 ways to draw an outline. They all have their benefits, making trade-offs between performance, visual fidelity and manual setup that is required.

Jump to heading Credits

💬 The Sailor Moon 3D models used in this post were made by premudraya over on Sketchfab.

💬 The Zelda 3D model used in this post was made by theStoff over on Sketchfab.

Jump to heading Additional Resources

Custom render passes in Unity

2021-07-08T00:00:00Z

Jump to heading Introduction

Since the introduction of Unity's Scriptable Render Pipeline in 2018, you can create your own custom render passes and inject them into the render pipeline. Since the documentation on them is still lacking, I created this basic template pass that could function as boilerplate code for your own passes and effects. The code is heavily commented for those who want additional information about what's going on.

This example pass simply blurs the screen using a 2-pass box blur shader. You can control the blur strength and set the downsampling factor. The code is tested to work with URP 12 in Unity 2021.2 but should also work on older versions. The API for scriptable render passes has changed a bit over the years, but the logic is the same.

Jump to heading Workings and Usage

The render passes uses the camera color buffer and a temporary buffer. Then it performs these 2 steps:

Blit from color to temporary (blurring vertically in the process)
Blit from temporary to color (blurring horizontally in the process)

After these 2 steps you ended up with a box-blurred camera color buffer.

To use this pass, simply add it as a renderer feature in your Forward Renderer Data asset.

75%

Jump to heading Scriptable Renderer Feature

Jump to heading Scriptable Render Pass

Jump to heading Box Blur Shader

Stylized Water for URP

2021-06-19T00:00:00Z

Jump to heading Introduction

During the few months between November 2019 and April 2020 I created a stylized water shader for the Universal Render Pipeline and published it on the Unity Asset Store. The asset was received positively with 94% five star reviews and the asset was even nominated for the best artistic tool in the Unity Awards 2020.

Jump to heading Features

The shader is packed with features such as refraction, caustics, Gerstner waves, buoyancy and planar reflections. Visually, I managed to create very nice looking water that was easy to tweak due to the custom material editor I made for it.

Jump to heading Usage in Games

I have spotted the asset being used in multiple games/projects that are in development. An example of this is the city builder/management game that is in development by Max Nielsen. I actively asked the community to share their games that used the shader and I loved seeing the asset in action.

Jump to heading Discontinuation

In the past year that the water shader has been on the store, I have received amazingly positive feedback from the community and being nominated for the Unity Awards is something I would have never imagined. I am very grateful for everybody that has purchased the asset, left reviews and interacted in the community Discord. My sincerest thank you.

In the past few months I have been able to spend less and less time on the asset due to other projects. Not having enough time to spend on the project and impressive competitors appearing on the store such as this one has left me very demotivated. During a certain period, working on the shader made me very unhappy due to the pressure I was feeling.

Since I feel like I can not give the asset and future customers the support that they deserve, I have decided to discontinue the asset in its current forum. Effectively, I will be making the asset free for now and no longer providing support for it. The asset works well, the documentation is good and I am proud of what the shader is and how it was able to be of use for a lot of customers.

Thanks ♥

Alex

Shader tutorials in 60 seconds

2020-04-06T00:00:00Z

Jump to heading Introduction

In the first few months of 2020 I created three 60-second shader tutorials. These tutorials were meant to be quick, to-the-point and dense in information.

Jump to heading Stylized Water Shader

A simple but effective water shader that creates an interesting stylized look. The shader uses the depth buffer for coloring and generating foam. Refraction is added by distorting the used UVs.

The model of the castle was created by mStuff on Sketchfab.

Jump to heading Toon Shading

A basic toon shader with a color gradient and hard specular lighting. A Blinn-Phong lighting model is used for the specular shading.

The model of the Shiba Inu was created by Ida Fabere on Sketchfab.

Jump to heading Retro Effect

A retro pixelation effect that also includes some scanlines. A low resolution render texture is used for the pixelation and a full-screen shader is used for the post-processing effects.

The model of the subway was created by Luc Miramont on Sketchfab.

Jump to heading Sources

All 3 shaders can be downloaded below as Unity packages.

stylized-water.unitypackage

toon-shading.unitypackage

retro-effect.unitypackage

Holographic Card Shader

2020-02-12T00:00:00Z

Jump to heading Introduction

A short breakdown of how I made a holographic card shader. The goal was to do as much as possible in the shader itself without relying on any textures. I ended up using a single 3D model for the Pokémon and a single texture for the text. The design of the card was inspired by Rob Fichman's work. The 3D model of the Cosmog Pokémon was created by AlmondFeather on Sketchfab.

Jump to heading Card Frame

The frame of the card consists of the outer edge, the horizontal divider at the bottom, the 'window' through where you see the Pokémon and the title bar below the window.

All of these elements are drawn using simple rectangle and polygon shapes. I have full control over their dimensions which allows me to quickly change the structure and layout of the card. Here are some of the properties that I use to control the frame of the card.

In total, the shader has 65 exposed properties. This is quite a lot, but I like that I can tweak variables as much as I want until I'm happy with the result.

Jump to heading Icons

The card features several icons like the ones used for indicating the type of the Pokémon. Additionally there are some decorational celestial bodies on the right bottom corner of the card. All of these are a made up of basic signed distance functions.

For the decorational corner pattern, the stars are made out of 2 vesica SDFs blended together. The moon is made out of 2 spheres and the planet is made out of several spheres and ellipses. All of the icons exist on the same plane, but I added a parallax effect to fake depth between the icons.

For practice, I recreated several of the pokemon-typ icons. It was very enjoyable to try and figure out what base shapes I could combine to end up with the right icon. If you want more information about drawing 2D SDFs you can check out this page from Inigo Quilez.

Jump to heading Raymarched Spheres

There are little spheres in the card that I use for showing the pokemon types and the attacks. These are raymarched spheres. Together with some Blinn-Phong lighting they look 3D and I can fake having 3D objects in the shader without having any actual 3D geometry.

Jump to heading Text

At first, I attempted to do the text in-shader as well. This is possible for sure, using bezier curves and SDFs and I actually got quite close to rendering letters how I wanted to.

However in the end, it was quite a lot of work to render text with the exact font that I wanted, so I decided to just us a simple texture.

Jump to heading Holographic Sparkles

For the sparkles I created some patterns using voronoi functions. Then, by converting the colors to directions and taking the dot product of this direction and the view direction, I could make different sparkles show up under different viewing angles.

Multiple voronoi patterns were overlayed on top of eachother to generate a more interesting pattern.

Jump to heading Parallax Effect

The whole card is flat, but by using raymarched spheres and parallax effects, I managed to create a nice 3D effect. A parallax effect can be achieved by offsetting the UVs based on the view direction.

Using parallax is great way to achieve some sense of depth in an otherwise flat card.

Jump to heading Stencil Shader

A stencil shader was used to make it so that the 3D scene is only visible through the window of the card itself. Cyanilux has created a post that explains setting up stencils in URP.

Alexander Ameye

Screen Space Cavity Shader

Jump to heading # Installation Guide

Jump to heading ## Installing, updating and removing the package

Jump to heading ## Checking for compatibility issues

Jump to heading # Using the Cavity Shader

Jump to heading ## Settings

Jump to heading # Changelog

Jump to heading ## [1.0.0] - 2025-10-22

Jump to heading # Contact

The easiest way to render an outline in Unity

Jump to heading # Introduction

Jump to heading # How does it work?

Jump to heading # Step by step

Jump to heading ## 1. Outline Shader + Material

Jump to heading ## 2. Stencil Pass

Jump to heading ## 3. Outline Pass

Jump to heading # What now

Jump to heading ## Layer Masks

Jump to heading ## Other Outline Techniques

Jump to heading ## Custom Renderer Feature

Jump to heading ## Rendering Layers

Jump to heading ## Single Pass

Edge Detection Outlines

Jump to heading # Introduction

Jump to heading # Full-Screen Render Pass

Jump to heading # Edge Detection Shader

Jump to heading ## Discontinuities

Jump to heading ## Edge Detection

Jump to heading # Next Steps

Jump to heading # Additional Resources

A cursor for augmented reality

Jump to heading # Introduction

Jump to heading # Hit testing

Jump to heading # Cursor movement

Jump to heading ## Movement smoothing

Jump to heading ## Movement threshold

Jump to heading # Cursor visibility

Jump to heading ## 1. Feature count check

Jump to heading ## 2. Point cloud update check

Jump to heading ## 3. Distance check

Jump to heading # Object placement

Jump to heading # Conclusion

Render adventures 2: progress!

Jump to heading # In the last episode of ...

Jump to heading # I have the power of wgpu and winit on my side

Jump to heading # Continuous texture updates

Jump to heading # Async adventures

Jump to heading # Next steps

Jump to heading # Additional Resources

Jump to heading ## wgpu

How this site works

Jump to heading # How this site works

Circular menus in the Unity Editor

Jump to heading # Introduction

Jump to heading # Circular menu + Unity Editor = ⚡

Jump to heading # Show me the code!

Stylized Water Shader

Jump to heading # Introduction

Jump to heading # 1. Initial set up

Jump to heading ## Render settings

Jump to heading ## Shader and material

Jump to heading ## Scene

Jump to heading # 2. Figuring out the depth of the water

Jump to heading ## Camera-relative depth

Jump to heading ## World-space depth

Jump to heading ## Depth Fade subgraph

Jump to heading # 3. Colors and opacity

Jump to heading ## Shallow and deep

Jump to heading ## Horizon color

Jump to heading ## Underwater color

Jump to heading # 4. Refraction

Jump to heading ## Refracted UVs

Jump to heading # 5. Foam

Jump to heading ## Surface foam

Panning UVs

Distorted UVs

Sampling the foam texture

Jump to heading ## Intersection foam

Intersection foam mask

Jump to heading Installation Guide

Jump to heading Installing, updating and removing the package

Jump to heading Checking for compatibility issues

Jump to heading Using the Cavity Shader

Jump to heading Settings

Jump to heading Changelog

Jump to heading [1.0.0] - 2025-10-22

Jump to heading Contact

Jump to heading Introduction

Jump to heading How does it work?

Jump to heading Step by step

Jump to heading 1. Outline Shader + Material

Jump to heading 2. Stencil Pass

Jump to heading 3. Outline Pass

Jump to heading What now

Jump to heading Layer Masks

Jump to heading Other Outline Techniques

Jump to heading Custom Renderer Feature

Jump to heading Rendering Layers

Jump to heading Single Pass

Jump to heading Introduction

Jump to heading Full-Screen Render Pass

Jump to heading Edge Detection Shader

Jump to heading Discontinuities

Jump to heading Edge Detection

Jump to heading Next Steps

Jump to heading Additional Resources

Jump to heading Introduction

Jump to heading Hit testing

Jump to heading Cursor movement

Jump to heading Movement smoothing

Jump to heading Movement threshold

Jump to heading Cursor visibility

Jump to heading 1. Feature count check

Jump to heading 2. Point cloud update check

Jump to heading 3. Distance check

Jump to heading Object placement

Jump to heading Conclusion

Jump to heading In the last episode of ...

Jump to heading I have the power of wgpu and winit on my side

Jump to heading Continuous texture updates

Jump to heading Async adventures

Jump to heading Next steps

Jump to heading Additional Resources

Jump to heading wgpu

Jump to heading How this site works

Jump to heading Introduction

Jump to heading Circular menu + Unity Editor = ⚡

Jump to heading Show me the code!

Jump to heading Introduction

Jump to heading 1. Initial set up

Jump to heading Render settings

Jump to heading Shader and material

Jump to heading Scene

Jump to heading 2. Figuring out the depth of the water

Jump to heading Camera-relative depth

Jump to heading World-space depth

Jump to heading Depth Fade subgraph

Jump to heading 3. Colors and opacity

Jump to heading Shallow and deep

Jump to heading Horizon color

Jump to heading Underwater color

Jump to heading 4. Refraction

Jump to heading Refracted UVs

Jump to heading 5. Foam

Jump to heading Surface foam

Jump to heading Intersection foam

Jump to heading 6. Lighting

Jump to heading Surface normals

Jump to heading Lighting calculations

Jump to heading 7. Waves

Jump to heading Vertex displacement

Jump to heading Gerstner waves

Jump to heading 8. Buoyancy

Jump to heading Simulation on the CPU

Jump to heading Buoyancy script

Jump to heading Caustics

Jump to heading Conclusion

Jump to heading Additional resources

Jump to heading Introduction