Rendering my balls in a fragment shader

This is a page about writing basic OpenGL fragment shaders

I'm a programmer who spends part of his time each week teaching kids about computers and electronics. In our recent classes, we've been learning about various computer vector graphic libraries and the usefulness of linear algebra. To give the kids a bit of fun, I decided we would write a 2D pool table simulation as a further demonstration of programming and high school math.

After having completed most of the features we wanted, including accurate physics, ball path mapping and replay, table time freezing with zooming and panning, as well as a mathematics overlay, I wanted to work on the visual aesthetics and presentation of the program. As this is a top down 2D pool simulation, we've been using colored circles to represent the pool balls in our simulation. After implementing a detailed table view with zooming, I realized that using circles as a representation of pool balls is both boring and a bit too unrealistic. Circles neither convey a sense of movement or the mechanics of a ball spinning and rolling.

Starting out flat

So this weekend I thought I'd implement a surprise for my kids. Since we were using an OpenGL fragment shader to convert the squares into circles, I thought about writing a fragment shader to render fully 3D looking billiard balls.

This is not a 3D rendered sphere. It's just a square.
The above image is a capture of the pixels I've created to replace the flat circles in our pool simulator. I used the term pixels, because there is no geometry used in creating the pool ball render above. Instead I am still using the same squares, but I've replaced the circle generation in an OpenGL fragment program with one that is a bit more advanced.

Here is how it works

First, we start out with a blank square.

A blank square of 512px size. I'm rendering these pool balls at a size of 512px so that we can see the details. Impressive isn't it? :)

Generating a circle

The next thing I wanted was to create a circle. I decided to use the frame size to determine the final size of the ball.

A circle is generated like this.

Our circle uses a radius equal to half the frame size. Okay, so what is going on here? Well I begin by converting our current pixel into a coordinate range between 0 and 1. Then I create the center of our circle in order to test the distance to the current pixel.

But what is going on with this variable ? Well if you didn't know, fragment shaders do not create smooth edges. You can read more about that problem here in an article I wrote 15 years ago! The short of it is, if we want a smooth edge to our circle inside a fragment shader, we need to smooth it ourselves, and that's exactly what is doing for us.

Make it a sphere with normals

Now we need to turn our circle into a 3D looking sphere. To do that we need to create surface normals for our circle. A normal is a unit length vector pointing in the "up" direction of a surface.

Here is how we can create the normals for our circle.

A normal map is computed for our circle. To build our normal we begin by converting our coord to a range between -1 and 1. Then we use those xy values and compute a z value. Finally, we map each component to rgb float values and display that result.

Adding light and color

We're ready to add basic lighting, turning our circle into a sphere. While testing we're going to control the light position with the computer mouse. Values passed from our CPU program to our GPU program are sent by way of uniform values. Our light position uniform is .

And this is our basic lit and colored sphere.

Using basic lighting and a color. In the above fragment shader code we're creating a light using the mouse input stored in uniform . As the mouse is a 2D input device we're using it to controll the x and y position of the light, while setting the z to which is in front of the sphere. Next we normalize the light, as we want to simulate a distant light and not a point light. We use the product function to determine the brightness of the pixel and it to a min of 0.1 and max of 1.0. The clamping min value simulates an ambient lighting value.

To compute the final sphere pixel color we simply multiply our select color by our computed , making sure to mask the circle shape again with .

Solids and stripes

Our pool balls need to have solid or stripe diffuse patterns along with a circle for the ball numbers. To accomplish this we are going to write a function that takes a point on the sphere and a ball number. This function will determine whether a ball is the cue ball, a solid, or a stripe. Later it will also map the number textures to our ball.

This is our ball with the diffuse color pattern computed.

It's starting to look like a pool ball. Okay, so there is a bit to unpack here. First, we've introduced the uniform to select the ball number, which is then used by the shader to determine the diffuse pattern and color to some extent. For now, we either get a white cue ball or a yellow ball.

The function first checks if we if it's being asked to get the color of a cue ball. If that is the case then it simply returns white. After that it decrements the ball number as we'll later use it as a zero based index for calculating texture coordinates and accessing a color array.

Next, we check if the ball is a stripe. We only need to address the stripe if . What this means is that the colored areas of both solid and striped balls are handled the same if they are in the lower half of the y area.

Then we leave a white circle for our eventual ball numbers by checking if the xy coords are less than 0.4 from the z axis.

Note, we are smoothing both the stripe and the circle just as we smoothed the edge of the circle previously.

Numbering and coloring

It's time to prepare for texture mapping numbers unto our billiard balls as well as picking the correct diffuse colors based on the ball number. I couldn't find the exact font matching the style frequently seen on the balls in so many billiard rooms, so I finagled some comparable looking numbers using Inkscape the vector drawing program.

A 1..16 ball number texture. In the above code, we've created an array to hold the lookup values for our ball colors.

Texture mapping

We're ready to map the texture to our balls. We're going to modify the function to check if the xy coordinates on either side of the ball are within the area we want to texture.

Here is how it's done.

We have a number. Using the constant we can check if the point x and y components are within the area we want to texture map. We then copy the point to and scale it to a range of 0..1. As OpenGL texture coordinates start in the bottom left we flip the y axis by subtracting it from 1. If the texture is on the negative side of z we flip the x axis, as we don't want our back numbers to be mirrored in reverse.

Next, we compute the texture coordinates mindful that our texture has the numbers arranged in order using an even 4x4 grid. We use the built-in function with the number 4 to find the column, and integer divide operator to find the row. We locate the texel color by using .

The last bit is some clean up, as on my configuration of hardware and video driver occasionally generates unsightly seam artifacts. They are cleaned up using an edge constant.

Subtle lighting improvements

Although our render is starting to look decent, we can make a few improvements. I wanted to add a rim light to better visualize the outline of our object in the darkened areas. To do that we can simply add another light but make it somewhat behind our object.

Here is my subtle rim light addition.

Notice the rim light in the lower right area of the billiard ball. This is quite easy. We're repeating what we've already done with the main light, but it's positioned behind the ball. Note it's mostly from behind with a z value of -80. It's important that we the dot product because it will contain negative values as it's behind the object.

The rim light is simply added to the brightness and then they are used to moderate the diffuse color.

Putting it all together

We're ready to put on the final touches. We can add a specular light and begin animating our billiard ball viewing it from any angle. Here is how it looks with a simple random orbit animation.

Our ball with specular highlights and animation.

The complete shader program

And at last, here is a list of all the shader program pieces put together. Feel free to copy or make your own changes without restriction.