Commit 8812f432 by Joe Davis

Updated to the 4.0 SDK Browser

parent f976d7a0
<!DOCTYPE html>
<html lang="en">
<head>
<title>The PowerVR SDK Browser</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="./images/img-icon.png">
</head>
<body>
<div id="GlobalHeaderContainer">
<div id="GlobalHeader">
<div class="logo">
<a href="http://www.powervrinsider.com" target="_blank"><img src="./images/PVRlogo.png" width="40%" height="40%" /></a>
</div>
<div class="sitetitle">PowerVR SDK Browser</div>
</div>
</div>
<div id="NavContainer">
<nav>
<div class="navlink">
<a href="Home.html">Home</a>
</div>
<div class="navlink">
<a href="GettingStarted.html">Getting Started</a>
</div>
<div class="navlink">
<a href="Examples.html" class="current">Examples</a>
</div>
<div class="navlink">
<a href="Framework.html">Framework</a>
</div>
<div class="navlink">
<a href="Documentation.html">Documentation</a>
</div>
<div class="navlink">
<a href="PowerVRTools.html">PowerVR Tools</a>
</div>
<div class="navlink">
<a href="ReleaseNotes.html">Release Notes</a>
</div>
<div class="navlink">
<a href="Licence.html">EULA</a>
</div>
<div class="navlink">
<a href="Contact.html">Contact Us</a>
</div>
</nav>
</div>
<!--API_TAB-->
<div class="content">
<div id="Section" class="section">
<!--API_DESCRIPTION-->
<h1>DirectX 11 Examples</h1>
<p>
DirectX 11 is the latest API for 2D and 3D graphics from Microsoft intended for desktop devices and consoles.
</p>
</DX11> <p><a href="#Beginner" class="link">Beginner</a> | <a href="#Intermediate" class="link">Intermediate</a> | <a href="#Advanced" class="link">Advanced</a></p>
<!--EXAMPLE_TEMPLATE-->
<div id="Beginner""><h2>Beginner</h2><ul class="accordion">
<li id="HelloAPI">
<div class="title">
<a href="../../Examples/Beginner/01_HelloAPI/HelloAPI.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/01_HelloAPI/HelloAPI.png" alt="HelloAPI" /></a>
<input type="checkbox" id="HelloAPIFull2">
<label for="HelloAPIFull2" title="Click for more information"><h3>HelloAPI</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Draw a triangle to the screen using hardware acceleration.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/01_HelloAPI/DX11/DX11HelloAPI.cpp" target="_blank">DX11HelloAPI.cpp</a> | <a href="../../Examples/Beginner/01_HelloAPI/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPVRShell">
<div class="title">
<a href="../../Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.png" alt="IntroducingPVRShell" /></a>
<input type="checkbox" id="IntroducingPVRShellFull2">
<label for="IntroducingPVRShellFull2" title="Click for more information"><h3>IntroducingPVRShell</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PVRShell library.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/02_IntroducingPVRShell/DX11/DX11IntroducingPVRShell.cpp" target="_blank">DX11IntroducingPVRShell.cpp</a> | <a href="../../Examples/Beginner/02_IntroducingPVRShell/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Texturing">
<div class="title">
<a href="../../Examples/Beginner/03_Texturing/Texturing.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/03_Texturing/Texturing.png" alt="Texturing" /></a>
<input type="checkbox" id="TexturingFull2">
<label for="TexturingFull2" title="Click for more information"><h3>Texturing</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to apply a texture to a polygon in :API:.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/03_Texturing/DX11/DX11Texturing.cpp" target="_blank">DX11Texturing.cpp</a> | <a href="../../Examples/Beginner/03_Texturing/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="BasicTnL">
<div class="title">
<a href="../../Examples/Beginner/04_BasicTnL/BasicTnL.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/04_BasicTnL/BasicTnL.png" alt="BasicTnL" /></a>
<input type="checkbox" id="BasicTnLFull2">
<label for="BasicTnLFull2" title="Click for more information"><h3>BasicTnL</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course consists of a demonstration of basic transformation and lighting.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This training course consists of a demonstration of basic transformation and lighting, growing on the basic drawing techniques learnt in HelloTriangle.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/04_BasicTnL/DX11/DX11BasicTnL.cpp" target="_blank">DX11BasicTnL.cpp</a> | <a href="../../Examples/Beginner/04_BasicTnL/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPVRTools">
<div class="title">
<a href="../../Examples/Beginner/05_IntroducingPVRTools/IntroducingPVRTools.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/05_IntroducingPVRTools/IntroducingPVRTools.png" alt="IntroducingPVRTools" /></a>
<input type="checkbox" id="IntroducingPVRToolsFull2">
<label for="IntroducingPVRToolsFull2" title="Click for more information"><h3>IntroducingPVRTools</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PVRTools libraries.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/05_IntroducingPVRTools/DX11/DX11IntroducingPVRTools.cpp" target="_blank">DX11IntroducingPVRTools.cpp</a> | <a href="../../Examples/Beginner/05_IntroducingPVRTools/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPrint3D">
<div class="title">
<a href="../../Examples/Beginner/06_IntroducingPrint3D/IntroducingPrint3D.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/06_IntroducingPrint3D/IntroducingPrint3D.png" alt="IntroducingPrint3D" /></a>
<input type="checkbox" id="IntroducingPrint3DFull2">
<label for="IntroducingPrint3DFull2" title="Click for more information"><h3>IntroducingPrint3D</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the Print3D class featured within the PVRTools library.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/06_IntroducingPrint3D/DX11/DX11IntroducingPrint3D.cpp" target="_blank">DX11IntroducingPrint3D.cpp</a> | <a href="../../Examples/Beginner/06_IntroducingPrint3D/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPOD">
<div class="title">
<a href="../../Examples/Beginner/07_IntroducingPOD/IntroducingPOD.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/07_IntroducingPOD/IntroducingPOD.png" alt="IntroducingPOD" /></a>
<input type="checkbox" id="IntroducingPODFull2">
<label for="IntroducingPODFull2" title="Click for more information"><h3>IntroducingPOD</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PowerVR Object Data (.pod) format.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/07_IntroducingPOD/DX11/DX11IntroducingPOD.cpp" target="_blank">DX11IntroducingPOD.cpp</a> | <a href="../../Examples/Beginner/07_IntroducingPOD/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul><div id="Intermediate""><h2>Intermediate</h2><ul class="accordion">
<li id="AlphaBlend">
<div class="title">
<a href="../../Examples/Intermediate/AlphaBlend/AlphaBlend.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/AlphaBlend/AlphaBlend.png" alt="AlphaBlend" /></a>
<input type="checkbox" id="AlphaBlendFull2">
<label for="AlphaBlendFull2" title="Click for more information"><h3>AlphaBlend</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course illustrates how transparency effects can be achieved with blending and the use of some common blending modes.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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().
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/AlphaBlend/DX11/DX11AlphaBlend.cpp" target="_blank">DX11AlphaBlend.cpp</a> | <a href="../../Examples/Intermediate/AlphaBlend/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="DisplacementMap">
<div class="title">
<a href="../../Examples/Intermediate/DisplacementMap/DisplacementMap.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/DisplacementMap/DisplacementMap.png" alt="DisplacementMap" /></a>
<input type="checkbox" id="DisplacementMapFull2">
<label for="DisplacementMapFull2" title="Click for more information"><h3>DisplacementMap</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates displacement mapping using a texture read from the vertex shader.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/DisplacementMap/DX11/DX11DisplacementMap.cpp" target="_blank">DX11DisplacementMap.cpp</a> | <a href="../../Examples/Intermediate/DisplacementMap/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Reflections">
<div class="title">
<a href="../../Examples/Intermediate/Reflections/Reflections.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Reflections/Reflections.png" alt="Reflections" /></a>
<input type="checkbox" id="ReflectionsFull2">
<label for="ReflectionsFull2" title="Click for more information"><h3>Reflections</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates the creation of a reflection effect from a 2D map and a cube map.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Swap mapping type</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Reflections/DX11/DX11Reflections.cpp" target="_blank">DX11Reflections.cpp</a> | <a href="../../Examples/Intermediate/Reflections/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Refraction">
<div class="title">
<a href="../../Examples/Intermediate/Refraction/Refraction.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Refraction/Refraction.png" alt="Refraction" /></a>
<input type="checkbox" id="RefractionFull2">
<label for="RefractionFull2" title="Click for more information"><h3>Refraction</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a simulation of glass-like materials.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle Specular reflection on or off</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Refraction/DX11/DX11Refraction.cpp" target="_blank">DX11Refraction.cpp</a> | <a href="../../Examples/Intermediate/Refraction/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="RenderToTexture">
<div class="title">
<a href="../../Examples/Intermediate/RenderToTexture/RenderToTexture.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/RenderToTexture/RenderToTexture.png" alt="RenderToTexture" /></a>
<input type="checkbox" id="RenderToTextureFull2">
<label for="RenderToTextureFull2" title="Click for more information"><h3>RenderToTexture</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates the use of rendering to a texture.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left : Toggles multisampling of the FBOs</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/RenderToTexture/DX11/DX11RenderToTexture.cpp" target="_blank">DX11RenderToTexture.cpp</a> | <a href="../../Examples/Intermediate/RenderToTexture/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Skinning">
<div class="title">
<a href="../../Examples/Intermediate/Skinning/Skinning.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Skinning/Skinning.png" alt="Skinning" /></a>
<input type="checkbox" id="SkinningFull2">
<label for="SkinningFull2" title="Click for more information"><h3>Skinning</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to implement hardware accelerated skinning using .pod files.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This training course demonstrates how to implement hardware accelerated skinning using the .pod file loading tools found in the PVRTools library.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Rotate model clockwise/anti-clockwise</p><p> Up/Down : Zoom out/in</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Skinning/DX11/DX11Skinning.cpp" target="_blank">DX11Skinning.cpp</a> | <a href="../../Examples/Intermediate/Skinning/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul><div id="Advanced""><h2>Advanced</h2><ul class="accordion">
<li id="Coverflow">
<div class="title">
<a href="../../Examples/Advanced/Coverflow/Coverflow.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Coverflow/Coverflow.png" alt="Coverflow" /></a>
<input type="checkbox" id="CoverflowFull2">
<label for="CoverflowFull2" title="Click for more information"><h3>Coverflow</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of a coverflow style effect.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Flow covers left/right</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Coverflow/DX11/DX11Coverflow.cpp" target="_blank">DX11Coverflow.cpp</a> | <a href="../../Examples/Advanced/Coverflow/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Fractal">
<div class="title">
<a href="../../Examples/Advanced/Fractal/Fractal.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Fractal/Fractal.png" alt="Fractal" /></a>
<input type="checkbox" id="FractalFull2">
<label for="FractalFull2" title="Click for more information"><h3>Fractal</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of drawing a fractal using render to texture.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Fractal/DX11/DX11Fractal.cpp" target="_blank">DX11Fractal.cpp</a> | <a href="../../Examples/Advanced/Fractal/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Water">
<div class="title">
<a href="../../Examples/Advanced/Water/Water.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Water/Water.png" alt="Water" /></a>
<input type="checkbox" id="WaterFull2">
<label for="WaterFull2" title="Click for more information"><h3>Water</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This demo shows how to render a water effect on a given plane
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle backwards/forwards through available options</p><p> Up/Down : Change (Toggle or Increase/Decrease) the currently selected option</p><p> 1/Space : Toggle Pause/Unpause</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Water/DX11/DX11Water.cpp" target="_blank">DX11Water.cpp</a> | <a href="../../Examples/Advanced/Water/DX11/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul> </div>
</div>
<div id="FooterMainContainer">
<div id="FooterContainer">
<div class="footerlogo">
<a href="http://www.imgtec.com" target="_blank"><img src="./images/img-footer-logo-grey.png" width="100%" height="100%" /></a>
</div>
<div class="copyright">&copy; Imagination Technologies Limited<br> All rights reserved</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -49,24 +49,347 @@
</div>
<!--API_TAB-->
<div id="SubNavContainer"><nav><div class="subnavlink"><a href="./OGLES.html">OpenGL ES 1.x</a></div>
<div class="subnavlink"><a href="./OGLES2.html">OpenGL ES 2.0</a></div>
<div class="subnavlink"><a href="./OGLES3.html">OpenGL ES 3.x</a></div>
</nav></div>
<div class="content">
<h1>Examples</h1>
<img src="./images/ExamplesPageGraphic.png"/>
<p>This section of the PowerVR SDK Browser provides a range of example applications and tutorials that are implemented across multiple APIs. These examples include optimized and thoroughly commented code. They also make consistent use of our Framework and provide a wealth of techniques for the novice user to the advanced developer.</p>
<p>To get started with the examples:</p>
<ul>
<li>Select a navigation sub-tab to view the examples for a specific API. The tabs are organised by API name.</li>
<li>The examples are classified into beginner, intermediate and advanced categories. Browse to the desired example to view its details and corresponding .cpp and project files.</li>
<li>Additionally, use the <a href="../../Examples" target="_blank">Examples</a> folder supplied with this SDK to explore them.</li>
</ul>
<p><em><strong>Note:</strong> Some of the examples do not handle screen rotation, in order to keep the code as simple as possible. On devices with a portrait display the example images may appear stretched.</em></p>
<br>
<div id="Section" class="section">
<!--API_DESCRIPTION-->
<h1>OpenGL ES Examples</h1>
<h3>Programmable pipeline: OpenGL ES 2.0, 3.0 and 3.1</h3>
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.
<p><br><b>OpenGL ES 2.0</b> introduced 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 and performance than in OpenGL ES 1.x. Supported on PowerVR Series5 and later</p>
<p><br><b>OpenGL ES 3.x</b> adds to the already powerful OpenGL ES 2.0 things such as multiple render targets, standardised texture compression, a new shading language and far more control over texturing. OpenGL ES 3.1 also adds compute shaders and advanced compute functionality, allowing General Purpose on GPU (GPGPU) processing. Supported on PowerVR Series6 and later</p>
<p>The descriptions below specify the minimum API version the demo has been written for. When more than one version are listed, there is differentiated code for each of them. For example, OpenGL ES 2.0/3.0 will have two different versions, one of them will make use of OpenGL ES 3.0 specific features.</p>
</p>
</OGLES>
<p><a href="#Beginner" class="link">Beginner</a> | <a href="#Intermediate" class="link">Intermediate</a> | <a href="#Advanced" class="link">Advanced</a></p>
<!--EXAMPLE_TEMPLATE-->
<div id="Beginner""><h2>Beginner</h2><ul class="accordion">
<li id="HelloAPI">
<div class="title">
<a href="../../Examples/Beginner/01_HelloAPI/HelloAPI.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/01_HelloAPI/HelloAPI.png" alt="HelloAPI" /></a>
<input type="checkbox" id="HelloAPIFull2">
<label for="HelloAPIFull2" title="Click for more information"><h3>HelloAPI</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Draw a triangle to the screen using hardware acceleration.
</p><small><b>OpenGL ES 2.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>A basic tutorial that guides the user, step-by-step, through the process of initializing a window using OpenGL ES 2, drawing a triangle with a simple shader, and then terminating the window.
</p>
<p><strong>Controls:</strong></p>
<p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/01_HelloAPI/OGLES" target="_blank">HelloAPI Source</a> | <a href="../../Examples/Beginner/01_HelloAPI/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPVRShell">
<div class="title">
<a href="../../Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.png" alt="IntroducingPVRShell" /></a>
<input type="checkbox" id="IntroducingPVRShellFull2">
<label for="IntroducingPVRShellFull2" title="Click for more information"><h3>IntroducingPVRShell</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>This training course introduces the PVRShell library.
</p><small><b>OpenGL ES 2.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>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. When using the PVR Shell, the application uses the class 'pvr::Shell' as its base class, and is constructed and returned from a 'pvr::newDemo' function.
</p>
<p><strong>Controls:</strong></p>
<p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/02_IntroducingPVRShell/OGLES/OGLESIntroducingPVRShell.cpp" target="_blank">OGLESIntroducingPVRShell.cpp</a> | <a href="../../Examples/Beginner/02_IntroducingPVRShell/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPVRAssets">
<div class="title">
<a href="../../Examples/Beginner/03_IntroducingPVRAssets/IntroducingPVRAssets.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/03_IntroducingPVRAssets/IntroducingPVRAssets.png" alt="IntroducingPVRAssets" /></a>
<input type="checkbox" id="IntroducingPVRAssetsFull2">
<label for="IntroducingPVRAssetsFull2" title="Click for more information"><h3>IntroducingPVRAssets</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Load a scene in POD format using the PVRAssets library, and render it using OpenGL ES 2.0
</p><small><b>OpenGL ES 2.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>This training course introduces the PowerVR Framework PVRAssets library, and shows how to use it to read a PowerVR Object Data (.pod) file and textures. It goes into detail on how to open .pod files, .pvr files that have been referenced by it, and set up the cameras and lights from the .pod file. This demo also demonstrates the use of the PVR OpenGL ES bindings (a part of PVRGles), which is the OpenGL binding used in the native parts of this this SDK.
</p>
<p><strong>Controls:</strong></p>
<p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/03_IntroducingPVRAssets/OGLES/OGLESIntroducingPVRAssets.cpp" target="_blank">OGLESIntroducingPVRAssets.cpp</a> | <a href="../../Examples/Beginner/03_IntroducingPVRAssets/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPVRApi">
<div class="title">
<a href="../../Examples/Beginner/04_IntroducingPVRApi/IntroducingPVRApi.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/04_IntroducingPVRApi/IntroducingPVRApi.png" alt="IntroducingPVRApi" /></a>
<input type="checkbox" id="IntroducingPVRApiFull2">
<label for="IntroducingPVRApiFull2" title="Click for more information"><h3>IntroducingPVRApi</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Render a .pod scene using a .pfx effect file with automatic shader versioning using the PVRApi library.
</p><small><b>OpenGL ES 2.0/3.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>This training course demonstrates how to use the PVRApi library to render a scene from a pod file, using a .pfx effect file. PFX is both a file format and an API, and stands for PowerVR Effects. The library loads the POD file and the PFX file separately, creates a PVRAssets Model from the POD and a PVRApi Effect from the PFX file, and combines them to render the scene using the PVRApi necessary objects. Uses the PVRUIRenderer library to display simple text on screen. Different Shader versions provided for OpenGL ES 2.x and 3.x.
</p>
<p><strong>Controls:</strong></p>
<p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/04_IntroducingPVRApi/OGLES/OGLESIntroducingPVRApi.cpp" target="_blank">OGLESIntroducingPVRApi.cpp</a> | <a href="../../Examples/Beginner/04_IntroducingPVRApi/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPVRUIRenderer">
<div class="title">
<a href="../../Examples/Beginner/05_IntroducingPVRUIRenderer/IntroducingPVRUIRenderer.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/05_IntroducingPVRUIRenderer/IntroducingPVRUIRenderer.png" alt="IntroducingPVRUIRenderer" /></a>
<input type="checkbox" id="IntroducingPVRUIRendererFull2">
<label for="IntroducingPVRUIRendererFull2" title="Click for more information"><h3>IntroducingPVRUIRenderer</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>This training course introduces the PVRUIRenderer library to do advanced Text tasks.
</p><small><b>OpenGL ES 2.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>This training course introduces the PVRUIRenderer framework library.The user can create "Sprites" (2D elements) which can be grouped in 2D and/or 3D groups to be displayed as UI's or world text. 2D transformations (pixel and/or NDC coordinates) both single and in a group, anchoring on different parts of the screen or the group and 3D transformations of groups of sprites are all possible.
In this example, UIRendererer is used to display images and Unicode text, screen aligned and with 3D transformations.
</p>
<p><strong>Controls:</strong></p>
<p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/05_IntroducingPVRUIRenderer/OGLES/OGLESIntroducingPVRUIRenderer.cpp" target="_blank">OGLESIntroducingPVRUIRenderer.cpp</a> | <a href="../../Examples/Beginner/05_IntroducingPVRUIRenderer/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPVRCamera">
<div class="title">
<a href="../../Examples/Beginner/06_IntroducingPVRCamera/IntroducingPVRCamera.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/06_IntroducingPVRCamera/IntroducingPVRCamera.png" alt="IntroducingPVRCamera" /></a>
<input type="checkbox" id="IntroducingPVRCameraFull2">
<label for="IntroducingPVRCameraFull2" title="Click for more information"><h3>IntroducingPVRCamera</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Use the PVRCamera library to get the hardware camera of a device, and apply a simple color inversion shader to it.
</p><small><b>OpenGL ES 2.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>The PVRCamera library gives a very simple, unified API to access the video feed of an iOS or Android device as a PVRApi (or OpenGL ES) texture. This demo displays this texture on the screen using a very simple shader that inverts the colours.
</p>
<p><strong>Controls:</strong></p>
<p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/06_IntroducingPVRCamera/OGLES/OGLESIntroducingPVRCamera.cpp" target="_blank">OGLESIntroducingPVRCamera.cpp</a> | <a href="../../Examples/Beginner/06_IntroducingPVRCamera/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul><div id="Intermediate""><h2>Intermediate</h2><ul class="accordion">
<li id="Bumpmap">
<div class="title">
<a href="../../Examples/Intermediate/Bumpmap/Bumpmap.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Bumpmap/Bumpmap.png" alt="Bumpmap" /></a>
<input type="checkbox" id="BumpmapFull2">
<label for="BumpmapFull2" title="Click for more information"><h3>Bumpmap</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>This training course demonstrates using a normal map to implement bump mapping using the PowerVR Framework.
</p><small><b>OpenGL ES 2.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>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.
This example can be used as the baseline for rendering an object. Uses different shaders for OpenGL ES 2.x and OpenGL ES 3.x
</p>
<p><strong>Controls:</strong></p>
<p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Bumpmap/OGLES/OGLESBumpmap.cpp" target="_blank">OGLESBumpmap.cpp</a> | <a href="../../Examples/Intermediate/Bumpmap/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PostProcessing">
<div class="title">
<a href="../../Examples/Intermediate/PostProcessing/PostProcessing.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/PostProcessing/PostProcessing.png" alt="PostProcessing" /></a>
<input type="checkbox" id="PostProcessingFull2">
<label for="PostProcessingFull2" title="Click for more information"><h3>PostProcessing</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>This training course demonstrates a simple implementation of a 'bloom' post processing effect.
</p><small><b>OpenGL ES 2.0</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>This training course demonstrates a simple implementation of a 'bloom' post processing effect, using multiple PVRApi Render Passes to apply the postprocessing. The bright parts of the picture are extracted in lower resolution in a post processing step, blurred and then added over the final image to create a glow around the object's borders.
</p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Change the rendering mode (Object with bloom, object w/o bloom, bloom textures)</p><p> Up/Down : Increase/Decrease bloom intensity</p><p> Any Action : Pause</p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/PostProcessing/OGLES/OGLESPostProcessing.cpp" target="_blank">OGLESPostProcessing.cpp</a> | <a href="../../Examples/Intermediate/PostProcessing/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul><div id="Advanced""><h2>Advanced</h2><ul class="accordion">
<li id="DeferredShading">
<div class="title">
<a href="../../Examples/Advanced/DeferredShading/DeferredShading.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/DeferredShading/DeferredShading.png" alt="DeferredShading" /></a>
<input type="checkbox" id="DeferredShadingFull2">
<label for="DeferredShadingFull2" title="Click for more information"><h3>DeferredShading</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Demonstrates deferred shading using Pixel Local Storage (PLS), or Multiple Render Targets(MRT).
</p><small><b>OpenGL ES 3.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>Traditional rendering algorithms submit geometry and immediately apply shading effects to the rasterized primitives. Complex shading effects may require multiple render passes to produce the final pixel color, with the geometry submitted every pass. Deferred shading is an alternative rendering technique that submits the scene geometry once, storing per-pixel attributes into local video memory to be used in the subsequent rendering passes.
In these later passes, light volume primitives are rendered, and the per-pixel attributes contained in the buffer are retrieved at a 1:1 mapping ratio so that each pixel is shaded individually.
In the PowerVR architecture, the user can use fast on-chip memory instead of Multiple Render Targets, by utilising the Pixel Local Storage extension.
If running from a command line, add -forcemrt to force Multiple Render Targets rendering.
Requires at least OpenGL ES 3.0 capability for either MRT or PLS. Requires the extension GL_EXT_shader_pixel_local_storage for PLS.
</p>
<p><strong>Controls:</strong></p>
<p><p> Action1 : Pause</p><p> Action2 : Orbit camera</p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/DeferredShading/OGLES/OGLESDeferredShading.cpp" target="_blank">OGLESDeferredShading.cpp</a> | <a href="../../Examples/Advanced/DeferredShading/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ExampleUI">
<div class="title">
<a href="../../Examples/Advanced/ExampleUI/ExampleUI.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/ExampleUI/ExampleUI.png" alt="ExampleUI" /></a>
<input type="checkbox" id="ExampleUIFull2">
<label for="ExampleUIFull2" title="Click for more information"><h3>ExampleUI</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Use the PVRUIRenderer to efficiently render sprites to form a comples User Interface.
</p><small><b>OpenGL ES 2.0, OpenGL ES 3.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>Rendering graphical user interfaces can quickly become overly complex. The PVRUIRenderer can assist in rendering a lot of sprites with different complicated transformations, while remaining crisp and responsive. Usability and performance optimizations can both be foun in this example, such as UIRenderer transformation groups and texture atlases. Shaders available for OpenGL ES 2.x and 3.x.
</p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Change UI Page</p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/ExampleUI/OGLES/OGLESExampleUI.cpp" target="_blank">OGLESExampleUI.cpp</a> | <a href="../../Examples/Advanced/ExampleUI/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Glass">
<div class="title">
<a href="../../Examples/Advanced/Glass/Glass.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Glass/Glass.png" alt="Glass" /></a>
<input type="checkbox" id="GlassFull2">
<label for="GlassFull2" title="Click for more information"><h3>Glass</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Demonstrates dynamic reflection and refraction using a dual paraboloid environment map.
</p><small><b>OpenGL ES 2.0/3.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>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. Shaders available for OpenGL ES 2.x and 3.x.
</p>
<p><strong>Controls:</strong></p>
<p><p> Quit : Close the application</p><p> Left/Right : Change the effect between combinations of Reflection and Refraction/Chromatic Dispersion</p><p> Up/Down : Look up or down.</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Glass/OGLES/OGLESGlass.cpp" target="_blank">OGLESGlass.cpp</a> | <a href="../../Examples/Advanced/Glass/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PVRScopeExample">
<div class="title">
<a href="../../Examples/Advanced/PVRScopeExample/PVRScopeExample.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/PVRScopeExample/PVRScopeExample.png" alt="PVRScopeExample" /></a>
<input type="checkbox" id="PVRScopeExampleFull2">
<label for="PVRScopeExampleFull2" title="Click for more information"><h3>PVRScopeExample</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Demonstrates the use of PVRScope and the example graphing code.
</p><small><b>OpenGL ES 2.0, OpenGL ES 3.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>This demo uses a simple PBR-style shader and shows the use of PVRScope that allows an application to return performance statistics from the GPU in real time. It uses the example graphing code to render a graph of the selected counters on the screen. For further details, refer to the PVRScope User Manual.
</p>
<p><strong>Controls:</strong></p>
<p><p> Quit : Close demo</p><p> Up/Down : Select a counter from the available list of HW counters</p><p> Action1 : Add/remove selected counter to the graph</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/PVRScopeExample/OGLES/OGLESPVRScopeExample.cpp" target="_blank">OGLESPVRScopeExample.cpp</a> | <a href="../../Examples/Advanced/PVRScopeExample/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PVRScopeRemote">
<div class="title">
<a href="../../Examples/Advanced/PVRScopeRemote/PVRScopeRemote.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/PVRScopeRemote/PVRScopeRemote.png" alt="PVRScopeRemote" /></a>
<input type="checkbox" id="PVRScopeRemoteFull2">
<label for="PVRScopeRemoteFull2" title="Click for more information"><h3>PVRScopeRemote</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Demonstrates the use of PVRScope's remote communication features.
</p><small><b>OpenGL ES 2.0, OpenGL ES 3.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>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. You can then edit from the PVRTune GUI any variables that the application has exposed, in this case the shaders and material properties of the statue displayed.
</p>
<p><strong>Controls:</strong></p>
<p><p> Quit : Close demo</p><p> PVRTune : Control demo variables through PVRTune</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/PVRScopeRemote/OGLES/OGLESPVRScopeRemote.cpp" target="_blank">OGLESPVRScopeRemote.cpp</a> | <a href="../../Examples/Advanced/PVRScopeRemote/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ParticleSystem">
<div class="title">
<a href="../../Examples/Advanced/ParticleSystem/ParticleSystem.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/ParticleSystem/ParticleSystem.png" alt="ParticleSystem" /></a>
<input type="checkbox" id="ParticleSystemFull2">
<label for="ParticleSystemFull2" title="Click for more information"><h3>ParticleSystem</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Shows how to implement a simple particle system using GPGPU.
</p><small><b>OpenGL ES 3.1
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>The demo utilises GPGPU (GPU Compute) to implement a particle system, which advanced and then rendered every frame, without any CPU editing of the data. 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 the Compute and the Rendering part of a simulation.
Requires OpenGL ES 3.1 capable platform.
</p>
<p><strong>Controls:</strong></p>
<p><p> Quit : Close demo</p><p> Left/Right : Decrease/increase number of particles</p><p> Up/Down : Switch between GPU Compute and CPU Particle System implementation.</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/ParticleSystem/OGLES/OGLESParticleSystem.cpp" target="_blank">OGLESParticleSystem.cpp</a> | <a href="../../Examples/Advanced/ParticleSystem/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Skinning">
<div class="title">
<a href="../../Examples/Advanced/Skinning/Skinning.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Skinning/Skinning.png" alt="Skinning" /></a>
<input type="checkbox" id="SkinningFull2">
<label for="SkinningFull2" title="Click for more information"><h3>Skinning</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>This demo shows a scene with a combination of a skinned, bumpmapped character with non-skinned, non-bumpmapped objects.
</p><small><b>OpenGL ES 2.0/3.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>The Skinning demo shows a Skinned Character in combination with bump mapping. 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. PVRAssets and POD files support skinning. either full transformation Matrices, or Quaternion rotation with Scaling and Translation vectors. The provided POD file contains matrix animation.
This example is using BoneBatching, which separates the mesh in smaller matrix palettes (Bone Batches) so that they can fit in the maximum number of allowed Uniform variables.
Up to 4 matrices from the palette, along with 4 weights can used for each vertext by the vertex shader to update the position to obtain the current animation frame position.
Shaders provided for OpenGL ES 2.0 and OpenGL ES 3.0
</p>
<p><strong>Controls:</strong></p>
<p><p> Action1/2/3 : Pause</p><p> Esc : Close</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Skinning/OGLES/OGLESSkinning.cpp" target="_blank">OGLESSkinning.cpp</a> | <a href="../../Examples/Advanced/Skinning/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul> </div>
</div>
<br>
<div id="FooterMainContainer">
<div id="FooterContainer">
<div class="footerlogo">
......@@ -75,6 +398,7 @@
<div class="copyright">&copy; Imagination Technologies Limited<br> All rights reserved</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -50,116 +50,95 @@
<div class="content">
<h1>Framework</h1>
<p>The PowerVR Graphics SDK provides a framework which is made up of PVRShell and PVRTools.
PVRShell is a simple, light-weight architecture for the barebones of application setup, shutdown and event handling.
It is designed to streamline the process of writing cross-platform graphics applications.
PVRTools, on the other hand, is a cross-platform tools library containing the most commonly used functionality in a 3D graphics application.</p>
<hr/>
<p><a href="#PVRShell" class="link">PVRShell</a> | <a href="#PVRTools" class="link">PVRTools</a></p>
<div id="PVRShell">
<h2>PVRShell</h2>
<p>PVRShell is used in all our <a href="Examples.html">Examples</a> (except for HelloAPI) to provide a common framework for developing OpenGL ES applications on any PowerVR platform. The shell takes a set of command-line arguments which allow items like the position and size of the example to be controlled. The table below identifies these options.</p>
<table>
<thead>
<th>Option</th><th>Description</th>
</thead>
<tr>
<td>-aasamples=N</td><td>Sets the number of samples to use for full screen anti-aliasing, e.g., 0, 2, 4, 8.</td>
</tr>
<tr>
<td>-c=N</td><td>Save a single screenshot or a range, for a given frame or frame range, e.g., -c=14, -c=1-10.</td>
</tr>
<tr>
<td>-colourbpp=N or -cbpp=N</td><td>Frame buffer colour bits per pixel. When choosing an EGL config, N will be used as the value for EGL_BUFFER_SIZE.</td>
</tr>
<tr>
<td>-config=N</td><td>Force the shell to use the EGL config with ID N.</td>
</tr>
<tr>
<td>-depthbpp=N or -dbpp=N</td><td>Depth buffer bits per pixel. When choosing an EGL config, N will be used as the value for EGL_DEPTH_SIZE.</td>
</tr>
<tr>
<td>-discardframeall</td><td>Selects whether to explicitly request a discard of all contents of the relevant framebuffer at the end of every frame to save bandwidth.</td>
</tr>
<tr>
<td>-discardframecolour</td><td>Selects whether to explicitly request a discard of the frame colour of the relevant framebuffer at the end of every frame to save bandwidth. Default: false.</td>
</tr>
<tr>
<td>-discardframedepth</td><td>Selects whether to explicitly request a discard of the frame depth of the relevant framebuffer at the end of every frame to save bandwidth. Default: true.</td>
</tr>
<tr>
<td>-discardframestencil</td><td>Selects whether to explicitly request a discard of the frame stencil of the relevant framebuffer at the end of every frame to save bandwidth. Default: true.</td>
</tr>
<tr>
<td>-display</td><td>EGL only. Allows specifying the native display to use if the device has more than one.</td>
</tr>
<tr>
<td>-forceframetime=N or -fft=N</td><td>Force PVRShellGetTime to report fixed frame time.</td>
</tr>
<tr>
<td>-fps</td><td>Output frames per second.</td>
</tr>
<tr>
<td>-fullscreen=[1,0]</td><td>Runs in full-screen mode (1) or windowed (0).</td>
</tr>
<tr>
<td>-height=N</td><td>Sets the viewport height to N.</td>
</tr>
<tr>
<td>-info</td><td>Output setup information to the debug output.</td>
</tr>
<tr>
<td>-posx=N</td><td>Sets the x coordinate of the viewport.</td>
</tr>
<tr>
<td>-posy=N</td><td>Sets the y coordinate of the viewport.</td>
</tr>
<tr>
<td>-powersaving=[1,0] or -ps=[1,0]</td><td>Where available enable/disable power saving.</td>
</tr>
<tr>
<td>-priority=N</td><td>Sets the priority of the EGL context.</td>
</tr>
<tr>
<td>-quitafterframe=N or -qaf=N</td><td>Specify the frame after which to quit.</td>
</tr>
<tr>
<td>-quitaftertime=N or -qat=N</td><td>Specify the time after which to quit.</td>
</tr>
<tr>
<td>-rotatekeys=N</td><td>Sets the orientation of the keyboard input. N can be 0-3, where 0 is no rotation.</td>
</tr>
<tr>
<td>-screenshotscale=N</td><td>Allows to scale up screenshots to a bigger size (pixel replication).</td>
</tr>
<tr>
<td>-sw</td><td>Software render.</td>
</tr>
<tr>
<td>-version</td><td>Output the SDK version to the debug output.</td>
</tr>
<tr>
<td>-vsync=N</td><td>Where available modify the app's vsync parameters.</td>
</tr>
<tr>
<td>-width=N</td><td>Sets the viewport width to N.</td>
</tr>
</table>
<p>PVRShell also provides limited keyboard input which may vary depending on your actual platform. If your platform has full keyboard support, the <span class="code">Q</span> key will quit the application and the cursor keys will allow looping through the application options.</p>
<p>The PVRShell source can be found in the <a href="../../Shell/">Shell</a> folder in the SDK package. Further documentation is available at <a href="../../Shell/Documentation/Index.html">Shell/Documentation</a>.</p>
<p><strong>Contents: </strong><a href="#Overview" class="link">Overview</a> | <a href="#Building" class="link">Building</a> | <a href="#CreatingAnApplication" class="link">Creating an Application</a> | <a href="#Guidelines" class="link">Guidelines and Recommendations</a></p>
&nbsp;
<div id="Overview">
<h2>Overview</h2>
<p>The PowerVR Framework is a complete framework source code, re-written from scratch and targeted for all major platforms, such as Windows, Linux, and OS X, as well as Android and iOS mobile platforms. The key strength of the PowerVR Framework is that it is platform-agnostic, meaning that with the same code, it is possible to compile for different platforms without changing source code.</p>
<p>The majority of the code is written in C++ and tested across different compilers (namely Visual Studio 2010, GNU Compiler Collection and Clang) using modern styling and in general provides a complete framework for application development. There is also the supporting per-platform code (Objective-C code for iOS and OS X, some Java code for Android, etc.), and project files.</p>
<p>The Framework consists of separate libraries that are divided by functionality, as shown in the figure below. These modules are provided to be compiled as static libraries, but you can choose to use them differently, if needed.</p>
<img src="./images/PowerVRFrameworkComponents.png"/ style="display:block; margin-left:auto; margin-right:auto">
<h3>PVRCore</h3>
<h4><strong><a href="../../Framework/PVRCore/Documentation/Index.html" target="_blank">View source code documentation</a></strong></h4>
<p>This is the supporting code of the library to leverage for your own use. PVRCore is also used by the rest of the Framework and because of that, all examples using any other part of the Framework should link with PVRCore.</p>
<h3>PVRAssets</h3>
<h4><strong><a href="../../Framework/PVRAssets/Documentation/Index.html" target="_blank">View source code documentation</a></strong></h4>
<p>This is the Framework’s asset code. It includes classes and helpers for scene representation, asset loading code, etc. PVRAssets supports the loading of POD files, PVR and PFX materials format, as well as limited support for a number of texture formats.</p>
<h3>PVRShell</h3>
<h4><strong><a href="../../Framework/PVRShell/Documentation/Index.html" target="_blank">View source code documentation</a></strong></h4>
<p>This is the native system abstraction (event loops, surfaces, windows, etc.) which greatly simplifies cross-platform compatibility. Essentially, PVRShell provides you with useful scaffolding for cross-platform development.</p>
<h3>PVRApi</h3>
<h4><strong><a href="../../Framework/PVRApi/Documentation/Index.html" target="_blank">View source code documentation</a></strong></h4>
<p>This is the actual Graphics API abstraction. PVRApi is a very powerful framework that allows cross-API development. In combination with PVRShell, this provides remarkable support to write code intended to run across different platforms, utilizing different APIs.</p>
<h3>PVRPlatformGlue</h3>
<h4><strong><a href="../../Framework/PVRPlatformGlue/Documentation/Index.html" target="_blank">View source code documentation</a></strong></h4>
<p>This helper project provides necessary abstraction between the underlying system (PVRShell) and graphics API (PVRApi).</p>
<h3>PVRUIRenderer</h3>
<h4><strong><a href="../../Framework/PVRUIRenderer/Documentation/Index.html" target="_blank">View source code documentation</a></strong></h4>
<p>This text and image 3D printing code can also be used as a text or sprite renderer code. It is built on top of PVRApi, making it inherently API-agnostic and contains code for using different parts of fonts to display text.</p>
<h3>PVRCamera</h3>
<h4><strong><a href="../../Framework/PVRCamera/Documentation/Index.html" target="_blank">View source code documentation</a></strong></h4>
<p>This is the code for interfacing with the camera of mobile platforms.</p>
</div>
<div id="PVRTools">
<h2>PVRTools</h2>
<p>The PVRTools library consists of various modules designed to facilitate common tasks associated with hardware accelerated graphics rendering. This includes:</p>
<div id="Building">
<h2>Building</h2>
<p>All PowerVR examples for all platforms will build the PowerVR Framework libraries they require. If you use them, or base your own code on them, you should not need to have to build the Framework separately. The PowerVR SDK usually also contains pre-built versions of the libraries in the folder <span class="code">[SDK]/Framework/Bin/[Platform]</span>, where <span class="code">[SDK]</span> is the SDK root and <span class="code">[Platform]</span> is the name of your platform of interest - this is where you would normally link.</p>
<p>All modules can be built separately, by navigating to <span class="code">[SDK]/Framework/[ModuleName]/Build/[Platform]</span>, where <span class="code">[ModuleName]</span> is the name of the specific module of the PowerVR Framework. You can then run a build command as normal for that platform, although this is not required, as building the examples automatically builds the Framework.</span>
</div>
<div id="CreatingAnApplication">
<h2>Creating an Application</h2>
<p>To create a typical application, please follow these steps:</p>
<ol>
<li>Firstly, either build the Framework components previously mentioned (by moving to the corresponding <span class="code">/Builds/[Platform]</span> or add their build scripts and projects to your own</li>
<li>Create a project or build script (Visual Studio, Makefile, etc.) for your platform. We suggest taking one of the scripts from the following location as base:</li>
<p><span class="code">Examples/[Intermediate/Advanced]/[API]/Builds/[Platform]</span>, where <span class="code">[Intermediate/Advanced]</span> is the folder for either the intermediate or advanced example applications supplied with the SDK. In more detail:</p>
<ul>
<li>Add include directories:</li>
<ul>
<li><span class="code">/Framework</span></li>
<li><span class="code">/Builds/Include</span></li>
</ul>
<li>Add library directories:</li>
<ul>
<li><span class="code">Framework/Bin/[Platform]</span></li>
<li>(Optional) <span class="code">/Builds/[Platform]/Lib</span></li>
</ul>
<li>Link against static libraries:</li>
<ul>
<li>(Optional) <span class="code">PVRUIRenderer</span></li>
<li><span class="code">PVR[API]</span></li>
<li><span class="code">PVRPlatformGlue</span></li>
<li><span class="code">PVRShell</span></li>
<li><span class="code">PVRAssets</span></li>
<li><span class="code">PVRCore</span></li>
</ul>
</ul>
<li>Create your application files. For a single CPP file, your includes will usually be:</li>
<ul>
<li><span class="code">PVRShell/PVRShell.h</span></li>
<li><span class="code">PVRApi/PVRApi.h</span></li>
<li><span class="code">PVRApi/AssetManager.h</span> (if you plan to use the AssetManager for loading)</li>
<li><span class="code">PVRUIRenderer/PVRUIRenderer.h</span> (if you plan to use the UIRenderer)</li>
</ul>
<li>Write the skeleton of your application (see description of <a href="#PVRShell" class="link">PVRShell</a>)</li>
</ol>
</div>
<div id="Guidelines">
<h2>Guidelines and Recommendations</h2>
<p>Below are a set of guidelines and recommendations you might want to consider when using PowerVR Framework:</p>
<ul>
<li>If you need to use the native API (for example OpenGL ES), we recommend using the header <span class="code">PVRApi/[API]/[API]Bindings.h</span>. This is a specially crafted binding for your specific API. For example, for OpenGL ES, <span class="code">OpenGLESBindings.h</span> it will provide you with a set of function pointers conveniently placed in the <span class="code">gl::namespace</span>. These functions follow the OpenGL ES specification, and can be called normally e.g. <span class="code">gl::MapBuffer(…)</span>. These function pointers get populated at runtime, allowing a unified entry point to the native API. Similarly, a set of function pointers for extensions are present in the <span class="code">glext</span> namespace. The function pointers get populated at initialisation time, but their use can be queried per-context, at runtime.</li>
<li>Add an AssetManager member to your class and use it for loading Models, Textures, Shaders and other files that may be duplicated. The AssetManager will cache files and make sure you do not double-load files. Initialize the AssetManager with your application class <span class="code">((initialise(*this))</span>, and use it to one-step load Textures, Models, Shaders and other objects that will have to be read from disc.</li>
<li>The <span class="code">pvr::assets::Model</span> class contains all the information you need for drawing, including cameras, lights, and potentially effects. Follow one of the PowerVR SDK examples (e.g. IntroducingPOD and IntroducingPFX) to understand its basic use, including getting out of a Model the information about the data layouts of its Meshes, etc.</li>
<li>Many utility functions and methods are built-in, so that you can easily cover most common use cases. For example:</li>
<ul>
<li><p><strong>Vector, matrix and quaternion mathematics:</strong> Helpers to calculate and operate transformation matrices and other associated mathematical operations.</p></li>
<li><p><strong>OpenGL ES extension handling:</strong> This helps to load and use OpenGL ES extension functions and capabilities.</p></li>
<li><p><strong>3D font drawing:</strong> A very flexible engine to handle font maps.</p></li>
<li><p><strong>POD loader:</strong> Helpers to load and access the model data included in PowerVR Object Data (POD) files.</p></li>
<li><p><strong>PVR loader:</strong> Helpers to upload and manage textures exported to the PVR texture container format.</p></li>
<li><p><strong>PFX loader:</strong> Helpers to load and access PowerVR Effects (PFX) files, which contain vertex and fragment shaders.</p></li>
<li><span class="code">getLayoutIntoPipeline</span> function allows you to quickly match a Mesh to a specific custom shader by providing what your shader's "required semantics" are and at which binding points (attributes) to assign these. This function will add the entire vertex definition to the pipeline descriptor.</li>
<li>This same functionality allows you to simply copy the whole data of the Mesh into a VBO, bind it and draw.</li>
</ul>
<p>The Tools library is used extensively throughout the PowerVR SDK. The PVRTools source can be found in the <a href="../../Tools/">Tools</a> folder in the SDK package. Further documentation is available at <a href="../../Tools/Documentation/Index.html">Tools/Documentation</a>.</p>
</ul>
</div>
</div>
<br>
......
......@@ -68,6 +68,9 @@
<td>[API]</td><td>Shorthand for the targeted Application Programming Interface, e.g., OGLES2 for OpenGL ES 2.0. This placeholder is regularly used for directory and project/makefile names in the SDK.</td>
</tr>
<tr>
<td>[GlueAPI]</td><td>Shorthand for the targeted Application Programming Interface's platform connection API, e.g., EGL for any OpenGL ES API. This placeholder is regularly used for directory and project/makefile names in the SDK.</td>
</tr>
<tr>
<td>[ExampleName]</td><td>The name of the example application that you are building.</td>
</tr>
<tr>
......@@ -77,7 +80,7 @@
<td>[Platform]</td><td>The targeted Application Binary Interface, e.g., x86.</td>
</tr>
<tr>
<td>[ReleaseDir]</td><td>This refers to the release directory, which is either ReleaseRaw or ReleaseX11 in the case of Linux.</td>
<td>[ReleaseDir]</td><td>This refers to the release directory, which is either ReleaseNullWS or ReleaseX11 in the case of Linux.</td>
</tr>
<tr>
<td>[sdk-installation-directory]</td><td>This is the root directory where the SDK is installed.</td>
......@@ -198,6 +201,7 @@
<ul>
<li>armv7</li>
<li>armv7hf</li>
<li>armv8</li>
<li>mips_32</li>
<li>mips_64</li>
<li>x86_32</li>
......@@ -205,7 +209,7 @@
</ul>
</li>
</ol>
<p>The executables for the examples will be under: <span class="code">Examples/<abbr title="The name of the folder the examples are sorted into according to their complexity.">[ExampleLevel]</abbr>/<abbr title="The name of the example application that you are building.">[ExampleName]</abbr>/<abbr title=" Shorthand for the targeted Application Programming Interface.">[API]</abbr>/Build/<abbr title="The targeted Application Binary Interface.">[Platform]</abbr>/<abbr title="This refers to the release directory.">[ReleaseDir]</abbr></span> where <span class="code"><abbr title="This refers to the release directory.">[ReleaseDir]</abbr></span> is one of <span class="code">ReleaseRaw</span> or <span class="code">ReleaseX11</span></p>
<p>The executables for the examples will be under: <span class="code">Examples/<abbr title="The name of the folder the examples are sorted into according to their complexity.">[ExampleLevel]</abbr>/<abbr title="The name of the example application that you are building.">[ExampleName]</abbr>/<abbr title=" Shorthand for the targeted Application Programming Interface.">[API]</abbr>/Build/<abbr title="The targeted Application Binary Interface.">[Platform]</abbr>/<abbr title="This refers to the release directory.">[ReleaseDir]</abbr></span> where <span class="code"><abbr title="This refers to the release directory.">[ReleaseDir]</abbr></span> is one of <span class="code">ReleaseNullWS</span> or <span class="code">ReleaseX11</span></p>
<p>To run an executable, follow the steps below:</p>
<ol>
<li>
......@@ -219,7 +223,7 @@
<p>Ensure the drivers are running (e.g., type <span class="code">/etc/init.d/rc/pvr</span> start, then run an X session if required).</p>
<p>Under X11, window sizes can be specified for the executables using the command-line arguments <span class="code">-posx=n</span> and <span class="code">-posy=n</span> to define the top right hand corner, and <span class="code">-width=n</span> and <span class="code">-height=n</span> to define width and height, respectively.</p>
<p>For example:</p>
<p class="code">./<abbr title=" Shorthand for the targeted Application Programming Interface.">[API]</abbr>IntroducingPOD -posx=10 -posy=10 -width=100 -height=100</p>
<p class="code">./<abbr title=" Shorthand for the targeted Application Programming Interface.">[API]</abbr>IntroducingPOD -posx=10 -posy=10 -width=100 -height=100</p>
</li>
<li>
<p>If you attempt to run an SDK example and it fails with the message: <span class="code">"Can't open display"</span> produced by the X client, then make sure that the <span class="code">DISPLAY</span> variable is set with the shell command: <span class='code'>"set | grep -e DISPLAY"</span>. If this command does not yield any output then type (in shell): <span class='code'>"DISPLAY=:0.0; export DISPLAY"</span></p>
......@@ -256,7 +260,7 @@
<li>
<p>To organise the project, right-click on it from the <span class="code">Project Navigator</span> and select <span class="code">New Group</span>. Following this, create the following groups (which will contain the mentioned application contents):</p>
<ul>
<li>Source/Shell (Shell source files)</li>
<li>Sources (Application source files)</li>
<li>Content/Models (.pod files)</li>
<li>Content/Textures (.pvr textures)</li>
<li>Content/Shaders (shaders)</li>
......@@ -264,33 +268,21 @@
</ul>
</li>
<li>
<p>Right click the <span class="code">Shell</span> group and select <span class="code">Add Files</span> to <span class="code">"project name"</span> and add these following files:</p>
<p>Add the following frameworks to the project:</p>
<ul>
<li><span class="code">PVRShell.h</span>, <span class="code">PVRShell.cpp</span>, <span class="code">PVRShellImpl.h</span> (from <span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/Shell</span>)</li>
<li><span class="code">PVRShellAPI.h</span>, <span class="code">PVRShellAPI.cpp,</span> (from <span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/Shell/API/KEGL</span>)</li>
<li><span class="code">main.m</span>, <span class="code">PVRShellOS.h</span>, <span class="code">PVRShellOS.cpp</span>, <span class="code">AppController.mm</span>, <span class="code">AppController.h</span> (from <span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/ /Shell/OS/OSX</span>)</li>
<li><span class="code">PVRCore</span> (from <span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/PVRCore/Builds/OSX/PVRCore.xcodeproj</span>)</li>
<li><span class="code">PVRShell</span> (from <span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/PVRShell/Builds/OSX/PVRShell.xcodeproj</span>)</li>
<li><span class="code">PVR[GlueAPI]</span> (from <span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/PVRPlatformGlue/<abbr title=" Shorthand for the targeted Platform Conntection Application Programming Interface.">[GlueAPI]</abbr>/Builds/OSX/PVR<abbr title=" Shorthand for the targeted Application Programming Interface.">[GlueAPI]</abbr>.xcodeproj</span>)</li>
<li><span class="code">PVR[API]</span> (from <span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/PVRApi/<abbr title=" Shorthand for the targeted Application Programming Interface.">[API]</abbr>/Builds/OSX/PVR<abbr title=" Shorthand for the targeted Application Programming Interface.">[API]</abbr>.xcodeproj</span>)</li>
<li>(Optional)<span class="code">PVRUIRenderer</span> (from <span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/PVRUIRenderer/Builds/OSX/PVRUIRenderer.xcodeproj</span>)</li>
<li>(Optional)<span class="code">PVRCamera</span> (from <span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/PVRCamera/Builds/OSX/PVRUIRenderer.xcodeproj</span>)</li>
</ul>
</li>
<li>
<p>Under the <span class="code">Source</span> group create a new .cpp file for your application code and include the following header files:</p>
<ul>
<li><span class="code">PVRShell.h</span></li>
<li><span class="code">OGLES3Tools.h</span></li>
</ul>
</li>
<li>
<p>Right-click the <span class="code">Libraries</span> group and then select <span class="code">Add Files</span> to <span class="code">"project name"</span> and navigate to the <span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr> /Tools/<abbr title=" Shorthand for the targeted Application Programming Interface.">[API]</abbr>/Build/OSX/<abbr title=" Shorthand for the targeted Application Programming Interface.">[API]</abbr>Tools.xcodeproj</span> and add this project.</p>
<p>Under the <span class="code">Sources</span> group create a new .cpp file for your application code.</p>
</li>
<li>
<p>Go to your project’s <span class="code">Targets Build Phases</span> settings and add the following source files under the <span class="code">Compile Sources</span> section:</p>
<ul>
<li>Your application source file</li>
<li>PVRShell.cpp</li>
<li>PVRShellAPI.cpp</li>
<li>PVRShellOS.cpp</li>
<li>main.m</li>
<li>AppController.mm</li>
</ul>
<p>Go to your project’s <span class="code">Targets Build Phases</span> settings and add Your application source file under the <span class="code">Compile Sources</span> section:</p>
<p>Add the library files under <span class="code">LinkBinary With Libraries</span> section:</p>
<ul>
<li><span class="code">Lib<abbr title=" Shorthand for the targeted Application Programming Interface.">[API]</abbr>Tools.a</span></li>
......@@ -306,16 +298,12 @@
</ul>
</li>
<li>
<p>Go to your project’s <span class="code">Targets Build Phases</span> settings, and under the <span class="code">Preprocessing</span> section add <span class="code">BUILD <abbr title=" Shorthand for the targeted Application Programming Interface.">[API]</abbr> preprocessor for Debug and release configuration</span>. Then under the <span class="code">Search</span> paths section select <span class="code">Yes for Always Search User Paths</span> and add these header search paths to <span class="code">User Header Search Paths</span>:</p>
<p>Go to your project’s <span class="code">Search</span> paths section select <span class="code">Yes for Always Search User Paths</span> and add these header search paths to <span class="code">User Header Search Paths</span>:</p>
<ul>
<li><span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/Builds/Include</span></li>
<li><span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/Tools/<abbr title=" Shorthand for the targeted Application Programming Interface.">[API]</abbr></span></li>
<li><span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/Framework</span></li>
<li><span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/Tools</span></li>
</ul>
<p>If your targeted API is OGLES3 then you also have to add:</p>
<ul>
<li><span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/Builds/Tools/OGLES2</span></li>
</ul>
<p>Add these following paths to the Library Search Paths:</p>
<ul>
<li><span class="code"><abbr title="This is the root directory where the SDK is installed.">[sdk-installation-directory]</abbr>/Builds/OSX/x86/Lib</span></li>
......
......@@ -49,11 +49,11 @@
</div>
<div class="content">
<img src="./images/WelcomeGraphic.png"/>
<p>The PowerVR Graphics SDK includes tutorials, source code, documentation, platform abstraction frameworks and a highly integrated suite of tools. For further details regarding your SDK installation, please visit the <a href="./GettingStarted.html">Getting Started</a> page.</p>
<p>The <a href="./Examples.html">Examples</a> page features a range of methods from initialising the API through to complex 3D graphics techniques. Many of these take advantage of our <a href="./Framework.html">Framework</a> which includes PVRShell abstraction layer and PVRTools library, both of which are available as source libraries.</p>
<p>The PowerVR SDK includes source code, example applications, tutorials and documentation. For further details regarding your SDK installation, please visit the <a href="./GettingStarted.html">Getting Started</a> page.</p>
<p>The <a href="./Examples.html">Examples</a> page features a range of methods from initialising the API through to complex 3D graphics techniques. Many of these take advantage of our <a href="./Framework.html">Framework</a> which includes a range of modules available as source libraries.</p>
<p>We've also supplied a range of documents which can be accessed from the <a href="./Documentation.html">Documentation</a> page. These documents include the relevant list of architecture guides, specifications, user manuals and whitepapers.</p>
<p>Additional information is provided in this browser regarding the PowerVR suite of utilities (see <a href="./PowerVRTools.html">PowerVR Tools</a> page). A <a href="./ReleaseNotes.html">Release Notes</a> page is also present, detailing what's changed in this release.</p>
<p>Developers can join the PowerVR Insider programme and interact with the community through online forums at <a href="http://www.powervrinsider.com" target="_blank">www.powervrinsider.com</a>. Also visit our <a href="./Contact.html">Contact</a> page for further details on how to get in touch with us.</p>
<p>Additional information is provided in this browser regarding the PowerVR Tools, which are suite of utilities for rapid graphics application development (see <a href="./PowerVRTools.html">PowerVR Tools</a> page). A <a href="./ReleaseNotes.html">Release Notes</a> page is also present, detailing what's changed in this release of the PowerVR Tools and SDK.</p>
<p>Developers can join the PowerVR Insider programme and interact with our online Community at <a href="http://www.powervrinsider.com" target="_blank">www.powervrinsider.com</a>. Also visit our <a href="./Contact.html">Contact</a> page for further details on how to get in touch with us.</p>
<br>
</div>
<div id="FooterMainContainer">
......
......@@ -49,82 +49,13 @@
</div>
<div class="content">
<h1>End User Licence Agreement</h1>
<p><a href="#eula" class="link">SDK EULA</a> | <a href="#faq" class="link">FAQ about the SDK EULA</a>
<div id="eula">
<h2>SDK EULA</h2>
<p><b>PLEASE READ THIS AGREEMENT CAREFULLY. BY USING ANY PORTION OF THE SDK YOU WILL BE LEGALLY BOUND TO THESE TERMS.</b></p>
<p>Imagination Technologies Limited ("Imagination") provides this Software Development Kit subject to the terms of this Agreement. If you do not agree with any of these terms, then do not install or otherwise use the SDK.</p>
<ol>
<li><b>Definitions</b>
<p>"SDK" means all or any component of software in source or binary form, tools, code examples, drivers, files, libraries, utilities, reference manuals, documentation, or other materials, and including any related updates or upgrades made available by Imagination under this Agreement from time to time.</p></li>
<li><b>Licence Grant</b>
<p>Subject to your compliance with the terms of this Agreement, Imagination grants to you a non-exclusive, non-assignable licence to:</p>
<p>(a) use the SDK for the sole purpose of developing, profiling, or assisting in the optimisation of internal, commercial, or non-commercial applications ("Development License");</p>
<p>(b) distribute the SDK in source code, object file, or compiled binary form as a component of your application, provided that:</p>
<ol type="i">
<li>you do not distribute the SDK on a stand alone basis;</li>
<li>you distribute such components under terms no less restrictive than those in this Agreement;</li>
<li>you comply with the attribution requirements set out in Appendix 1;</li>
<li>you are solely responsible for any update, support obligation or other liability that may arise from such distribution;</li>
<li>you do not make any statements that your application or its performance are certified, guaranteed or otherwise endorsed by Imagination ("Production License")</li>
</ol>
<p>(c) Use the SDK as expressly authorised by Imagination in writing, on the payment and/or support terms set out in Appendix 2 (if applicable) ("Custom License").</p></li>
<li><b>Restrictions</b>
<p>Other than as expressly permitted herein, you may not: (i) use the SDK for any unauthorised purpose; (ii) modify, disassemble, decompile, reverse engineer, revise or enhance the SDK, create derivative works or attempt to discover the source code for any element of the SDK not already provided in source code form; (iii) remove any proprietary or copyright notices on or accompanying the SDK; or (iv) incorporate or combine the SDK, with any open source software in such a way that would cause the SDK, or any portion thereof, to be subject to all or part of the licence obligations or other intellectual property related terms with respect to such open source software.</p></li>
<li><b>Ownership and Contributions</b>
<p>Imagination retains all ownership of the SDK, including without limitation all copyrights and other intellectual property rights therein.</p>
<p>To the extent you provide any feedback or make any contributions in connection with the SDK (collectively "contributions"), you agree to assign all intellectual property rights in such contribution to Imagination and agree not to assert any related rights against Imagination or any of its customers or licensees. You understand and agree that Imagination is not required to make any use of any contribution that you provide, but that if Imagination makes use of your contribution, neither Imagination nor any of its customers or licensees are required to credit or compensate you for your contribution. You represent and warrant that you have sufficient rights in your contribution to comply with the foregoing.</p></li>
<li><b>Warranty Disclaimer</b>
<p>THE SDK IS PROVIDED "AS IS". Imagination HEREBY DISCLAIMS ALL EXPRESS OR IMPLIED WARRANTIES AND CONDITIONS WITH REGARD TO THE SDK, INCLUDING ALL WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT.</p></li>
<li><b>Limitation of Liability</b>
<p>IN NO EVENT WILL Imagination BE LIABLE TO YOU FOR ANY DAMAGES, CLAIMS OR COSTS WHATSOEVER ARISING FROM THIS AGREEMENT AND/OR YOUR USE OF THE SDK OR ANY COMPONENT THEREOF, INCLUDING WITHOUT LIMITATION ANY CONSEQUENTIAL, INDIRECT, INCIDENTAL DAMAGES, OR ANY LOST PROFITS OR LOST SAVINGS, EVEN IF Imagination HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH LOSS, DAMAGES, CLAIMS OR COSTS OR FOR ANY CLAIM BY ANY THIRD PARTY. THE FOREGOING LIMITATIONS AND EXCLUSIONS APPLY TO THE EXTENT PERMITTED BY APPLICABLE LAW IN YOUR JURISDICTION.<p></li>
<li><b>Third Party Materials</b>
<p>All third party materials found on this SDK, including without limitation, artwork, graphics, game demos and patches, are the sole and exclusive property of such third parties. Imagination makes no representations or warranties about the accuracy, usability or validity of any third party materials, and disclaims all liabilities in connection with such third party materials.</p></li>
<li><b>Term</b>
<p>This Agreement is effective until terminated. Imagination has the right to terminate this Agreement immediately if you fail to comply with any term of this Agreement. You may terminate this Agreement by destroying or returning to Imagination all copies of the SDK in your possession.<p></li>
<li><b>Governing Law</b>
<p>This Agreement is governed by and shall be construed in accordance with English law and each party agrees to submit to the exclusive jurisdiction of the courts of England.</p></li>
</ol>
<br>
<p><b>APPENDIX 1: ATTRIBUTION REQUIREMENTS</b></p>
<p>If source code is released as it is, the Copyright notice should be kept in a visible position.</p>
<p>If object code is bundled with a product, all branding should be kept as it was originally, and the following acknowledgement should be displayed clearly in any associated documentation or other collateral in printed or electronic form distributed with the product incorporating the SDK component: "This product includes components of the PowerVR<sup>TM</sup> SDK from Imagination Technologies Limited"</p>
<p>If source code is used to compile a product, the following acknowledgement should be displayed clearly in any associated documentation or other collateral in printed or electronic form distributed with the product incorporating the SDK component: "This product includes components of the PowerVR<sup>TM</sup> SDK from Imagination Technologies Limited"</p>
<br>
<p><b>APPENDIX 2: FEES</b></p>
<p>There are no fees as a consequence of this licence agreement</p>
<p>LICENCE FEES: 0 (Zero)</p>
<p>ROYALTY FEES: 0 (Zero)</p>
<p>SUPPORT AND MAINTENANCE TERMS AND FEES: 0 (Zero)</p>
</div>
<div id="faq">
<h2>FAQ about the SDK EULA</h2>
<p><strong>Q1: Are there any fees associated with using the SDK?</strong></p>
<p>No. The SDK is completely free to use for both commercial and non-commercial purposes. There are no licence, royalty or support and maintenance fees associated with our SDK.</p>
<p><strong>Q2: Can I distribute the entire SDK?</strong></p>
<p>No. You cannot distribute a complete standalone SDK. Only components of the SDK can be distributed.</p>
<p><strong>Q3: If I am distributing a component of the SDK, what must I ensure?</strong></p>
<p>You will need to ensure that the terms under which you are distributing that component of the SDK is no less restrictive than those in the SDK EULA. You also need to comply with our Attribution Requirements found in the SDK EULA. In addition, redistributing a component of the SDK makes you solely responsible for any update, support obligation or other liability that may arise from such distribution. You also cannot make any statement that your application or its performance are certified, guaranteed or otherwise endorsed by us.</p>
<p><strong>Q4: Can I distribute SDK source code?</strong></p>
<p>Yes. If distributing SDK source code as-is the copyright notice must be kept at the top of the source code, including the proper acknowledgement made (see Q7). However, the copyright may be removed from SDK source code that you have modified. You also need to ensure that you comply with our terms regarding the distribution of the SDK (see Q3 and the SDK EULA).</p>
<p><strong>Q5: Can I distribute a PowerVR graphics utility binary (e.g. PVRTexLib) with my game engine/tool suite?</strong></p>
<p>Yes, as long as the origins of the binary are not misrepresented and the licence of your product is no less permissive than those in the SDK EULA. When distributing a utility binary, you should include the proper acknowledgement (see Q6). This applies to both closed and open source projects. You also need to ensure that you comply with our terms regarding the distribution of the SDK (see Q3 and the SDK EULA).</p>
<p><strong>Q6: How should I acknowledge SDK object code (i.e. binaries) that has been bundled with my product?</strong></p>
<p>You will need to include the following acknowledgement: "This product includes components of the PowerVR<sup>TM</sup> SDK from Imagination Technologies Limited"</p>
<p><strong>Q7: How should I acknowledge SDK source code that has been used to compile my product?</strong></p>
<p>You will need to include the following acknowledgement: "This product includes components of the PowerVR<sup>TM</sup> SDK from Imagination Technologies Limited"</p>
<p><strong>Q8: Can I manipulate an element of the SDK that has not already been made available in source code form?</strong></p>
<p>No. You are not permitted to modify, disassemble, decompile, reverse engineer, revise or enhance the SDK, create derivative works or attempt to discover the source code for any element of the SDK not already provided in source code form.</p>
<p><strong>Q9: Can I remove copyright notices at the top of SDK source code or included with the SDK?</strong></p>
<p>No. You are not permitted to remove any proprietary or copyright notices on or accompanying the SDK. However, if you are integrating parts of the SDK source code into your own code, you may remove the copyright notice.</p>
<p><strong>Q10: Can I hide the printed output of command-line utilities?</strong></p>
<p>Yes. You can hide messages printed by our command-line tools, including copyright notices.</p>
<p><strong>Q11: Can I incorporate or combine part of the SDK with my open source software?</strong></p>
<p>Yes, as long as you comply with our Attribution Requirements found in the SDK EULA. However, you are not permitted to incorporate or combine the SDK with your open source software in such a way that the SDK becomes subjected to the licence obligations or other intellectual property terms that hold for that open source software.</p>
</div>
<h1>End User License Agreement (EULA)</h1>
<h2>PowerVR SDK</h2>
<p>The PowerVR SDK consists of the Framework and example source code as well as documentation. The PowerVR SDK is covered by the highly-permissive MIT licence. The license allows you to make full, unrestrictive use of the PowerVR SDK. Please click <a href="http://community.imgtec.com/developers/powervr/powervr-sdk-software-eula/" target="_blank">here</a> to view the "PowerVR SDK Software End User License Agreement".</p>
<h2>PowerVR Tools</h2>
<p>The PowerVR Tools is our suite of utilities that includes Profiling Compilers, PVRGeoPOD, PVRHub, PVRMonitor, PVRScope, PVRShaderEditor, PVRShaman, PVRTexTool, PVRTrace, PVRTune and PVRVFrame. The PowerVR Tools is covered by a free licence, which allows you to use our PowerVR Tools subject to the terms of the "PowerVR Tools Software End User License Agreement". Please click <a href="http://community.imgtec.com/developers/powervr/powervr-tools-software-eula/" target="_blank">here</a> to view the agreement.</p>
<h2>FAQ</h2>
<p>Frequently asked questions about the PowerVR SDK Software EULA and PowerVR Tools Software EULA can be found <a href="http://community.imgtec.com/developers/powervr/faq-about-the-sdk-eula/" target="_blank">here</a>.</p>
</div>
<br>
<div id="FooterMainContainer">
......
<!DOCTYPE html>
<html lang="en">
<head>
<title>The PowerVR SDK Browser</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="./images/img-icon.png">
</head>
<body>
<div id="GlobalHeaderContainer">
<div id="GlobalHeader">
<div class="logo">
<a href="http://www.powervrinsider.com" target="_blank"><img src="./images/PVRlogo.png" width="40%" height="40%" /></a>
</div>
<div class="sitetitle">PowerVR SDK Browser</div>
</div>
</div>
<div id="NavContainer">
<nav>
<div class="navlink">
<a href="Home.html">Home</a>
</div>
<div class="navlink">
<a href="GettingStarted.html">Getting Started</a>
</div>
<div class="navlink">
<a href="Examples.html" class="current">Examples</a>
</div>
<div class="navlink">
<a href="Framework.html">Framework</a>
</div>
<div class="navlink">
<a href="Documentation.html">Documentation</a>
</div>
<div class="navlink">
<a href="PowerVRTools.html">PowerVR Tools</a>
</div>
<div class="navlink">
<a href="ReleaseNotes.html">Release Notes</a>
</div>
<div class="navlink">
<a href="Licence.html">EULA</a>
</div>
<div class="navlink">
<a href="Contact.html">Contact Us</a>
</div>
</nav>
</div>
<!--API_TAB-->
<div class="content">
<div id="Section" class="section">
<!--API_DESCRIPTION-->
<h1>OpenCL 1.x Examples</h1>
<p>
OpenCL is a cross-platform API for parallel computing on modern processors, including CPUs, GPUs and custom accelerators. It is available both on desktop and embedded platforms, with an embedded profile which is used for more efficient rendering on mobile devices. Rather than being bottlenecked by the CPU, an application can use OpenCL to make use of processors like the GPU that may otherwise remain starved of work, accelerating the application. Also, many workloads that are typically run serially on a CPU are able to complete significantly faster by parallelizing the algorithm and executing them on a GPU. This API is available on PowerVR Series6 GPUs and later.
</p>
</OCL_OGLES2>
<p><a href="#Beginner" class="link">Beginner</a> | <a href="#Intermediate" class="link">Intermediate</a> | <a href="#Advanced" class="link">Advanced</a></p>
<!--EXAMPLE_TEMPLATE-->
<div id="Beginner""><h2>Beginner</h2><ul class="accordion">
<li id="HelloAPI">
<div class="title">
<a href="../../Examples/Beginner/01_HelloAPI/OCL_OGLES2HelloAPI.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/01_HelloAPI/OCL_OGLES2HelloAPI.png" alt="HelloAPI" /></a>
<input type="checkbox" id="HelloAPIFull2">
<label for="HelloAPIFull2" title="Click for more information"><h3>HelloAPI</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>How to invoke an OpenCL kernel
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>A basic tutorial that shows step-by-step how to initialize OpenCL, create a kernel and then execute it. A kernel is a C-like language used for writing programs.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/01_HelloAPI/OCL_OGLES2/OCL_OGLES2HelloAPI.cpp" target="_blank">OCL_OGLES2HelloAPI.cpp</a> | <a href="../../Examples/Beginner/01_HelloAPI/OCL_OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul><div id="Intermediate""><h2>Intermediate</h2><ul class="accordion">
<li id="ImageConvolution">
<div class="title">
<a href="../../Examples/Intermediate/ImageConvolution/ImageConvolution.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ImageConvolution/ImageConvolution.png" alt="ImageConvolution" /></a>
<input type="checkbox" id="ImageConvolutionFull2">
<label for="ImageConvolutionFull2" title="Click for more information"><h3>ImageConvolution</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Introduction to image processing using GPGPU (GPU Compute)
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demonstration deals with image processing. It illustrates the usage of GPU Compute to write linear and non-linear filter kernels.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ImageConvolution/OCL_OGLES2/OCL_OGLES2ImageConvolution.cpp" target="_blank">OCL_OGLES2ImageConvolution.cpp</a> | <a href="../../Examples/Intermediate/ImageConvolution/OCL_OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ZeroCopyCamera">
<div class="title">
<a href="../../Examples/Intermediate/ZeroCopyCamera/ZeroCopyCamera.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ZeroCopyCamera/ZeroCopyCamera.png" alt="ZeroCopyCamera" /></a>
<input type="checkbox" id="ZeroCopyCameraFull2">
<label for="ZeroCopyCameraFull2" title="Click for more information"><h3>ZeroCopyCamera</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This example demonstrates the most optimal path to stream textures from the Camera of a mobile device and then Share it across API's
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ZeroCopyCamera/OCL_OGLES2/OCL_OGLES2ZeroCopyCamera.cpp" target="_blank">OCL_OGLES2ZeroCopyCamera.cpp</a> | <a href="../../Examples/Intermediate/ZeroCopyCamera/OCL_OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul><div id="Advanced""><h2>Advanced</h2><ul class="accordion">
<li id="GameOfLife">
<div class="title">
<a href="../../Examples/Advanced/GameOfLife/GameOfLife.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/GameOfLife/GameOfLife.png" alt="GameOfLife" /></a>
<input type="checkbox" id="GameOfLifeFull2">
<label for="GameOfLifeFull2" title="Click for more information"><h3>GameOfLife</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Implementation of John Conway's Game of Life using GPGPU (GPU Compute).
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demo utilises GPGPU (GPU Compute) to take advantage of the GPU computation available in PowerVR Series6 to implement John Conway's Game of Life simulation, updating every aspect of the grid where all the particles are stored. OpenGL then retrieves the result of that computation and presents it on the screen.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left and right arrows : Switch between evolution functions.</p><p> Up : Pause simulation.</p><p> Down : Generate new population.</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/GameOfLife/OCL_OGLES2/OCL_OGLES2GameOfLife.cpp" target="_blank">OCL_OGLES2GameOfLife.cpp</a> | <a href="../../Examples/Advanced/GameOfLife/OCL_OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ParticleSystem">
<div class="title">
<a href="../../Examples/Advanced/ParticleSystem/ParticleSystem.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/ParticleSystem/ParticleSystem.png" alt="ParticleSystem" /></a>
<input type="checkbox" id="ParticleSystemFull2">
<label for="ParticleSystemFull2" title="Click for more information"><h3>ParticleSystem</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to implement a simple particle system using GPGPU.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>The demo utilises GPGPU (GPU Compute) 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 the Compute and the Rendering part of a simulation.
</p><p>- left and right arrows - Decrease and increase number of particles
</p><p>- up and down arrows - Switch between GPU Compute and CPU Particle System implementation.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/ParticleSystem/OCL_OGLES2/OCL_OGLES2ParticleSystem.cpp" target="_blank">OCL_OGLES2ParticleSystem.cpp</a> | <a href="../../Examples/Advanced/ParticleSystem/OCL_OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ProceduralTextures">
<div class="title">
<a href="../../Examples/Advanced/ProceduralTextures/ProceduralTextures.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/ProceduralTextures/ProceduralTextures.png" alt="ProceduralTextures" /></a>
<input type="checkbox" id="ProceduralTexturesFull2">
<label for="ProceduralTexturesFull2" title="Click for more information"><h3>ProceduralTextures</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to generate procedural textures using GPGPU(GPU Compute).
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Utilises GPGPU to generate procedural textures using Steven Worley's cellular texture basis functions. Procedural textures are computer-generated images created using an algorithm intended to create a realistic representation of natural elements such as wood or marble.
</p><p>- left and right arrows - Switch between distance metrics
</p><p>- up and down arrows - Switch between linear combination of weights
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/ProceduralTextures/OCL_OGLES2/OCL_OGLES2ProceduralTextures.cpp" target="_blank">OCL_OGLES2ProceduralTextures.cpp</a> | <a href="../../Examples/Advanced/ProceduralTextures/OCL_OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul> </div>
</div>
<div id="FooterMainContainer">
<div id="FooterContainer">
<div class="footerlogo">
<a href="http://www.imgtec.com" target="_blank"><img src="./images/img-footer-logo-grey.png" width="100%" height="100%" /></a>
</div>
<div class="copyright">&copy; Imagination Technologies Limited<br> All rights reserved</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<title>The PowerVR SDK Browser</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="./images/img-icon.png">
</head>
<body>
<div id="GlobalHeaderContainer">
<div id="GlobalHeader">
<div class="logo">
<a href="http://www.powervrinsider.com" target="_blank"><img src="./images/PVRlogo.png" width="40%" height="40%" /></a>
</div>
<div class="sitetitle">PowerVR SDK Browser</div>
</div>
</div>
<div id="NavContainer">
<nav>
<div class="navlink">
<a href="Home.html">Home</a>
</div>
<div class="navlink">
<a href="GettingStarted.html">Getting Started</a>
</div>
<div class="navlink">
<a href="Examples.html" class="current">Examples</a>
</div>
<div class="navlink">
<a href="Framework.html">Framework</a>
</div>
<div class="navlink">
<a href="Documentation.html">Documentation</a>
</div>
<div class="navlink">
<a href="PowerVRTools.html">PowerVR Tools</a>
</div>
<div class="navlink">
<a href="ReleaseNotes.html">Release Notes</a>
</div>
<div class="navlink">
<a href="Licence.html">EULA</a>
</div>
<div class="navlink">
<a href="Contact.html">Contact Us</a>
</div>
</nav>
</div>
<!--API_TAB-->
<div class="content">
<div id="Section" class="section">
<!--API_DESCRIPTION-->
<h1>OpenGL 4.x Examples</h1>
<p>
OpenGL is a cross-platform API for 2D and 3D graphics on desktop devices.
</p>
</OGL>
<p><a href="#Beginner" class="link">Beginner</a> | <a href="#Intermediate" class="link">Intermediate</a> | <a href="#Advanced" class="link">Advanced</a></p>
<!--EXAMPLE_TEMPLATE-->
<div id="Beginner""><h2>Beginner</h2><ul class="accordion">
<li id="HelloAPI">
<div class="title">
<a href="../../Examples/Beginner/01_HelloAPI/HelloAPI.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/01_HelloAPI/HelloAPI.png" alt="HelloAPI" /></a>
<input type="checkbox" id="HelloAPIFull2">
<label for="HelloAPIFull2" title="Click for more information"><h3>HelloAPI</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Draw a triangle to the screen using hardware acceleration.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/01_HelloAPI/OGL/OGLHelloAPI_Windows.cpp" target="_blank">OGLHelloAPI_Windows.cpp</a> | <a href="../../Examples/Beginner/01_HelloAPI/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPVRShell">
<div class="title">
<a href="../../Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.png" alt="IntroducingPVRShell" /></a>
<input type="checkbox" id="IntroducingPVRShellFull2">
<label for="IntroducingPVRShellFull2" title="Click for more information"><h3>IntroducingPVRShell</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PVRShell library.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/02_IntroducingPVRShell/OGL/OGLIntroducingPVRShell.cpp" target="_blank">OGLIntroducingPVRShell.cpp</a> | <a href="../../Examples/Beginner/02_IntroducingPVRShell/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Texturing">
<div class="title">
<a href="../../Examples/Beginner/03_Texturing/Texturing.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/03_Texturing/Texturing.png" alt="Texturing" /></a>
<input type="checkbox" id="TexturingFull2">
<label for="TexturingFull2" title="Click for more information"><h3>Texturing</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to apply a texture to a polygon in :API:.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/03_Texturing/OGL/OGLTexturing.cpp" target="_blank">OGLTexturing.cpp</a> | <a href="../../Examples/Beginner/03_Texturing/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="BasicTnL">
<div class="title">
<a href="../../Examples/Beginner/04_BasicTnL/BasicTnL.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/04_BasicTnL/BasicTnL.png" alt="BasicTnL" /></a>
<input type="checkbox" id="BasicTnLFull2">
<label for="BasicTnLFull2" title="Click for more information"><h3>BasicTnL</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course consists of a demonstration of basic transformation and lighting.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This training course consists of a demonstration of basic transformation and lighting, growing on the basic drawing techniques learnt in HelloTriangle.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/04_BasicTnL/OGL/OGLBasicTnL.cpp" target="_blank">OGLBasicTnL.cpp</a> | <a href="../../Examples/Beginner/04_BasicTnL/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPVRTools">
<div class="title">
<a href="../../Examples/Beginner/05_IntroducingPVRTools/IntroducingPVRTools.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/05_IntroducingPVRTools/IntroducingPVRTools.png" alt="IntroducingPVRTools" /></a>
<input type="checkbox" id="IntroducingPVRToolsFull2">
<label for="IntroducingPVRToolsFull2" title="Click for more information"><h3>IntroducingPVRTools</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PVRTools libraries.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/05_IntroducingPVRTools/OGL/OGLIntroducingPVRTools.cpp" target="_blank">OGLIntroducingPVRTools.cpp</a> | <a href="../../Examples/Beginner/05_IntroducingPVRTools/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPrint3D">
<div class="title">
<a href="../../Examples/Beginner/06_IntroducingPrint3D/IntroducingPrint3D.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/06_IntroducingPrint3D/IntroducingPrint3D.png" alt="IntroducingPrint3D" /></a>
<input type="checkbox" id="IntroducingPrint3DFull2">
<label for="IntroducingPrint3DFull2" title="Click for more information"><h3>IntroducingPrint3D</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the Print3D class featured within the PVRTools library.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/06_IntroducingPrint3D/OGL/OGLIntroducingPrint3D.cpp" target="_blank">OGLIntroducingPrint3D.cpp</a> | <a href="../../Examples/Beginner/06_IntroducingPrint3D/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPOD">
<div class="title">
<a href="../../Examples/Beginner/07_IntroducingPOD/IntroducingPOD.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/07_IntroducingPOD/IntroducingPOD.png" alt="IntroducingPOD" /></a>
<input type="checkbox" id="IntroducingPODFull2">
<label for="IntroducingPODFull2" title="Click for more information"><h3>IntroducingPOD</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PowerVR Object Data (.pod) format.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/07_IntroducingPOD/OGL/OGLIntroducingPOD.cpp" target="_blank">OGLIntroducingPOD.cpp</a> | <a href="../../Examples/Beginner/07_IntroducingPOD/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPFX">
<div class="title">
<a href="../../Examples/Beginner/08_IntroducingPFX/IntroducingPFX.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/08_IntroducingPFX/IntroducingPFX.png" alt="IntroducingPFX" /></a>
<input type="checkbox" id="IntroducingPFXFull2">
<label for="IntroducingPFXFull2" title="Click for more information"><h3>IntroducingPFX</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to use the PVRTools library to load and use .pfx files.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/08_IntroducingPFX/OGL/OGLIntroducingPFX.cpp" target="_blank">OGLIntroducingPFX.cpp</a> | <a href="../../Examples/Beginner/08_IntroducingPFX/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul><div id="Intermediate""><h2>Intermediate</h2><ul class="accordion">
<li id="AlphaBlend">
<div class="title">
<a href="../../Examples/Intermediate/AlphaBlend/AlphaBlend.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/AlphaBlend/AlphaBlend.png" alt="AlphaBlend" /></a>
<input type="checkbox" id="AlphaBlendFull2">
<label for="AlphaBlendFull2" title="Click for more information"><h3>AlphaBlend</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course illustrates how transparency effects can be achieved with blending and the use of some common blending modes.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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().
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/AlphaBlend/OGL/OGLAlphaBlend.cpp" target="_blank">OGLAlphaBlend.cpp</a> | <a href="../../Examples/Intermediate/AlphaBlend/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="AlphaTest">
<div class="title">
<a href="../../Examples/Intermediate/AlphaTest/AlphaTest.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/AlphaTest/AlphaTest.png" alt="AlphaTest" /></a>
<input type="checkbox" id="AlphaTestFull2">
<label for="AlphaTestFull2" title="Click for more information"><h3>AlphaTest</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course illustrates how to perform alpha testing and provides a visual comparison between alpha blending and alpha testing.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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).
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/AlphaTest/OGL/OGLAlphaTest.cpp" target="_blank">OGLAlphaTest.cpp</a> | <a href="../../Examples/Intermediate/AlphaTest/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="AnisotropicLighting">
<div class="title">
<a href="../../Examples/Intermediate/AnisotropicLighting/AnisotropicLighting.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/AnisotropicLighting/AnisotropicLighting.png" alt="AnisotropicLighting" /></a>
<input type="checkbox" id="AnisotropicLightingFull2">
<label for="AnisotropicLightingFull2" title="Click for more information"><h3>AnisotropicLighting</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>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.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right Arrow : Toggle effect</p><p> Esc : Close application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/AnisotropicLighting/OGL/OGLAnisotropicLighting.cpp" target="_blank">OGLAnisotropicLighting.cpp</a> | <a href="../../Examples/Intermediate/AnisotropicLighting/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Bloom">
<div class="title">
<a href="../../Examples/Intermediate/Bloom/Bloom.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Bloom/Bloom.png" alt="Bloom" /></a>
<input type="checkbox" id="BloomFull2">
<label for="BloomFull2" title="Click for more information"><h3>Bloom</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a simple implementation of a 'bloom' effect.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Up/Down : Toggle the bloom effect On/Off</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Bloom/OGL/OGLBloom.cpp" target="_blank">OGLBloom.cpp</a> | <a href="../../Examples/Intermediate/Bloom/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Bumpmap">
<div class="title">
<a href="../../Examples/Intermediate/Bumpmap/Bumpmap.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Bumpmap/Bumpmap.png" alt="Bumpmap" /></a>
<input type="checkbox" id="BumpmapFull2">
<label for="BumpmapFull2" title="Click for more information"><h3>Bumpmap</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates an example of using a normal map to implement bump mapping.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Bumpmap/OGL/OGLBumpmap.cpp" target="_blank">OGLBumpmap.cpp</a> | <a href="../../Examples/Intermediate/Bumpmap/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="CellShading">
<div class="title">
<a href="../../Examples/Intermediate/CellShading/CellShading.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/CellShading/CellShading.png" alt="CellShading" /></a>
<input type="checkbox" id="CellShadingFull2">
<label for="CellShadingFull2" title="Click for more information"><h3>CellShading</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to implement cell shading.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/CellShading/OGL/OGLCellShading.cpp" target="_blank">OGLCellShading.cpp</a> | <a href="../../Examples/Intermediate/CellShading/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ComplexLighting">
<div class="title">
<a href="../../Examples/Intermediate/ComplexLighting/ComplexLighting.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ComplexLighting/ComplexLighting.png" alt="ComplexLighting" /></a>
<input type="checkbox" id="ComplexLightingFull2">
<label for="ComplexLightingFull2" title="Click for more information"><h3>ComplexLighting</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to implement complex lighting techniques.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle through the available modes</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ComplexLighting/OGL/OGLComplexLighting.cpp" target="_blank">OGLComplexLighting.cpp</a> | <a href="../../Examples/Intermediate/ComplexLighting/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="CubeShadowMapping">
<div class="title">
<a href="../../Examples/Intermediate/CubeShadowMapping/CubeShadowMapping.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/CubeShadowMapping/CubeShadowMapping.png" alt="CubeShadowMapping" /></a>
<input type="checkbox" id="CubeShadowMappingFull2">
<label for="CubeShadowMappingFull2" title="Click for more information"><h3>CubeShadowMapping</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use cube shadow maps for point light sources.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Shows how to dynamically update the cube shadow map for a point light source and cast shadows using that cube shadow map. Shadow Mapping is a process by which shadows are added to 3D computer graphics by testing whether a pixel is visible from the light source, and comparing it to a z-buffer or depth image of the light source's view.</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/CubeShadowMapping/OGL/OGLCubeShadowMapping.cpp" target="_blank">OGLCubeShadowMapping.cpp</a> | <a href="../../Examples/Intermediate/CubeShadowMapping/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="DisplacementMap">
<div class="title">
<a href="../../Examples/Intermediate/DisplacementMap/DisplacementMap.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/DisplacementMap/DisplacementMap.png" alt="DisplacementMap" /></a>
<input type="checkbox" id="DisplacementMapFull2">
<label for="DisplacementMapFull2" title="Click for more information"><h3>DisplacementMap</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates displacement mapping using a texture read from the vertex shader.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/DisplacementMap/OGL/OGLDisplacementMap.cpp" target="_blank">OGLDisplacementMap.cpp</a> | <a href="../../Examples/Intermediate/DisplacementMap/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="FastTnL">
<div class="title">
<a href="../../Examples/Intermediate/FastTnL/FastTnL.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/FastTnL/FastTnL.png" alt="FastTnL" /></a>
<input type="checkbox" id="FastTnLFull2">
<label for="FastTnLFull2" title="Click for more information"><h3>FastTnL</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course serves as an example of a fast transformation and lighting vertex shader.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/FastTnL/OGL/OGLFastTnL.cpp" target="_blank">OGLFastTnL.cpp</a> | <a href="../../Examples/Intermediate/FastTnL/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Fog">
<div class="title">
<a href="../../Examples/Intermediate/Fog/Fog.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Fog/Fog.png" alt="Fog" /></a>
<input type="checkbox" id="FogFull2">
<label for="FogFull2" title="Click for more information"><h3>Fog</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to create a fog effect using shaders.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle fog mode</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Fog/OGL/OGLFog.cpp" target="_blank">OGLFog.cpp</a> | <a href="../../Examples/Intermediate/Fog/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="FresnelReflections">
<div class="title">
<a href="../../Examples/Intermediate/FresnelReflections/FresnelReflections.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/FresnelReflections/FresnelReflections.png" alt="FresnelReflections" /></a>
<input type="checkbox" id="FresnelReflectionsFull2">
<label for="FresnelReflectionsFull2" title="Click for more information"><h3>FresnelReflections</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates an implementation of Fresnel reflection.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Up/Down : Increase/Decrease the refractive index of the surface material</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/FresnelReflections/OGL/OGLFresnelReflections.cpp" target="_blank">OGLFresnelReflections.cpp</a> | <a href="../../Examples/Intermediate/FresnelReflections/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ImageConvolution">
<div class="title">
<a href="../../Examples/Intermediate/ImageConvolution/ImageConvolution.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ImageConvolution/ImageConvolution.png" alt="ImageConvolution" /></a>
<input type="checkbox" id="ImageConvolutionFull2">
<label for="ImageConvolutionFull2" title="Click for more information"><h3>ImageConvolution</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Introduction to image processing using GPGPU (GPU Compute)
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demonstration deals with image processing. It illustrates the usage of GPU Compute to write linear and non-linear filter kernels.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ImageConvolution/OGL/OGLImageConvolution.cpp" target="_blank">OGLImageConvolution.cpp</a> | <a href="../../Examples/Intermediate/ImageConvolution/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Instancing">
<div class="title">
<a href="../../Examples/Intermediate/Instancing/Instancing.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Instancing/Instancing.png" alt="Instancing" /></a>
<input type="checkbox" id="InstancingFull2">
<label for="InstancingFull2" title="Click for more information"><h3>Instancing</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use instancing to draw several instances of the same mesh with a single draw call.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This example shows how to use instancing to draw several instances of the same mesh with a single draw call.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Instancing/OGL/OGLInstancing.cpp" target="_blank">OGLInstancing.cpp</a> | <a href="../../Examples/Intermediate/Instancing/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Iridescence">
<div class="title">
<a href="../../Examples/Intermediate/Iridescence/Iridescence.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Iridescence/Iridescence.png" alt="Iridescence" /></a>
<input type="checkbox" id="IridescenceFull2">
<label for="IridescenceFull2" title="Click for more information"><h3>Iridescence</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to implement an iridescence effect.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Up/Down : Increase/Decrease the maximum variation</p><p> Left/Right : Decrease/Increase the maximum thickness</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Iridescence/OGL/OGLIridescence.cpp" target="_blank">OGLIridescence.cpp</a> | <a href="../../Examples/Intermediate/Iridescence/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="LevelOfDetail">
<div class="title">
<a href="../../Examples/Intermediate/LevelOfDetail/LevelOfDetail.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/LevelOfDetail/LevelOfDetail.png" alt="LevelOfDetail" /></a>
<input type="checkbox" id="LevelOfDetailFull2">
<label for="LevelOfDetailFull2" title="Click for more information"><h3>LevelOfDetail</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a switch in the detail of an object based on its distance from the camera.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/LevelOfDetail/OGL/OGLLevelOfDetail.cpp" target="_blank">OGLLevelOfDetail.cpp</a> | <a href="../../Examples/Intermediate/LevelOfDetail/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="LightMap">
<div class="title">
<a href="../../Examples/Intermediate/LightMap/LightMap.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/LightMap/LightMap.png" alt="LightMap" /></a>
<input type="checkbox" id="LightMapFull2">
<label for="LightMapFull2" title="Click for more information"><h3>LightMap</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course shows how to use light maps.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/LightMap/OGL/OGLLightMap.cpp" target="_blank">OGLLightMap.cpp</a> | <a href="../../Examples/Intermediate/LightMap/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="MultipleRenderTargets">
<div class="title">
<a href="../../Examples/Intermediate/MultipleRenderTargets/MultipleRenderTargets.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/MultipleRenderTargets/MultipleRenderTargets.png" alt="MultipleRenderTargets" /></a>
<input type="checkbox" id="MultipleRenderTargetsFull2">
<label for="MultipleRenderTargetsFull2" title="Click for more information"><h3>MultipleRenderTargets</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use multiple render targets to output data to several different surfaces within a single pass.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/MultipleRenderTargets/OGL/OGLMultipleRenderTargets.cpp" target="_blank">OGLMultipleRenderTargets.cpp</a> | <a href="../../Examples/Intermediate/MultipleRenderTargets/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="OcclusionQueries">
<div class="title">
<a href="../../Examples/Intermediate/OcclusionQueries/OcclusionQueries.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/OcclusionQueries/OcclusionQueries.png" alt="OcclusionQueries" /></a>
<input type="checkbox" id="OcclusionQueriesFull2">
<label for="OcclusionQueriesFull2" title="Click for more information"><h3>OcclusionQueries</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use occlusion queries to determine visible objects.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Shows how to use occlusion queries to determine visible objects and cull invisible ones to increase run-time performance.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/OcclusionQueries/OGL/OGLOcclusionQueries.cpp" target="_blank">OGLOcclusionQueries.cpp</a> | <a href="../../Examples/Intermediate/OcclusionQueries/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PerturbedUvs">
<div class="title">
<a href="../../Examples/Intermediate/PerturbedUvs/PerturbedUvs.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/PerturbedUvs/PerturbedUvs.png" alt="PerturbedUvs" /></a>
<input type="checkbox" id="PerturbedUvsFull2">
<label for="PerturbedUvsFull2" title="Click for more information"><h3>PerturbedUvs</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates the use of environment mapping with perturbed UVs.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/PerturbedUvs/OGL/OGLPerturbedUvs.cpp" target="_blank">OGLPerturbedUvs.cpp</a> | <a href="../../Examples/Intermediate/PerturbedUvs/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Reflections">
<div class="title">
<a href="../../Examples/Intermediate/Reflections/Reflections.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Reflections/Reflections.png" alt="Reflections" /></a>
<input type="checkbox" id="ReflectionsFull2">
<label for="ReflectionsFull2" title="Click for more information"><h3>Reflections</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates the creation of a reflection effect from a 2D map and a cube map.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Swap mapping type</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Reflections/OGL/OGLReflections.cpp" target="_blank">OGLReflections.cpp</a> | <a href="../../Examples/Intermediate/Reflections/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Refraction">
<div class="title">
<a href="../../Examples/Intermediate/Refraction/Refraction.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Refraction/Refraction.png" alt="Refraction" /></a>
<input type="checkbox" id="RefractionFull2">
<label for="RefractionFull2" title="Click for more information"><h3>Refraction</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a simulation of glass-like materials.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle Specular reflection on or off</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Refraction/OGL/OGLRefraction.cpp" target="_blank">OGLRefraction.cpp</a> | <a href="../../Examples/Intermediate/Refraction/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="RenderToTexture">
<div class="title">
<a href="../../Examples/Intermediate/RenderToTexture/RenderToTexture.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/RenderToTexture/RenderToTexture.png" alt="RenderToTexture" /></a>
<input type="checkbox" id="RenderToTextureFull2">
<label for="RenderToTextureFull2" title="Click for more information"><h3>RenderToTexture</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates the use of rendering to a texture.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left : Toggles multisampling of the FBOs</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/RenderToTexture/OGL/OGLRenderToTexture.cpp" target="_blank">OGLRenderToTexture.cpp</a> | <a href="../../Examples/Intermediate/RenderToTexture/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ShadowMapping">
<div class="title">
<a href="../../Examples/Intermediate/ShadowMapping/ShadowMapping.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ShadowMapping/ShadowMapping.png" alt="ShadowMapping" /></a>
<input type="checkbox" id="ShadowMappingFull2">
<label for="ShadowMappingFull2" title="Click for more information"><h3>ShadowMapping</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a shadow mapping technique.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ShadowMapping/OGL/OGLShadowMapping.cpp" target="_blank">OGLShadowMapping.cpp</a> | <a href="../../Examples/Intermediate/ShadowMapping/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ShadowVolume">
<div class="title">
<a href="../../Examples/Intermediate/ShadowVolume/ShadowVolume.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ShadowVolume/ShadowVolume.png" alt="ShadowVolume" /></a>
<input type="checkbox" id="ShadowVolumeFull2">
<label for="ShadowVolumeFull2" title="Click for more information"><h3>ShadowVolume</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to use the PVRTools libraries to create and use shadow volumes.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> 1 : Toggle display of shadow volumes</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ShadowVolume/OGL/OGLShadowVolume.cpp" target="_blank">OGLShadowVolume.cpp</a> | <a href="../../Examples/Intermediate/ShadowVolume/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Skinning">
<div class="title">
<a href="../../Examples/Intermediate/Skinning/Skinning.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Skinning/Skinning.png" alt="Skinning" /></a>
<input type="checkbox" id="SkinningFull2">
<label for="SkinningFull2" title="Click for more information"><h3>Skinning</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to implement hardware accelerated skinning using .pod files.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This training course demonstrates how to implement hardware accelerated skinning using the .pod file loading tools found in the PVRTools library.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Rotate model clockwise/anti-clockwise</p><p> Up/Down : Zoom out/in</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Skinning/OGL/OGLSkinning.cpp" target="_blank">OGLSkinning.cpp</a> | <a href="../../Examples/Intermediate/Skinning/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="StencilBuffer">
<div class="title">
<a href="../../Examples/Intermediate/StencilBuffer/StencilBuffer.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/StencilBuffer/StencilBuffer.png" alt="StencilBuffer" /></a>
<input type="checkbox" id="StencilBufferFull2">
<label for="StencilBufferFull2" title="Click for more information"><h3>StencilBuffer</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to use the stencil buffer to mask areas of the screen when rendering.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/StencilBuffer/OGL/OGLStencilBuffer.cpp" target="_blank">OGLStencilBuffer.cpp</a> | <a href="../../Examples/Intermediate/StencilBuffer/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="TextureArray">
<div class="title">
<a href="../../Examples/Intermediate/TextureArray/TextureArray.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/TextureArray/TextureArray.png" alt="TextureArray" /></a>
<input type="checkbox" id="TextureArrayFull2">
<label for="TextureArrayFull2" title="Click for more information"><h3>TextureArray</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use the texture array functionality.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demo shows how to use a texture array in the fragment shader by using three parameters. These are the index of the texture to be sampled, and the sampling coordinates.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/TextureArray/OGL/OGLTextureArray.cpp" target="_blank">OGLTextureArray.cpp</a> | <a href="../../Examples/Intermediate/TextureArray/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="TransformFeedback">
<div class="title">
<a href="../../Examples/Intermediate/TransformFeedback/TransformFeedback.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/TransformFeedback/TransformFeedback.png" alt="TransformFeedback" /></a>
<input type="checkbox" id="TransformFeedbackFull2">
<label for="TransformFeedbackFull2" title="Click for more information"><h3>TransformFeedback</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use transform feedback to implement a simple particle system.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Shows how to use the transform feedback functionality to implement a simple particle system. The particles are animated within a vertex shader and written out to a buffer object. This buffer object is then used to render the particles and used as input for the next frame's animation.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/TransformFeedback/OGL/OGLTransformFeedback.cpp" target="_blank">OGLTransformFeedback.cpp</a> | <a href="../../Examples/Intermediate/TransformFeedback/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="UniformBufferObjects">
<div class="title">
<a href="../../Examples/Intermediate/UniformBufferObjects/UniformBufferObjects.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/UniformBufferObjects/UniformBufferObjects.png" alt="UniformBufferObjects" /></a>
<input type="checkbox" id="UniformBufferObjectsFull2">
<label for="UniformBufferObjectsFull2" title="Click for more information"><h3>UniformBufferObjects</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use uniform buffer objects.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demonstration shows how to use uniform buffer objects to set the values of several shader uniforms at once. A uniform buffer object stores uniform data for a shader program, and is often used becuase switching between uniform buffer bindings is faster than swithcing several uniforms in a program. </p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/UniformBufferObjects/OGL/OGLUniformBufferObjects.cpp" target="_blank">OGLUniformBufferObjects.cpp</a> | <a href="../../Examples/Intermediate/UniformBufferObjects/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul><div id="Advanced""><h2>Advanced</h2><ul class="accordion">
<li id="DeferredShading">
<div class="title">
<a href="../../Examples/Advanced/DeferredShading/DeferredShading.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/DeferredShading/DeferredShading.png" alt="DeferredShading" /></a>
<input type="checkbox" id="DeferredShadingFull2">
<label for="DeferredShadingFull2" title="Click for more information"><h3>DeferredShading</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>../../../Examples/Advanced/DeferredShading/DeferredShading.txt</p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>ERROR</p>
<p><strong>Controls:</strong></p>
<p>ERROR</p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/DeferredShading/OGL/OGLDeferredShading.cpp" target="_blank">OGLDeferredShading.cpp</a> | <a href="../../Examples/Advanced/DeferredShading/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Fractal">
<div class="title">
<a href="../../Examples/Advanced/Fractal/Fractal.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Fractal/Fractal.png" alt="Fractal" /></a>
<input type="checkbox" id="FractalFull2">
<label for="FractalFull2" title="Click for more information"><h3>Fractal</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of drawing a fractal using render to texture.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Fractal/OGL/OGLFractal.cpp" target="_blank">OGLFractal.cpp</a> | <a href="../../Examples/Advanced/Fractal/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="GameOfLife">
<div class="title">
<a href="../../Examples/Advanced/GameOfLife/GameOfLife.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/GameOfLife/GameOfLife.png" alt="GameOfLife" /></a>
<input type="checkbox" id="GameOfLifeFull2">
<label for="GameOfLifeFull2" title="Click for more information"><h3>GameOfLife</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Implementation of John Conway's Game of Life using GPGPU (GPU Compute).
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demo utilises GPGPU (GPU Compute) to take advantage of the GPU computation available in PowerVR Series6 to implement John Conway's Game of Life simulation, updating every aspect of the grid where all the particles are stored. OpenGL then retrieves the result of that computation and presents it on the screen.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left and right arrows : Switch between evolution functions.</p><p> Up : Pause simulation.</p><p> Down : Generate new population.</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/GameOfLife/OGL/OGLGameOfLife.cpp" target="_blank">OGLGameOfLife.cpp</a> | <a href="../../Examples/Advanced/GameOfLife/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PVRScopeExample">
<div class="title">
<a href="../../Examples/Advanced/PVRScopeExample/PVRScopeExample.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/PVRScopeExample/PVRScopeExample.png" alt="PVRScopeExample" /></a>
<input type="checkbox" id="PVRScopeExampleFull2">
<label for="PVRScopeExampleFull2" title="Click for more information"><h3>PVRScopeExample</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Demonstrates the use of PVRScope and the example graphing code.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/PVRScopeExample/OGL/OGLPVRScopeExample.cpp" target="_blank">OGLPVRScopeExample.cpp</a> | <a href="../../Examples/Advanced/PVRScopeExample/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PVRScopeRemote">
<div class="title">
<a href="../../Examples/Advanced/PVRScopeRemote/PVRScopeRemote.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/PVRScopeRemote/PVRScopeRemote.png" alt="PVRScopeRemote" /></a>
<input type="checkbox" id="PVRScopeRemoteFull2">
<label for="PVRScopeRemoteFull2" title="Click for more information"><h3>PVRScopeRemote</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Demonstrates the use of PVRScope's remote communication features.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/PVRScopeRemote/OGL/OGLPVRScopeRemote.cpp" target="_blank">OGLPVRScopeRemote.cpp</a> | <a href="../../Examples/Advanced/PVRScopeRemote/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ParticleSystem">
<div class="title">
<a href="../../Examples/Advanced/ParticleSystem/ParticleSystem.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/ParticleSystem/ParticleSystem.png" alt="ParticleSystem" /></a>
<input type="checkbox" id="ParticleSystemFull2">
<label for="ParticleSystemFull2" title="Click for more information"><h3>ParticleSystem</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to implement a simple particle system using GPGPU.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>The demo utilises GPGPU (GPU Compute) 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 the Compute and the Rendering part of a simulation.
</p><p>- left and right arrows - Decrease and increase number of particles
</p><p>- up and down arrows - Switch between GPU Compute and CPU Particle System implementation.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/ParticleSystem/OGL/OGLParticleSystem.cpp" target="_blank">OGLParticleSystem.cpp</a> | <a href="../../Examples/Advanced/ParticleSystem/OGL/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul> </div>
</div>
<div id="FooterMainContainer">
<div id="FooterContainer">
<div class="footerlogo">
<a href="http://www.imgtec.com" target="_blank"><img src="./images/img-footer-logo-grey.png" width="100%" height="100%" /></a>
</div>
<div class="copyright">&copy; Imagination Technologies Limited<br> All rights reserved</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -49,16 +49,16 @@
</div>
<!--API_TAB-->
<div id="SubNavContainer"><nav><div class="subnavlink"><a href="./OGLES.html">OpenGL ES 1.x</a></div>
<div class="subnavlink"><a href="./OGLES2.html">OpenGL ES 2.0</a></div>
<div class="subnavlink"><a href="./OGLES3.html">OpenGL ES 3.x</a></div>
</nav></div>
<div class="content">
<div id="Section" class="section">
<!--API_DESCRIPTION-->
<h1>OpenGL ES 1.x Examples</h1>
<p>
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 1.x is the first embedded version of the API, and exposes an efficient, fixed-function pipeline for rendering simpler applications. It is often used for 2D games as the 3D pipeline is more limited than the widely available OpenGL ES 2.x, and it is also used as a basis for teaching engineers about graphics on mobile due to its simpler concepts. If you've never coded OpenGL or OpenGL ES before, it might be useful to start here before moving onto programmable APIs. The examples below will walk you through various basic graphics techniques implemented with OpenGL ES 1.x. This API is available on all current PowerVR GPUs.
<h1>OpenGL ES Examples</h1>
<h3>Programmable pipeline: OpenGL ES 2.0, 3.0 and 3.1</h3>
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.
<p><br><b>OpenGL ES 2.0</b> introduced 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 and performance than in OpenGL ES 1.x. Supported on PowerVR Series5 and later</p>
<p><br><b>OpenGL ES 3.x</b> adds to the already powerful OpenGL ES 2.0 things such as multiple render targets, standardised texture compression, a new shading language and far more control over texturing. OpenGL ES 3.1 also adds compute shaders and advanced compute functionality, allowing General Purpose on GPU (GPGPU) processing. Supported on PowerVR Series6 and later</p>
<p>The descriptions below specify the minimum API version the demo has been written for. When more than one version are listed, there is differentiated code for each of them. For example, OpenGL ES 2.0/3.0 will have two different versions, one of them will make use of OpenGL ES 3.0 specific features.</p>
</p>
</OGLES>
<p><a href="#Beginner" class="link">Beginner</a> | <a href="#Intermediate" class="link">Intermediate</a> | <a href="#Advanced" class="link">Advanced</a></p>
......@@ -69,17 +69,18 @@ OpenGL ES is a cross-platform API for 2D and 3D graphics on embedded systems suc
<a href="../../Examples/Beginner/01_HelloAPI/HelloAPI.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/01_HelloAPI/HelloAPI.png" alt="HelloAPI" /></a>
<input type="checkbox" id="HelloAPIFull2">
<label for="HelloAPIFull2" title="Click for more information"><h3>HelloAPI</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Draw a triangle to the screen using hardware acceleration.
</p></p></div>
<div class="ShortDescription" id="TexturingShort"><p>Draw a triangle to the screen using hardware acceleration.
</p><small><b>OpenGL ES 2.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p>A basic tutorial that guides the user, step-by-step, through the process of initializing a window using OpenGL ES 2, drawing a triangle with a simple shader, and then terminating the window.
</p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/01_HelloAPI/OGLES/OGLESHelloAPI_Windows.cpp" target="_blank">OGLESHelloAPI_Windows.cpp</a> | <a href="../../Examples/Beginner/01_HelloAPI/OGLES/Build/" target="_blank">Projects</a></p>
<p class="source"><a href="../../Examples/Beginner/01_HelloAPI/OGLES" target="_blank">HelloAPI Source</a> | <a href="../../Examples/Beginner/01_HelloAPI/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
......@@ -89,558 +90,212 @@ OpenGL ES is a cross-platform API for 2D and 3D graphics on embedded systems suc
<a href="../../Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.png" alt="IntroducingPVRShell" /></a>
<input type="checkbox" id="IntroducingPVRShellFull2">
<label for="IntroducingPVRShellFull2" title="Click for more information"><h3>IntroducingPVRShell</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PVRShell library.
</p></p></div>
<div class="ShortDescription" id="TexturingShort"><p>This training course introduces the PVRShell library.
</p><small><b>OpenGL ES 2.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p>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. When using the PVR Shell, the application uses the class 'pvr::Shell' as its base class, and is constructed and returned from a 'pvr::newDemo' function.
</p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/02_IntroducingPVRShell/OGLES/OGLESIntroducingPVRShell.cpp" target="_blank">OGLESIntroducingPVRShell.cpp</a> | <a href="../../Examples/Beginner/02_IntroducingPVRShell/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Texturing">
<div class="title">
<a href="../../Examples/Beginner/03_Texturing/Texturing.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/03_Texturing/Texturing.png" alt="Texturing" /></a>
<input type="checkbox" id="TexturingFull2">
<label for="TexturingFull2" title="Click for more information"><h3>Texturing</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to apply a texture to a polygon in :API:.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/03_Texturing/OGLES/OGLESTexturing.cpp" target="_blank">OGLESTexturing.cpp</a> | <a href="../../Examples/Beginner/03_Texturing/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="BasicTnL">
<li id="IntroducingPVRAssets">
<div class="title">
<a href="../../Examples/Beginner/04_BasicTnL/BasicTnL.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/04_BasicTnL/BasicTnL.png" alt="BasicTnL" /></a>
<input type="checkbox" id="BasicTnLFull2">
<label for="BasicTnLFull2" title="Click for more information"><h3>BasicTnL</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course consists of a demonstration of basic transformation and lighting.
</p></p></div>
<a href="../../Examples/Beginner/03_IntroducingPVRAssets/IntroducingPVRAssets.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/03_IntroducingPVRAssets/IntroducingPVRAssets.png" alt="IntroducingPVRAssets" /></a>
<input type="checkbox" id="IntroducingPVRAssetsFull2">
<label for="IntroducingPVRAssetsFull2" title="Click for more information"><h3>IntroducingPVRAssets</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Load a scene in POD format using the PVRAssets library, and render it using OpenGL ES 2.0
</p><small><b>OpenGL ES 2.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This training course consists of a demonstration of basic transformation and lighting, growing on the basic drawing techniques learnt in HelloTriangle.
</p></p>
<p>This training course introduces the PowerVR Framework PVRAssets library, and shows how to use it to read a PowerVR Object Data (.pod) file and textures. It goes into detail on how to open .pod files, .pvr files that have been referenced by it, and set up the cameras and lights from the .pod file. This demo also demonstrates the use of the PVR OpenGL ES bindings (a part of PVRGles), which is the OpenGL binding used in the native parts of this this SDK.
</p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/04_BasicTnL/OGLES/OGLESBasicTnL.cpp" target="_blank">OGLESBasicTnL.cpp</a> | <a href="../../Examples/Beginner/04_BasicTnL/OGLES/Build/" target="_blank">Projects</a></p>
<p class="source"><a href="../../Examples/Beginner/03_IntroducingPVRAssets/OGLES/OGLESIntroducingPVRAssets.cpp" target="_blank">OGLESIntroducingPVRAssets.cpp</a> | <a href="../../Examples/Beginner/03_IntroducingPVRAssets/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPVRTools">
<li id="IntroducingPVRApi">
<div class="title">
<a href="../../Examples/Beginner/05_IntroducingPVRTools/IntroducingPVRTools.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/05_IntroducingPVRTools/IntroducingPVRTools.png" alt="IntroducingPVRTools" /></a>
<input type="checkbox" id="IntroducingPVRToolsFull2">
<label for="IntroducingPVRToolsFull2" title="Click for more information"><h3>IntroducingPVRTools</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PVRTools libraries.
</p></p></div>
<a href="../../Examples/Beginner/04_IntroducingPVRApi/IntroducingPVRApi.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/04_IntroducingPVRApi/IntroducingPVRApi.png" alt="IntroducingPVRApi" /></a>
<input type="checkbox" id="IntroducingPVRApiFull2">
<label for="IntroducingPVRApiFull2" title="Click for more information"><h3>IntroducingPVRApi</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Render a .pod scene using a .pfx effect file with automatic shader versioning using the PVRApi library.
</p><small><b>OpenGL ES 2.0/3.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p>This training course demonstrates how to use the PVRApi library to render a scene from a pod file, using a .pfx effect file. PFX is both a file format and an API, and stands for PowerVR Effects. The library loads the POD file and the PFX file separately, creates a PVRAssets Model from the POD and a PVRApi Effect from the PFX file, and combines them to render the scene using the PVRApi necessary objects. Uses the PVRUIRenderer library to display simple text on screen. Different Shader versions provided for OpenGL ES 2.x and 3.x.
</p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/05_IntroducingPVRTools/OGLES/OGLESIntroducingPVRTools.cpp" target="_blank">OGLESIntroducingPVRTools.cpp</a> | <a href="../../Examples/Beginner/05_IntroducingPVRTools/OGLES/Build/" target="_blank">Projects</a></p>
<p class="source"><a href="../../Examples/Beginner/04_IntroducingPVRApi/OGLES/OGLESIntroducingPVRApi.cpp" target="_blank">OGLESIntroducingPVRApi.cpp</a> | <a href="../../Examples/Beginner/04_IntroducingPVRApi/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPrint3D">
<li id="IntroducingPVRUIRenderer">
<div class="title">
<a href="../../Examples/Beginner/06_IntroducingPrint3D/IntroducingPrint3D.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/06_IntroducingPrint3D/IntroducingPrint3D.png" alt="IntroducingPrint3D" /></a>
<input type="checkbox" id="IntroducingPrint3DFull2">
<label for="IntroducingPrint3DFull2" title="Click for more information"><h3>IntroducingPrint3D</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the Print3D class featured within the PVRTools library.
</p></p></div>
<a href="../../Examples/Beginner/05_IntroducingPVRUIRenderer/IntroducingPVRUIRenderer.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/05_IntroducingPVRUIRenderer/IntroducingPVRUIRenderer.png" alt="IntroducingPVRUIRenderer" /></a>
<input type="checkbox" id="IntroducingPVRUIRendererFull2">
<label for="IntroducingPVRUIRendererFull2" title="Click for more information"><h3>IntroducingPVRUIRenderer</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>This training course introduces the PVRUIRenderer library to do advanced Text tasks.
</p><small><b>OpenGL ES 2.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p>This training course introduces the PVRUIRenderer framework library.The user can create "Sprites" (2D elements) which can be grouped in 2D and/or 3D groups to be displayed as UI's or world text. 2D transformations (pixel and/or NDC coordinates) both single and in a group, anchoring on different parts of the screen or the group and 3D transformations of groups of sprites are all possible.
In this example, UIRendererer is used to display images and Unicode text, screen aligned and with 3D transformations.
</p>
<p><strong>Controls:</strong></p>
<p></p>
<p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/06_IntroducingPrint3D/OGLES/OGLESIntroducingPrint3D.cpp" target="_blank">OGLESIntroducingPrint3D.cpp</a> | <a href="../../Examples/Beginner/06_IntroducingPrint3D/OGLES/Build/" target="_blank">Projects</a></p>
<p class="source"><a href="../../Examples/Beginner/05_IntroducingPVRUIRenderer/OGLES/OGLESIntroducingPVRUIRenderer.cpp" target="_blank">OGLESIntroducingPVRUIRenderer.cpp</a> | <a href="../../Examples/Beginner/05_IntroducingPVRUIRenderer/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPOD">
<li id="IntroducingPVRCamera">
<div class="title">
<a href="../../Examples/Beginner/07_IntroducingPOD/IntroducingPOD.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/07_IntroducingPOD/IntroducingPOD.png" alt="IntroducingPOD" /></a>
<input type="checkbox" id="IntroducingPODFull2">
<label for="IntroducingPODFull2" title="Click for more information"><h3>IntroducingPOD</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PowerVR Object Data (.pod) format.
</p></p></div>
<a href="../../Examples/Beginner/06_IntroducingPVRCamera/IntroducingPVRCamera.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/06_IntroducingPVRCamera/IntroducingPVRCamera.png" alt="IntroducingPVRCamera" /></a>
<input type="checkbox" id="IntroducingPVRCameraFull2">
<label for="IntroducingPVRCameraFull2" title="Click for more information"><h3>IntroducingPVRCamera</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Use the PVRCamera library to get the hardware camera of a device, and apply a simple color inversion shader to it.
</p><small><b>OpenGL ES 2.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p>The PVRCamera library gives a very simple, unified API to access the video feed of an iOS or Android device as a PVRApi (or OpenGL ES) texture. This demo displays this texture on the screen using a very simple shader that inverts the colours.
</p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/07_IntroducingPOD/OGLES/OGLESIntroducingPOD.cpp" target="_blank">OGLESIntroducingPOD.cpp</a> | <a href="../../Examples/Beginner/07_IntroducingPOD/OGLES/Build/" target="_blank">Projects</a></p>
<p class="source"><a href="../../Examples/Beginner/06_IntroducingPVRCamera/OGLES/OGLESIntroducingPVRCamera.cpp" target="_blank">OGLESIntroducingPVRCamera.cpp</a> | <a href="../../Examples/Beginner/06_IntroducingPVRCamera/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul><div id="Intermediate""><h2>Intermediate</h2><ul class="accordion">
<li id="AlphaBlend">
<div class="title">
<a href="../../Examples/Intermediate/AlphaBlend/AlphaBlend.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/AlphaBlend/AlphaBlend.png" alt="AlphaBlend" /></a>
<input type="checkbox" id="AlphaBlendFull2">
<label for="AlphaBlendFull2" title="Click for more information"><h3>AlphaBlend</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course illustrates how transparency effects can be achieved with blending and the use of some common blending modes.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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().
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/AlphaBlend/OGLES/OGLESAlphaBlend.cpp" target="_blank">OGLESAlphaBlend.cpp</a> | <a href="../../Examples/Intermediate/AlphaBlend/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="AntialiasedLines">
<div class="title">
<a href="../../Examples/Intermediate/AntialiasedLines/AntialiasedLines.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/AntialiasedLines/AntialiasedLines.png" alt="AntialiasedLines" /></a>
<input type="checkbox" id="AntialiasedLinesFull2">
<label for="AntialiasedLinesFull2" title="Click for more information"><h3>AntialiasedLines</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to render anti-aliased lines without enabling full screen anti-aliasing.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Full screen antialiasing can be too expensive or unavailable on some platforms, but it is possible to render smooth lines without it. This training course shows how to render anti-aliased lines with round caps using texture filtering and blending.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/AntialiasedLines/OGLES/OGLESAntialiasedLines.cpp" target="_blank">OGLESAntialiasedLines.cpp</a> | <a href="../../Examples/Intermediate/AntialiasedLines/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="FiveSpheres">
<div class="title">
<a href="../../Examples/Intermediate/FiveSpheres/FiveSpheres.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/FiveSpheres/FiveSpheres.png" alt="FiveSpheres" /></a>
<input type="checkbox" id="FiveSpheresFull2">
<label for="FiveSpheresFull2" title="Click for more information"><h3>FiveSpheres</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of different primitive types.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demo displays five spheres, each one displaying a different primitive type. These types are GL_POINTS, GL_TRIANGLES, GL_LINE_STRIP, GL_TRIANGLE_FAN, and GL_TRIANGLE_STRIP.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/FiveSpheres/OGLES/OGLESFiveSpheres.cpp" target="_blank">OGLESFiveSpheres.cpp</a> | <a href="../../Examples/Intermediate/FiveSpheres/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Lighting">
<div class="title">
<a href="../../Examples/Intermediate/Lighting/Lighting.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Lighting/Lighting.png" alt="Lighting" /></a>
<input type="checkbox" id="LightingFull2">
<label for="LightingFull2" title="Click for more information"><h3>Lighting</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of a model being lit with 8 point lights at high performance.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demo shows a sphere lit by 8 differently coloured spotlights using ambient, diffuse and specular components. Ambient light is a light source of fixed intensity and colour, whilst a diffuse reflection is a reflection of light from a surface at many angles rather than just one. A specular highlight is a visual cue regarding the shape and location of an object in respect to the light source in a scene.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Lighting/OGLES/OGLESLighting.cpp" target="_blank">OGLESLighting.cpp</a> | <a href="../../Examples/Intermediate/Lighting/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="MatrixPalette">
<div class="title">
<a href="../../Examples/Intermediate/MatrixPalette/MatrixPalette.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/MatrixPalette/MatrixPalette.png" alt="MatrixPalette" /></a>
<input type="checkbox" id="MatrixPaletteFull2">
<label for="MatrixPaletteFull2" title="Click for more information"><h3>MatrixPalette</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to use matrix palettes to animate a skinned character.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This training course demonstrates how to use matrix palettes to animate a skinned character loaded from a .pod file. A skinned character is an animated mesh which has had a texture applied to it.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/MatrixPalette/OGLES/OGLESMatrixPalette.cpp" target="_blank">OGLESMatrixPalette.cpp</a> | <a href="../../Examples/Intermediate/MatrixPalette/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Multitexture">
<div class="title">
<a href="../../Examples/Intermediate/Multitexture/Multitexture.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Multitexture/Multitexture.png" alt="Multitexture" /></a>
<input type="checkbox" id="MultitextureFull2">
<label for="MultitextureFull2" title="Click for more information"><h3>Multitexture</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course is an example of how to combine multiple textures.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This training course demonstrates how to combine multiple textures in six different ways using glTexEnvf(GL_TEXTURE_ENV, GL_COMBINE_RGB, param). "param" can be any of the following six options: GL_MODULATE, GL_ADD, GL_ADD_SIGNED , GL_REPLACE, GL_SUBTRACT, GL_DOT3_RGB.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Multitexture/OGLES/OGLESMultitexture.cpp" target="_blank">OGLESMultitexture.cpp</a> | <a href="../../Examples/Intermediate/Multitexture/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="OptimizeMesh">
<div class="title">
<a href="../../Examples/Intermediate/OptimizeMesh/OptimizeMesh.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/OptimizeMesh/OptimizeMesh.png" alt="OptimizeMesh" /></a>
<input type="checkbox" id="OptimizeMeshFull2">
<label for="OptimizeMeshFull2" title="Click for more information"><h3>OptimizeMesh</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of the performance gained when using optimized indexed triangle lists.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Shows a textured model rendered in two different modes: one using a non-optimized triangle list and one using an optimized triangle list. The demo switches modes after a few seconds or after the user presses the action key. Both models were exported with the PVRGeoPOD plug-in from the SDK. The optimized triangle list case was generated using the PVRTTriStrip triangle sorting option from PVRGeoPOD.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/OptimizeMesh/OGLES/OGLESOptimizeMesh.cpp" target="_blank">OGLESOptimizeMesh.cpp</a> | <a href="../../Examples/Intermediate/OptimizeMesh/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="RenderToTexture">
<div class="title">
<a href="../../Examples/Intermediate/RenderToTexture/RenderToTexture.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/RenderToTexture/RenderToTexture.png" alt="RenderToTexture" /></a>
<input type="checkbox" id="RenderToTextureFull2">
<label for="RenderToTextureFull2" title="Click for more information"><h3>RenderToTexture</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates the use of rendering to a texture.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left : Toggles multisampling of the FBOs</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/RenderToTexture/OGLES/OGLESRenderToTexture.cpp" target="_blank">OGLESRenderToTexture.cpp</a> | <a href="../../Examples/Intermediate/RenderToTexture/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ShadowTechniques">
<div class="title">
<a href="../../Examples/Intermediate/ShadowTechniques/ShadowTechniques.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ShadowTechniques/ShadowTechniques.png" alt="ShadowTechniques" /></a>
<input type="checkbox" id="ShadowTechniquesFull2">
<label for="ShadowTechniquesFull2" title="Click for more information"><h3>ShadowTechniques</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of a variety of shadow techniques.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demo illustrates various shadow techniques, such as the dynamic blob method which draws a transparent blob under the character and the blob moves based on the centre of the object. The projected geometry method draws the object "projected" onto the floor plane, only pure black shadows are possible due to multiple polygons being projected into the same location (would give intensity differences in the shadow if transparency would be used). The final method is a projected texture where the projected shadow texture is updated dynamically each frame (generated by rendering the scene from the point of view of the light source).
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ShadowTechniques/OGLES/OGLESShadowTechniques.cpp" target="_blank">OGLESShadowTechniques.cpp</a> | <a href="../../Examples/Intermediate/ShadowTechniques/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ShadowVolume">
<div class="title">
<a href="../../Examples/Intermediate/ShadowVolume/ShadowVolume.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ShadowVolume/ShadowVolume.png" alt="ShadowVolume" /></a>
<input type="checkbox" id="ShadowVolumeFull2">
<label for="ShadowVolumeFull2" title="Click for more information"><h3>ShadowVolume</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to use the PVRTools libraries to create and use shadow volumes.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> 1 : Toggle display of shadow volumes</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ShadowVolume/OGLES/OGLESShadowVolume.cpp" target="_blank">OGLESShadowVolume.cpp</a> | <a href="../../Examples/Intermediate/ShadowVolume/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Skinning">
<div class="title">
<a href="../../Examples/Intermediate/Skinning/Skinning.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Skinning/Skinning.png" alt="Skinning" /></a>
<input type="checkbox" id="SkinningFull2">
<label for="SkinningFull2" title="Click for more information"><h3>Skinning</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to implement hardware accelerated skinning using .pod files.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This training course demonstrates how to implement hardware accelerated skinning using the .pod file loading tools found in the PVRTools library.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Rotate model clockwise/anti-clockwise</p><p> Up/Down : Zoom out/in</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Skinning/OGLES/OGLESSkinning.cpp" target="_blank">OGLESSkinning.cpp</a> | <a href="../../Examples/Intermediate/Skinning/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="StencilBuffer">
<div class="title">
<a href="../../Examples/Intermediate/StencilBuffer/StencilBuffer.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/StencilBuffer/StencilBuffer.png" alt="StencilBuffer" /></a>
<input type="checkbox" id="StencilBufferFull2">
<label for="StencilBufferFull2" title="Click for more information"><h3>StencilBuffer</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to use the stencil buffer to mask areas of the screen when rendering.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/StencilBuffer/OGLES/OGLESStencilBuffer.cpp" target="_blank">OGLESStencilBuffer.cpp</a> | <a href="../../Examples/Intermediate/StencilBuffer/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Trilinear">
<li id="Bumpmap">
<div class="title">
<a href="../../Examples/Intermediate/Trilinear/Trilinear.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Trilinear/Trilinear.png" alt="Trilinear" /></a>
<input type="checkbox" id="TrilinearFull2">
<label for="TrilinearFull2" title="Click for more information"><h3>Trilinear</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This demo illustrates the visual difference between different texture filter modes.
</p></p></div>
<a href="../../Examples/Intermediate/Bumpmap/Bumpmap.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Bumpmap/Bumpmap.png" alt="Bumpmap" /></a>
<input type="checkbox" id="BumpmapFull2">
<label for="BumpmapFull2" title="Click for more information"><h3>Bumpmap</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>This training course demonstrates using a normal map to implement bump mapping using the PowerVR Framework.
</p><small><b>OpenGL ES 2.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demo illustrates the visual difference between the following different texture filter modes: GL_LINEAR (Bilinear with no MIPMapping), GL_LINEAR_MIPMAP_NEAREST (Bilinear with MIPMapping), GL_LINEAR_MIPMAP_LINEAR (Trilinear).
</p></p>
<p>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.
This example can be used as the baseline for rendering an object. Uses different shaders for OpenGL ES 2.x and OpenGL ES 3.x
</p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Trilinear/OGLES/OGLESTrilinear.cpp" target="_blank">OGLESTrilinear.cpp</a> | <a href="../../Examples/Intermediate/Trilinear/OGLES/Build/" target="_blank">Projects</a></p>
<p class="source"><a href="../../Examples/Intermediate/Bumpmap/OGLES/OGLESBumpmap.cpp" target="_blank">OGLESBumpmap.cpp</a> | <a href="../../Examples/Intermediate/Bumpmap/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="UserClipPlanes">
<li id="PostProcessing">
<div class="title">
<a href="../../Examples/Intermediate/UserClipPlanes/UserClipPlanes.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/UserClipPlanes/UserClipPlanes.png" alt="UserClipPlanes" /></a>
<input type="checkbox" id="UserClipPlanesFull2">
<label for="UserClipPlanesFull2" title="Click for more information"><h3>UserClipPlanes</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This demo illustrates how to use user clip planes.
</p></p></div>
<a href="../../Examples/Intermediate/PostProcessing/PostProcessing.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/PostProcessing/PostProcessing.png" alt="PostProcessing" /></a>
<input type="checkbox" id="PostProcessingFull2">
<label for="PostProcessingFull2" title="Click for more information"><h3>PostProcessing</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>This training course demonstrates a simple implementation of a 'bloom' post processing effect.
</p><small><b>OpenGL ES 2.0</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demo illustrates how to use user clip planes. In this case a rotating sphere is shown cut by six user clip planes.
</p></p>
<p>This training course demonstrates a simple implementation of a 'bloom' post processing effect, using multiple PVRApi Render Passes to apply the postprocessing. The bright parts of the picture are extracted in lower resolution in a post processing step, blurred and then added over the final image to create a glow around the object's borders.
</p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p><p>This demo requires 3D hardware which supports user clip planes.
</p></p>
<p><p> Left/Right : Change the rendering mode (Object with bloom, object w/o bloom, bloom textures)</p><p> Up/Down : Increase/Decrease bloom intensity</p><p> Any Action : Pause</p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/UserClipPlanes/OGLES/OGLESUserClipPlanes.cpp" target="_blank">OGLESUserClipPlanes.cpp</a> | <a href="../../Examples/Intermediate/UserClipPlanes/OGLES/Build/" target="_blank">Projects</a></p>
<p class="source"><a href="../../Examples/Intermediate/PostProcessing/OGLES/OGLESPostProcessing.cpp" target="_blank">OGLESPostProcessing.cpp</a> | <a href="../../Examples/Intermediate/PostProcessing/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul><div id="Advanced""><h2>Advanced</h2><ul class="accordion">
<li id="Coverflow">
<div class="title">
<a href="../../Examples/Advanced/Coverflow/Coverflow.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Coverflow/Coverflow.png" alt="Coverflow" /></a>
<input type="checkbox" id="CoverflowFull2">
<label for="CoverflowFull2" title="Click for more information"><h3>Coverflow</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of a coverflow style effect.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Flow covers left/right</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Coverflow/OGLES/OGLESCoverflow.cpp" target="_blank">OGLESCoverflow.cpp</a> | <a href="../../Examples/Advanced/Coverflow/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="EvilSkull">
<div class="title">
<a href="../../Examples/Advanced/EvilSkull/EvilSkull.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/EvilSkull/EvilSkull.png" alt="EvilSkull" /></a>
<input type="checkbox" id="EvilSkullFull2">
<label for="EvilSkullFull2" title="Click for more information"><h3>EvilSkull</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of morphing in combination with multi-texturing.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Morphing creates the final object using weighted blending between a number of different configurations of the same object. Each configuration controls a certain aspect of the object. In the case of EvilSkull the different configurations represent the position of the eyebrows and cheekbones. By setting different weights it is possible to generate a huge variety of facial expressions. Meanwhile the background shows multi-texturing with two independently animated layers.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/EvilSkull/OGLES/OGLESEvilSkull.cpp" target="_blank">OGLESEvilSkull.cpp</a> | <a href="../../Examples/Advanced/EvilSkull/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="FilmTV">
<li id="DeferredShading">
<div class="title">
<a href="../../Examples/Advanced/FilmTV/FilmTV.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/FilmTV/FilmTV.png" alt="FilmTV" /></a>
<input type="checkbox" id="FilmTVFull2">
<label for="FilmTVFull2" title="Click for more information"><h3>FilmTV</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of a render to texture effect.
</p></p></div>
<a href="../../Examples/Advanced/DeferredShading/DeferredShading.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/DeferredShading/DeferredShading.png" alt="DeferredShading" /></a>
<input type="checkbox" id="DeferredShadingFull2">
<label for="DeferredShadingFull2" title="Click for more information"><h3>DeferredShading</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Demonstrates deferred shading using Pixel Local Storage (PLS), or Multiple Render Targets(MRT).
</p><small><b>OpenGL ES 3.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/FilmTV/OGLES/OGLESFilmTV.cpp" target="_blank">OGLESFilmTV.cpp</a> | <a href="../../Examples/Advanced/FilmTV/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Fractal">
<div class="title">
<a href="../../Examples/Advanced/Fractal/Fractal.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Fractal/Fractal.png" alt="Fractal" /></a>
<input type="checkbox" id="FractalFull2">
<label for="FractalFull2" title="Click for more information"><h3>Fractal</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of drawing a fractal using render to texture.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Fractal/OGLES/OGLESFractal.cpp" target="_blank">OGLESFractal.cpp</a> | <a href="../../Examples/Advanced/Fractal/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Fur">
<div class="title">
<a href="../../Examples/Advanced/Fur/Fur.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Fur/Fur.png" alt="Fur" /></a>
<input type="checkbox" id="FurFull2">
<label for="FurFull2" title="Click for more information"><h3>Fur</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of a fur effect on a simple duck model.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Demonstrates a method for rendering fur. Multiple translucent "shells" of the original model are rendered, each slightly larger than the previous. The texture applied to these layers contains a "dot" in the alpha channel to show where a hair passes through the "shell".
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle Left/Right through explanation pages</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Fur/OGLES/OGLESFur.cpp" target="_blank">OGLESFur.cpp</a> | <a href="../../Examples/Advanced/Fur/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Mouse">
<div class="title">
<a href="../../Examples/Advanced/Mouse/Mouse.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Mouse/Mouse.png" alt="Mouse" /></a>
<input type="checkbox" id="MouseFull2">
<label for="MouseFull2" title="Click for more information"><h3>Mouse</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of a cell-shading (a.k.a. Toon shading) effect applied on an animated model.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Cell-Shading is the "art" of rendering your objects to look like cartoons. This demo shows a dancing mouse with a hard black outline and banded shading to achieve the desired cartoon-look. Both effects are set up using optimised software routines.
</p></p>
<p>Traditional rendering algorithms submit geometry and immediately apply shading effects to the rasterized primitives. Complex shading effects may require multiple render passes to produce the final pixel color, with the geometry submitted every pass. Deferred shading is an alternative rendering technique that submits the scene geometry once, storing per-pixel attributes into local video memory to be used in the subsequent rendering passes.
In these later passes, light volume primitives are rendered, and the per-pixel attributes contained in the buffer are retrieved at a 1:1 mapping ratio so that each pixel is shaded individually.
In the PowerVR architecture, the user can use fast on-chip memory instead of Multiple Render Targets, by utilising the Pixel Local Storage extension.
If running from a command line, add -forcemrt to force Multiple Render Targets rendering.
Requires at least OpenGL ES 3.0 capability for either MRT or PLS. Requires the extension GL_EXT_shader_pixel_local_storage for PLS.
</p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><p> Action1 : Pause</p><p> Action2 : Orbit camera</p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Mouse/OGLES/OGLESMouse.cpp" target="_blank">OGLESMouse.cpp</a> | <a href="../../Examples/Advanced/Mouse/OGLES/Build/" target="_blank">Projects</a></p>
<p class="source"><a href="../../Examples/Advanced/DeferredShading/OGLES/OGLESDeferredShading.cpp" target="_blank">OGLESDeferredShading.cpp</a> | <a href="../../Examples/Advanced/DeferredShading/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Navigation">
<li id="ExampleUI">
<div class="title">
<a href="../../Examples/Advanced/Navigation/Navigation.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Navigation/Navigation.png" alt="Navigation" /></a>
<input type="checkbox" id="NavigationFull2">
<label for="NavigationFull2" title="Click for more information"><h3>Navigation</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of how to implement rendering algorithms for Navigation software.
</p></p></div>
<a href="../../Examples/Advanced/ExampleUI/ExampleUI.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/ExampleUI/ExampleUI.png" alt="ExampleUI" /></a>
<input type="checkbox" id="ExampleUIFull2">
<label for="ExampleUIFull2" title="Click for more information"><h3>ExampleUI</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Use the PVRUIRenderer to efficiently render sprites to form a comples User Interface.
</p><small><b>OpenGL ES 2.0, OpenGL ES 3.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p>Rendering graphical user interfaces can quickly become overly complex. The PVRUIRenderer can assist in rendering a lot of sprites with different complicated transformations, while remaining crisp and responsive. Usability and performance optimizations can both be foun in this example, such as UIRenderer transformation groups and texture atlases. Shaders available for OpenGL ES 2.x and 3.x.
</p>
<p><strong>Controls:</strong></p>
<p><p> Up : Toggle pause/un-pause</p><p> Esc : Close the application.</p></p>
<p><p> Left/Right : Change UI Page</p><p> Quit : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Navigation/OGLES/OGLESNavigation.cpp" target="_blank">OGLESNavigation.cpp</a> | <a href="../../Examples/Advanced/Navigation/OGLES/Build/" target="_blank">Projects</a></p>
<p class="source"><a href="../../Examples/Advanced/ExampleUI/OGLES/OGLESExampleUI.cpp" target="_blank">OGLESExampleUI.cpp</a> | <a href="../../Examples/Advanced/ExampleUI/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Navigation3D">
<li id="Glass">
<div class="title">
<a href="../../Examples/Advanced/Navigation3D/Navigation3D.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Navigation3D/Navigation3D.png" alt="Navigation3D" /></a>
<input type="checkbox" id="Navigation3DFull2">
<label for="Navigation3DFull2" title="Click for more information"><h3>Navigation3D</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of how to implement rendering algorithms for 3D Navigation software.
</p></p></div>
<a href="../../Examples/Advanced/Glass/Glass.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Glass/Glass.png" alt="Glass" /></a>
<input type="checkbox" id="GlassFull2">
<label for="GlassFull2" title="Click for more information"><h3>Glass</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Demonstrates dynamic reflection and refraction using a dual paraboloid environment map.
</p><small><b>OpenGL ES 2.0/3.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p>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. Shaders available for OpenGL ES 2.x and 3.x.
</p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><p> Quit : Close the application</p><p> Left/Right : Change the effect between combinations of Reflection and Refraction/Chromatic Dispersion</p><p> Up/Down : Look up or down.</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Navigation3D/OGLES/OGLESNavigation3D.cpp" target="_blank">OGLESNavigation3D.cpp</a> | <a href="../../Examples/Advanced/Navigation3D/OGLES/Build/" target="_blank">Projects</a></p>
<p class="source"><a href="../../Examples/Advanced/Glass/OGLES/OGLESGlass.cpp" target="_blank">OGLESGlass.cpp</a> | <a href="../../Examples/Advanced/Glass/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
......@@ -650,15 +305,16 @@ OpenGL ES is a cross-platform API for 2D and 3D graphics on embedded systems suc
<a href="../../Examples/Advanced/PVRScopeExample/PVRScopeExample.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/PVRScopeExample/PVRScopeExample.png" alt="PVRScopeExample" /></a>
<input type="checkbox" id="PVRScopeExampleFull2">
<label for="PVRScopeExampleFull2" title="Click for more information"><h3>PVRScopeExample</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Demonstrates the use of PVRScope and the example graphing code.
</p></p></div>
<div class="ShortDescription" id="TexturingShort"><p>Demonstrates the use of PVRScope and the example graphing code.
</p><small><b>OpenGL ES 2.0, OpenGL ES 3.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p>This demo uses a simple PBR-style shader and shows the use of PVRScope that allows an application to return performance statistics from the GPU in real time. It uses the example graphing code to render a graph of the selected counters on the screen. For further details, refer to the PVRScope User Manual.
</p>
<p><strong>Controls:</strong></p>
<p></p>
<p><p> Quit : Close demo</p><p> Up/Down : Select a counter from the available list of HW counters</p><p> Action1 : Add/remove selected counter to the graph</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/PVRScopeExample/OGLES/OGLESPVRScopeExample.cpp" target="_blank">OGLESPVRScopeExample.cpp</a> | <a href="../../Examples/Advanced/PVRScopeExample/OGLES/Build/" target="_blank">Projects</a></p>
</div>
......@@ -670,97 +326,64 @@ OpenGL ES is a cross-platform API for 2D and 3D graphics on embedded systems suc
<a href="../../Examples/Advanced/PVRScopeRemote/PVRScopeRemote.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/PVRScopeRemote/PVRScopeRemote.png" alt="PVRScopeRemote" /></a>
<input type="checkbox" id="PVRScopeRemoteFull2">
<label for="PVRScopeRemoteFull2" title="Click for more information"><h3>PVRScopeRemote</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Demonstrates the use of PVRScope's remote communication features.
</p></p></div>
<div class="ShortDescription" id="TexturingShort"><p>Demonstrates the use of PVRScope's remote communication features.
</p><small><b>OpenGL ES 2.0, OpenGL ES 3.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p>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. You can then edit from the PVRTune GUI any variables that the application has exposed, in this case the shaders and material properties of the statue displayed.
</p>
<p><strong>Controls:</strong></p>
<p></p>
<p><p> Quit : Close demo</p><p> PVRTune : Control demo variables through PVRTune</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/PVRScopeRemote/OGLES/OGLESPVRScopeRemote.cpp" target="_blank">OGLESPVRScopeRemote.cpp</a> | <a href="../../Examples/Advanced/PVRScopeRemote/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Particles">
<div class="title">
<a href="../../Examples/Advanced/Particles/Particles.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Particles/Particles.png" alt="Particles" /></a>
<input type="checkbox" id="ParticlesFull2">
<label for="ParticlesFull2" title="Click for more information"><h3>Particles</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of particle effects with frame buffer blending.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demo shows a physics based particle effect displaying a total of 900 particles (600 real + 300 reflected). This effect was generated using alpha blending, which involves combining a translucent foreground color with a background colour, producing a new blended color as a result.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Particles/OGLES/OGLESParticles.cpp" target="_blank">OGLESParticles.cpp</a> | <a href="../../Examples/Advanced/Particles/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PolyBump">
<li id="ParticleSystem">
<div class="title">
<a href="../../Examples/Advanced/PolyBump/PolyBump.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/PolyBump/PolyBump.png" alt="PolyBump" /></a>
<input type="checkbox" id="PolyBumpFull2">
<label for="PolyBumpFull2" title="Click for more information"><h3>PolyBump</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This demonstration illustrates the PolyBump technology developed by Crytek (commonly referred to as normal or bump mapping).
</p></p></div>
<a href="../../Examples/Advanced/ParticleSystem/ParticleSystem.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/ParticleSystem/ParticleSystem.png" alt="ParticleSystem" /></a>
<input type="checkbox" id="ParticleSystemFull2">
<label for="ParticleSystemFull2" title="Click for more information"><h3>ParticleSystem</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>Shows how to implement a simple particle system using GPGPU.
</p><small><b>OpenGL ES 3.1
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demo illustrates the Polybump technology developed by Crytek to enhance 3D-rendering quality without increasing the overhead in real-time rendering. It allows users to create and render an extremely low poly model using per pixel DOT3 lighting. The DOT3 NormalMap is automatically generated from a high poly model. As a result when displaying the low polygon model with the DOT3 map generated from the high polygon object there is virtually no visible difference between the two. Rendering time is greatly decreased and bandwidth is compressed. In this demo a model of a detailed human head is show even though there are only 276 polygons in the model.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> 1 : Toggle normal map on/off</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/PolyBump/OGLES/OGLESPolyBump.cpp" target="_blank">OGLESPolyBump.cpp</a> | <a href="../../Examples/Advanced/PolyBump/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Skybox">
<div class="title">
<a href="../../Examples/Advanced/Skybox/Skybox.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Skybox/Skybox.png" alt="Skybox" /></a>
<input type="checkbox" id="SkyboxFull2">
<label for="SkyboxFull2" title="Click for more information"><h3>Skybox</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of a skybox using PVRTC.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>A demonstration of a skybox using PVRTC. The PVRTCs are compressed using PVRTexTool's skybox compression feature; a special tool used to remove the hard edges of skyboxes.
</p></p>
<p>The demo utilises GPGPU (GPU Compute) to implement a particle system, which advanced and then rendered every frame, without any CPU editing of the data. 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 the Compute and the Rendering part of a simulation.
Requires OpenGL ES 3.1 capable platform.
</p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><p> Quit : Close demo</p><p> Left/Right : Decrease/increase number of particles</p><p> Up/Down : Switch between GPU Compute and CPU Particle System implementation.</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Skybox/OGLES/OGLESSkybox.cpp" target="_blank">OGLESSkybox.cpp</a> | <a href="../../Examples/Advanced/Skybox/OGLES/Build/" target="_blank">Projects</a></p>
<p class="source"><a href="../../Examples/Advanced/ParticleSystem/OGLES/OGLESParticleSystem.cpp" target="_blank">OGLESParticleSystem.cpp</a> | <a href="../../Examples/Advanced/ParticleSystem/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Vase">
<li id="Skinning">
<div class="title">
<a href="../../Examples/Advanced/Vase/Vase.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Vase/Vase.png" alt="Vase" /></a>
<input type="checkbox" id="VaseFull2">
<label for="VaseFull2" title="Click for more information"><h3>Vase</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This demo shows a transparent vase with dynamic reflections on its metallic sections.
</p></p></div>
<a href="../../Examples/Advanced/Skinning/Skinning.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Skinning/Skinning.png" alt="Skinning" /></a>
<input type="checkbox" id="SkinningFull2">
<label for="SkinningFull2" title="Click for more information"><h3>Skinning</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>This demo shows a scene with a combination of a skinned, bumpmapped character with non-skinned, non-bumpmapped objects.
</p><small><b>OpenGL ES 2.0/3.0
</small></b></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demo shows a transparent vase with dynamic reflections on its metallic sections. The effect is achieved through a mixture of texturing blending, and a two pass render that draws both the back and front face of the glass object separately with different culling modes.
</p></p>
<p>The Skinning demo shows a Skinned Character in combination with bump mapping. 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. PVRAssets and POD files support skinning. either full transformation Matrices, or Quaternion rotation with Scaling and Translation vectors. The provided POD file contains matrix animation.
This example is using BoneBatching, which separates the mesh in smaller matrix palettes (Bone Batches) so that they can fit in the maximum number of allowed Uniform variables.
Up to 4 matrices from the palette, along with 4 weights can used for each vertext by the vertex shader to update the position to obtain the current animation frame position.
Shaders provided for OpenGL ES 2.0 and OpenGL ES 3.0
</p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><p> Action1/2/3 : Pause</p><p> Esc : Close</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Vase/OGLES/OGLESVase.cpp" target="_blank">OGLESVase.cpp</a> | <a href="../../Examples/Advanced/Vase/OGLES/Build/" target="_blank">Projects</a></p>
<p class="source"><a href="../../Examples/Advanced/Skinning/OGLES/OGLESSkinning.cpp" target="_blank">OGLESSkinning.cpp</a> | <a href="../../Examples/Advanced/Skinning/OGLES/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
......
<!DOCTYPE html>
<html lang="en">
<head>
<title>The PowerVR SDK Browser</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="./images/img-icon.png">
</head>
<body>
<div id="GlobalHeaderContainer">
<div id="GlobalHeader">
<div class="logo">
<a href="http://www.powervrinsider.com" target="_blank"><img src="./images/PVRlogo.png" width="40%" height="40%" /></a>
</div>
<div class="sitetitle">PowerVR SDK Browser</div>
</div>
</div>
<div id="NavContainer">
<nav>
<div class="navlink">
<a href="Home.html">Home</a>
</div>
<div class="navlink">
<a href="GettingStarted.html">Getting Started</a>
</div>
<div class="navlink">
<a href="Examples.html" class="current">Examples</a>
</div>
<div class="navlink">
<a href="Framework.html">Framework</a>
</div>
<div class="navlink">
<a href="Documentation.html">Documentation</a>
</div>
<div class="navlink">
<a href="PowerVRTools.html">PowerVR Tools</a>
</div>
<div class="navlink">
<a href="ReleaseNotes.html">Release Notes</a>
</div>
<div class="navlink">
<a href="Licence.html">EULA</a>
</div>
<div class="navlink">
<a href="Contact.html">Contact Us</a>
</div>
</nav>
</div>
<!--API_TAB-->
<div id="SubNavContainer"><nav><div class="subnavlink"><a href="./OGLES.html">OpenGL ES 1.x</a></div>
<div class="subnavlink"><a href="./OGLES2.html">OpenGL ES 2.0</a></div>
<div class="subnavlink"><a href="./OGLES3.html">OpenGL ES 3.x</a></div>
</nav></div>
<div class="content">
<div id="Section" class="section">
<!--API_DESCRIPTION-->
<h1>OpenGL ES 2.0 Examples</h1>
<p>
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.
</p>
</OGLES2>
<p><a href="#Beginner" class="link">Beginner</a> | <a href="#Intermediate" class="link">Intermediate</a> | <a href="#Advanced" class="link">Advanced</a></p>
<!--EXAMPLE_TEMPLATE-->
<div id="Beginner""><h2>Beginner</h2><ul class="accordion">
<li id="HelloAPI">
<div class="title">
<a href="../../Examples/Beginner/01_HelloAPI/HelloAPI.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/01_HelloAPI/HelloAPI.png" alt="HelloAPI" /></a>
<input type="checkbox" id="HelloAPIFull2">
<label for="HelloAPIFull2" title="Click for more information"><h3>HelloAPI</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Draw a triangle to the screen using hardware acceleration.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/01_HelloAPI/OGLES2/OGLES2HelloAPI_Windows.cpp" target="_blank">OGLES2HelloAPI_Windows.cpp</a> | <a href="../../Examples/Beginner/01_HelloAPI/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPVRShell">
<div class="title">
<a href="../../Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.png" alt="IntroducingPVRShell" /></a>
<input type="checkbox" id="IntroducingPVRShellFull2">
<label for="IntroducingPVRShellFull2" title="Click for more information"><h3>IntroducingPVRShell</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PVRShell library.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/02_IntroducingPVRShell/OGLES2/OGLES2IntroducingPVRShell.cpp" target="_blank">OGLES2IntroducingPVRShell.cpp</a> | <a href="../../Examples/Beginner/02_IntroducingPVRShell/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Texturing">
<div class="title">
<a href="../../Examples/Beginner/03_Texturing/Texturing.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/03_Texturing/Texturing.png" alt="Texturing" /></a>
<input type="checkbox" id="TexturingFull2">
<label for="TexturingFull2" title="Click for more information"><h3>Texturing</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to apply a texture to a polygon in :API:.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/03_Texturing/OGLES2/OGLES2Texturing.cpp" target="_blank">OGLES2Texturing.cpp</a> | <a href="../../Examples/Beginner/03_Texturing/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="BasicTnL">
<div class="title">
<a href="../../Examples/Beginner/04_BasicTnL/BasicTnL.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/04_BasicTnL/BasicTnL.png" alt="BasicTnL" /></a>
<input type="checkbox" id="BasicTnLFull2">
<label for="BasicTnLFull2" title="Click for more information"><h3>BasicTnL</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course consists of a demonstration of basic transformation and lighting.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This training course consists of a demonstration of basic transformation and lighting, growing on the basic drawing techniques learnt in HelloTriangle.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/04_BasicTnL/OGLES2/OGLES2BasicTnL.cpp" target="_blank">OGLES2BasicTnL.cpp</a> | <a href="../../Examples/Beginner/04_BasicTnL/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPVRTools">
<div class="title">
<a href="../../Examples/Beginner/05_IntroducingPVRTools/IntroducingPVRTools.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/05_IntroducingPVRTools/IntroducingPVRTools.png" alt="IntroducingPVRTools" /></a>
<input type="checkbox" id="IntroducingPVRToolsFull2">
<label for="IntroducingPVRToolsFull2" title="Click for more information"><h3>IntroducingPVRTools</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PVRTools libraries.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/05_IntroducingPVRTools/OGLES2/OGLES2IntroducingPVRTools.cpp" target="_blank">OGLES2IntroducingPVRTools.cpp</a> | <a href="../../Examples/Beginner/05_IntroducingPVRTools/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPrint3D">
<div class="title">
<a href="../../Examples/Beginner/06_IntroducingPrint3D/IntroducingPrint3D.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/06_IntroducingPrint3D/IntroducingPrint3D.png" alt="IntroducingPrint3D" /></a>
<input type="checkbox" id="IntroducingPrint3DFull2">
<label for="IntroducingPrint3DFull2" title="Click for more information"><h3>IntroducingPrint3D</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the Print3D class featured within the PVRTools library.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/06_IntroducingPrint3D/OGLES2/OGLES2IntroducingPrint3D.cpp" target="_blank">OGLES2IntroducingPrint3D.cpp</a> | <a href="../../Examples/Beginner/06_IntroducingPrint3D/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPOD">
<div class="title">
<a href="../../Examples/Beginner/07_IntroducingPOD/IntroducingPOD.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/07_IntroducingPOD/IntroducingPOD.png" alt="IntroducingPOD" /></a>
<input type="checkbox" id="IntroducingPODFull2">
<label for="IntroducingPODFull2" title="Click for more information"><h3>IntroducingPOD</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PowerVR Object Data (.pod) format.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/07_IntroducingPOD/OGLES2/OGLES2IntroducingPOD.cpp" target="_blank">OGLES2IntroducingPOD.cpp</a> | <a href="../../Examples/Beginner/07_IntroducingPOD/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPFX">
<div class="title">
<a href="../../Examples/Beginner/08_IntroducingPFX/IntroducingPFX.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/08_IntroducingPFX/IntroducingPFX.png" alt="IntroducingPFX" /></a>
<input type="checkbox" id="IntroducingPFXFull2">
<label for="IntroducingPFXFull2" title="Click for more information"><h3>IntroducingPFX</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to use the PVRTools library to load and use .pfx files.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/08_IntroducingPFX/OGLES2/OGLES2IntroducingPFX.cpp" target="_blank">OGLES2IntroducingPFX.cpp</a> | <a href="../../Examples/Beginner/08_IntroducingPFX/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul><div id="Intermediate""><h2>Intermediate</h2><ul class="accordion">
<li id="AlphaBlend">
<div class="title">
<a href="../../Examples/Intermediate/AlphaBlend/AlphaBlend.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/AlphaBlend/AlphaBlend.png" alt="AlphaBlend" /></a>
<input type="checkbox" id="AlphaBlendFull2">
<label for="AlphaBlendFull2" title="Click for more information"><h3>AlphaBlend</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course illustrates how transparency effects can be achieved with blending and the use of some common blending modes.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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().
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/AlphaBlend/OGLES2/OGLES2AlphaBlend.cpp" target="_blank">OGLES2AlphaBlend.cpp</a> | <a href="../../Examples/Intermediate/AlphaBlend/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="AlphaTest">
<div class="title">
<a href="../../Examples/Intermediate/AlphaTest/AlphaTest.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/AlphaTest/AlphaTest.png" alt="AlphaTest" /></a>
<input type="checkbox" id="AlphaTestFull2">
<label for="AlphaTestFull2" title="Click for more information"><h3>AlphaTest</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course illustrates how to perform alpha testing and provides a visual comparison between alpha blending and alpha testing.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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).
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/AlphaTest/OGLES2/OGLES2AlphaTest.cpp" target="_blank">OGLES2AlphaTest.cpp</a> | <a href="../../Examples/Intermediate/AlphaTest/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="AnisotropicLighting">
<div class="title">
<a href="../../Examples/Intermediate/AnisotropicLighting/AnisotropicLighting.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/AnisotropicLighting/AnisotropicLighting.png" alt="AnisotropicLighting" /></a>
<input type="checkbox" id="AnisotropicLightingFull2">
<label for="AnisotropicLightingFull2" title="Click for more information"><h3>AnisotropicLighting</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>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.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right Arrow : Toggle effect</p><p> Esc : Close application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/AnisotropicLighting/OGLES2/OGLES2AnisotropicLighting.cpp" target="_blank">OGLES2AnisotropicLighting.cpp</a> | <a href="../../Examples/Intermediate/AnisotropicLighting/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Bloom">
<div class="title">
<a href="../../Examples/Intermediate/Bloom/Bloom.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Bloom/Bloom.png" alt="Bloom" /></a>
<input type="checkbox" id="BloomFull2">
<label for="BloomFull2" title="Click for more information"><h3>Bloom</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a simple implementation of a 'bloom' effect.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Up/Down : Toggle the bloom effect On/Off</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Bloom/OGLES2/OGLES2Bloom.cpp" target="_blank">OGLES2Bloom.cpp</a> | <a href="../../Examples/Intermediate/Bloom/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Bumpmap">
<div class="title">
<a href="../../Examples/Intermediate/Bumpmap/Bumpmap.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Bumpmap/Bumpmap.png" alt="Bumpmap" /></a>
<input type="checkbox" id="BumpmapFull2">
<label for="BumpmapFull2" title="Click for more information"><h3>Bumpmap</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates an example of using a normal map to implement bump mapping.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Bumpmap/OGLES2/OGLES2Bumpmap.cpp" target="_blank">OGLES2Bumpmap.cpp</a> | <a href="../../Examples/Intermediate/Bumpmap/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="CellShading">
<div class="title">
<a href="../../Examples/Intermediate/CellShading/CellShading.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/CellShading/CellShading.png" alt="CellShading" /></a>
<input type="checkbox" id="CellShadingFull2">
<label for="CellShadingFull2" title="Click for more information"><h3>CellShading</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to implement cell shading.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/CellShading/OGLES2/OGLES2CellShading.cpp" target="_blank">OGLES2CellShading.cpp</a> | <a href="../../Examples/Intermediate/CellShading/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ComplexLighting">
<div class="title">
<a href="../../Examples/Intermediate/ComplexLighting/ComplexLighting.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ComplexLighting/ComplexLighting.png" alt="ComplexLighting" /></a>
<input type="checkbox" id="ComplexLightingFull2">
<label for="ComplexLightingFull2" title="Click for more information"><h3>ComplexLighting</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to implement complex lighting techniques.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle through the available modes</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ComplexLighting/OGLES2/OGLES2ComplexLighting.cpp" target="_blank">OGLES2ComplexLighting.cpp</a> | <a href="../../Examples/Intermediate/ComplexLighting/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="DisplacementMap">
<div class="title">
<a href="../../Examples/Intermediate/DisplacementMap/DisplacementMap.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/DisplacementMap/DisplacementMap.png" alt="DisplacementMap" /></a>
<input type="checkbox" id="DisplacementMapFull2">
<label for="DisplacementMapFull2" title="Click for more information"><h3>DisplacementMap</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates displacement mapping using a texture read from the vertex shader.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/DisplacementMap/OGLES2/OGLES2DisplacementMap.cpp" target="_blank">OGLES2DisplacementMap.cpp</a> | <a href="../../Examples/Intermediate/DisplacementMap/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="EdgeDetection">
<div class="title">
<a href="../../Examples/Intermediate/EdgeDetection/EdgeDetection.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/EdgeDetection/EdgeDetection.png" alt="EdgeDetection" /></a>
<input type="checkbox" id="EdgeDetectionFull2">
<label for="EdgeDetectionFull2" title="Click for more information"><h3>EdgeDetection</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a means of simple edge detection.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Up/Down : Cycle through highlighting modes</p><p> Left : Decrease the width of edge highlights</p><p> Right : Increase the width of edge highlights</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/EdgeDetection/OGLES2/OGLES2EdgeDetection.cpp" target="_blank">OGLES2EdgeDetection.cpp</a> | <a href="../../Examples/Intermediate/EdgeDetection/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="FastTnL">
<div class="title">
<a href="../../Examples/Intermediate/FastTnL/FastTnL.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/FastTnL/FastTnL.png" alt="FastTnL" /></a>
<input type="checkbox" id="FastTnLFull2">
<label for="FastTnLFull2" title="Click for more information"><h3>FastTnL</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course serves as an example of a fast transformation and lighting vertex shader.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/FastTnL/OGLES2/OGLES2FastTnL.cpp" target="_blank">OGLES2FastTnL.cpp</a> | <a href="../../Examples/Intermediate/FastTnL/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Fog">
<div class="title">
<a href="../../Examples/Intermediate/Fog/Fog.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Fog/Fog.png" alt="Fog" /></a>
<input type="checkbox" id="FogFull2">
<label for="FogFull2" title="Click for more information"><h3>Fog</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to create a fog effect using shaders.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle fog mode</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Fog/OGLES2/OGLES2Fog.cpp" target="_blank">OGLES2Fog.cpp</a> | <a href="../../Examples/Intermediate/Fog/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="FresnelReflections">
<div class="title">
<a href="../../Examples/Intermediate/FresnelReflections/FresnelReflections.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/FresnelReflections/FresnelReflections.png" alt="FresnelReflections" /></a>
<input type="checkbox" id="FresnelReflectionsFull2">
<label for="FresnelReflectionsFull2" title="Click for more information"><h3>FresnelReflections</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates an implementation of Fresnel reflection.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Up/Down : Increase/Decrease the refractive index of the surface material</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/FresnelReflections/OGLES2/OGLES2FresnelReflections.cpp" target="_blank">OGLES2FresnelReflections.cpp</a> | <a href="../../Examples/Intermediate/FresnelReflections/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Iridescence">
<div class="title">
<a href="../../Examples/Intermediate/Iridescence/Iridescence.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Iridescence/Iridescence.png" alt="Iridescence" /></a>
<input type="checkbox" id="IridescenceFull2">
<label for="IridescenceFull2" title="Click for more information"><h3>Iridescence</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to implement an iridescence effect.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Up/Down : Increase/Decrease the maximum variation</p><p> Left/Right : Decrease/Increase the maximum thickness</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Iridescence/OGLES2/OGLES2Iridescence.cpp" target="_blank">OGLES2Iridescence.cpp</a> | <a href="../../Examples/Intermediate/Iridescence/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="LevelOfDetail">
<div class="title">
<a href="../../Examples/Intermediate/LevelOfDetail/LevelOfDetail.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/LevelOfDetail/LevelOfDetail.png" alt="LevelOfDetail" /></a>
<input type="checkbox" id="LevelOfDetailFull2">
<label for="LevelOfDetailFull2" title="Click for more information"><h3>LevelOfDetail</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a switch in the detail of an object based on its distance from the camera.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/LevelOfDetail/OGLES2/OGLES2LevelOfDetail.cpp" target="_blank">OGLES2LevelOfDetail.cpp</a> | <a href="../../Examples/Intermediate/LevelOfDetail/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="LightMap">
<div class="title">
<a href="../../Examples/Intermediate/LightMap/LightMap.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/LightMap/LightMap.png" alt="LightMap" /></a>
<input type="checkbox" id="LightMapFull2">
<label for="LightMapFull2" title="Click for more information"><h3>LightMap</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course shows how to use light maps.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/LightMap/OGLES2/OGLES2LightMap.cpp" target="_blank">OGLES2LightMap.cpp</a> | <a href="../../Examples/Intermediate/LightMap/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="MaximumIntensityProjection">
<div class="title">
<a href="../../Examples/Intermediate/MaximumIntensityProjection/MaximumIntensityProjection.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/MaximumIntensityProjection/MaximumIntensityProjection.png" alt="MaximumIntensityProjection" /></a>
<input type="checkbox" id="MaximumIntensityProjectionFull2">
<label for="MaximumIntensityProjectionFull2" title="Click for more information"><h3>MaximumIntensityProjection</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This examples demonstrates a technique known as Maximum Intensity Projection using the EXT_blend_minmax OpenGL ES 2.0 extension.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/MaximumIntensityProjection/OGLES2/OGLES2MaximumIntensityProjection.cpp" target="_blank">OGLES2MaximumIntensityProjection.cpp</a> | <a href="../../Examples/Intermediate/MaximumIntensityProjection/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="MultiThreading">
<div class="title">
<a href="../../Examples/Intermediate/MultiThreading/MultiThreading.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/MultiThreading/MultiThreading.png" alt="MultiThreading" /></a>
<input type="checkbox" id="MultiThreadingFull2">
<label for="MultiThreadingFull2" title="Click for more information"><h3>MultiThreading</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course is an example of how to correctly use synchronisation techniques to achieve multi-threaded rendering.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/MultiThreading/OGLES2/OGLES2MultiThreading_Windows.cpp" target="_blank">OGLES2MultiThreading_Windows.cpp</a> | <a href="../../Examples/Intermediate/MultiThreading/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="MultipleRenderTargets">
<div class="title">
<a href="../../Examples/Intermediate/MultipleRenderTargets/MultipleRenderTargets.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/MultipleRenderTargets/MultipleRenderTargets.png" alt="MultipleRenderTargets" /></a>
<input type="checkbox" id="MultipleRenderTargetsFull2">
<label for="MultipleRenderTargetsFull2" title="Click for more information"><h3>MultipleRenderTargets</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use multiple render targets to output data to several different surfaces within a single pass.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/MultipleRenderTargets/OGLES2/OGLES2MultipleRenderTargets.cpp" target="_blank">OGLES2MultipleRenderTargets.cpp</a> | <a href="../../Examples/Intermediate/MultipleRenderTargets/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="OcclusionQueries">
<div class="title">
<a href="../../Examples/Intermediate/OcclusionQueries/OcclusionQueries.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/OcclusionQueries/OcclusionQueries.png" alt="OcclusionQueries" /></a>
<input type="checkbox" id="OcclusionQueriesFull2">
<label for="OcclusionQueriesFull2" title="Click for more information"><h3>OcclusionQueries</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use occlusion queries to determine visible objects.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Shows how to use occlusion queries to determine visible objects and cull invisible ones to increase run-time performance.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/OcclusionQueries/OGLES2/OGLES2OcclusionQueries.cpp" target="_blank">OGLES2OcclusionQueries.cpp</a> | <a href="../../Examples/Intermediate/OcclusionQueries/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ParallaxBumpMap">
<div class="title">
<a href="../../Examples/Intermediate/ParallaxBumpMap/ParallaxBumpMap.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ParallaxBumpMap/ParallaxBumpMap.png" alt="ParallaxBumpMap" /></a>
<input type="checkbox" id="ParallaxBumpMapFull2">
<label for="ParallaxBumpMapFull2" title="Click for more information"><h3>ParallaxBumpMap</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course serves as an example of implementing the parallax bump mapping effect.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ParallaxBumpMap/OGLES2/OGLES2ParallaxBumpMap.cpp" target="_blank">OGLES2ParallaxBumpMap.cpp</a> | <a href="../../Examples/Intermediate/ParallaxBumpMap/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PerturbedUvs">
<div class="title">
<a href="../../Examples/Intermediate/PerturbedUvs/PerturbedUvs.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/PerturbedUvs/PerturbedUvs.png" alt="PerturbedUvs" /></a>
<input type="checkbox" id="PerturbedUvsFull2">
<label for="PerturbedUvsFull2" title="Click for more information"><h3>PerturbedUvs</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates the use of environment mapping with perturbed UVs.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/PerturbedUvs/OGLES2/OGLES2PerturbedUvs.cpp" target="_blank">OGLES2PerturbedUvs.cpp</a> | <a href="../../Examples/Intermediate/PerturbedUvs/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Reflections">
<div class="title">
<a href="../../Examples/Intermediate/Reflections/Reflections.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Reflections/Reflections.png" alt="Reflections" /></a>
<input type="checkbox" id="ReflectionsFull2">
<label for="ReflectionsFull2" title="Click for more information"><h3>Reflections</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates the creation of a reflection effect from a 2D map and a cube map.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Swap mapping type</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Reflections/OGLES2/OGLES2Reflections.cpp" target="_blank">OGLES2Reflections.cpp</a> | <a href="../../Examples/Intermediate/Reflections/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Refraction">
<div class="title">
<a href="../../Examples/Intermediate/Refraction/Refraction.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Refraction/Refraction.png" alt="Refraction" /></a>
<input type="checkbox" id="RefractionFull2">
<label for="RefractionFull2" title="Click for more information"><h3>Refraction</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a simulation of glass-like materials.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle Specular reflection on or off</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Refraction/OGLES2/OGLES2Refraction.cpp" target="_blank">OGLES2Refraction.cpp</a> | <a href="../../Examples/Intermediate/Refraction/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="RenderToTexture">
<div class="title">
<a href="../../Examples/Intermediate/RenderToTexture/RenderToTexture.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/RenderToTexture/RenderToTexture.png" alt="RenderToTexture" /></a>
<input type="checkbox" id="RenderToTextureFull2">
<label for="RenderToTextureFull2" title="Click for more information"><h3>RenderToTexture</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates the use of rendering to a texture.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left : Toggles multisampling of the FBOs</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/RenderToTexture/OGLES2/OGLES2RenderToTexture.cpp" target="_blank">OGLES2RenderToTexture.cpp</a> | <a href="../../Examples/Intermediate/RenderToTexture/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ShadowMapping">
<div class="title">
<a href="../../Examples/Intermediate/ShadowMapping/ShadowMapping.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ShadowMapping/ShadowMapping.png" alt="ShadowMapping" /></a>
<input type="checkbox" id="ShadowMappingFull2">
<label for="ShadowMappingFull2" title="Click for more information"><h3>ShadowMapping</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a shadow mapping technique.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ShadowMapping/OGLES2/OGLES2ShadowMapping.cpp" target="_blank">OGLES2ShadowMapping.cpp</a> | <a href="../../Examples/Intermediate/ShadowMapping/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ShadowVolume">
<div class="title">
<a href="../../Examples/Intermediate/ShadowVolume/ShadowVolume.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ShadowVolume/ShadowVolume.png" alt="ShadowVolume" /></a>
<input type="checkbox" id="ShadowVolumeFull2">
<label for="ShadowVolumeFull2" title="Click for more information"><h3>ShadowVolume</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to use the PVRTools libraries to create and use shadow volumes.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> 1 : Toggle display of shadow volumes</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ShadowVolume/OGLES2/OGLES2ShadowVolume.cpp" target="_blank">OGLES2ShadowVolume.cpp</a> | <a href="../../Examples/Intermediate/ShadowVolume/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Skinning">
<div class="title">
<a href="../../Examples/Intermediate/Skinning/Skinning.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Skinning/Skinning.png" alt="Skinning" /></a>
<input type="checkbox" id="SkinningFull2">
<label for="SkinningFull2" title="Click for more information"><h3>Skinning</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to implement hardware accelerated skinning using .pod files.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This training course demonstrates how to implement hardware accelerated skinning using the .pod file loading tools found in the PVRTools library.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Rotate model clockwise/anti-clockwise</p><p> Up/Down : Zoom out/in</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Skinning/OGLES2/OGLES2Skinning.cpp" target="_blank">OGLES2Skinning.cpp</a> | <a href="../../Examples/Intermediate/Skinning/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="StencilBuffer">
<div class="title">
<a href="../../Examples/Intermediate/StencilBuffer/StencilBuffer.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/StencilBuffer/StencilBuffer.png" alt="StencilBuffer" /></a>
<input type="checkbox" id="StencilBufferFull2">
<label for="StencilBufferFull2" title="Click for more information"><h3>StencilBuffer</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to use the stencil buffer to mask areas of the screen when rendering.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/StencilBuffer/OGLES2/OGLES2StencilBuffer.cpp" target="_blank">OGLES2StencilBuffer.cpp</a> | <a href="../../Examples/Intermediate/StencilBuffer/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ToneMapping">
<div class="title">
<a href="../../Examples/Intermediate/ToneMapping/ToneMapping.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ToneMapping/ToneMapping.png" alt="ToneMapping" /></a>
<input type="checkbox" id="ToneMappingFull2">
<label for="ToneMappingFull2" title="Click for more information"><h3>ToneMapping</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>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.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p><p> Up/Down : Change the tone mapping operator</p><p> Left/Right : Alter the exposure value</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ToneMapping/OGLES2/OGLES2ToneMapping.cpp" target="_blank">OGLES2ToneMapping.cpp</a> | <a href="../../Examples/Intermediate/ToneMapping/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul><div id="Advanced""><h2>Advanced</h2><ul class="accordion">
<li id="BinaryShader">
<div class="title">
<a href="../../Examples/Advanced/BinaryShader/BinaryShader.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/BinaryShader/BinaryShader.png" alt="BinaryShader" /></a>
<input type="checkbox" id="BinaryShaderFull2">
<label for="BinaryShaderFull2" title="Click for more information"><h3>BinaryShader</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course shows how to save and load binary shaders in a program to avoid recompiling the shaders each time.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p><p>This training course does not use the OGLES2Tools library and will only function on platforms that support the GL_OES_get_program_binary extension.
</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/BinaryShader/OGLES2/OGLES2BinaryShader.cpp" target="_blank">OGLES2BinaryShader.cpp</a> | <a href="../../Examples/Advanced/BinaryShader/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ChameleonMan">
<div class="title">
<a href="../../Examples/Advanced/ChameleonMan/ChameleonMan.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/ChameleonMan/ChameleonMan.png" alt="ChameleonMan" /></a>
<input type="checkbox" id="ChameleonManFull2">
<label for="ChameleonManFull2" title="Click for more information"><h3>ChameleonMan</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This demo shows a matrix skinned character in combination with bump mapping.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> 1 : Toggle lighting modes</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/ChameleonMan/OGLES2/OGLES2ChameleonMan.cpp" target="_blank">OGLES2ChameleonMan.cpp</a> | <a href="../../Examples/Advanced/ChameleonMan/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Coverflow">
<div class="title">
<a href="../../Examples/Advanced/Coverflow/Coverflow.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Coverflow/Coverflow.png" alt="Coverflow" /></a>
<input type="checkbox" id="CoverflowFull2">
<label for="CoverflowFull2" title="Click for more information"><h3>Coverflow</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of a coverflow style effect.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Flow covers left/right</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Coverflow/OGLES2/OGLES2Coverflow.cpp" target="_blank">OGLES2Coverflow.cpp</a> | <a href="../../Examples/Advanced/Coverflow/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="DeferredShading">
<div class="title">
<a href="../../Examples/Advanced/DeferredShading/DeferredShading.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/DeferredShading/DeferredShading.png" alt="DeferredShading" /></a>
<input type="checkbox" id="DeferredShadingFull2">
<label for="DeferredShadingFull2" title="Click for more information"><h3>DeferredShading</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>../../../Examples/Advanced/DeferredShading/DeferredShading.txt</p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>ERROR</p>
<p><strong>Controls:</strong></p>
<p>ERROR</p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/DeferredShading/OGLES2/OGLES2DeferredShading.cpp" target="_blank">OGLES2DeferredShading.cpp</a> | <a href="../../Examples/Advanced/DeferredShading/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ExampleUI">
<div class="title">
<a href="../../Examples/Advanced/ExampleUI/ExampleUI.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/ExampleUI/ExampleUI.png" alt="ExampleUI" /></a>
<input type="checkbox" id="ExampleUIFull2">
<label for="ExampleUIFull2" title="Click for more information"><h3>ExampleUI</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to efficiently render sprites and interface elements.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/ExampleUI/OGLES2/OGLES2ExampleUI.cpp" target="_blank">OGLES2ExampleUI.cpp</a> | <a href="../../Examples/Advanced/ExampleUI/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="FilmTV">
<div class="title">
<a href="../../Examples/Advanced/FilmTV/FilmTV.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/FilmTV/FilmTV.png" alt="FilmTV" /></a>
<input type="checkbox" id="FilmTVFull2">
<label for="FilmTVFull2" title="Click for more information"><h3>FilmTV</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of a render to texture effect.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/FilmTV/OGLES2/OGLES2FilmTV.cpp" target="_blank">OGLES2FilmTV.cpp</a> | <a href="../../Examples/Advanced/FilmTV/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Fractal">
<div class="title">
<a href="../../Examples/Advanced/Fractal/Fractal.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Fractal/Fractal.png" alt="Fractal" /></a>
<input type="checkbox" id="FractalFull2">
<label for="FractalFull2" title="Click for more information"><h3>Fractal</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of drawing a fractal using render to texture.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Fractal/OGLES2/OGLES2Fractal.cpp" target="_blank">OGLES2Fractal.cpp</a> | <a href="../../Examples/Advanced/Fractal/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Glass">
<div class="title">
<a href="../../Examples/Advanced/Glass/Glass.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Glass/Glass.png" alt="Glass" /></a>
<input type="checkbox" id="GlassFull2">
<label for="GlassFull2" title="Click for more information"><h3>Glass</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Demonstrates dynamic reflection and refraction using a dual paraboloid environment map.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Glass/OGLES2/OGLES2Glass.cpp" target="_blank">OGLES2Glass.cpp</a> | <a href="../../Examples/Advanced/Glass/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="MagicLantern">
<div class="title">
<a href="../../Examples/Advanced/MagicLantern/MagicLantern.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/MagicLantern/MagicLantern.png" alt="MagicLantern" /></a>
<input type="checkbox" id="MagicLanternFull2">
<label for="MagicLanternFull2" title="Click for more information"><h3>MagicLantern</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of dynamic lighting using spherical projection.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/MagicLantern/OGLES2/OGLES2MagicLantern.cpp" target="_blank">OGLES2MagicLantern.cpp</a> | <a href="../../Examples/Advanced/MagicLantern/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Navigation">
<div class="title">
<a href="../../Examples/Advanced/Navigation/Navigation.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Navigation/Navigation.png" alt="Navigation" /></a>
<input type="checkbox" id="NavigationFull2">
<label for="NavigationFull2" title="Click for more information"><h3>Navigation</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of how to implement rendering algorithms for Navigation software.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Up : Toggle pause/un-pause</p><p> Esc : Close the application.</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Navigation/OGLES2/OGLES2Navigation.cpp" target="_blank">OGLES2Navigation.cpp</a> | <a href="../../Examples/Advanced/Navigation/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Navigation3D">
<div class="title">
<a href="../../Examples/Advanced/Navigation3D/Navigation3D.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Navigation3D/Navigation3D.png" alt="Navigation3D" /></a>
<input type="checkbox" id="Navigation3DFull2">
<label for="Navigation3DFull2" title="Click for more information"><h3>Navigation3D</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of how to implement rendering algorithms for 3D Navigation software.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Navigation3D/OGLES2/OGLES2Navigation3D.cpp" target="_blank">OGLES2Navigation3D.cpp</a> | <a href="../../Examples/Advanced/Navigation3D/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PVRScopeExample">
<div class="title">
<a href="../../Examples/Advanced/PVRScopeExample/PVRScopeExample.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/PVRScopeExample/PVRScopeExample.png" alt="PVRScopeExample" /></a>
<input type="checkbox" id="PVRScopeExampleFull2">
<label for="PVRScopeExampleFull2" title="Click for more information"><h3>PVRScopeExample</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Demonstrates the use of PVRScope and the example graphing code.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/PVRScopeExample/OGLES2/OGLES2PVRScopeExample.cpp" target="_blank">OGLES2PVRScopeExample.cpp</a> | <a href="../../Examples/Advanced/PVRScopeExample/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PVRScopeRemote">
<div class="title">
<a href="../../Examples/Advanced/PVRScopeRemote/PVRScopeRemote.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/PVRScopeRemote/PVRScopeRemote.png" alt="PVRScopeRemote" /></a>
<input type="checkbox" id="PVRScopeRemoteFull2">
<label for="PVRScopeRemoteFull2" title="Click for more information"><h3>PVRScopeRemote</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Demonstrates the use of PVRScope's remote communication features.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/PVRScopeRemote/OGLES2/OGLES2PVRScopeRemote.cpp" target="_blank">OGLES2PVRScopeRemote.cpp</a> | <a href="../../Examples/Advanced/PVRScopeRemote/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ParticleSystem">
<div class="title">
<a href="../../Examples/Advanced/ParticleSystem/ParticleSystem.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/ParticleSystem/ParticleSystem.png" alt="ParticleSystem" /></a>
<input type="checkbox" id="ParticleSystemFull2">
<label for="ParticleSystemFull2" title="Click for more information"><h3>ParticleSystem</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to implement a simple particle system using GPGPU.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>The demo utilises GPGPU (GPU Compute) 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 the Compute and the Rendering part of a simulation.
</p><p>- left and right arrows - Decrease and increase number of particles
</p><p>- up and down arrows - Switch between GPU Compute and CPU Particle System implementation.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/ParticleSystem/OGLES2/OGLES2ParticleSystem.cpp" target="_blank">OGLES2ParticleSystem.cpp</a> | <a href="../../Examples/Advanced/ParticleSystem/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PhantomMask">
<div class="title">
<a href="../../Examples/Advanced/PhantomMask/PhantomMask.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/PhantomMask/PhantomMask.png" alt="PhantomMask" /></a>
<input type="checkbox" id="PhantomMaskFull2">
<label for="PhantomMaskFull2" title="Click for more information"><h3>PhantomMask</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This demonstration shows a mask lit using spherical harmonics and regular diffuse vertex lighting.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> 1 : Toggle Spherical Harmonics/Vertex Lighting</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/PhantomMask/OGLES2/OGLES2PhantomMask.cpp" target="_blank">OGLES2PhantomMask.cpp</a> | <a href="../../Examples/Advanced/PhantomMask/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Shaders">
<div class="title">
<a href="../../Examples/Advanced/Shaders/Shaders.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Shaders/Shaders.png" alt="Shaders" /></a>
<input type="checkbox" id="ShadersFull2">
<label for="ShadersFull2" title="Click for more information"><h3>Shaders</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of a variety of different shaders implemented on a selection of meshes.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle backwards/forwards through the list of shaders</p><p> Up/Down : Cycle backwards/forwards through the list of objects</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Shaders/OGLES2/OGLES2Shaders.cpp" target="_blank">OGLES2Shaders.cpp</a> | <a href="../../Examples/Advanced/Shaders/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Skybox2">
<div class="title">
<a href="../../Examples/Advanced/Skybox2/Skybox2.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Skybox2/Skybox2.png" alt="Skybox2" /></a>
<input type="checkbox" id="Skybox2Full2">
<label for="Skybox2Full2" title="Click for more information"><h3>Skybox2</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This demo is a shader based version of the original OpenGL ES Skybox demo. This time it shows various shaders applied to the balloon.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Skybox2/OGLES2/OGLES2Skybox2.cpp" target="_blank">OGLES2Skybox2.cpp</a> | <a href="../../Examples/Advanced/Skybox2/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="TextureStreaming">
<div class="title">
<a href="../../Examples/Advanced/TextureStreaming/TextureStreaming.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/TextureStreaming/TextureStreaming.png" alt="TextureStreaming" /></a>
<input type="checkbox" id="TextureStreamingFull2">
<label for="TextureStreamingFull2" title="Click for more information"><h3>TextureStreaming</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This example demonstrates texture streaming using platform-specific functionality.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/TextureStreaming/OGLES2/OGLES2TextureStreaming.cpp" target="_blank">OGLES2TextureStreaming.cpp</a> | <a href="../../Examples/Advanced/TextureStreaming/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Water">
<div class="title">
<a href="../../Examples/Advanced/Water/Water.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Water/Water.png" alt="Water" /></a>
<input type="checkbox" id="WaterFull2">
<label for="WaterFull2" title="Click for more information"><h3>Water</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This demo shows how to render a water effect on a given plane
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle backwards/forwards through available options</p><p> Up/Down : Change (Toggle or Increase/Decrease) the currently selected option</p><p> 1/Space : Toggle Pause/Unpause</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Water/OGLES2/OGLES2Water.cpp" target="_blank">OGLES2Water.cpp</a> | <a href="../../Examples/Advanced/Water/OGLES2/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul> </div>
</div>
<div id="FooterMainContainer">
<div id="FooterContainer">
<div class="footerlogo">
<a href="http://www.imgtec.com" target="_blank"><img src="./images/img-footer-logo-grey.png" width="100%" height="100%" /></a>
</div>
<div class="copyright">&copy; Imagination Technologies Limited<br> All rights reserved</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<title>The PowerVR SDK Browser</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="./images/img-icon.png">
</head>
<body>
<div id="GlobalHeaderContainer">
<div id="GlobalHeader">
<div class="logo">
<a href="http://www.powervrinsider.com" target="_blank"><img src="./images/PVRlogo.png" width="40%" height="40%" /></a>
</div>
<div class="sitetitle">PowerVR SDK Browser</div>
</div>
</div>
<div id="NavContainer">
<nav>
<div class="navlink">
<a href="Home.html">Home</a>
</div>
<div class="navlink">
<a href="GettingStarted.html">Getting Started</a>
</div>
<div class="navlink">
<a href="Examples.html" class="current">Examples</a>
</div>
<div class="navlink">
<a href="Framework.html">Framework</a>
</div>
<div class="navlink">
<a href="Documentation.html">Documentation</a>
</div>
<div class="navlink">
<a href="PowerVRTools.html">PowerVR Tools</a>
</div>
<div class="navlink">
<a href="ReleaseNotes.html">Release Notes</a>
</div>
<div class="navlink">
<a href="Licence.html">EULA</a>
</div>
<div class="navlink">
<a href="Contact.html">Contact Us</a>
</div>
</nav>
</div>
<!--API_TAB-->
<div id="SubNavContainer"><nav><div class="subnavlink"><a href="./OGLES.html">OpenGL ES 1.x</a></div>
<div class="subnavlink"><a href="./OGLES2.html">OpenGL ES 2.0</a></div>
<div class="subnavlink"><a href="./OGLES3.html">OpenGL ES 3.x</a></div>
</nav></div>
<div class="content">
<div id="Section" class="section">
<!--API_DESCRIPTION-->
<h1>OpenGL ES 3.x Examples</h1>
<p>
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 3.x adds to the already powerful OpenGL ES 2.0 with things such as multiple render targets, standardised texture compression, a new shading language and far more control over texturing. OpenGL ES 3.1 also adds compute shaders and advanced compute functionality, allowing General Purpose on GPU (GPGPU) processing. OpenGL ES 3.x is the most advanced embedded graphics API available today, and provides many features previously only found on desktop systems. This API is used by developers who want to target cutting edge devices and provide console quality entertainment on mobile systems. This API is available on PowerVR Series6 GPUs and later.
</p>
</OGLES3>
<p><a href="#Beginner" class="link">Beginner</a> | <a href="#Intermediate" class="link">Intermediate</a> | <a href="#Advanced" class="link">Advanced</a></p>
<!--EXAMPLE_TEMPLATE-->
<div id="Beginner""><h2>Beginner</h2><ul class="accordion">
<li id="HelloAPI">
<div class="title">
<a href="../../Examples/Beginner/01_HelloAPI/HelloAPI.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/01_HelloAPI/HelloAPI.png" alt="HelloAPI" /></a>
<input type="checkbox" id="HelloAPIFull2">
<label for="HelloAPIFull2" title="Click for more information"><h3>HelloAPI</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Draw a triangle to the screen using hardware acceleration.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/01_HelloAPI/OGLES3/OGLES3HelloAPI_Windows.cpp" target="_blank">OGLES3HelloAPI_Windows.cpp</a> | <a href="../../Examples/Beginner/01_HelloAPI/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPVRShell">
<div class="title">
<a href="../../Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.png" alt="IntroducingPVRShell" /></a>
<input type="checkbox" id="IntroducingPVRShellFull2">
<label for="IntroducingPVRShellFull2" title="Click for more information"><h3>IntroducingPVRShell</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PVRShell library.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/02_IntroducingPVRShell/OGLES3/OGLES3IntroducingPVRShell.cpp" target="_blank">OGLES3IntroducingPVRShell.cpp</a> | <a href="../../Examples/Beginner/02_IntroducingPVRShell/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Texturing">
<div class="title">
<a href="../../Examples/Beginner/03_Texturing/Texturing.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/03_Texturing/Texturing.png" alt="Texturing" /></a>
<input type="checkbox" id="TexturingFull2">
<label for="TexturingFull2" title="Click for more information"><h3>Texturing</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to apply a texture to a polygon in :API:.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/03_Texturing/OGLES3/OGLES3Texturing.cpp" target="_blank">OGLES3Texturing.cpp</a> | <a href="../../Examples/Beginner/03_Texturing/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="BasicTnL">
<div class="title">
<a href="../../Examples/Beginner/04_BasicTnL/BasicTnL.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/04_BasicTnL/BasicTnL.png" alt="BasicTnL" /></a>
<input type="checkbox" id="BasicTnLFull2">
<label for="BasicTnLFull2" title="Click for more information"><h3>BasicTnL</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course consists of a demonstration of basic transformation and lighting.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This training course consists of a demonstration of basic transformation and lighting, growing on the basic drawing techniques learnt in HelloTriangle.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/04_BasicTnL/OGLES3/OGLES3BasicTnL.cpp" target="_blank">OGLES3BasicTnL.cpp</a> | <a href="../../Examples/Beginner/04_BasicTnL/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPVRTools">
<div class="title">
<a href="../../Examples/Beginner/05_IntroducingPVRTools/IntroducingPVRTools.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/05_IntroducingPVRTools/IntroducingPVRTools.png" alt="IntroducingPVRTools" /></a>
<input type="checkbox" id="IntroducingPVRToolsFull2">
<label for="IntroducingPVRToolsFull2" title="Click for more information"><h3>IntroducingPVRTools</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PVRTools libraries.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/05_IntroducingPVRTools/OGLES3/OGLES3IntroducingPVRTools.cpp" target="_blank">OGLES3IntroducingPVRTools.cpp</a> | <a href="../../Examples/Beginner/05_IntroducingPVRTools/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPrint3D">
<div class="title">
<a href="../../Examples/Beginner/06_IntroducingPrint3D/IntroducingPrint3D.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/06_IntroducingPrint3D/IntroducingPrint3D.png" alt="IntroducingPrint3D" /></a>
<input type="checkbox" id="IntroducingPrint3DFull2">
<label for="IntroducingPrint3DFull2" title="Click for more information"><h3>IntroducingPrint3D</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the Print3D class featured within the PVRTools library.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/06_IntroducingPrint3D/OGLES3/OGLES3IntroducingPrint3D.cpp" target="_blank">OGLES3IntroducingPrint3D.cpp</a> | <a href="../../Examples/Beginner/06_IntroducingPrint3D/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPOD">
<div class="title">
<a href="../../Examples/Beginner/07_IntroducingPOD/IntroducingPOD.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/07_IntroducingPOD/IntroducingPOD.png" alt="IntroducingPOD" /></a>
<input type="checkbox" id="IntroducingPODFull2">
<label for="IntroducingPODFull2" title="Click for more information"><h3>IntroducingPOD</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course introduces the PowerVR Object Data (.pod) format.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/07_IntroducingPOD/OGLES3/OGLES3IntroducingPOD.cpp" target="_blank">OGLES3IntroducingPOD.cpp</a> | <a href="../../Examples/Beginner/07_IntroducingPOD/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="IntroducingPFX">
<div class="title">
<a href="../../Examples/Beginner/08_IntroducingPFX/IntroducingPFX.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Beginner/08_IntroducingPFX/IntroducingPFX.png" alt="IntroducingPFX" /></a>
<input type="checkbox" id="IntroducingPFXFull2">
<label for="IntroducingPFXFull2" title="Click for more information"><h3>IntroducingPFX</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to use the PVRTools library to load and use .pfx files.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Beginner/08_IntroducingPFX/OGLES3/OGLES3IntroducingPFX.cpp" target="_blank">OGLES3IntroducingPFX.cpp</a> | <a href="../../Examples/Beginner/08_IntroducingPFX/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul><div id="Intermediate""><h2>Intermediate</h2><ul class="accordion">
<li id="AlphaBlend">
<div class="title">
<a href="../../Examples/Intermediate/AlphaBlend/AlphaBlend.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/AlphaBlend/AlphaBlend.png" alt="AlphaBlend" /></a>
<input type="checkbox" id="AlphaBlendFull2">
<label for="AlphaBlendFull2" title="Click for more information"><h3>AlphaBlend</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course illustrates how transparency effects can be achieved with blending and the use of some common blending modes.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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().
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/AlphaBlend/OGLES3/OGLES3AlphaBlend.cpp" target="_blank">OGLES3AlphaBlend.cpp</a> | <a href="../../Examples/Intermediate/AlphaBlend/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="AlphaTest">
<div class="title">
<a href="../../Examples/Intermediate/AlphaTest/AlphaTest.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/AlphaTest/AlphaTest.png" alt="AlphaTest" /></a>
<input type="checkbox" id="AlphaTestFull2">
<label for="AlphaTestFull2" title="Click for more information"><h3>AlphaTest</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course illustrates how to perform alpha testing and provides a visual comparison between alpha blending and alpha testing.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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).
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/AlphaTest/OGLES3/OGLES3AlphaTest.cpp" target="_blank">OGLES3AlphaTest.cpp</a> | <a href="../../Examples/Intermediate/AlphaTest/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="AnisotropicLighting">
<div class="title">
<a href="../../Examples/Intermediate/AnisotropicLighting/AnisotropicLighting.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/AnisotropicLighting/AnisotropicLighting.png" alt="AnisotropicLighting" /></a>
<input type="checkbox" id="AnisotropicLightingFull2">
<label for="AnisotropicLightingFull2" title="Click for more information"><h3>AnisotropicLighting</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>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.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right Arrow : Toggle effect</p><p> Esc : Close application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/AnisotropicLighting/OGLES3/OGLES3AnisotropicLighting.cpp" target="_blank">OGLES3AnisotropicLighting.cpp</a> | <a href="../../Examples/Intermediate/AnisotropicLighting/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Bloom">
<div class="title">
<a href="../../Examples/Intermediate/Bloom/Bloom.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Bloom/Bloom.png" alt="Bloom" /></a>
<input type="checkbox" id="BloomFull2">
<label for="BloomFull2" title="Click for more information"><h3>Bloom</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a simple implementation of a 'bloom' effect.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Up/Down : Toggle the bloom effect On/Off</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Bloom/OGLES3/OGLES3Bloom.cpp" target="_blank">OGLES3Bloom.cpp</a> | <a href="../../Examples/Intermediate/Bloom/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Bumpmap">
<div class="title">
<a href="../../Examples/Intermediate/Bumpmap/Bumpmap.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Bumpmap/Bumpmap.png" alt="Bumpmap" /></a>
<input type="checkbox" id="BumpmapFull2">
<label for="BumpmapFull2" title="Click for more information"><h3>Bumpmap</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates an example of using a normal map to implement bump mapping.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Bumpmap/OGLES3/OGLES3Bumpmap.cpp" target="_blank">OGLES3Bumpmap.cpp</a> | <a href="../../Examples/Intermediate/Bumpmap/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="CellShading">
<div class="title">
<a href="../../Examples/Intermediate/CellShading/CellShading.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/CellShading/CellShading.png" alt="CellShading" /></a>
<input type="checkbox" id="CellShadingFull2">
<label for="CellShadingFull2" title="Click for more information"><h3>CellShading</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to implement cell shading.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/CellShading/OGLES3/OGLES3CellShading.cpp" target="_blank">OGLES3CellShading.cpp</a> | <a href="../../Examples/Intermediate/CellShading/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ColourGrading">
<div class="title">
<a href="../../Examples/Intermediate/ColourGrading/ColourGrading.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ColourGrading/ColourGrading.png" alt="ColourGrading" /></a>
<input type="checkbox" id="ColourGradingFull2">
<label for="ColourGradingFull2" title="Click for more information"><h3>ColourGrading</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This example demonstrates using 3D textures to perform colour grading.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Colour grading is the act of enhancing the colour of a scene. This example demonstrates colour grading using a 3D texture as a look up table in a post process stage of the render.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ColourGrading/OGLES3/OGLES3ColourGrading.cpp" target="_blank">OGLES3ColourGrading.cpp</a> | <a href="../../Examples/Intermediate/ColourGrading/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ComplexLighting">
<div class="title">
<a href="../../Examples/Intermediate/ComplexLighting/ComplexLighting.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ComplexLighting/ComplexLighting.png" alt="ComplexLighting" /></a>
<input type="checkbox" id="ComplexLightingFull2">
<label for="ComplexLightingFull2" title="Click for more information"><h3>ComplexLighting</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to implement complex lighting techniques.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle through the available modes</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ComplexLighting/OGLES3/OGLES3ComplexLighting.cpp" target="_blank">OGLES3ComplexLighting.cpp</a> | <a href="../../Examples/Intermediate/ComplexLighting/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="CubeShadowMapping">
<div class="title">
<a href="../../Examples/Intermediate/CubeShadowMapping/CubeShadowMapping.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/CubeShadowMapping/CubeShadowMapping.png" alt="CubeShadowMapping" /></a>
<input type="checkbox" id="CubeShadowMappingFull2">
<label for="CubeShadowMappingFull2" title="Click for more information"><h3>CubeShadowMapping</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use cube shadow maps for point light sources.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Shows how to dynamically update the cube shadow map for a point light source and cast shadows using that cube shadow map. Shadow Mapping is a process by which shadows are added to 3D computer graphics by testing whether a pixel is visible from the light source, and comparing it to a z-buffer or depth image of the light source's view.</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/CubeShadowMapping/OGLES3/OGLES3CubeShadowMapping.cpp" target="_blank">OGLES3CubeShadowMapping.cpp</a> | <a href="../../Examples/Intermediate/CubeShadowMapping/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="DisplacementMap">
<div class="title">
<a href="../../Examples/Intermediate/DisplacementMap/DisplacementMap.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/DisplacementMap/DisplacementMap.png" alt="DisplacementMap" /></a>
<input type="checkbox" id="DisplacementMapFull2">
<label for="DisplacementMapFull2" title="Click for more information"><h3>DisplacementMap</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates displacement mapping using a texture read from the vertex shader.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/DisplacementMap/OGLES3/OGLES3DisplacementMap.cpp" target="_blank">OGLES3DisplacementMap.cpp</a> | <a href="../../Examples/Intermediate/DisplacementMap/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="EdgeDetection">
<div class="title">
<a href="../../Examples/Intermediate/EdgeDetection/EdgeDetection.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/EdgeDetection/EdgeDetection.png" alt="EdgeDetection" /></a>
<input type="checkbox" id="EdgeDetectionFull2">
<label for="EdgeDetectionFull2" title="Click for more information"><h3>EdgeDetection</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a means of simple edge detection.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Up/Down : Cycle through highlighting modes</p><p> Left : Decrease the width of edge highlights</p><p> Right : Increase the width of edge highlights</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/EdgeDetection/OGLES3/OGLES3EdgeDetection.cpp" target="_blank">OGLES3EdgeDetection.cpp</a> | <a href="../../Examples/Intermediate/EdgeDetection/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="FastTnL">
<div class="title">
<a href="../../Examples/Intermediate/FastTnL/FastTnL.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/FastTnL/FastTnL.png" alt="FastTnL" /></a>
<input type="checkbox" id="FastTnLFull2">
<label for="FastTnLFull2" title="Click for more information"><h3>FastTnL</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course serves as an example of a fast transformation and lighting vertex shader.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/FastTnL/OGLES3/OGLES3FastTnL.cpp" target="_blank">OGLES3FastTnL.cpp</a> | <a href="../../Examples/Intermediate/FastTnL/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Fog">
<div class="title">
<a href="../../Examples/Intermediate/Fog/Fog.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Fog/Fog.png" alt="Fog" /></a>
<input type="checkbox" id="FogFull2">
<label for="FogFull2" title="Click for more information"><h3>Fog</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to create a fog effect using shaders.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle fog mode</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Fog/OGLES3/OGLES3Fog.cpp" target="_blank">OGLES3Fog.cpp</a> | <a href="../../Examples/Intermediate/Fog/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="FresnelReflections">
<div class="title">
<a href="../../Examples/Intermediate/FresnelReflections/FresnelReflections.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/FresnelReflections/FresnelReflections.png" alt="FresnelReflections" /></a>
<input type="checkbox" id="FresnelReflectionsFull2">
<label for="FresnelReflectionsFull2" title="Click for more information"><h3>FresnelReflections</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates an implementation of Fresnel reflection.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Up/Down : Increase/Decrease the refractive index of the surface material</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/FresnelReflections/OGLES3/OGLES3FresnelReflections.cpp" target="_blank">OGLES3FresnelReflections.cpp</a> | <a href="../../Examples/Intermediate/FresnelReflections/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ImageConvolution">
<div class="title">
<a href="../../Examples/Intermediate/ImageConvolution/ImageConvolution.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ImageConvolution/ImageConvolution.png" alt="ImageConvolution" /></a>
<input type="checkbox" id="ImageConvolutionFull2">
<label for="ImageConvolutionFull2" title="Click for more information"><h3>ImageConvolution</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Introduction to image processing using GPGPU (GPU Compute)
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demonstration deals with image processing. It illustrates the usage of GPU Compute to write linear and non-linear filter kernels.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ImageConvolution/OGLES3/OGLES3ImageConvolution.cpp" target="_blank">OGLES3ImageConvolution.cpp</a> | <a href="../../Examples/Intermediate/ImageConvolution/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Instancing">
<div class="title">
<a href="../../Examples/Intermediate/Instancing/Instancing.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Instancing/Instancing.png" alt="Instancing" /></a>
<input type="checkbox" id="InstancingFull2">
<label for="InstancingFull2" title="Click for more information"><h3>Instancing</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use instancing to draw several instances of the same mesh with a single draw call.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This example shows how to use instancing to draw several instances of the same mesh with a single draw call.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Instancing/OGLES3/OGLES3Instancing.cpp" target="_blank">OGLES3Instancing.cpp</a> | <a href="../../Examples/Intermediate/Instancing/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Iridescence">
<div class="title">
<a href="../../Examples/Intermediate/Iridescence/Iridescence.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Iridescence/Iridescence.png" alt="Iridescence" /></a>
<input type="checkbox" id="IridescenceFull2">
<label for="IridescenceFull2" title="Click for more information"><h3>Iridescence</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to implement an iridescence effect.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Up/Down : Increase/Decrease the maximum variation</p><p> Left/Right : Decrease/Increase the maximum thickness</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Iridescence/OGLES3/OGLES3Iridescence.cpp" target="_blank">OGLES3Iridescence.cpp</a> | <a href="../../Examples/Intermediate/Iridescence/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="LevelOfDetail">
<div class="title">
<a href="../../Examples/Intermediate/LevelOfDetail/LevelOfDetail.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/LevelOfDetail/LevelOfDetail.png" alt="LevelOfDetail" /></a>
<input type="checkbox" id="LevelOfDetailFull2">
<label for="LevelOfDetailFull2" title="Click for more information"><h3>LevelOfDetail</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a switch in the detail of an object based on its distance from the camera.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/LevelOfDetail/OGLES3/OGLES3LevelOfDetail.cpp" target="_blank">OGLES3LevelOfDetail.cpp</a> | <a href="../../Examples/Intermediate/LevelOfDetail/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="LightMap">
<div class="title">
<a href="../../Examples/Intermediate/LightMap/LightMap.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/LightMap/LightMap.png" alt="LightMap" /></a>
<input type="checkbox" id="LightMapFull2">
<label for="LightMapFull2" title="Click for more information"><h3>LightMap</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course shows how to use light maps.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/LightMap/OGLES3/OGLES3LightMap.cpp" target="_blank">OGLES3LightMap.cpp</a> | <a href="../../Examples/Intermediate/LightMap/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="MultipleRenderTargets">
<div class="title">
<a href="../../Examples/Intermediate/MultipleRenderTargets/MultipleRenderTargets.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/MultipleRenderTargets/MultipleRenderTargets.png" alt="MultipleRenderTargets" /></a>
<input type="checkbox" id="MultipleRenderTargetsFull2">
<label for="MultipleRenderTargetsFull2" title="Click for more information"><h3>MultipleRenderTargets</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use multiple render targets to output data to several different surfaces within a single pass.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/MultipleRenderTargets/OGLES3/OGLES3MultipleRenderTargets.cpp" target="_blank">OGLES3MultipleRenderTargets.cpp</a> | <a href="../../Examples/Intermediate/MultipleRenderTargets/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="OcclusionQueries">
<div class="title">
<a href="../../Examples/Intermediate/OcclusionQueries/OcclusionQueries.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/OcclusionQueries/OcclusionQueries.png" alt="OcclusionQueries" /></a>
<input type="checkbox" id="OcclusionQueriesFull2">
<label for="OcclusionQueriesFull2" title="Click for more information"><h3>OcclusionQueries</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use occlusion queries to determine visible objects.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Shows how to use occlusion queries to determine visible objects and cull invisible ones to increase run-time performance.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/OcclusionQueries/OGLES3/OGLES3OcclusionQueries.cpp" target="_blank">OGLES3OcclusionQueries.cpp</a> | <a href="../../Examples/Intermediate/OcclusionQueries/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ParallaxBumpMap">
<div class="title">
<a href="../../Examples/Intermediate/ParallaxBumpMap/ParallaxBumpMap.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ParallaxBumpMap/ParallaxBumpMap.png" alt="ParallaxBumpMap" /></a>
<input type="checkbox" id="ParallaxBumpMapFull2">
<label for="ParallaxBumpMapFull2" title="Click for more information"><h3>ParallaxBumpMap</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course serves as an example of implementing the parallax bump mapping effect.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ParallaxBumpMap/OGLES3/OGLES3ParallaxBumpMap.cpp" target="_blank">OGLES3ParallaxBumpMap.cpp</a> | <a href="../../Examples/Intermediate/ParallaxBumpMap/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PerturbedUvs">
<div class="title">
<a href="../../Examples/Intermediate/PerturbedUvs/PerturbedUvs.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/PerturbedUvs/PerturbedUvs.png" alt="PerturbedUvs" /></a>
<input type="checkbox" id="PerturbedUvsFull2">
<label for="PerturbedUvsFull2" title="Click for more information"><h3>PerturbedUvs</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates the use of environment mapping with perturbed UVs.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/PerturbedUvs/OGLES3/OGLES3PerturbedUvs.cpp" target="_blank">OGLES3PerturbedUvs.cpp</a> | <a href="../../Examples/Intermediate/PerturbedUvs/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Reflections">
<div class="title">
<a href="../../Examples/Intermediate/Reflections/Reflections.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Reflections/Reflections.png" alt="Reflections" /></a>
<input type="checkbox" id="ReflectionsFull2">
<label for="ReflectionsFull2" title="Click for more information"><h3>Reflections</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates the creation of a reflection effect from a 2D map and a cube map.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Swap mapping type</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Reflections/OGLES3/OGLES3Reflections.cpp" target="_blank">OGLES3Reflections.cpp</a> | <a href="../../Examples/Intermediate/Reflections/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Refraction">
<div class="title">
<a href="../../Examples/Intermediate/Refraction/Refraction.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Refraction/Refraction.png" alt="Refraction" /></a>
<input type="checkbox" id="RefractionFull2">
<label for="RefractionFull2" title="Click for more information"><h3>Refraction</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a simulation of glass-like materials.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle Specular reflection on or off</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Refraction/OGLES3/OGLES3Refraction.cpp" target="_blank">OGLES3Refraction.cpp</a> | <a href="../../Examples/Intermediate/Refraction/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="RenderToTexture">
<div class="title">
<a href="../../Examples/Intermediate/RenderToTexture/RenderToTexture.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/RenderToTexture/RenderToTexture.png" alt="RenderToTexture" /></a>
<input type="checkbox" id="RenderToTextureFull2">
<label for="RenderToTextureFull2" title="Click for more information"><h3>RenderToTexture</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates the use of rendering to a texture.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left : Toggles multisampling of the FBOs</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/RenderToTexture/OGLES3/OGLES3RenderToTexture.cpp" target="_blank">OGLES3RenderToTexture.cpp</a> | <a href="../../Examples/Intermediate/RenderToTexture/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ShadowMapping">
<div class="title">
<a href="../../Examples/Intermediate/ShadowMapping/ShadowMapping.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ShadowMapping/ShadowMapping.png" alt="ShadowMapping" /></a>
<input type="checkbox" id="ShadowMappingFull2">
<label for="ShadowMappingFull2" title="Click for more information"><h3>ShadowMapping</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates a shadow mapping technique.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ShadowMapping/OGLES3/OGLES3ShadowMapping.cpp" target="_blank">OGLES3ShadowMapping.cpp</a> | <a href="../../Examples/Intermediate/ShadowMapping/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ShadowVolume">
<div class="title">
<a href="../../Examples/Intermediate/ShadowVolume/ShadowVolume.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/ShadowVolume/ShadowVolume.png" alt="ShadowVolume" /></a>
<input type="checkbox" id="ShadowVolumeFull2">
<label for="ShadowVolumeFull2" title="Click for more information"><h3>ShadowVolume</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to use the PVRTools libraries to create and use shadow volumes.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> 1 : Toggle display of shadow volumes</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/ShadowVolume/OGLES3/OGLES3ShadowVolume.cpp" target="_blank">OGLES3ShadowVolume.cpp</a> | <a href="../../Examples/Intermediate/ShadowVolume/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Skinning">
<div class="title">
<a href="../../Examples/Intermediate/Skinning/Skinning.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/Skinning/Skinning.png" alt="Skinning" /></a>
<input type="checkbox" id="SkinningFull2">
<label for="SkinningFull2" title="Click for more information"><h3>Skinning</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to implement hardware accelerated skinning using .pod files.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This training course demonstrates how to implement hardware accelerated skinning using the .pod file loading tools found in the PVRTools library.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Rotate model clockwise/anti-clockwise</p><p> Up/Down : Zoom out/in</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/Skinning/OGLES3/OGLES3Skinning.cpp" target="_blank">OGLES3Skinning.cpp</a> | <a href="../../Examples/Intermediate/Skinning/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="StencilBuffer">
<div class="title">
<a href="../../Examples/Intermediate/StencilBuffer/StencilBuffer.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/StencilBuffer/StencilBuffer.png" alt="StencilBuffer" /></a>
<input type="checkbox" id="StencilBufferFull2">
<label for="StencilBufferFull2" title="Click for more information"><h3>StencilBuffer</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course demonstrates how to use the stencil buffer to mask areas of the screen when rendering.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/StencilBuffer/OGLES3/OGLES3StencilBuffer.cpp" target="_blank">OGLES3StencilBuffer.cpp</a> | <a href="../../Examples/Intermediate/StencilBuffer/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="TextureArray">
<div class="title">
<a href="../../Examples/Intermediate/TextureArray/TextureArray.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/TextureArray/TextureArray.png" alt="TextureArray" /></a>
<input type="checkbox" id="TextureArrayFull2">
<label for="TextureArrayFull2" title="Click for more information"><h3>TextureArray</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use the texture array functionality.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demo shows how to use a texture array in the fragment shader by using three parameters. These are the index of the texture to be sampled, and the sampling coordinates.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/TextureArray/OGLES3/OGLES3TextureArray.cpp" target="_blank">OGLES3TextureArray.cpp</a> | <a href="../../Examples/Intermediate/TextureArray/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="TransformFeedback">
<div class="title">
<a href="../../Examples/Intermediate/TransformFeedback/TransformFeedback.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/TransformFeedback/TransformFeedback.png" alt="TransformFeedback" /></a>
<input type="checkbox" id="TransformFeedbackFull2">
<label for="TransformFeedbackFull2" title="Click for more information"><h3>TransformFeedback</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use transform feedback to implement a simple particle system.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Shows how to use the transform feedback functionality to implement a simple particle system. The particles are animated within a vertex shader and written out to a buffer object. This buffer object is then used to render the particles and used as input for the next frame's animation.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/TransformFeedback/OGLES3/OGLES3TransformFeedback.cpp" target="_blank">OGLES3TransformFeedback.cpp</a> | <a href="../../Examples/Intermediate/TransformFeedback/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="UniformBufferObjects">
<div class="title">
<a href="../../Examples/Intermediate/UniformBufferObjects/UniformBufferObjects.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Intermediate/UniformBufferObjects/UniformBufferObjects.png" alt="UniformBufferObjects" /></a>
<input type="checkbox" id="UniformBufferObjectsFull2">
<label for="UniformBufferObjectsFull2" title="Click for more information"><h3>UniformBufferObjects</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to use uniform buffer objects.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demonstration shows how to use uniform buffer objects to set the values of several shader uniforms at once. A uniform buffer object stores uniform data for a shader program, and is often used becuase switching between uniform buffer bindings is faster than swithcing several uniforms in a program. </p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Intermediate/UniformBufferObjects/OGLES3/OGLES3UniformBufferObjects.cpp" target="_blank">OGLES3UniformBufferObjects.cpp</a> | <a href="../../Examples/Intermediate/UniformBufferObjects/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul><div id="Advanced""><h2>Advanced</h2><ul class="accordion">
<li id="BinaryShader">
<div class="title">
<a href="../../Examples/Advanced/BinaryShader/BinaryShader.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/BinaryShader/BinaryShader.png" alt="BinaryShader" /></a>
<input type="checkbox" id="BinaryShaderFull2">
<label for="BinaryShaderFull2" title="Click for more information"><h3>BinaryShader</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This training course shows how to save and load binary shaders in a program to avoid recompiling the shaders each time.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p><p>This training course does not use the OGLES2Tools library and will only function on platforms that support the GL_OES_get_program_binary extension.
</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/BinaryShader/OGLES3/OGLES3BinaryShader.cpp" target="_blank">OGLES3BinaryShader.cpp</a> | <a href="../../Examples/Advanced/BinaryShader/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ChameleonMan">
<div class="title">
<a href="../../Examples/Advanced/ChameleonMan/ChameleonMan.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/ChameleonMan/ChameleonMan.png" alt="ChameleonMan" /></a>
<input type="checkbox" id="ChameleonManFull2">
<label for="ChameleonManFull2" title="Click for more information"><h3>ChameleonMan</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This demo shows a matrix skinned character in combination with bump mapping.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> 1 : Toggle lighting modes</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/ChameleonMan/OGLES3/OGLES3ChameleonMan.cpp" target="_blank">OGLES3ChameleonMan.cpp</a> | <a href="../../Examples/Advanced/ChameleonMan/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Coverflow">
<div class="title">
<a href="../../Examples/Advanced/Coverflow/Coverflow.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Coverflow/Coverflow.png" alt="Coverflow" /></a>
<input type="checkbox" id="CoverflowFull2">
<label for="CoverflowFull2" title="Click for more information"><h3>Coverflow</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of a coverflow style effect.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Flow covers left/right</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Coverflow/OGLES3/OGLES3Coverflow.cpp" target="_blank">OGLES3Coverflow.cpp</a> | <a href="../../Examples/Advanced/Coverflow/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="DeferredShading">
<div class="title">
<a href="../../Examples/Advanced/DeferredShading/DeferredShading.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/DeferredShading/DeferredShading.png" alt="DeferredShading" /></a>
<input type="checkbox" id="DeferredShadingFull2">
<label for="DeferredShadingFull2" title="Click for more information"><h3>DeferredShading</h3></label>
<div class="ShortDescription" id="TexturingShort"><p>../../../Examples/Advanced/DeferredShading/DeferredShading.txt</p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p>ERROR</p>
<p><strong>Controls:</strong></p>
<p>ERROR</p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/DeferredShading/OGLES3/OGLES3DeferredShading.cpp" target="_blank">OGLES3DeferredShading.cpp</a> | <a href="../../Examples/Advanced/DeferredShading/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ExampleUI">
<div class="title">
<a href="../../Examples/Advanced/ExampleUI/ExampleUI.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/ExampleUI/ExampleUI.png" alt="ExampleUI" /></a>
<input type="checkbox" id="ExampleUIFull2">
<label for="ExampleUIFull2" title="Click for more information"><h3>ExampleUI</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to efficiently render sprites and interface elements.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/ExampleUI/OGLES3/OGLES3ExampleUI.cpp" target="_blank">OGLES3ExampleUI.cpp</a> | <a href="../../Examples/Advanced/ExampleUI/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="FilmTV">
<div class="title">
<a href="../../Examples/Advanced/FilmTV/FilmTV.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/FilmTV/FilmTV.png" alt="FilmTV" /></a>
<input type="checkbox" id="FilmTVFull2">
<label for="FilmTVFull2" title="Click for more information"><h3>FilmTV</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of a render to texture effect.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/FilmTV/OGLES3/OGLES3FilmTV.cpp" target="_blank">OGLES3FilmTV.cpp</a> | <a href="../../Examples/Advanced/FilmTV/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Fractal">
<div class="title">
<a href="../../Examples/Advanced/Fractal/Fractal.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Fractal/Fractal.png" alt="Fractal" /></a>
<input type="checkbox" id="FractalFull2">
<label for="FractalFull2" title="Click for more information"><h3>Fractal</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of drawing a fractal using render to texture.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Fractal/OGLES3/OGLES3Fractal.cpp" target="_blank">OGLES3Fractal.cpp</a> | <a href="../../Examples/Advanced/Fractal/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="GameOfLife">
<div class="title">
<a href="../../Examples/Advanced/GameOfLife/GameOfLife.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/GameOfLife/GameOfLife.png" alt="GameOfLife" /></a>
<input type="checkbox" id="GameOfLifeFull2">
<label for="GameOfLifeFull2" title="Click for more information"><h3>GameOfLife</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Implementation of John Conway's Game of Life using GPGPU (GPU Compute).
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>This demo utilises GPGPU (GPU Compute) to take advantage of the GPU computation available in PowerVR Series6 to implement John Conway's Game of Life simulation, updating every aspect of the grid where all the particles are stored. OpenGL then retrieves the result of that computation and presents it on the screen.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left and right arrows : Switch between evolution functions.</p><p> Up : Pause simulation.</p><p> Down : Generate new population.</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/GameOfLife/OGLES3/OGLES3GameOfLife.cpp" target="_blank">OGLES3GameOfLife.cpp</a> | <a href="../../Examples/Advanced/GameOfLife/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="MagicLantern">
<div class="title">
<a href="../../Examples/Advanced/MagicLantern/MagicLantern.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/MagicLantern/MagicLantern.png" alt="MagicLantern" /></a>
<input type="checkbox" id="MagicLanternFull2">
<label for="MagicLanternFull2" title="Click for more information"><h3>MagicLantern</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of dynamic lighting using spherical projection.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/MagicLantern/OGLES3/OGLES3MagicLantern.cpp" target="_blank">OGLES3MagicLantern.cpp</a> | <a href="../../Examples/Advanced/MagicLantern/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Navigation">
<div class="title">
<a href="../../Examples/Advanced/Navigation/Navigation.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Navigation/Navigation.png" alt="Navigation" /></a>
<input type="checkbox" id="NavigationFull2">
<label for="NavigationFull2" title="Click for more information"><h3>Navigation</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of how to implement rendering algorithms for Navigation software.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Up : Toggle pause/un-pause</p><p> Esc : Close the application.</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Navigation/OGLES3/OGLES3Navigation.cpp" target="_blank">OGLES3Navigation.cpp</a> | <a href="../../Examples/Advanced/Navigation/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Navigation3D">
<div class="title">
<a href="../../Examples/Advanced/Navigation3D/Navigation3D.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Navigation3D/Navigation3D.png" alt="Navigation3D" /></a>
<input type="checkbox" id="Navigation3DFull2">
<label for="Navigation3DFull2" title="Click for more information"><h3>Navigation3D</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of how to implement rendering algorithms for 3D Navigation software.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Navigation3D/OGLES3/OGLES3Navigation3D.cpp" target="_blank">OGLES3Navigation3D.cpp</a> | <a href="../../Examples/Advanced/Navigation3D/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PVRScopeExample">
<div class="title">
<a href="../../Examples/Advanced/PVRScopeExample/PVRScopeExample.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/PVRScopeExample/PVRScopeExample.png" alt="PVRScopeExample" /></a>
<input type="checkbox" id="PVRScopeExampleFull2">
<label for="PVRScopeExampleFull2" title="Click for more information"><h3>PVRScopeExample</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Demonstrates the use of PVRScope and the example graphing code.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/PVRScopeExample/OGLES3/OGLES3PVRScopeExample.cpp" target="_blank">OGLES3PVRScopeExample.cpp</a> | <a href="../../Examples/Advanced/PVRScopeExample/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PVRScopeRemote">
<div class="title">
<a href="../../Examples/Advanced/PVRScopeRemote/PVRScopeRemote.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/PVRScopeRemote/PVRScopeRemote.png" alt="PVRScopeRemote" /></a>
<input type="checkbox" id="PVRScopeRemoteFull2">
<label for="PVRScopeRemoteFull2" title="Click for more information"><h3>PVRScopeRemote</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Demonstrates the use of PVRScope's remote communication features.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/PVRScopeRemote/OGLES3/OGLES3PVRScopeRemote.cpp" target="_blank">OGLES3PVRScopeRemote.cpp</a> | <a href="../../Examples/Advanced/PVRScopeRemote/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ParticleSystem">
<div class="title">
<a href="../../Examples/Advanced/ParticleSystem/ParticleSystem.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/ParticleSystem/ParticleSystem.png" alt="ParticleSystem" /></a>
<input type="checkbox" id="ParticleSystemFull2">
<label for="ParticleSystemFull2" title="Click for more information"><h3>ParticleSystem</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to implement a simple particle system using GPGPU.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>The demo utilises GPGPU (GPU Compute) 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 the Compute and the Rendering part of a simulation.
</p><p>- left and right arrows - Decrease and increase number of particles
</p><p>- up and down arrows - Switch between GPU Compute and CPU Particle System implementation.
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/ParticleSystem/OGLES3/OGLES3ParticleSystem.cpp" target="_blank">OGLES3ParticleSystem.cpp</a> | <a href="../../Examples/Advanced/ParticleSystem/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="PhantomMask">
<div class="title">
<a href="../../Examples/Advanced/PhantomMask/PhantomMask.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/PhantomMask/PhantomMask.png" alt="PhantomMask" /></a>
<input type="checkbox" id="PhantomMaskFull2">
<label for="PhantomMaskFull2" title="Click for more information"><h3>PhantomMask</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This demonstration shows a mask lit using spherical harmonics and regular diffuse vertex lighting.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> 1 : Toggle Spherical Harmonics/Vertex Lighting</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/PhantomMask/OGLES3/OGLES3PhantomMask.cpp" target="_blank">OGLES3PhantomMask.cpp</a> | <a href="../../Examples/Advanced/PhantomMask/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="ProceduralTextures">
<div class="title">
<a href="../../Examples/Advanced/ProceduralTextures/ProceduralTextures.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/ProceduralTextures/ProceduralTextures.png" alt="ProceduralTextures" /></a>
<input type="checkbox" id="ProceduralTexturesFull2">
<label for="ProceduralTexturesFull2" title="Click for more information"><h3>ProceduralTextures</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>Shows how to generate procedural textures using GPGPU(GPU Compute).
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>Utilises GPGPU to generate procedural textures using Steven Worley's cellular texture basis functions. Procedural textures are computer-generated images created using an algorithm intended to create a realistic representation of natural elements such as wood or marble.
</p><p>- left and right arrows - Switch between distance metrics
</p><p>- up and down arrows - Switch between linear combination of weights
</p></p>
<p><strong>Controls:</strong></p>
<p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/ProceduralTextures/OGLES3/OGLES3ProceduralTextures.cpp" target="_blank">OGLES3ProceduralTextures.cpp</a> | <a href="../../Examples/Advanced/ProceduralTextures/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Shaders">
<div class="title">
<a href="../../Examples/Advanced/Shaders/Shaders.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Shaders/Shaders.png" alt="Shaders" /></a>
<input type="checkbox" id="ShadersFull2">
<label for="ShadersFull2" title="Click for more information"><h3>Shaders</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>A demonstration of a variety of different shaders implemented on a selection of meshes.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle backwards/forwards through the list of shaders</p><p> Up/Down : Cycle backwards/forwards through the list of objects</p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Shaders/OGLES3/OGLES3Shaders.cpp" target="_blank">OGLES3Shaders.cpp</a> | <a href="../../Examples/Advanced/Shaders/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Skybox2">
<div class="title">
<a href="../../Examples/Advanced/Skybox2/Skybox2.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Skybox2/Skybox2.png" alt="Skybox2" /></a>
<input type="checkbox" id="Skybox2Full2">
<label for="Skybox2Full2" title="Click for more information"><h3>Skybox2</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This demo is a shader based version of the original OpenGL ES Skybox demo. This time it shows various shaders applied to the balloon.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Skybox2/OGLES3/OGLES3Skybox2.cpp" target="_blank">OGLES3Skybox2.cpp</a> | <a href="../../Examples/Advanced/Skybox2/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="TextureStreaming">
<div class="title">
<a href="../../Examples/Advanced/TextureStreaming/TextureStreaming.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/TextureStreaming/TextureStreaming.png" alt="TextureStreaming" /></a>
<input type="checkbox" id="TextureStreamingFull2">
<label for="TextureStreamingFull2" title="Click for more information"><h3>TextureStreaming</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This example demonstrates texture streaming using platform-specific functionality.
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Esc : Close the application</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/TextureStreaming/OGLES3/OGLES3TextureStreaming.cpp" target="_blank">OGLES3TextureStreaming.cpp</a> | <a href="../../Examples/Advanced/TextureStreaming/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li>
<li id="Water">
<div class="title">
<a href="../../Examples/Advanced/Water/Water.png" title="Click to view image" target="_blank"><img class="examplesmall" src="../../Examples/Advanced/Water/Water.png" alt="Water" /></a>
<input type="checkbox" id="WaterFull2">
<label for="WaterFull2" title="Click for more information"><h3>Water</h3></label>
<div class="ShortDescription" id="TexturingShort"><p><p>This demo shows how to render a water effect on a given plane
</p></p></div>
<br>
<div class="FullDescription" id="TexturingFull">
<p><strong>Description:</strong></p>
<p><p>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.
</p></p>
<p><strong>Controls:</strong></p>
<p><p> Left/Right : Cycle backwards/forwards through available options</p><p> Up/Down : Change (Toggle or Increase/Decrease) the currently selected option</p><p> 1/Space : Toggle Pause/Unpause</p></p>
<p><strong>Links:</strong></p>
<p class="source"><a href="../../Examples/Advanced/Water/OGLES3/OGLES3Water.cpp" target="_blank">OGLES3Water.cpp</a> | <a href="../../Examples/Advanced/Water/OGLES3/Build/" target="_blank">Projects</a></p>
</div>
</input>
</div>
</li></div></ul> </div>
</div>
<div id="FooterMainContainer">
<div id="FooterContainer">
<div class="footerlogo">
<a href="http://www.imgtec.com" target="_blank"><img src="./images/img-footer-logo-grey.png" width="100%" height="100%" /></a>
</div>
<div class="copyright">&copy; Imagination Technologies Limited<br> All rights reserved</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -50,7 +50,7 @@
<div class="content">
<h1>PowerVR Tools</h1>
<p>The suite of utilities in the SDK is designed to enable rapid graphics application development. It targets a range of areas including asset exporting and optimization, PC emulation, prototyping environments, online and offline performance analysis tools and many more.</p>
<p>Our suite of utilities is designed to enable rapid graphics application development. It targets a range of areas including asset exporting and optimization, PC emulation, prototyping environments, online and offline performance analysis tools and many more.</p>
<p>Each utility supports Windows, OS X and Linux. The minimum requirements are as follows (older versions might still work but limited support will be provided):</p>
<ul>
<li>Windows 7</li>
......
......@@ -50,7 +50,256 @@
<div class="content">
<h1>Release Notes</h1>
<p><a href="#3.5" class="link">v3.5</a> | <a href="#3.4" class="link">v3.4</a> | <a href="#3.3" class="link">v3.3</a></p>
<p><a href="#4.0" class="link">v4.0</a> | <a href="#3.5" class="link">v3.5</a> | <a href="#3.4" class="link">v3.4</a> | <a href="#3.3" class="link">v3.3</a></p>
<div id="4.0">
<h2>PowerVR Tools and SDK v4.0</h2>
<h3>Overview</h3>
<p>In this release, we aim to ease developers into the new generation of graphics APIs with our new Framework. It is a completely re-written cross-platform and cross-API framework which functions as scaffolding around which to build your own rendering or game engine. In addition to this, we have improved all of our utilities, though PVRTrace is the utility which has had the most changes – not only does it feature a large number of bug-fixes and back-end enhancements, but also a redesigned Scrubber for much improved Image Analysis. PVRTrace now also supports the Android Extension Pack. It also bears mentioning that PVRHub now is compatible with Android 6.0 Marshmallow, and it has been redesigned to support Android TV.</p>
<h3>General</h3>
<ul>
<li>Updated EULA to separate PowerVR SDK (now under MIT licence) and PowerVR Tools (with a revised free license)</li>
</ul>
<h3>Examples</h3>
<ul>
<li>Ported a core of relevant SDK examples to be targeting the new PowerVR Framework</li>
<li>Examples are still classified by beginner, intermediate and advanced levels</li>
<li>Examples are now built per API family instead of per API version. At the moment, OpenGL ES Programmable pipeline (2.0+) is provided.</li>
<li>Platform max supported API version is now checked at runtime, usually creating the latest possible OpenGL context version unless otherwise instructed</li>
<li>Revamped the look and feel of the SDK examples by using new themes and assets</li>
</ul>
<h3>Framework</h3>
<ul>
<li>Brand new PowerVR Framework, replacing the PVRShell and PVRTools. The new framework consists of separate libraries providing groups of functionality as modules. These modules are PVRCore, PVRAssets, PVRShell, PVRPlatformGlue, PVRApi, PVRUIRenderer and PVRCamera</li>
<li>PVRCore provides support for the other modules</li>
<li>PVRShell provides platform abstraction/entry point (replaces the old PVRShell)</li>
<li>PVRPlatformGlue provides platform/API joining functionality to PVRShell</li>
<li>PVRApi provides an API abstraction on top of which to build the example (replacing PVRTools)</li>
<li>PVRUIRenderer provides 2D element drawing/layout functions (replaces the old tools Print3D)</li>
<li>PVRCamera provides HW Camera abstractions (replaces the CameraModule)</li>
<li>Uses C++ (namespacing, smart pointers, OOP), the C++ standard library, GLM for maths</li>
</ul>
<h3>PVRShaman v2.3.1</h3>
<ul>
<li>Updated to use Qt5</li>
</ul>
<h3>PVRTexTool v4.2.0</h3>
<ul>
<li>Updated the PVRTC compressor, improving the quality and memory consumption of compression</li>
<li>BRN51737: Fixed thread count calculation which caused an arithmetic exception on Linux and OSX</li>
<li>BRN55500: Fixed bug where flipped TGA files (starting top-left instead of bottom-left) were not being interpreted as such</li>
<li>Removed the PVRTexLib static libraries. Only the shared/dynamic libraries are available</li>
</ul>
<p>PVRTexToolGUI</p>
<ul>
<li>The astcenc process is now spawned correctly in PVRTexToolGUI for OSX</li>
</ul>
<h3>PVRVFrame v10.2</h3>
<ul>
<li>Fixed a bug in ES 1.1 where the format of internal vertex arrays could be overridden in certain situations.</li>
<li>Fixed glGetTexParameter only accepting GL_TEXTURE_2D as a target</li>
<li>Fixed EGL_TEXTURE_FORMAT not being accepted by eglCreatePbufferSurface</li>
<li>Fixed a bug where cube map textures with GL_LUMINANCE format couldn't be sampled correctly</li>
<li>Fixed GL_PATCHES draw mode not being accepted by draw commands</li>
<li>Fixed a spelling error causing 'EXT_tessellation_shader' to be reported as 'EXT_tesselation shader'</li>
<li>Fixed a crash in eglMakeCurrent(ctx) when ctx is already current on the current thread and has been marked for deletion</li>
<li>Fixed glRenderubfferStorage(GL_DEPTH_COMPONENT32F) reporting GL_INVALID_ENUM (BRN56437)</li>
<li>Fixed glGet(GL_MINOR_VERSION/GL_MAJOR_VERSION) returning the host version (BRN56454)</li>
<li>Fixed GL_VERSION string not being spec conformant (BRN55737)</li>
<li>Fixed 2d texture arrays not working correctly with compressed texture formats</li>
<li>Fixed a crash when using program interface queries</li>
<li>Fixed a potential crash in glCompressedTexImage3D</li>
<li>Fixed a case where unsupported GL features might be internally reported as supported, leading to segfaults</li>
<li>Fixed glGetFramebufferAttachmentParameteriv(GL_FRAMEBUFFER_ATTACHMENT_TEXTURE_SAMPLES_EXT) reporting GL_INVALID_ENUM</li>
<li>Fixed a bug where glGetFramebufferAttachmentParameteriv(GL_FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE) would always return GL_TEXTURE when using MSRTT</li>
<li>Fixed a bug where glGetFramebufferAttachmentParameteriv(GL_FRAMEBUFFER_ATTACHMENT_TEXTURE_SAMPLES_EXT) would report GL_INVALID_ENUM when using MSRTT</li>
<li>Fixed a bug where glGetRenderbufferParameteriv(GL_RENDERBUFFER_SAMPLES_EXT) would report GL_INVALID_ENUM even when EXT_multisampled_render_to_texture is supported by the context</li>
<li>Fixed a bug where extension strings returned by glGetStringi would be missing the "GL_" prefix</li>
<li>Fixed a bug where clients could delete vertex attribute zero</li>
<li>Fixed glBindFramebufferOES returning GL_INVALID_OPERATION when the given FBO name is not explicitly generated</li>
<li>Fixed eglGetCurrentSurface returning a hidden pbuffer surface when using surfaceless contexts</li>
<li>Fixed undefined reference in 32-bit Linux libraries</li>
<li>Added support for EXT_buffer_storage</li>
<li>Added support for ASTC compressed textures</li>
<li>GUI: Added hardware profile management tools</li>
</ul>
<h3>PVRTune v14.137</h3>
<ul>
<li>Fixed BRN57650: Re-enable 'Specify Clock Speed' in developer mode</li>
<li>Fixed BRN57653: 'Register overload' description is incorrect</li>
<li>Fixed BRN55864: PVRTune: Render state overrides are broken on Android when on the 3.5 SDK. Reproduced & fixed on Windows - it's not Android specific. Used OGLES3Water + PVRTrace + PVRVFrame</li>
<li>As per SDK 4.0 roadmap: removed old SGX DDK support - pre head of 1.7 branch. NIFs BRN32929 and BRN32930</li>
<li>Added support for Series6XE USC counters</li>
<li>Added support for PowerVR Series5XE GX5300. Needs testing</li>
<li>Added recognition of the following HW: G6020, GE7400, GE7800, GT7200, GT7400, GT7600, GT7800, GT7900</li>
<li>Added support for HW with no programmable counters</li>
<li>Counters:</li>
<ul>
<li>Added counter: "ISP pixel load"</li>
<li>Added "Overdraw" counter</li>
<li>Hide counters for cores that the HW does not have</li>
<li>"SPM active": counter restored to Developer build</li>
<li>Counters: "ISP overload" removed</li>
</ul>
</ul>
<p>PVRTuneGUI</p>
<ul>
<li>Custom counter group dialog box: merged middle two columns</li>
<li>Connection window: Removed the "adb forward" tip, since we have the button now</li>
<li>Fixed a bug where whatever was selected into the Counter Properties widget would have its y-axis value minimised when returning to the connect screen</li>
<li>Removed the timer; updated the colour when we check which counter is selected - eEventCountAppCycleActivity</li>
</ul>
<p>PVRPerfServer</p>
<ul>
<li>Fixed BRN57649: PVRPerfServer CPU sample rate now defaults to 1ms, which basically translates to "every wake-up" (and the current default wake-up is every 5ms). Bug fix: minimum CPU load time is 1ms, not 0ms</li>
<li>Allow a minimum wake-up time of 0ms, i.e. give up time slice but run again ASAP. PVRTune's remote control updated in kind</li>
</ul>
<h3>PVRShaderEditor v2.7.1</h3>
<ul>
<li>New dialog allows pre-processor macros to be modified and injected into the profiler output as you type</li>
<li>Added compiler support for tessellation and geometry shaders</li>
<li>New interface to select compiler flags on the fly, per tab</li>
</ul>
<h3>PVRGeoPOD v2.16.7</h3>
<ul>
<li>If a material contains an opacity map we now flag the material as requiring blending. This fixes BRN45171</li>
<li>Standalone: Updated the parser used internally</li>
<li>3DSMax: Added support for 3DSMax 2016 SP1 (IGame version 18.3.490.0)</li>
<li>3DSMax: Dropped support for anything older than 2013</li>
<li>3DSMax: Added support for igame version 18.0.873.0 (3DS Max 2016)</li>
<li>Maya: Fixed an issue in 2015 which caused geometry to go missing in some scenes</li>
<li>Maya: Dropped support for anything older that 2013</li>
</ul>
<h3>PVRTrace v3.6.1</h3>
<ul>
<li>Added support for the Android Extension Pack</li>
<li>Added support for recording and playing back EGL_EXT_swap_buffers_with_damage</li>
<li>The recorder now attempts to log calls to extension functions that are unknown to PVRTrace, and are viewable inside the GUI</li>
<li>PVRTrace now records the values of EGL_DEFAULT_DISPLAY, EGL_NO_DISPLAY, EGL_NO_SURFACE, EGL_NO_CONTEXT for mapping between platforms where they differ at playback time</li>
<li>Enums provided by EGL_EXT_buffer_age are now recognised</li>
</ul>
<p>PVRTraceGUI</p>
<ul>
<li>Fixed displaying fixed point data in the state widget</li>
<li>Fixed the ES1 part of the state widget that displays if a client array is enabled</li>
<li>Fixed the state for the last binding point</li>
<li>Fixed the loading of ES1.1 trace files that do matrix operations using the default matrix mode</li>
<li>Fixed a bug where it was possible to have an empty EGLSurfaces header in the EGL Objects list</li>
<li>Fixed a bug in the ShaderViewerWidget that meant the shader source didn't always show up</li>
<li>Fixed formatting of the clip planes in the state widget</li>
<li>Fixed a bug where pixel analysis data was empty after changing pie charts</li>
<li>Fixed some memory leaks</li>
<li>Fixed primitive highlighting on calls that modify the glColorMask</li>
<li>Fixed the second re-render when viewing image analysis normally</li>
<li>Fixed an issue where eglSwapBuffers was not getting played on the correct thread. This fixes BRN55633</li>
<li>Added support for EGL Displays to the object data viewer</li>
<li>Added Blended column to the draw call list widget (hidden by default) which will display if blending is enabled for that call</li>
<li>Added a tooltip to the draw call list widget that will display the information for all the columns regardless of whether they're visible</li>
<li>Added right-click option to draws/clears that allows the user to inform the scrubber of where you'd like to scrub up to</li>
<li>Added a new graph to the pixel analysis that displays the overdraw distribution</li>
<li>Added Program column to the draw call list widget</li>
<li>Added option to remove the crosshair to the right-click menu in image analysis. This fixes BRN47298</li>
<li>Added option to the image analysis right-click menu that allows you to remove the current highlight</li>
<li>Added option to the preferences allowing the user to select the pixel analysis cross-hair colour</li>
<li>Added vertex cost, fragment count, fragment cost and total cost to the draw call list. The latter 3 require fragment analysis to be enabled</li>
<li>Added option to enable/disable columns in the draw call list</li>
<li>Added option to save the draw call list and its data to .csv</li>
<li>Added thread colour to the Selected Pixel view</li>
<li>Added support for only exporting certain threads</li>
<li>Added render target column to the draw call list</li>
<li>Added option to normalize visualised depth and stencil data. This is enabled by default</li>
<li>Active texture values that exceed GL_TEXTURE31 will now appear as GL_TEXTURE0 + i instead of the GL enum value that they match to</li>
<li>When saving out a trace file from the GUI the version written to file will now specify PVRTrace GUI</li>
<li>Static analysis now shows when a call to glCheckFramebufferStatus didn't return GL_FRAMEBUFFER_COMPLETE</li>
<li>The static analysis can now be navigated via the keyboard. This fixes BRN48535</li>
<li>From the API object lists in the current call widget you can now right-click on an object and find all references of it</li>
<li>You can now copy search results to the clipboard by right-clicking on the Search's heading and choosing copy</li>
<li>Search results now appear as they're found</li>
<li>The GUI now correctly shows the shader source for trace files that were recorded without data</li>
<li>The Zoom level drop-downs in the GUI no longer permanently set the level when just highlighting, only on selection. This fixes BRN51520</li>
<li>Image analysis should now work on frames that rely on the contents of previous frames to be preserved</li>
<li>glDraw*Indirect calls now show up in the draw call list with their vertex counts</li>
<li>The Fragment Analysis table now shows if a shader uses discard</li>
<li>You can now export the state information of a call to .csv</li>
<li>Depth complexity now normalises the data so it better uses the available data range</li>
<li>PowerVR depth complexity view is now built from pixel analysis data</li>
<li>Hovering over the image analysis will now show the pixel value under the mouse pointer</li>
<li>Pixel Analysis now includes total vertex and fragment costs under the frame summary</li>
<li>Pixel Analysis now works for OpenGL ES 1</li>
<li>Pixel Analysis now contains Total cost and Total texture read columns</li>
<li>Saving images from the image analysis now displays a message on failure</li>
<li>Moved the statistics graph button to the top of the call view</li>
<li>Primitive highlighting now applies a colour overlay along with the wireframe. The wireframe and overlay have separate colours which can be defined in the preferences</li>
<li>Modified the way the GoTo dialog validates entry</li>
<li>The GoTo dialog now displays the current frame/call when there is no text</li>
<li>Fragment analysis now takes into account color mask, render target changes and opaque pixel writes that sandwich translucent writes when calculating</li>
<li>Output of GLeglImageOES values in the GUI now use the same format as EGLImages</li>
<li>Overhauled the save trace file dialog</li>
<li>Redesigned the image analysis widget</li>
<li>Fragment analysis now correctly works in situations where a program doesn't have an attached vertex shader or the shader has been modified after link</li>
<li>The normal analysis mode has been replaced with colour, depth and stencil options for viewing those respective buffers</li>
<li>For single primitive mode we now clear the image analysis to a user defined colour to make it easier to see your primitive</li>
<li>The draw call list now includes clears and updates based on the scrubber. It also shows the draw UIDs instead of a number</li>
<li>The current call now tracks with the scrubber. This feature is disabled by default and can be enabled in the preferences</li>
<li>Made improvements to the frame scrubber. The numbered boxes are replaced with a slider that updates in "real-time" but will drop "frames" if things are taking too long</li>
<li>When saving out a trace file from the GUI the saved framebuffer will now also be saved</li>
<li>The texture data viewer now recognises GL::DEPTH_STENCIL_TEXTURE_MODE</li>
<li>Modified the disable call feature so it is more restrictive in what you can disable</li>
<li>The state widget and object viewers now take into account disabled calls</li>
<li>A 100% shader analysis pie chart will no longer have a line segment in it</li>
<li>You can now view the attributes/uniforms/ uniform blocks of a program (only for recordings from 4.0 and later)</li>
</ul>
<p>PVRTracePlayback</p>
<ul>
<li>Fixed a bug that meant a certain combination of program setup calls would result in glUseProgram failing due to an unlinked program when jumping frames</li>
<li>Fixed playback of ID_ES3_glFlushMappedBufferRange for situations where the whole buffer wasn't getting flushed</li>
<li>Fixed deletion of surfaces and contexts which are current at the time their destroy functions are called</li>
<li>Fixed GL_PROGRAM_BINARY_LENGTH returning anything but 0 when program binaries are disabled</li>
<li>Added --skip-calls command-line option which allows you to skip calls by their UID</li>
<li>Added command-line option --raise-context-versions which will raise context client versions that it believes are incorrectly defined. E.g. situations where the app defines a version of 3.0 but uses 3.1 features</li>
<li>Added command-line option --config-info which will print out information on the configs used during playback. This fixes BRN56575</li>
<li>Rewrote the way we playback multi-threaded trace files</li>
<li>We now output a message after loading to say which frames contain renderstate information</li>
<li>When using the range option in the playback it will now only load up to the frames it needs to</li>
<li>Playback can now save the framebuffer as PNG files</li>
</ul>
<p>PVRTrace Recorder</p>
<ul>
<li>Fixed crash that could occur while framebuffer saving is enabled for applications that use differently sized EGL surfaces</li>
<li>Fixed recording of glDrawElements calls without a bound element array buffer</li>
<li>Fixed a crash that could occur when attempting to record ycbcr clientbuffers on Android</li>
<li>Fixed recording of the EGL_MATCH_FORMAT_KHR config attribute</li>
<li>Fixed a crash that could occur if you attempt to record glEnableVertexAttribArray without a current context</li>
<li>Added missing OpenGL ES 3.1 entry points for Windows recording libraries</li>
<li>Added an option to the configuration file to turn off the attempted logging of calls to unknown extension functions</li>
<li>When a display is first initialised we now record some information about the display</li>
<li>The message "Recording... Current frame" is now correctly output for frame 0</li>
<li>The first time a context is made current we now record the maximum values, gl strings etc. This information can be viewed in the GUI when viewing the context data</li>
<li>We now output a warning if no config settings are found for the current process</li>
<li>Changed it so it will still work if only EGL 1.1 functions are found (e.g. if you used libGLES_CM for the EGL host library)</li>
<li>Implemented a fix for tracing Windows/Linux applications that use PVRVFrame and load the GLES functions at runtime</li>
<li>Recording OpenGL ES 2,3,3.1 functions that are being called without a current context should no longer crash when not recording from frame 0</li>
<li>At program link time we now record information on the active attributes, uniforms and uniform blocks</li>
</ul>
<h3>PVRHub v3.0</h3>
<ul>
<li>Added support for Android Marshmallow.</li>
<li>Added a warning when installing the PVRTrace recording libraries on untested Android versions. The PVRTraceInstaller now needs a -f argument to force an install</li>
<li>The interface can now be fully navigated using directional input such as a remote control</li>
<li>Fixed crash when launching Android TV apps that only have the LEANBACK_LAUNCHER category declared for their activities</li>
</ul>
<h3>PVRMonitor v1.03</h3>
<ul>
<li>PVRMonitor now builds to a minimum API Level of 18 (was 14), which is Android 4.3 from July 2013</li>
</ul>
<h3>Documentation</h3>
<ul>
<li>New utility features have been documented in their respective user manuals</li>
<li>Updated the PowerVR SDK Browser in line with the changes brought about to the PowerVR SDK</li>
<li>Source code documentation for the PowerVR Framework is packaged in their respective modules, as well as being accessible through the PowerVR SDK Browser</li>
</ul>
</div>
&nbsp;
<div id="3.5">
<h2>PowerVR Tools and SDK v3.5</h2>
<h3>Overview</h3>
......
SDK END USER LICENSE AGREEMENT
PLEASE READ THIS AGREEMENT CAREFULLY. BY USING ANY PORTION OF THE SDK YOU WILL BE LEGALLY BOUND TO THESE TERMS.
Imagination Technologies Limited ("Imagination") provides this Software Development Kit subject to the terms of this Agreement. If you do not agree with any of these terms, then do not install or otherwise use the SDK.
1. Definitions
"SDK" means all or any component of software in source or binary form, tools, code examples, drivers, files, libraries, utilities, reference manuals, documentation, or other materials, and including any related updates or upgrades made available by Imagination under this Agreement from time to time.
2. Licence Grant
Subject to your compliance with the terms of this Agreement, Imagination grants to you a non-exclusive, non-assignable licence to:
(a) use the SDK for the sole purpose of developing, profiling, or assisting in the optimisation of internal, commercial, or non-commercial applications ("Development License");
(b) distribute the SDK in source code, object file, or compiled binary form as a component of your application, provided that:
i. you do not distribute the SDK on a stand alone basis;
ii. you distribute such components under terms no less restrictive than those in this Agreement;
iii. you comply with the attribution requirements set out in Appendix 1;
iv. you are solely responsible for any update, support obligation or other liability that may arise from such distribution;
v. you do not make any statements that your application or its performance are certified, guaranteed or otherwise endorsed by Imagination ("Production License")
(c) Use the SDK as expressly authorised by Imagination in writing, on the payment and/or support terms set out in Appendix 2 (if applicable) ("Custom License").
3. Restrictions
Other than as expressly permitted herein, you may not: (i) use the SDK for any unauthorised purpose; (ii) modify, disassemble, decompile, reverse engineer, revise or enhance the SDK, create derivative works or attempt to discover the source code for any element of the SDK not already provided in source code form; (iii) remove any proprietary or copyright notices on or accompanying the SDK; or (iv) incorporate or combine the SDK, with any open source software in such a way that would cause the SDK, or any portion thereof, to be subject to all or part of the licence obligations or other intellectual property related terms with respect to such open source software.
4. Ownership and Contributions
Imagination retains all ownership of the SDK, including without limitation all copyrights and other intellectual property rights therein.
To the extent you provide any feedback or make any contributions in connection with the SDK (collectively "contributions"), you agree to assign all intellectual property rights in such contribution to Imagination and agree not to assert any related rights against Imagination or any of its customers or licensees. You understand and agree that Imagination is not required to make any use of any contribution that you provide, but that if Imagination makes use of your contribution, neither Imagination nor any of its customers or licensees are required to credit or compensate you for your contribution. You represent and warrant that you have sufficient rights in your contribution to comply with the foregoing.
5. Warranty Disclaimer
THE SDK IS PROVIDED "AS IS". Imagination HEREBY DISCLAIMS ALL EXPRESS OR IMPLIED WARRANTIES AND CONDITIONS WITH REGARD TO THE SDK, INCLUDING ALL WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT.
6. Limitation of Liability
IN NO EVENT WILL Imagination BE LIABLE TO YOU FOR ANY DAMAGES, CLAIMS OR COSTS WHATSOEVER ARISING FROM THIS AGREEMENT AND/OR YOUR USE OF THE SDK OR ANY COMPONENT THEREOF, INCLUDING WITHOUT LIMITATION ANY CONSEQUENTIAL, INDIRECT, INCIDENTAL DAMAGES, OR ANY LOST PROFITS OR LOST SAVINGS, EVEN IF Imagination HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH LOSS, DAMAGES, CLAIMS OR COSTS OR FOR ANY CLAIM BY ANY THIRD PARTY. THE FOREGOING LIMITATIONS AND EXCLUSIONS APPLY TO THE EXTENT PERMITTED BY APPLICABLE LAW IN YOUR JURISDICTION.
7. Third Party Materials
All third party materials found on this SDK, including without limitation, artwork, graphics, game demos and patches, are the sole and exclusive property of such third parties. Imagination makes no representations or warranties about the accuracy, usability or validity of any third party materials, and disclaims all liabilities in connection with such third party materials.
8. Term
This Agreement is effective until terminated. Imagination has the right to terminate this Agreement immediately if you fail to comply with any term of this Agreement. You may terminate this Agreement by destroying or returning to Imagination all copies of the SDK in your possession.
9. Governing Law
This Agreement is governed by and shall be construed in accordance with English law and each party agrees to submit to the exclusive jurisdiction of the courts of England.
APPENDIX 1: ATTRIBUTION REQUIREMENTS
If source code is released as it is, the Copyright notice should be kept in a visible position.
If object code is bundled with a product, all branding should be kept as it was originally, and the following acknowledgement should be displayed clearly in any associated documentation or other collateral in printed or electronic form distributed with the product incorporating the SDK component: "This product includes components of the PowerVR SDK from Imagination Technologies Limited"
If source code is used to compile a product, the following acknowledgement should be displayed clearly in any associated documentation or other collateral in printed or electronic form distributed with the product incorporating the SDK component: "This product includes components of the PowerVR SDK from Imagination Technologies Limited"
APPENDIX 2: FEES
LICENCE FEES: 0 (Zero)
ROYALTY FEES: 0 (Zero)
SUPPORT AND MAINTENANCE TERMS AND FEES: 0 (Zero)
-----------------------------------------------
POWERVR SDK SOFTWARE END USER LICENSE AGREEMENT
-----------------------------------------------
The MIT License (MIT)
Copyright (c) Imagination Technologies Ltd.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment