Bubble Shader

Bubble Shader John Isidoro ATI Research David Gosselin ATI Research

Introduction One of the most visually interesting objects in the real world are soap bubbles. The reflective and partially transparent nature of them as well as the way they pulsate makes them a key candidate for vertex and pixel shaders. Strangely enough, on a vertex and pixel shader level, they are implemented in a very similar manner to the ocean water shader described in “Rendering Ocean Water.” There are a variety of different effects that make up the bubble shader.

Setup As input this shader uses a model with a position, a normal, the tangent vector (in v direction of texture coordinates), and one set of texture coordinates for a rainbow like base map (shown in the following figure),

Figure 1 – Base “rainbow” map This shader, like the “Crystal/Candy Shader” uses a cubic environment map shown below.

Excerpted from ShaderX: Vertex and Pixel Shader Tips and Tricks 1

Bubble Shader

Figure 2 – Cubic environment map color

Figure 3 – Cubic environment map alpha Also, like the candy shader, we want this object to be semi-transparent which requires drawing the model in two passes, back faces first then front faces with alpha blending enabled.

Vertex Shader The vertex shader uses four sine waves traveling in different directions over the surface of the bubble to perturb the vertex. The vertex is perturbed in the direction of the normal. In order to perturb the normal, cosine waves traveling in the same four directions are used. In order to provide a consistent looking warping across vertices, the tangent and bi-normal are used to guide the direction of the sinusoidal warp. The first portion of the vertex shader looks almost identical to the ocean shader and is shown below. // // // // // // // //

v0 v3 v7 v8 c0 c1 c2 c3

-

- Vertex Position Vertex Normal Vertex Texture Data u,v Vertex Tangent (v direction of tex coords) { 0.0, 0.5, 1.0, 2.0} { 4.0, .5pi, pi, 2pi} {1, -1/3!, 1/5!, -1/7!} for sin {1/2!, -1/4!, 1/6!, -1/8!} for cos

Excerpted from ShaderX: Vertex and Pixel Shader Tips and Tricks 2

Bubble Shader // c4-7 // c8 // c9 // c10 // c11 // c12 // c13 // c14 // c15 // c16 // c17 vs.1.1 mul r0, mad r0, mov mad add frc frc mov

-

Composite World-View-Projection Matrix Model Space Camera Position Model Space Light Position {1.02, 0.04, 0, 0} fixup factor for Taylor series imprecision {0.5, 0.5, 0.25, 0.25} waveHeight0, waveHeight1, waveHeight2, waveHeight3 {0.0, 0.0, 0.0, 0.0} waveOffset0, waveOffset1, waveOffset2, waveOffset3 {0.6, 0.7, 1.2, 1.4} waveSpeed0, waveSpeed1, waveSpeed2, waveSpeed3 {0.0, 2.0, 0.0, 4.0} waveDirX0, waveDirX1, waveDirX2, waveDirX3 {2.0, 0.0, 4.0, 0.0} waveDirY0, waveDirY1, waveDirY2, waveDirY3 { time, sin(time)} {-0.00015, 1.0, 0.0, 0.0} base texcoord distortion x0, y0, x1, y1

c14, v7.x c15, v7.y, r0

r1, c16.x r0, r1, c13, r0 r0, r0, c12 r0.xy, r0 r1.xy, r0.zwzw r0.zw, r1.xyxy

// use tex coords as inputs to sinusoidal warp // use tex coords as inputs to sinusoidal warp // time... // add scaled time to move bumps according to frequency // take frac of all 4 components

mul r0, r0, c10.x sub r0, r0, c0.y mul r0, r0, c1.w

// multiply by fixup factor (due to inaccuracy of taylor series) // subtract .5 // mult tex coords by 2pi coords range from(-pi to pi)

mul mul mul mul mul mul mul

// // // // // // //

r5, r1, r6, r2, r7, r3, r8,

r0, r5, r1, r6, r2, r7, r3,

r0 r0 r0 r0 r0 r0 r0

(wave (wave (wave (wave (wave (wave (wave

vec)^2 vec)^3 vec)^4 vec)^5 vec)^6 vec)^7 vec)^8

mad r4, r1, c2.y, r0 mad r4, r2, c2.z, r4 mad r4, r3, c2.w, r4

//(wave vec) - ((wave vec)^3)/3! // + ((wave vec)^5)/5! // - ((wave vec)^7)/7!

mov mad mad mad mad

//1 //-(wave //+(wave //-(wave //+(wave

r0, r5, r5, r5, r5,

c0.z r5, c3.x ,r0 r6, c3.y, r5 r7, c3.z, r5 r8, c3.w, r5

vec)^2/2! vec)^4/4! vec)^6/6! vec)^8/8!

dp4 r0, r4, c11

//multiply wave heights by waves

mul r0, r0, v3

//apply deformation in direction of normal

add r10.xyz, r0, v0 mov r10.w, c0.z

//add to position //homogenous component

m4x4 mov

// OutPos = WorldSpacePos * Composite View-Projection Matrix // Pass along texture coordinates

oPos, r10, c4 oT0, v7

This is where the shader starts to diverge a bit from the Ocean shader. First the binormal is computed mov mul mad

r3, v3 r4, v8.yzxw, r3.zxyw r4, v8.zxyw, -r3.yzxw, r4

//cross product to find binormal

Then the normal is warped based on the tangent space basis vectors (tangent and binormal). mul dp4 dp4 mul

r1, r5, c11 r9.x, -r1, c14 r9.y, -r1, c15 r1, r4, r9.x

//cos * waveheight //amount of normal warping in direction of binormal //amount of normal warping in direction of tangent //normal warping in direction of binormal

Excerpted from ShaderX: Vertex and Pixel Shader Tips and Tricks 3

Bubble Shader mad mad

r1, v8, r9.y, r1 r5, r1, c10.y, v3

//normal warping in direction of tangent //warped normal move nx, ny: cos * wavedir * waveheight

The normal is then renormalized. dp3 rsq mul

r10.x, r5, r5 r10.y, r10.x r5, r5, r10.y

//normalize warped normal

Next the view vector is computed: sub dp3 rsq mul

r2, c8, r0 r10.x, r2, r2 r10.y, r10.x r2, r2, r10.y

//view vector //normalized view vector

Then the dot product of the view vector and the warped normal is computed: dp3 mov

r7, r5, r2 oT2, r7

//N.V //Pass along N.V

This is used to compute the reflection vector. add mad mov

r6, r7, r7 r6, r6, r5, -r2 oT1, r6

//2N.V //2N(N.V)-V //reflection vector

And finally the distance to the camera is computed. rcp mad

r10.y, r10.y //distance from camera oD0, r10.y, c17.x, c17.y //scale and bias distance

The vertex shader then passes along the texture coordinates of the base map, the reflection vector, the value of N·V, and the distance to the camera along to the pixel shader for further processing.

Pixel Shader The pixel shader uses the brightly colored rainbow film map as a base texture. This texture map is meant to simulate the soap film appearance of a bubble. The environment map is modulated with this texture. The white highlights are stored in the alpha of the environment map as a glow map, and are linearly interpolated into the result. The final alpha value used from blending with the frame buffer is the (1-abs(N·V)) + glow map. The full shader is shown below and further descriptions follow. // c0 – (0.0, 0.5, 1.0, -0.75) // c1 - (0.6, 0.1, 0.0, 0.0) Alpha Scale and bias ps.1.4 texld r0, t0 texld r1, t1 texcrd r2.rgb, t2 cmp r2.r, r2.r, r2.r, -r2.r // abs(V.N) +mad_x4_sat r1.a, r1.a, r1.a, c0.a

Excerpted from ShaderX: Vertex and Pixel Shader Tips and Tricks 4

Bubble Shader mul_x2_sat r2.rgb, r0, r1 +mad r2.a, 1-r2.r, c1.x, c1.y

// base * env (may change scale factor later) // alphascale * abs(V.N) + alphabias

lrp r0.rgb, r1.a, r1, r2 +add r0.a, r2.a, r1.a

// Lerp between Env and Base*Env based on glow map // Add glow map to Fresnel term for alpha

The first thing that happens in this pixel shader is the sampling of the environment map. This happens in the following line of the pixel shader: texld r1, t1

It produces the following image:

Figure 4 – Cubic environment map only

Figure 5 – Base map This is multiplied by the base texture color (shown in figure 5) using the following code. mul_x2_sat r2.rgb, r0, r1

//

base * env (may change scale factor later)

With the results shown below.

Excerpted from ShaderX: Vertex and Pixel Shader Tips and Tricks 5

Bubble Shader

Figure 6 – Cubic environment map modulated with base map

Figure 7 – Alpha for environment map Now that the basic colors are computed the opacity needs to be computed. The first step is to create strong specular looking term. The alpha of the environment map (show in figure 7) is squared, multiplied by four and then given a bit of a bias. The following pixel shader co-issued instruction accomplishes this. +mad_x4_sat r1.a, r1.a, r1.a, c0.a

The resulting image is shown below.

Figure 8 – Alpha of the environment map squared and multiplied by four. Excerpted from ShaderX: Vertex and Pixel Shader Tips and Tricks 6

Bubble Shader

Next the Fresnel term is computed. This takes place in few stages the first is to take the absolute value of V·N and the second is to invert this value by computing 1abs(V·N). This value is then scaled and biased. The following code shows how this is computed. cmp r2.r, r2.r, r2.r, -r2.r

// abs(V.N)

+mad r2.a, 1-r2.r, c1.x, c1.y

// alphascale * abs(V.N) + alphabias

The following picture shows the result of this computation.

Figure 9 – Scaled and biased Fresnel term. The next step is to add the Fresnel term with the glow map. Using the following code. +add r0.a, r2.a, r1.a

// Add glowmap to Fresnel term for alpha

This produces the final alpha result used for blending and is shown below.

Figure 10 – Final alpha values Next the glow map is used to linearly interpolate between just the environment map and the base multiplied by the environment map based on the alpha value in the environment map. lrp r0.rgb, r1.a, r1, r2

// Lerp between Env and Base*Env based on glow map

Excerpted from ShaderX: Vertex and Pixel Shader Tips and Tricks 7

Bubble Shader

This produces the final color values shown below.

Figure 11 – Final color values The next figure shows the blend produced by the alpha and color to produce the final image.

Figure 12 – Final Image The next shot shows what this shader produces within a scene produced by the ATI Sushi engine.

Excerpted from ShaderX: Vertex and Pixel Shader Tips and Tricks 8

Bubble Shader

Figure 13 – Bubble in an environment

Summary This section has shown a technique to produce an interesting bubble effect built on top of some techniques described in other sections. It used sine waves computed within a vertex shader to produce and undulating shape and cubic environment mapping to give interesting reflections.

Excerpted from ShaderX: Vertex and Pixel Shader Tips and Tricks 9