OpenGL ES 2.0 Examples
OpenGL ES is a cross-platform API for 2D and 3D graphics on embedded systems such as mobile phones, tablets, vehicles and appliances. It is a subset of desktop OpenGL, tuned to expose the most efficient features of embedded GPUs. OpenGL ES 2.0 introduces a programmable pipeline into the API, deprecating a lot of the fixed functionality in OpenGL ES 1.x in favour of programmable shaders. This is the most popular 3D API in existence today, and is widely used in most 3D and many 2D games on mobile and embedded devices. Shaders provide a lot of advanced functionality and flexibility to renderers resulting in substantially more ways to improve graphics fidelity than in OpenGL ES 1.x. The examples below both reproduce techniques in OpenGL ES 1.x using shaders, and also describe a number of other more advanced techniques. This API is available on all current PowerVR GPUs.
Beginner | Intermediate | Advanced
Beginner
-
Draw a triangle to the screen using hardware acceleration.
Description:
A basic tutorial that guides the user, step-by-step, through the process of initializing a window using :API:, drawing a triangle in it using hardware acceleration, and then terminating the window.
Controls:
Esc : Close the application
Links:
-
This training course introduces the PVRShell library.
Description:
This demo deals with the PVRShell library. The PowerVR shell handles all OS specific initialisation code, and has several built in command line features which allow for the specifying of attributes. The library is constructed around a 'PVRShell' base class, and object of which is constructed and returned from a 'NewDemo' function.
Controls:
Esc : Close the application
Links:
-
This training course demonstrates how to apply a texture to a polygon in :API:.
Description:
This training course demonstrates how to apply a texture to a polygon in :API:. The texture is generated procedurally during initialisation and then loaded into :API:. The triangle is then drawn with UV values so that the texture can be applied to it.
Controls:
Esc : Close the application
Links:
-
This training course consists of a demonstration of basic transformation and lighting.
Description:
This training course consists of a demonstration of basic transformation and lighting, growing on the basic drawing techniques learnt in HelloTriangle.
Controls:
Esc : Close the application
Links:
-
This training course introduces the PVRTools libraries.
Description:
This training course introduces the PVRTools libraries. These libraries provide various modules to help developers perform many of the common tasks associated with hardware accelerated graphics rendering.
Controls:
Esc : Close the application
Links:
-
This training course introduces the Print3D class featured within the PVRTools library.
Description:
This training course introduces the Print3D class from the PVRTools library. Print3D can be used to display text in both 2D and 3D modes. The default projection mode is 2D but supplying a modelview and projection matrices allow the user to render the text in 3D. Text in different colours is also possible.
Controls:
Links:
-
This training course introduces the PowerVR Object Data (.pod) format.
Description:
This training course introduces the PowerVR Object Data (.pod) format. It goes into detail on how to open .pod files, load any .pfx and .pvr files that have been referenced, and set up the cameras and lights from the .pod file.
Controls:
Esc : Close the application
Links:
-
This training course demonstrates how to use the PVRTools library to load and use .pfx files.
Description:
This training course demonstrates how to use the PVRTools library to load and use .pfx files. PFX is both a file format and an API, and stands for PowerVR Effects.
Controls:
Esc : Close the application
Links:
Intermediate
-
This training course illustrates how transparency effects can be achieved with blending and the use of some common blending modes.
Description:
Blending is a fragment operation that combines the colour value of fragments as they are drawn with values that are already present in the colour buffer. This allows transparent objects to be simulated. This training course shows how to draw blended geometry using four different types of blending modes set with glBlendFunc().
Controls:
Esc : Close the application
Links:
-
This training course illustrates how to perform alpha testing and provides a visual comparison between alpha blending and alpha testing.
Description:
Alpha testing is a technique through which a test is conducted on a per-fragment basis to determine whether that fragment should be discarded and not contribute to the final scene. This can allow complex shapes to be drawn using very simple geometries, but often at the price of hardware optimisations in the graphics pipeline. In programmable graphics pipelines supporting GLSL this is done through the use of the 'discard' keyword in the fragment shader while in the fixed function pipeline API OpenGL ES 1.x this is performed by calling either glEnable(GL_BLEND) or glEnable(GL_ALPHA_TEST).
Controls:
Esc : Close the application
Links:
-
In this training course two techniques are shown for generating an anisotropic lighting effect, one technique using per vertex/pixel calculations, and the other using a texture lookup.
Description:
In this training course two techniques are shown for generating an anisotropic lighting effect (the effect of surface grain on materials such as brushed metal, velvet etc.). The first technique uses per vertex and pixel calculations to calculate the shading and thus generate the effect on the fly. The second technique uses a texture lookup to determine the shading and would be useful in situations where bandwidth was more readily available than processing time.
Controls:
Left/Right Arrow : Toggle effect
Esc : Close application
Links:
-
This training course demonstrates a simple implementation of a 'bloom' effect.
Description:
This training course demonstrates a simple implementation of a 'bloom' post processing effect. The bright parts of the picture are extracted in a post processing step, blurred and added over the final image to create a glow around the object's borders.
Controls:
Up/Down : Toggle the bloom effect On/Off
Esc : Close the application
Links:
-
This training course demonstrates an example of using a normal map to implement bump mapping.
Description:
Bump mapping is a technique for simulating bumps and wrinkles on the surface of an object. This is achieved by perturbing the surface normals of the object and using the perturbed normal during the illumination calculations. The result is an apparently bumpy surface rather than a perfectly smooth surface although the surface of the underlying object is not actually changed. This technique is used extensively in graphics applications to add perceived detail to models without adding further geometry.
Controls:
Esc : Close the application
Links:
-
This training course demonstrates how to implement cell shading.
Description:
This training course demonstrates how to implement cell shading. Cell-shaded animation (also known as Cell shading or Toon shading) is a type of non-photorealistic rendering designed to make computer graphics appear to be hand-drawn. Cell-shading is often used to mimic the style of a comic book or cartoon and is predominantly used in video games.
Controls:
Esc : Close the application
Links:
-
This training course demonstrates how to implement complex lighting techniques.
Description:
This training course demonstrates how to implement various forms of more complex lighting techniques than the basic lighting training courses. Specifically, it shows how to implement directional, point and spot lighting with a diffuse and a specular component using branching in the vertex shader.
Controls:
Left/Right : Cycle through the available modes
Esc : Close the application
Links:
-
This training course demonstrates displacement mapping using a texture read from the vertex shader.
Description:
Displacement mapping is an alternative to bump mapping, normal mapping, and parallax mapping, that causes the actual geometric position of points over a textured surface to be displaced, often along the local surface normal, according to the value the texture function evaluates to at each point on the surface.
Controls:
Esc : Close the application
Links:
-
This training course demonstrates a means of simple edge detection.
Description:
Four highlighting modes for edge detection are available in this demonstration.'Edge Detection' mode locates the edges of each object and highlights them with a black line. 'Edge Detection: Inverse' mode locates the edge of each object and highlights them with an inverted colour, all other areas are coloured black. 'Edge Detection: Blur' mode locates the edge of each object and sets the colour of the edge to be a mixture of the surrounding fragments to produce a blur effect.
Controls:
Up/Down : Cycle through highlighting modes
Left : Decrease the width of edge highlights
Right : Increase the width of edge highlights
Esc : Close the application
Links:
-
This training course serves as an example of a fast transformation and lighting vertex shader.
Description:
This training course shows how to use a fast transformation and lighting vertex shader. This technique is appropriate for situations when a high performance shader is required.
Controls:
Esc : Close the application
Links:
-
This training course demonstrates how to create a fog effect using shaders.
Description:
This training course demonstrates how to create a fog effect using shaders. Fog is used to help with the perception of distance in a 3D world - objects that are further way are increasingly coloured with a fog colour.
Controls:
Left/Right : Cycle fog mode
Esc : Close the application
Links:
-
This training course demonstrates an implementation of Fresnel reflection.
Description:
This training course demonstrates an implementation of Fresnel reflection. The Fresnel equations (or Fresnel conditions) describe the behaviour of light when moving between media of differing refractive indices. The reflection of light that the equations predict is known as Fresnel reflection.
Controls:
Up/Down : Increase/Decrease the refractive index of the surface material
Esc : Close the application
Links:
-
This training course demonstrates how to implement an iridescence effect.
Description:
This training course demonstrates how to implement an iridescence effect. Iridescence (also known as goniochromism) is generally known as the property of certain surfaces which appear to change colour as the angle of view or the angle of illumination changes. Iridescence is commonly seen in items such as soap bubbles, butterfly wings, and sea shells. The effect demonstrated in this training course mimics the behaviour of light reflecting off a surface covered by a translucent film of variable thickness.
Controls:
Up/Down : Increase/Decrease the maximum variation
Left/Right : Decrease/Increase the maximum thickness
Esc : Close the application
Links:
-
This training course demonstrates a switch in the detail of an object based on its distance from the camera.
Description:
This training course demonstrates a switch in the detail of an object based on its distance from the camera. The vertex and fragment shaders implement two techniques for reflections. Which technique is used depends on the value of bHighDetail (which varies based on distance). If bHighDetail is true the method described in OGLES2PerturbedUVs is used; if bHighDetail is false the method described in OGLES2Reflections is used. Additionally, when the training course is in 'low detail' mode it uses a different mesh, this mesh contains only 7% of the original meshes vertices.
Controls:
Esc : Close the application
Links:
-
This training course shows how to use light maps.
Description:
This training course demonstrates how to use light mapping to project a shadow texture from an arbitrary point, in an arbitrary direction, onto a model which has a base and reflection texture.
Controls:
Esc : Close the application
Links:
-
This examples demonstrates a technique known as Maximum Intensity Projection using the EXT_blend_minmax OpenGL ES 2.0 extension.
Description:
Maximum Intensity Projection is a technique predominantly used in the medical and scientific visualisation industry. Typically it is used to display PET scan slices retaining the maximum intensity for a given projected pixel. This example uses the EXT_blend_minmax extension to demonstrate this technique.
Controls:
Esc : Close the application
Links:
-
This training course is an example of how to correctly use synchronisation techniques to achieve multi-threaded rendering.
Description:
This training course demonstrates how to load resources on a separate thread to the main rendering thread. While this may seem a trivial exercise, API extension functionality must be utilised in order to achieve correct results.
Controls:
Esc : Close the application
Links:
-
Shows how to use multiple render targets to output data to several different surfaces within a single pass.
Description:
Multiple Render Targets is a technique utilised in modern graphics processing that allows the rendering of multiple images to multiple render targets simultaneously. These textures can then be used as texture maps applied to 3D models, or as inputs for other shaders.
Controls:
Links:
-
Shows how to use occlusion queries to determine visible objects.
Description:
Shows how to use occlusion queries to determine visible objects and cull invisible ones to increase run-time performance.
Controls:
Links:
-
This training course serves as an example of implementing the parallax bump mapping effect.
Description:
Parallax bump mapping is a technique for simulating bumps and wrinkles on the surface of an object. This is very similar to normal bump mapping but with the addition of a parallax effect based on the view vector. This training course serves as an example of implementing the parallax bump mapping effect.
Controls:
Esc : Close the application
Links:
-
This training course demonstrates the use of environment mapping with perturbed UVs.
Description:
This training course demonstrates the use of environment mapping with perturbed UVs. For any given surface on the object a normal map value is read, an angle of reflection between that normal and the eye direction is used to generate a new UV co-ordinate and finally, this UV co-ordinate is used to find the correct colour to reflect from the environment map.
Controls:
Esc : Close the application
Links:
-
This training course demonstrates the creation of a reflection effect from a 2D map and a cube map.
Description:
This training course demonstrates the creation of a reflection effect from a 2D map and a cube map. This technique is also known as environment mapping in that the environment around an object is rendered into a texture (in this case as a pre-baked step) and then this environment is sampled per fragment in order to simulate the effect of light from the environment being reflected from the object. Two variations on the technique are shown using either a 2D map or a cube map.
Controls:
Left/Right : Swap mapping type
Esc : Close the application
Links:
-
This training course demonstrates a simulation of glass-like materials.
Description:
This training course combines an object with a background in order to achieve a refraction effect. The background texture is applied to the model but the sample coordinates are affected by the normals of the geometry in order to simulate how light would be bent through a material with differing refractive index to the air around it.
Controls:
Left/Right : Cycle Specular reflection on or off
Esc : Close the application
Links:
-
This training course demonstrates the use of rendering to a texture.
Description:
This training course demonstrates rendering a scene to a pBuffer surface or FBO, then binding and applying that render to an object in an additional render pass.
Controls:
Left : Toggles multisampling of the FBOs
Esc : Close the application
Links:
-
This training course demonstrates a shadow mapping technique.
Description:
This training course demonstrates a shadow mapping technique. This technique begins by determining whether a given area can be seen from the light. Each fragment that is not visible is marked in one render pass and used to create a texture. In a second render pass this texture is applied to the scene to create the shadow effect.
Controls:
Esc : Close the application
Links:
-
This training course demonstrates how to use the PVRTools libraries to create and use shadow volumes.
Description:
This training course demonstrates how to use the PVRTools library to create and use shadow volumes. The process for using this technique involves updating dynamic shadow volumes before drawing the fully lit scene. After that, the stencil test must be enabled, and the shadow volumes must be drawn to fill the stencil buffer. Then draw a full screen quad that will only appear where the stencil buffer is not zero, and finally disable the stencil test.
Controls:
1 : Toggle display of shadow volumes
Esc : Close the application
Links:
-
This training course demonstrates how to implement hardware accelerated skinning using .pod files.
Description:
This training course demonstrates how to implement hardware accelerated skinning using the .pod file loading tools found in the PVRTools library.
Controls:
Left/Right : Rotate model clockwise/anti-clockwise
Up/Down : Zoom out/in
Esc : Close the application
Links:
-
This training course demonstrates how to use the stencil buffer to mask areas of the screen when rendering.
Description:
This training course demonstrates how to use the stencil buffer to mask areas of the screen when rendering. A sphere and a cylinder are drawn intersecting. The sphere is drawn first, then a stencil test performed using the cylinder. This test is used to determine what colour should be drawn for a given area of the sphere.
Controls:
Esc : Close the application
Links:
-
This example demonstrates floating point textures using the OES_texture_float extension and mapping this texture to the colour buffer using several different tone mapping operators.
Description:
Tone mapping is a technique used to map a set of colours to a renderable representation. This is generally used for High Dynamic Range rendering or visualisation - such as in this example. The texture supplied with this example is a full-precision 32bit IEEE floating point image which is then mapped to the colour buffer via a set of tone mapping operators executed at the fragment shader stage. A number of operators are supplied and descriptions are included with the PFX file. The example allows the user to alter the exposure of the image by a number of stops, demonstrating the usefulness of floating point textures.
Controls:
Esc : Close the application
Up/Down : Change the tone mapping operator
Left/Right : Alter the exposure value
Links:
Advanced
-
This training course shows how to save and load binary shaders in a program to avoid recompiling the shaders each time.
Description:
This training course demonstrates how to save and load binary shaders at runtime. The code will compile a binary shader on first run, save it to disk and then on subsequent runs it will load in the binary shaders and use these without unnecessary recompilation. This can save time at startup, especially if many complex shaders are used. The triangle will appear red if the original shader is used, and green if the binary shader is used.
Controls:
Esc : Close the application
This training course does not use the OGLES2Tools library and will only function on platforms that support the GL_OES_get_program_binary extension.
Links:
-
This demo shows a matrix skinned character in combination with bump mapping.
Description:
The ChameleonMan demo shows a Matrix Skinned Character in combination with bump mapping. Matrix Skinning is the act of animating a vertex over time given a set (palette) of matrices and a known set of blend weights assigned to those matrices. For each frame the Matrix Palette is recomputed based on time. Per vertex, up to 3 matrices, from the palette, along with 3 weights are used by the vertex shader to update the vertex position to obtain the current animation frame position. Two lighting modes are available; per vertex lighting, and bump mapped lighting.
Controls:
1 : Toggle lighting modes
Esc : Close the application
Links:
-
A demonstration of a coverflow style effect.
Description:
This demo serves as an example of a coverflow style effect, which is a three dimensional GUI used to display information as a stack of snapshots.
Controls:
Left/Right : Flow covers left/right
Esc : Close the application
Links:
-
../../../Examples/Advanced/DeferredShading/DeferredShading.txt
-
Shows how to efficiently render sprites and interface elements.
Description:
Rendering graphical user interfaces may seem like a trivial exercise, however without careful consideration a simple interface may be unresponsive and sluggish due to poor graphics performance. The purpose of this demo is to highlight and demonstrate techniques that can be used to improve user interface performance for software running on PowerVR platforms. Indeed, any generic 2D sprite-based applications can benefit from the recommendations given in this demo including games, applications and interfaces.
Controls:
Esc : Close the application
Links:
-
A demonstration of a render to texture effect.
Description:
A demonstration of a render to texture effect is shown in this demo. FBOs are used as render targets each frame, with the previous frames FBOs used as the source of the view from the camera.
Controls:
Esc : Close the application
Links:
-
A demonstration of drawing a fractal using render to texture.
Description:
A recursive fractal effect is demonstrated here using the render to texture technique. This technique is a useful method to create a variety of effects. Basically, a scene is rendered as usual, but in a texture for future reuse.
Controls:
Esc : Close the application
Links:
-
Demonstrates dynamic reflection and refraction using a dual paraboloid environment map.
Description:
This example shows a technique to maintain a dynamic environment map by rendering both hemispheres of the scene to two halves of a single rectangular texture. In addition, this also demonstrates rendering skyboxes with a full screen quad, reflection and refraction with chromatic dispersion.
Controls:
Links:
-
A demonstration of dynamic lighting using spherical projection.
Description:
MagicLantern shows how to project a dynamic light-map onto a scene. It uses a cube map to hold the projected image and calculates the mapping coordinates using the direction from the light source to the vertices.
Controls:
Esc : Close the application
Links:
-
A demonstration of how to implement rendering algorithms for Navigation software.
Description:
This demo serves as an example of how to implement rendering algorithms for Navigation software. Several techniques such as anti-aliased lines and billboards are employed. The demo also provides an example of how to use culling and batching to optimize rendering.
Controls:
Up : Toggle pause/un-pause
Esc : Close the application.
Links:
-
A demonstration of how to implement rendering algorithms for 3D Navigation software.
Description:
This demo serves as an example of how to implement rendering algorithms for 3D Navigation software. Several techniques such as frustrum culling, visibility based culling and dynamic stencil-shadow volumes are employed. The demo also provides an example of how to use culling and batching to optimize rendering.
Controls:
Esc : Close the application
Links:
-
Demonstrates the use of PVRScope and the example graphing code.
Description:
This demo shows the use of PVRScope and the example graphing code that allows an application to return performance statistics from the GPU in real time. For further details, refer to the PVRScope User Manual.
Controls:
Links:
-
Demonstrates the use of PVRScope's remote communication features.
Description:
This example shows how to use the editable data and custom mark functionality of PVRScope. PVRTune must be running and connected to an instance of PVRPerfServer running on the target device for this demo to function.
Controls:
Links:
-
Shows how to implement a simple particle system using OpenCL and the GPU.
Description:
The demo utilises OpenCL to implement a particle system. Particle systems are techniques that use a large amount of sprites to simulate phenomena that would be difficult to reproduce with conventional rendering techniques. Furthermore, it also highlights the interaction between OpenCL and OpenGL (plus OpenGL ES 2).
- left and right arrows - Decrease and increase number of particles
- up and down arrows - Switch between OpenCL and CPU Particle System implementation.
Controls:
Links:
-
This demonstration shows a mask lit using spherical harmonics and regular diffuse vertex lighting.
Description:
Spherical Harmonic lighting is a real-time rendering technique that uses a pre-processing step to realistically render scenes using any type of light source. It is primarily used to reproduce diffuse lighting. The diffuse vertex lighting requires at least four light sources to to be roughly equivalent to the spherical harmonics lighting for this scene. Implementing four diffuse lights requires more vertex shader instructions than the spherical harmonics calculations.
Controls:
1 : Toggle Spherical Harmonics/Vertex Lighting
Esc : Close the application
Links:
-
A demonstration of a variety of different shaders implemented on a selection of meshes.
Description:
The Shader demo presents a variety of shaders that can be applied to a scene, such as Environment Mapping and Phong Lighting. The demo also features a selection of surfaces to display the shaders on.
Controls:
Left/Right : Cycle backwards/forwards through the list of shaders
Up/Down : Cycle backwards/forwards through the list of objects
Esc : Close the application
Links:
-
This demo is a shader based version of the original OpenGL ES Skybox demo. This time it shows various shaders applied to the balloon.
Description:
This demo is a shader based version of the original OpenGL ES Skybox demo. It shows various shaders applied to the balloon, and is compressed using PVRTC4 using the PVRTexTool skybox compression feature.
Controls:
Esc : Close the application
Links:
-
This example demonstrates texture streaming using platform-specific functionality.
Description:
Streaming texture data from a camera source to a graphics API is a technique which can be very costly if hardware and software optimisations are not used correctly. This example demonstrates the correct usage for platform-specific texture streaming using native APIs relevant for each platform.
Controls:
Esc : Close the application
Links:
-
This demo shows how to render a water effect on a given plane
Description:
This demo utilises a combination of different techniques to produce a water effect. User input controls the elements that are implemented in the effect so that users can determine the effect that would best suit their needs. When reflection, refraction and depth effects are off, the water colours alpha value is used to blend the plane in with the rest of the rendered world. This adds to the quality of the basic effect for very little cost.
Controls:
Left/Right : Cycle backwards/forwards through available options
Up/Down : Change (Toggle or Increase/Decrease) the currently selected option
1/Space : Toggle Pause/Unpause
Links:
