Last update: 8 January 2014

News

  • Icon 3D constructor  by Anton Rekshinsky another iOS application powered by Vvision Engine. Code source of the application is available here.
  • The tutorials has been translated to french and published on Developpez.net. Check out here (thanks to  LittleWhite and Jérôme Marsaguet): 
  • Vvision engine will power the next release of the Furniture 3D Constructor application on the Apple Store by Anton Rekshinsky.
  • Fixed a bug in Gpu Skinning tutorial (thanks to  xiaobojia from china) please download a fresh copy of the tutorials + framework. The bug was in the RenderNode function in the AnimatedMeshEntity.cpp
  • Added shadow mapping tutorial ( in progress)
  • Moved each tutorial to a separate page.
  • Changed the Framework and tutorials license to LGPL.
  • New tutorials added: Cube Mapping reflections and Lighting with bumps
  • Fixed minor bugs in the framework. 
  • Roadmap for future tutorials updated.

Overview

In this page you will find a list of OpenGLES 2.0 tutorials for iOS based on a common framework taken from Virtual Vision Engine. You should have a C++ background and a good OpenGL/GLSL knowledge ( transformations, vbo, vao, fbo and writing shaders). All the tutorials use the common framework. This framework can be found in the 'engine' directory of the zip file.

The framework is taken from my own engine called Virtual Vision.

Virtual Vision was orginally written for PC, it has been ported to the iOS later. Then I decided to make something more interessting with the engine so I started to write my first iPhone application that is now available on the Apple Store called Camera Art Effects that can apply post processing effects in real time to camera image, I then made a game with the engine that is also available on the Apple Store, the game is called Jumper Buggy its a a 3D action and simulation game. I recommand that you read this article if you are writing your own engine.

Stay tuned for future tutorials, bellow is the roadmap (sorted by priority):
  • Enviroment mapping. (DONE)
  • Advanced per pixel lighting. (DONE)
  • Shadow Mapping. ( IN PROGRESS)
  • 2D sprite.
  • Deferred rendering ( while its still possible to render the G-Buffer with OpenGLES 2.0, which require multiple pass to store geometry, materials and normals, this could be packed in a one single pass with the future OpenGLES 3.0 compatible devices ( thanks to the multiple render target only available in the 3.0 spec, this will allow pixel shaders to render to multiple target). Future games on mobile device should finally replace forward renderers with modern renderers.
  • Occlusion Culling (  only with the OpenGLES 3.0 compatible devices).


All the tutorials have the same entry point located in the Tutorial.h/Tutorial.cpp. In this class there is two functions, the first one called 'Deploy' that loads shaders and disk resources for the tutorial, the second one called Frame() that display the image on the screen with a rate of 60 images/sec. This function is called by the viewController of the application.

The tutorials doesn't cover all the code source, it only discuss the main parts of the source, you still have to look in the code source to see in details, the code is documented and easy to go through if you are familiar with C++.

For Questions, bug reports, find me here:

  • Email: abdallah.dib(replace_with_at)virtual-vision.net
  • Twitter: @abdallah_dib

Download

The framework and sample codes are distributed under the LGPL license.

Click here to download the code source for the framework and the samples code.

Tutorial 1. Import Assets

The tutorial  shows  how to use assimp to import and render 3D assets. Assimp is an open source library that can load variaty of 3D models ( 3ds, obj, X, quake and doom models). 

Read Tutorial...


Tutorial 2. Bump Mapping

This tutorial show how to peform simple and effective bump mapping technique on iOS. This technique is used widely in games to add details to the models without the need of complex or high polygon count model. 

Read Tutorial...


Tutorial 3. Gpu Skinning

This tutorial shows how to achieve skinning on the GPU using the vertex programmable pipeline to offload the CPU. 

Read Tutorial...

Tutorial 4. Quaternion camera movement

This tutorial implements a simple quaternion camera, where we can move and look in a 3D world. The Camera class is not optimized , So if you plan to use it in a real time application consider doing some optmization. 

Read Tutorial...


Tutorial 5. SkyBox

This tutorial loads and display a skyBox using OpenGL cube map texture.

Read Tutorial...


Tutorial 6. Water Reflection

This tutorial shows how we can implement a real time water surface reflection.

Read Tutorial...


Tutorial 7.  Lighting with bumps

This tutorial assumes that you know the basic of OpenGL lighting and what ambient, diffuse and specular lighting means and the maths behind). The tutorial will not cover the theory behind phong lighting and how ambient, diffuse and specular factors are calculated. There is a lot of articles and docs on the net, Check the following link for more details.

This tutorial shows how to implement a point lighting shader with bumps. Bump mapping adds  details to the scene by perturbating the surface normals for objects and using the perturbated normal in the pixel shader for light calculation. this result in a bumpy surfaces. The screen shots bellow shows the same scene rendered with and without bumps ( in the sample code you can switch between the two scenes using the switch button).

Read Tutorial...



Lit scene without bumps


Lit scene with bumps

Tutorial 8. Cube mapping reflection

Also known as environment mapping. This tutorial shows how to achieve environment reflection over a surface object. This technique is used to simulate reflective surface in a scene. We use a cube map texture as a reflection texture. This texture is then sampled per fragment in the pixel shader to simulate the reflection of the environment on the object.

Read Tutorial...


Tutorial 9. Real Time Shadows


This tutorials shows how to achieve real time shadows using shadow mapping technique to add more realism to the scene. The sceenshot bellow shows the scene rendered with bumps and shadows.

Read Tutorial...