in Graphics, iOS

Environment Mapping Demo With OpenGL ES 1.1

CarI just finished creating a graphics demo for a chapter I’m writing for the book iPhone Advanced Projects edited by Dave Mark. In the chapter I go over a few different lighting techniques and go in detail on how to do masked environment mapping on an iPhone 3G with OpenGL ES 1.1.

The demo ended up looking pretty good, so I decided to upload a quick video showing the different lighting modes:

  • Diffuse texture only
  • Diffuse texture plus ambient and diffuse lighting
  • Diffuse texture plus ambient, diffuse, and specular lighting (as usually, per-vertex lighting looks pretty bad, even though this is a relatively high-poly model)
  • Fully reflective environment map (using the normal environment map technique)
  • Environment map added to the diffuse texture and lighting
  • Environment map with a reflection mask plus diffuse texture and lighting (two passes on an iPhone 3G–or one pass if you’re not using the diffuse alpha channel)

The chapter in the book will go in detail into each of those techniques, building up to the last one. Full source code will be included as well.

Some of these techniques will also be covered in my upcoming Two Day iPhone OpenGL Class organized in collaboration with Mobile Orchard.

  1. Very cool. Did you design the original model? How do you export the model data from the design app and import it to the iPhone SDK?

    Are these types of questions covered in the book/class? 😉


  2. Greg, I didn’t make the model. My Maya skillz aren’t quite up to that. I used a free model from Turbosquid. As far as importing it, I went the quickest, easiest way, which was to do a quick-and-dirty parsing of the OBJ file I exported (included in the sample code in the chapter). You really would want to set up a better asset pipeline than that though, but it’ a start.

    These type of questions aren’t covered in the chapter I wrote. It’s just a chapter and it deals with environment mapping. I think there’s another chapter in the same book that cover some of that. As for the class, I’ll provide some simple mesh and texture loaders, but that won’t be the emphasis of the class. Learning OpenGL (and graphics programming) from scratch in two days is a tall order, so I need to concentrate on that.

  3. Hello Noel,

    did you implement the mapping in software? As far as I know there are limitations in ES 1.1. A.e. cube- and sphere-mapping is not supported.

    If so, did you solve performance issues and how?

    regards, Anika

  4. Hi Anika,

    You’re right. The iPhone hardware doesn’t support environment mapping, but you can “fake” it. The chapter I wrote for the book goes in detail exactly how I did it for Flower Garden (and it includes full source code). But you can get the overall technique from this article. The technique is usually called normal environment mapping, and it relies on transforming the normals by the view matrix to get fake-y uv coordinates. Works pretty well! 🙂

  5. Wow this technique is a performance problem because the uv for every vertex of all the meshes, used with environment mapping, is calculated in software. For realtime animation this is not really suitable. But anyways an interesting idea.

  6. Anika,

    If you use the normal environment mapping technique, the uvs should be updated in the hardware. You set up the uvs once to be the same as the normals, and then, every frame, change the texture matrix to the view matrix. That way you’re not touching each vertex each frame, and the hardware takes care of doing the transforms for you (unless the OpenGL drive on the iPhone is silently updating them uvs in software, but I hope that’s not happening).

  7. Here you can find a good 3d models -

Comments are closed.


  • This Week in iPhone News - November 20/2009 May 23, 2012

    […] Environment mapping demo with OpenGL ES 1.1 Noel Llopis demonstrates environment mapping with OpenGL ES 1.1 as part of a chapter he recently created for the upcoming book, iPhone Advanced Projects. […]

  • Tweets that mention Games from Within | Environment Mapping Demo With OpenGL ES 1.1 -- May 23, 2012

    […] This post was mentioned on Twitter by Noel Llopis and sakamoto, Little White Bear. Little White Bear said: Congrats! RT @SnappyTouch iPhone Adv. Projects is out! My chapter is env mapping w OpenGL ES 1.1 […]

  • This Week in iPhone News – August 7/2009 | Oh Wow ... a Blog May 23, 2012

    […] Environment Mapping Demo with OpenGL ES 1.1 Check out Noel’s environment mapping demo which is taken from his upcoming book iPhone SDK 3.0 Projects. […]

  • This Week in iPhone News - August 7/2009 May 23, 2012

    […] Environment Mapping Demo with OpenGL ES 1.1 Check out Noel’s environment mapping demo which is taken from his upcoming book iPhone SDK 3.0 Projects. […]

    • Related Content by Tag