Category: OpenGL

Postprocessing with OpenGL ES 3.

Camera can be moved around in the scene and the orientation of the cube object in the scene can be adjusted based on the camera’s position and orientation.
Multisample Anti-Aliasing(MSAA) is utilized and can be turned on and off.
Texturing on the cube object is done using a static cube map texture created by using six images.

This technique also utilizes render to texture technique.
Cube map texture and texture generated via render to texture are filtered using trilinear filtering(mipmaps are generated for textures.) and anisotropic filtering.

A light bloom effect is created by combining blur and blending techniques together.
In the first pass, the scene is rendered into texture then render a full-screen quad and use the texture generated from the first pass on the full-screen quad with blur shader and blending implemented in the second pass.
Bloom effect in this app has been implemented as two types which give the bloom quality differently.
The amount of bloom can be adjusted via slider. More bloom will result in more render to texture pass using blur shader in one frame.

Bloom effect is an expensive technique, especially on mobile devices.
In the video, increasing the amount of bloom has a lot of impact on performance.
Multisample Anti-Aliasing(MSAA), mipmaps generation for trilinear filtering, and anisotropic filtering are all implemented in this app.
These are all expensive techniques.
With all of these techniques in every frame of rendering the scene and considering that the app is running on a mobile device, the impact on performance can be severe at high amount of bloom.

Even though the scene appears to be a simple scene with only one object but the bloom technique implemented is actually full-screen bloom.

Platform: iOS
Programming Language: Objective-C, C/C++, GLSL
Device: iPad Air

Sonic the hedgehog and its characters are properties of Sega Corp.

Postprocessing with OpenGL ES 3.

Camera can be moved around in the scene and the orientation of the cube object in the scene can be adjusted based on the camera’s position and orientation.
Multisample Anti-Aliasing(MSAA) is utilized and can be turned on and off.
Texturing on the cube object is done using a static cube map texture created by using six images.

A blur effect is created by first render the scene into texture in the first pass then render a full-screen quad and use the texture generated from the first pass on the full-screen quad with blur shader in the second pass.
This second pass does not have to be rendered to the screen, instead, it can be rendered into texture again for use in more postprocessing steps of the image rendered.

The amount of blur can be adjusted via slider. More blur will result in more render to texture pass using blur shader in one frame.

Cube map texture and texture generated via render to texture are filtered using trilinear filtering(mipmaps are generated for textures.) and anisotropic filtering.

The blur technique implemented is actually full-screen blur even though the scene has only one object in it.

Platform: iOS
Programming Language: Objective-C, C/C++, GLSL
Device: iPad Air

Sonic the hedgehog and its characters are properties of Sega Corp.

Particle system using OpenGL ES 3.

Each particle is created using point sprite primitive type of OpenGL ES and texture is added onto the point sprite.
Particle color from texture then being modulated with a random color.
The color of the particle group is assigned randomly each time the group is generated (by tapping the screen).
Each group consists of 10000 particles.

There is no sorting of particles based on depth values.
As a result, blending is employed.
The blending techniques used are transparency blending to make the transparent part of the texture not occlude the particles behind it and additive blending to make the group of particles appear brighter when they are grouped on top of each other.

Since there are a lot of particles in one group, when many groups of particles are generated simultaneously, the impact on performance starts to occur, especially since the development platform is a mobile device.

The slider at the bottom of the screen can be used to control the time factor of particles when they explode. Since the time factor of particles can be controlled in real-time, some special effects that involve the time property of particles can be created.
Rewind and fast-forward effects are shown in the video. Users can drag the slider to create the effects. The same can be done via programming instead of manually dragging the slider.

Platform: iOS
Programming Language: Objective-C, C/C++, GLSL
Device: iPad Air

Environment mapping using cube mapping.

Even though the room appears to be static but the app is actually implemented with dynamic environment mapping technique.

Each side of the room is a quad with its own texture.
In every frame, the camera is placed at the center of the room and renders each side of the room into a cube map texture.
The cube map texture generated then being used as a texture resource for the cube object at the center of the room to create environment mapping effect.

Each side of the cube object at the center of the room is detached from the others and does not share vertices, also each side of the cube object has its own normal vector.

Camera can be moved freely in the room(touch dragging) and is designed to prevent gimbal lock situation.

The cube object’s orientation can also be changed.
The direction and axis of rotation while changing the cube’s orientation are based on the camera’s position and orientation, not on the local axes of the cube object.

Platform: iOS
Programming Language: Objective-C, C/C++, GLSL
Device: iPad Air

Sonic the Hedgehog and its characters are properties of Sega Corp.

Lighting implemented in OpenGL ES 3.

Cube object consists of 24 vertices.
Each side of the cube object is detached from the others and does not share vertices.
Normal vector for each side of the cube object is different from each other.
Orientation of the cube object can be adjusted.
Each side of the cube object has its own color.

The type of light source utilized is a point Light with falloff distance implemented to create light attenuation effect.
Distance from the light source to the cube object can be adjusted via slider.
Position of the light source can also be adjusted.

Shader program can be switched between Gouraud shading(Vertex Lighting) and Phong shading(Per-Pixel Lighting).

Each term from the Lighting equation(Rendering equation) can be modified independently so that the effect each term has on the cube object can be observed in real-time.

Platform: iOS
Programming Language: Objective-C, C/C++, GLSL
Device: iPad Air