CD-ROM Shader: Diffraction Grating – Part 2

This post completes the series on how to create a shader for CD-ROMs.

You can find the complete series here:

• Part 1. The Nature of Light
• Part 2. Improving the Rainbow (Part 1)
• Part 3. Improving the Rainbow (Part 2)
• Part 4. Understanding Diffraction Grating
• Part 5. The Mathematics of Diffraction Grating
• Part 6. CD-ROM Shader: Diffraction Grating (Part 1)
• Part 7. CD-ROM Shader: Diffraction Grating (Part 2)
• Part 8. Iridescence on Mobile
• Part 9. The Mathematics of Thin-Film Interference
• Part 10. Car Paint Shader: Thin-Film Interference

A link to download the Unity project used in this series is also provided at the end of the page.

Introduction

In the first part of this tutorial, we have created a first approximation for the iridescent reflections that CD-ROMs exhibit. It’s important to remember that this shader is physically based. To correctly simulate the reflection we want, we need to make sure that the tracks on our CD-ROM are arranged in a circular way. This will ensure a radial reflection.

Slit Orientation

The grating equation that we have derived in The Mathematics of Diffraction Grating has a big limitation: it assumes that the slits are all aligned in the same direction. While this is often the case with insects’ exoskeletons, the bands on the surface of a CD-ROM are arranged in a circular pattern. If we naively implement the solution presented in the section above, we will obtain a rather disappointing reflection (below, right).

To correct this issue, we need to take into account the local orientation of the slits on a CD-ROM. Using the normal vector will not help here since all the slits share the same normal direction, which points away from the surface of the disk. What correctly captures the local orientation of a slit is its tangent vector (above, left).

 

In the diagram above, the normal direction is in blue and the tangent direction in red. The angles the light source and viewer make with the normal direction are called and , respectively. The analogous angles with respect to are and . As stated before, using and for our calculations will result in a “flat” reflection, since all slits share the same . We need to find a to use and instead since they correctly capture the local orientation.

So far, we know that:

   

   

Since and are orthogonal, the following property holds:

   

   

That is very convenient also because Cg offers a native implementation of the dot product. What’s left now is to calculate .

Calculating the Tangent Vector

To complete our shader, we need to calculate the tangent vector . Normally, this could be provided directly in the mesh vertices. However, given how simple the surface of a CD-ROM is, we can calculate it directly. Please, keep in mind that the approach presented in this tutorial is rather simple and will only work under the assumption that the surface of your CD-ROM mesh is correctly UV-mapped.

The diagram above shows how the tangent directions are calculated. The underlying assumption is that the surface of the disk is UV mapped like a quad, with coordinates ranging from (0,0) to (1,1). Once that is known, each point on the CD-ROM surface is remapped onto (-1,-1) to (+1,+1). With this change of the frame of reference, we have that the new coordinate of a point also corresponds with its direction away from the centre (green arrow). We can rotate that direction 90 degrees to find a vector that is tangent to concentric tracks of the CD-ROM (in red).

These operations need to be done in the surf function of the shader since the UV coordinates are not available in the lighting function LightingDiffraction.

// IN.uv_MainTex: [ 0, +1]
// uv:            [-1, +1]
fixed2 uv = IN.uv_MainTex * 2 -1;
fixed2 uv_orthogonal = normalize(uv);
fixed3 uv_tangent = fixed3(-uv_orthogonal.y, 0, uv_orthogonal.x);

What’s left now is to convert the calculated tangent from object space to world space. The conversion will take into account the object translation, rotation and scale.

worldTangent = normalize( mul(unity_ObjectToWorld, float4(uv_tangent, 0)) );

Putting All Together…

We now have all we need to calculate the colour contribution of the iridescence reflection:

inline fixed4 LightingDiffraction(SurfaceOutputStandard s, fixed3 viewDir, UnityGI gi)
{
	// Original colour
	fixed4 pbr = LightingStandard(s, viewDir, gi);
			
	// --- Diffraction grating effect ---
	float3 L = gi.light.dir;
	float3 V = viewDir;
	float3 T = worldTangent;

	float d = _Distance;
	float cos_ThetaL = dot(L, T);
	float cos_ThetaV = dot(V, T);
	float u = abs(cos_ThetaL - cos_ThetaV);

	if (u == 0)
		return pbr;

	// Reflection colour
	fixed3 color = 0;
	for (int n = 1; n <= 8; n++)
	{
		float wavelength = u * d / n;
		color += spectral_zucconi6(wavelength);
	}
	color = saturate(color);

	// Adds the refelection to the material colour
	pbr.rgb += color;
	return pbr;
}

Conclusion

You can find the complete series here:

• Part 1. The Nature of Light
• Part 2. Improving the Rainbow (Part 1)
• Part 3. Improving the Rainbow (Part 2)
• Part 4. Understanding Diffraction Grating
• Part 5. The Mathematics of Diffraction Grating
• Part 6. CD-ROM Shader: Diffraction Grating (Part 1)
• Part 7. CD-ROM Shader: Diffraction Grating (Part 2)
• Part 8. Iridescence on Mobile
• Part 9. The Mathematics of Thin-Film Interference
• Part 10. Car Paint Shader: Thin-Film Interference

Become a Patron!
You can download the Unity package for the CD-ROM Shader effect on Patreon.