WebGL 1.x Examples

WebGL is a cross-platform API for 2D and 3D graphics on the web, based on OpenGL(r) ES 2.0. WebGL exposes everything that OpenGL ES 2.0 does, as well as various extensions to expose additional functionality, but inside a browser. As with OpenGL ES 2.0, WebGL has a programmable pipeline with shaders for much more flexibility than has previously been available in web standards. The API is fully GPU accelerated, allowing fairly modern graphics applications to run with performance in a browser with no additional plug-ins or downloads. As this is a Web-based API, the examples below will run directly in your browser (if supported).

Note: To run the WebGL SDK examples from the links below, you will need to host the SDK in a web server. For more information please refer to the WebGL section in Getting Started.

Beginner | Intermediate | Advanced

Beginner

  • HelloAPI

    Draw a triangle to the screen using hardware acceleration.

    WebGL

    Description:

    A basic tutorial that guides the user, step-by-step, through the process of initializing a window using :API:, drawing a triangle in it using hardware acceleration, and then terminating the window.

    Controls:

    Esc : Close the application

    Links:

    WebGLHelloAPI.js | Launch demo

  • IntroducingPVRShell

    This training course introduces the PVRShell library.

    WebGL

    Description:

    This demo deals with the PVRShell library. The PowerVR shell handles all OS specific initialisation code, and has several built in command line features which allow for the specifying of attributes. The library is constructed around a 'PVRShell' base class, and object of which is constructed and returned from a 'NewDemo' function.

    Controls:

    Esc : Close the application

    Links:

    WebGLIntroducingPVRShell.js | Launch demo

  • Texturing

    This training course demonstrates how to apply a texture to a polygon in :API:.

    WebGL

    Description:

    This training course demonstrates how to apply a texture to a polygon in :API:. The texture is generated procedurally during initialisation and then loaded into :API:. The triangle is then drawn with UV values so that the texture can be applied to it.

    Controls:

    Esc : Close the application

    Links:

    WebGLTexturing.js | Launch demo

  • BasicTnL

    This training course consists of a demonstration of basic transformation and lighting.

    WebGL

    Description:

    This training course consists of a demonstration of basic transformation and lighting, growing on the basic drawing techniques learnt in HelloTriangle.

    Controls:

    Esc : Close the application

    Links:

    WebGLBasicTnL.js | Launch demo

  • IntroducingPVRTools

    This training course introduces the PVRTools libraries.

    WebGL

    Description:

    This training course introduces the PVRTools libraries. These libraries provide various modules to help developers perform many of the common tasks associated with hardware accelerated graphics rendering.

    Controls:

    Esc : Close the application

    Links:

    WebGLIntroducingPVRTools.js | Launch demo

  • IntroducingPrint3D

    This training course introduces the Print3D class featured within the PVRTools library.

    WebGL

    Description:

    This training course introduces the Print3D class from the PVRTools library. Print3D can be used to display text in both 2D and 3D modes. The default projection mode is 2D but supplying a modelview and projection matrices allow the user to render the text in 3D. Text in different colours is also possible.

    Controls:

    Links:

    WebGLIntroducingPrint3D.js | Launch demo

  • IntroducingPOD

    This training course introduces the PowerVR Object Data (.pod) format.

    WebGL

    Description:

    This training course introduces the PowerVR Object Data (.pod) format. It goes into detail on how to open .pod files, load any .pfx and .pvr files that have been referenced, and set up the cameras and lights from the .pod file.

    Controls:

    Esc : Close the application

    Links:

    WebGLIntroducingPOD.js | Launch demo

Intermediate

  • RenderToTexture

    This training course demonstrates the use of rendering to a texture.

    WebGL

    Description:

    This training course demonstrates rendering a scene to a pBuffer surface or FBO, then binding and applying that render to an object in an additional render pass.

    Controls:

    Left : Toggles multisampling of the FBOs

    Esc : Close the application

    Links:

    WebGLRenderToTexture.js | Launch demo

Advanced

  • Water

    This demo shows how to render a water effect on a given plane

    WebGL

    Description:

    This demo utilises a combination of different techniques to produce a water effect. User input controls the elements that are implemented in the effect so that users can determine the effect that would best suit their needs. When reflection, refraction and depth effects are off, the water colours alpha value is used to blend the plane in with the rest of the rendered world. This adds to the quality of the basic effect for very little cost.

    Controls:

    Left/Right : Cycle backwards/forwards through available options

    Up/Down : Change (Toggle or Increase/Decrease) the currently selected option

    1/Space : Toggle Pause/Unpause

    Links:

    WebGLWater.js | Launch demo