Two of the coolest things (I think) you can do in OpenGL are vertex and fragment shaders. Unfortunately, however, debugging these things at run time can be quite a pain. Or if you want to see a change you’ve made in the shader code, you have to recompile your program, run it, only to find that you forgot a semi-colon or you misspelled something.
But I have good news for you! Along with Apple’s Developer Tools comes a program called OpenGL Shader Builder. It is exactly as you suspect: a dedicated workspace for creating, debugging, and testing vertex and fragment shaders. You don’t have to write a program and write all the right OpenGL code to bring the shader in. All you have to do is write shader code.
The point of this post is to give an introduction to OpenGL Shader Builder, and to do that, I am going to be using the sample code found at the following Lighthouse 3D tutorial, which will allow us to map a texture onto a sphere with lighting.
So the actual GLSL code itself is not the important part, but rather the important thing is that you can use your Mac to debug shaders without having to do a bunch of work. So let’s get started.
Let’s get started: Starting up OpenGL Shader Builder
The first step is to make sure you have Apple’s latest set of develop tools. To get those, click here. When you’ve installed the developer tools, open your developer folder (usually /Developer), go to Applications, go to Graphics Tools, and then open OpenGL Shader Builder.
When it launches, you will see it is split into four sections:
- Program: Includes the list of all the shaders in your project (you can have multiple shaders and what not), and also allows you to set things like how the test geometry is going to be drawn, etc.
- Render: Besides the editor, this is where you’ll be spending most of your time. It just shows some geometry of your choosing (plane, sphere, teapot, etc) with your shaders applied.
- Textures: Here’s where you “load” textures. Basically you just tell OpenGL Shader Builder about some pictures you want to use as textures, and the type of the texture (cube map, 2D, etc).
- Symbols: Displays a list of all of the changeable variables in rendering your shader (such as GLSL uniforms). Typically, you’ll use this to change what texture you want to be used, or where lights are.
For more on this stuff, see Apple’s documentation on OpenGL Shader Builder.
Adding a vertex and fragment shader
So what we are going to do now is add a vertex and a fragment shader. The code I am using is from the Lighthouse 3D listed above.
To create a new shader, simply go under the File menu, go to New, and then select either “GLSL Vertex Shader” or “GLSL Fragment Shader”
An editor will appear (or you may have to double click it in the Program tab). For the vertex shader, paste the following code:
varying vec3 lightDir, normal;
void main() {
normal = normalize(gl_NormalMatrix * gl_Normal);
lightDir = normalize(vec3(gl_LightSource[0].position));
gl_TexCoord[0] = gl_MultiTexCoord0;
gl_Position = ftransform();
}
And for the fragment shader, paste in the following code:
varying vec3 lightDir, normal;
uniform sampler2D tex;
void main() {
vec3 ct,cf;
vec4 texel;
float intensity,at,af;
intensity = max(dot(lightDir,normalize(normal)),0.0);
cf = intensity * (gl_FrontMaterial.diffuse).rgb +
gl_FrontMaterial.ambient.rgb;
af = gl_FrontMaterial.diffuse.a;
texel = texture2D(tex,gl_TexCoord[0].st);
ct = texel.rgb;
at = texel.a;
gl_FragColor = vec4(ct * cf, at * af);
}
If you screw up any of the pasting, you’ll see that we get immediate feedback about the parsing in the lower portion of the editor. That’s awesome.
Adding in the texture
Now since the Lighthouse 3D tutorial deals with textures, we need to get one. I think the most appropriate thing to do would be to do a sphere with an earth texture. So go to this link and download the image, it’s an image of Earth as taken by NASA, and made into a nice spherical map. For now, just put it on your desktop.
Open the Texture tab in OpenGL Shader Builder. You’ll see a main viewing area on the left, and some thumbnails on the right. Drag your image from the desktop into the first well (index 0) in your document:
Rendering
OK, now we are ready to see the result. Switch to the Render tab, and in the pop-up that currently says Plane, change it to Sphere:
Also, change the clear color to Black by clicking the swatch next to Clear Color:
And when you do all that, you’ll end up with a beautiful looking Earth:
Summary
What you should take away from this is that on the Mac, you can focus on what you are working on. If you are working on a vertex or fragment shader, why should you have to write a ton of C code to test it? The OpenGL Shader Builder is another excellent way to do really effective OpenGL programming on the Mac.
