Simulation of Iridescence and Translucency on Thin Surfaces

From ShaderX 2 – Shader Programming Tips <strong>and</strong> Tricks with DirectX 9
<strong>Simulation</strong> <strong>of</strong> <strong>Iridescence</strong> <strong>and</strong>
<strong>Translucency</strong> on Thin Surfaces
Introduction
Natalya Tatarchuk <strong>and</strong> Chris Brennan
3D Application Research Group
ATI Research
This chapter will focus on simulating the visual effect <strong>of</strong> translucency <strong>and</strong>
iridescence <strong>of</strong> thin surfaces such as butterfly wings. When creating a visual impression <strong>of</strong>
a particular material, an important characteristic <strong>of</strong> that surface is the luminosity <strong>of</strong> the
material. There are various ways a surface can be luminous. Those include sources with
or without heat, from an outside source, <strong>and</strong> from the object itself (other than a mere
reflection). Luminous objects that exhibit certain combinations <strong>of</strong> these characteristics
can be described as translucent or iridescent, depending on the way that the surface
“scatters” incoming light.
<strong>Translucency</strong> <strong>of</strong> a material is determined by the ability <strong>of</strong> that surface to allow
light to pass through without full transparency. Translucent materials can only receive
light <strong>and</strong> thus can be luminous only when lit from an outside source. Although there has
been ample research in the recent years in interactive simulation <strong>of</strong> fully translucent
surfaces such as marble or wax [Jensen01], this chapter will focus on simulating
translucency for thin surfaces. A good example <strong>of</strong> the visual effect <strong>of</strong> translucency <strong>of</strong> thin
surfaces would be if you were to take a piece <strong>of</strong> rice paper <strong>and</strong> hold it against a light
source (for example, Chinese lanterns). You would see that the light makes the rice paper
seem to glow from within, yet you cannot see the light source through the paper because
the paper scatters incoming light.
<strong>Iridescence</strong> is an effect caused by the interference <strong>of</strong> light waves resulting from
multiple reflections <strong>of</strong> light <strong>of</strong>f <strong>of</strong> surfaces <strong>of</strong> varying thickness. This visual effect can be
detected as a rainbow pattern on the surface <strong>of</strong> soap bubbles <strong>and</strong> gasoline spills, <strong>and</strong> in
general, on surfaces covered with thin film diffracting different frequencies <strong>of</strong> incoming
light in different directions. The surface <strong>of</strong> a soap bubble exhibits iridescence due to a
layer <strong>of</strong> air, which varies in thickness, between the top <strong>and</strong> bottom surfaces <strong>of</strong> the bubble.
The reflected colors vary along with the thickness <strong>of</strong> the surface. Mother-<strong>of</strong>-pearl,
compact discs <strong>and</strong> various gem stones share that quality. Perhaps most captivating <strong>of</strong> all,
however, is the iridescence seen on the wings <strong>of</strong> many beautiful butterflies, such as Blue
pansy butterflies, Junonia orithya, or the Malachite butterflies, Siproeta stelenes. These
wings exhibit vivid colorful iridescence (see Figure 1 for examples), the color <strong>of</strong> which
1

<strong>Simulation</strong> <strong>of</strong> <strong>Iridescence</strong> <strong>and</strong> <strong>Translucency</strong> on Thin Surfaces
has been shown to be independent <strong>of</strong> pigmentation <strong>of</strong> the wings, <strong>and</strong> is attributed to the
microstructure <strong>of</strong> the scales located on <strong>and</strong> within butterfly wings.
Blue pansy butterfly
Junonia orithya
Malachite butterflies
Siproeta stelenes
Figure 1 - Butterflies in nature
The effect described in this chapter simulates translucency <strong>and</strong> iridescence
patterns <strong>of</strong> delicate butterfly wings. To generate iridescence we have merged the
approaches described in “Bubble Shader” [Isidoro02] <strong>and</strong> in “Textures as Lookup Tables
for Per-Pixel Lighting Computations” [Vlachos02].
Algorithm
Inputs
This effect uses a geometric model with a position, a normal, a set <strong>of</strong> texture
coordinates, a tangent <strong>and</strong> a binormal vector. All <strong>of</strong> these components are supplied to the
vertex shader. At the pixel level, we combine gloss, opacity, <strong>and</strong> normal maps for a
multi-layered final look. The gloss map is used to contribute to satiny highlights on the
butterfly wings. The opacity map allows the wings to have variable transparency <strong>and</strong> the
normal map is used to give wings a bump-mapped look to allow for more surface
thickness variations. The input texture coordinates are used to sample all texture maps.
Sample RenderMonkey TM Workspace
The CD that comes with this book contains a build <strong>of</strong> the RenderMonkey IDE
which is an environment for shader development. Along with the application itself, the
RenderMonkey installer installs a series <strong>of</strong> workspaces including one called HLSL
Iridescent Butterfly.xml. This workspace contains the effect we are describing in this
chapter. Feel free to modify any <strong>of</strong> the parameters to the shaders to explore their effect on
the final visual result. Of course, you can also modify the actual shaders to underst<strong>and</strong>
their algorithms in greater depth.
2

Vertex Shader
From ShaderX 2 – Shader Programming Tips <strong>and</strong> Tricks with DirectX 9
The vertex shader for this effect computes vectors that will be used by the pixel
shader to compute the illumination result. At the pixel level, the view vector <strong>and</strong> the light
vector will be used for calculating diffuse illumination <strong>and</strong> scattered illumination <strong>of</strong>f <strong>of</strong>
the surface <strong>of</strong> the wings, which contributes to the translucency effect. The halfway vector
will be used for generation <strong>of</strong> glossy highlights on the wings’ surface. In the vertex
shader, however, these vectors will simply be transformed to tangent space.
struct VS_OUTPUT
{
float4 Pos : POSITION;
float2 Tex : TEXCOORD0;
float3 View : TEXCOORD1;
float3 Light : TEXCOORD2;
float3 Half : TEXCOORD3;
};
VS_OUTPUT main( float4 Pos : POSITION,
float4 Normal : NORMAL0,
float2 Tex : TEXCOORD0,
float3 Tangent : TANGENT0,
float3 Binormal : BINORMAL0 )
{
VS_OUTPUT Out = (VS_OUTPUT) 0;
}
// Output transformed vertex position:
Out.Pos = mul( view_proj_matrix, Pos );
// Propagate input texture coordinates:
Out.Tex = Tex;
// Compute the light vector (object space):
float3 vLight = normalize( mul( inv_view_matrix, lightPos ) - Pos );
// Define tangent space matrix:
float3x3 mTangentSpace;
mTangentSpace[0] = Tangent;
mTangentSpace[1] = Binormal;
mTangentSpace[2] = Normal;
// Output light vector in tangent space:
Out.Light = mul( mTangentSpace, vLight );
// Compute the view vector (object space):
float3 vView = normalize( view_position - Pos );
// Output view vector in tangent space:
Out.View = mul( mTangentSpace, vView );
// Compute the half angle vector (in tangent space):
Out.Half = mul( mTangentSpace, normalize( vView + vLight ) );
return Out;
3

Pixel Shader
<strong>Simulation</strong> <strong>of</strong> <strong>Iridescence</strong> <strong>and</strong> <strong>Translucency</strong> on Thin Surfaces
The pixel shader computes the illumination value for a particular pixel on the
surface <strong>of</strong> the butterfly wings taking into account the light propagated through the surface
<strong>of</strong> the wings due to the translucency effect <strong>and</strong> light emitted due to the iridescence <strong>of</strong> the
wings.
First, we load the color value from a base texture map. For efficiency reasons, we
have stored the opacity in the alpha channel <strong>of</strong> the base texture map. We also load a
normal vector (in tangent space) from precomputed normal map <strong>and</strong> a gloss value which
will be used to modulate highlights on the surface <strong>of</strong> the wings. The scalar gloss map is
stored in the alpha channel <strong>of</strong> the normal map. Combining three-channel texture maps
with a single-channel grayscale value maps allows us to load two values with a single
texture fetch.
float3 vNormal, baseColor;
float fGloss, fTransparency;
// Load normal <strong>and</strong> gloss map:
float4( vNormal, fGloss ) = tex2D( bump_glossMap, Tex );
// Load base <strong>and</strong> opacity map:
float4 (baseColor, fTransparency) = tex2D( base_opacityMap, Tex );
Don’t forget to scale <strong>and</strong> bias the fetched normal map into the [-1.0, 1.0] range:
// Signed scale the normal:
vNormal = vNormal * 2 - 1;
4

From ShaderX 2 – Shader Programming Tips <strong>and</strong> Tricks with DirectX 9
Figure 2 displays the contents <strong>of</strong> the texture maps used for this effect:
Base texture map for wings texture
Normal map for bump mapping
Figure 2 - Input Texture Maps
Opacity texture map
Gloss map
The texture address mode should be set to CLAMP in u <strong>and</strong> v for both <strong>of</strong> these
texture maps. Also they should be trilinearly filtered (MAGFILTER = linear,
MINFILTER = linear, <strong>and</strong> MIPFILTER = anisotropic).
<strong>Translucency</strong>
Next we will compute the translucency effect. The amount <strong>of</strong> light scattered
through a thin surface is proportional to the incident angle <strong>of</strong> the light on the back side.
So, similar to a Lambertian diffuse calculation, we dot the light vector but with the
negative <strong>of</strong> the normal vector. We also use a pre-specified translucency coefficient in
addition to the fetched opacity value to control the amount <strong>of</strong> scattered light:
float3 scatteredIllumination = saturate(dot(-vNormal, Light)) *
fTransparency * translucencyCoeff;
5

<strong>Simulation</strong> <strong>of</strong> <strong>Iridescence</strong> <strong>and</strong> <strong>Translucency</strong> on Thin Surfaces
As described above, the scattered light contribution is dependent on both the
direction <strong>of</strong> incident light as well as the surface normal for the pixel location. This
contribution to diffuse illumination <strong>of</strong> the wings surface is what accounts for their subtle
glow. Figure 3 illustrates the contribution <strong>of</strong> scattered reflected light on the surface <strong>of</strong> the
wings. If you modify the pixel shader for this effect in RenderMonkey workspace found
on the CD in this book to output only the scattered light contribution, you will be able to
investigate how this contribution changes as you rotate the model.
To simulate varying thickness <strong>of</strong> scales on the surface <strong>of</strong> butterfly wings as well
as within them, we use a normal map to perturb the normal vectors. The usual diffuse
illumination is computed with a simple dot product <strong>and</strong> a global ambient term:
float3 diffuseContribution = saturate(dot(vNormal,Light)) +
ambient;
Figure 3 below shows the result <strong>of</strong> computing diffusely reflected light for the butterfly
wings.
Scattered light contribution
Figure 3 - Diffuse Illumination
Diffuse term
In the next step we combine the base texture map with the diffuse term <strong>and</strong> the
scattered reflected light contribution to compute final value for diffuse surface
illumination:
baseColor *= scatteredIllumination + diffuseContribution;
Figure 4 illustrates the results <strong>of</strong> this operation. Now we can notice how scattered
reflected light contributes to the translucency effect <strong>of</strong> the butterfly wings in the more
illuminated portions <strong>of</strong> wings in the final picture in Figure 4.
6

From ShaderX 2 – Shader Programming Tips <strong>and</strong> Tricks
with DirectX 9
+
* =
Figure 4 - Combining the base texture map with scattered reflected light <strong>and</strong> diffusely
Since butterfly wings in nature have varying transparency, we had our artists paint
in the appropriate opacity values. However, since the desired effect has transparent
geometry which also has specular highlights, we must take care when doing blending to
achieve transparency properly. Typically, blending transparent materials is done during
the blending stage <strong>of</strong> the rendering pipeline. However, if the object that you are rendering
as transparent is a specular surface, blending should be done before actually applying
specular highlights to the surface. A brute force approach for this would be to render two
separate passes: diffuse alpha-blended pass first; <strong>and</strong> adding specular highlights in the
second pass. But to speed up our effect we wanted to do to it all in one pass. This requires
some tricks with the way alpha-blending is used. Since the specular pass is additive <strong>and</strong>
diffuse is blended, we want to pre-blend the diffuse color <strong>and</strong> add the specular color in
the shader. Then during the blending stage the source color is not modified, it’s simply
added since that portion <strong>of</strong> the blending equation is already taken care <strong>of</strong> in the shader
code. The destination has the same blend as it normally would with the st<strong>and</strong>ard two-pass
“brute force” approach. If we look at the blending equation, the two pass approach would
be expressed in the following form:
Pass 1: diffuseIlluminationColor * α+ destination * (1 – α)
Pass 2: specularColor + destination
And the single pass approach can be expressed as follows:
Pass 1: (diffuseIlluminationColor * α + specularColor ) * 1+
destination * (1 - α)
7

<strong>Simulation</strong> <strong>of</strong> <strong>Iridescence</strong> <strong>and</strong> <strong>Translucency</strong> on Thin Surfaces
Here’s the portion <strong>of</strong> the shader that pre-multiplies the diffuse illumination result
with the alpha:
float fOpacity = 1 - fTransparency;
// Premultiply alpha blend to avoid clamping:
baseColor *= fOpacity;
Figure 5 illustrates effect <strong>of</strong> this action on the diffuse illumination result.
<strong>Iridescence</strong>
Figure 5 - Pre-multiplied alpha-blending
One <strong>of</strong> the reasons why butterflies are so captivating in nature is the iridescence
<strong>of</strong> their wings. To simulate iridescent patterns on the surface <strong>of</strong> our simulated butterfly
wings, we use an approach similar to the technique described in the “Bubble Shader”
chapter in the original ShaderX book [Isidoro02]. <strong>Iridescence</strong> is a view dependent effect,
so we will use the view vector which was computed in the vertex shader <strong>and</strong> interpolated
across the polygon in tangent space. We also use scale <strong>and</strong> bias coefficients to scale <strong>and</strong>
bias index to make iridescence change more quickly or slowly across the surface <strong>of</strong> the
wings. You can explore the effects <strong>of</strong> these parameters by modifying the variables
iridescence_speed_scale <strong>and</strong> iridescence_speed_bias in the HLSL Iridescent
Butterfly.xml RenderMonkey workspace.
// Compute index into the iridescence gradient map,
// which consists <strong>of</strong> N·V coefficients
float fGradientIndex =
dot( vNormal, View ) * iridescence_speed_scale +
iridescence_speed_bias;
// Load the iridescence value from the gradient map based on the
// index we just computed above:
float4 iridescence = tex1D( gradientMap, fGradientIndex );
8

From ShaderX 2 – Shader Programming Tips <strong>and</strong> Tricks with DirectX 9
This effect uses a 1D gradient texture map (Figure 6) for computing color-shifted
iridescence values. This texture should have trilinear filtering enabled <strong>and</strong> MIRROR
texture address mode selected for both u <strong>and</strong> v coordinates.
Figure 6 - Gradient texture map
Figure 7 illustrates the resulting iridescence value.
Figure 7 - <strong>Iridescence</strong> <strong>of</strong> butterfly wings
To add satiny highlights to the surface <strong>of</strong> the wings we use a gloss map generated
by the artist. We compute the gloss value based on the result fetched from the gloss map
<strong>and</strong> N·V for determining the placement <strong>of</strong> specular highlights. Finally we add the gloss
contribution to the previously compute diffuse illumination result to obtain the final
result:
// Compute the final color using this equation:
// N*H * Gloss * <strong>Iridescence</strong> + Diffuse
float fGlossIndex = fGloss *
( saturate( dot( vNormal, Half )) *
gloss_scale + gloss_bias );
baseColor += fGlossIndex * iridescence;
Figure 8 shows the final color for the butterfly wings.
9

<strong>Simulation</strong> <strong>of</strong> <strong>Iridescence</strong> <strong>and</strong> <strong>Translucency</strong> on Thin Surfaces
Figure 8 - Assembled final color
To render the final effect correctly, we output the previously-computed scalar fOpacity
in the alpha channel <strong>of</strong> our result:
return float4( baseColor, fOpacity );
Because <strong>of</strong> the premultiplication mentioned earlier, this means that our alpha
blend factors should be ONE for SRCBLEND render state <strong>and</strong> IVRSRCALPHA for
DESTBLEND.
Summary
In this chapter we presented a technique for simulating translucency <strong>and</strong>
iridescence on thin surfaces such as butterfly wings. Our technique combines scattered
reflected light with diffusely reflected light <strong>and</strong> a color-shifted iridescence value for a
visually interesting final result. You can see this effect in the Chimp Demo in the ATI
RADEON TM 9800 demo suite on the ATI website as shown in Figure 9.
10

References
From ShaderX 2 – Shader Programming Tips <strong>and</strong> Tricks with DirectX 9
Figure 9 - A snapshot from the Chimp demo
1. [Demers01] [digital] Texturing <strong>and</strong> Painting, Owen Demers, New Riders, 2001.
2. [Isidoro02] “Bubble Shader”, J. Isidoro, D. Gosselin, ShaderX, 2002.
3. [Vlachos02] “Textures as Lookup Tables for Per-Pixel Lighting Computations”,
A. Vlachos, J. Isidoro, C. Oat, Game Programming Gems III, 2002.
4. [Jensen01] “A Practical Model for Subsurface Light Transport”, H.W. Jensen,
S.R.Marschner, M. Levoy, P. Hanrahan, Proceedings <strong>of</strong> SIGGRAPH 2001.
11