How To Export Blender Models to OpenGL ES: Part 2/3

Welcome back to the three-part tutorial series that teaches you how to make an awesome 3D model viewer for iOS by exporting your Blender models to OpenGL ES!

Here’s an overview of the series:

• Part 1: In the first part, you learned all about the OBJ geometry definition and file format, and used this new knowledge to create a command line tool to parse a simple Blender cube into suitable arrays for OpenGL ES. You also created a simple iOS OpenGL ES app that displayed your model.
• Part 2: You are here! Get ready to learn about the MTL material definition and file format, which you’ll use to add Blender materials (i.e. colors, textures, and lighting properties that you can assign to a portion of a model) to your cube.
• Part 3: In the final part, you’ll implement a simple lighting model for your 3D scene by writing your own OpenGL ES shaders!

Without further ado, it’s time to implement some materials!

Getting Started

First, download the starter pack for this second part of the series. Below is a quick overview of each component — you’ll find more information in their dedicated tutorial sections later on. Just as in Part 1, the contents are grouped as such:

• /Blender/: This folder contains your Blender scene (cube.blend). It’s the same cube from Part 1, but with the single cube texture replaced by different materials for each face of the cube.
• /Code/: Here you’ll find the Xcode projects for your command line tool (blender2opengles) and your iOS app (GLBlender2). The command line tool is exactly the same project from Part 1, with no modifications (minus the source and product files). The iOS app is a textureless version of GLBlender1 from Part 1. All model resources have been removed, too.
• /Resources/: This folder will contain all of your model’s files required by OpenGL ES. It’s empty for now.

Once again, I recommend you keep your directory organized as such for easy navigation.

A Fancy Blender Cube

Launch Blender and open cube.blend. Your scene should look something like this:

You’ll see the same cube from Part 1, but if you navigate the scene, you’ll notice that the cube’s shading changes with your viewing angle—for instance, the red and blue faces on the “side” of the cube maintain the same flat colors no matter your viewing angle, but the face on the top varies from shiny to dark, with gradients within the face. This is due to defining the cube with something new: material properties. So long, mere texture!

Diffuse Reflection and Specular Reflection

The reason you’re seeing this differing shading effect is due to the differing material properties of each face. Whereas a texture is like a bitmap image layered onto an object’s surface—often to provide the appearance of detailed physical texture—you can think of a material property as defining the object’s physical material in terms of how that material interacts with light.

In this tutorial, you’ll learn to implement the two most fundamental material properties, which very roughly correspond to matteness and shininess. These properties are named after two forms of reflection that create their appearance:

• Diffuse Reflection: Technically, this refers to the distributed scattering of light on a surface. More informally, this is just the reflection that lets you see things around you: when light hits an object, the light bounces off in every direction, including into your eye, which is why you can see the object. This effect also creates the perceived color of a surface when it’s illuminated by pure white light—for example, blue paint reflects blue light. In short, it’s the intrinsic color of an object.
• Specular Reflection: This refers to the focused reflection of light off a surface, in a single direction. Mirrors exhibit perfectly specular reflection, redirecting all incoming light exactly, depending on its incoming angle. However, most specular surfaces distort/absorb light differently depending on the angle, which leads to an artifact known as specular highlight on a surface—otherwise known as a shiny point.

In the real world, both properties have deep mathematical/physical models associated with them. In computer graphics, people have developed many popular algorithms that mimic these natural effects in a simple and effective way. You’ll be implementing a simplified version in Part 3, but if you’re interested in the complex physics at play, you can read more here and here.

In Blender, you can adjust your lamp properties to render diffuse and/or specular shading, as shown below:

Try turning on only diffuse reflection, and then only specular reflection, and navigating the scene to acquire some intuition for these concepts.

Blender Materials

Blender renders materials quite nicely and has many adjustable properties. You’ll implement a much simpler material shader in Part 3, but you’ll definitely carry across the diffuse and specular colors of each face. Here’s what a material looks like up close in Blender:

To see a flat materials preview in Blender like in the above screenshot, first, in the top-right panel—the scene outline—look under the Cube nodes and select the checkerboard-in-circle Materials icon labeled MaterialsPhongB. Then in the middle-right panel, the Properties window, look to the header of buttons, select the Materials button again and choose the material MaterialsPhongB from the list. Finally, in the Preview window, select Flat XY Plane as the type of preview.

Your scene already has predefined materials for each of the six faces. The image below shows what they look like rendered on a sphere and on Suzanne:

Let’s go over the properties for each material:

1. MaterialDiffuseR: Diffuse only (red).
2. MaterialDiffuseM: Diffuse only (magenta).
3. MaterialSpecularG: Specular only (green).
4. MaterialSpecularY: Specular only (yellow).
5. MaterialPhongB: Diffuse (blue) and specular (white).
6. MaterialPhongC: Diffuse (cyan) and specular (white).

You could use MaterialDiffuseR and MaterialDiffuseM to simulate matte surfaces like felt or cardboard, while you could use MaterialSpecularG and MaterialSpecularY to simulate shiny objects like silverware or rims. MaterialPhongB and MaterialPhongC lie between both extremes and you could use them to create a ceramic or marble appearance.

In case you’re wondering, the word Phong in the last two material names is not an arbitrary choice. It’s shorthand for the Phong reflection model, a simple lighting model that combines diffuse and specular colors. You’ll implement one in Part 3! :]