├── Documentation ├── Architecture Guides │ ├── PowerVR Hardware.Architecture Overview for Developers.pdf │ ├── PowerVR Performance Recommendations.The Golden Rules.pdf │ ├── PowerVR.Performance Recommendations.pdf │ └── PowerVR.Supported Extensions.OpenGL ES.EGL.pdf ├── SDKBrowser │ ├── Contact.html │ ├── Documentation.html │ ├── Examples.html │ ├── Framework.html │ ├── GettingStarted.html │ ├── Home.html │ ├── Licence.html │ ├── PowerVRTools.html │ ├── ReleaseNotes.html │ ├── WebGL.html │ ├── images │ │ ├── ExamplesPageGraphic.png │ │ ├── PVRGeoPOD_300x182.png │ │ ├── PVRHub_300x182.png │ │ ├── PVRMonitor_300x182.png │ │ ├── PVRScope_300x182.png │ │ ├── PVRShaderEditor_300x182.png │ │ ├── PVRShaman_300x182.png │ │ ├── PVRTexTool_300x182.png │ │ ├── PVRTrace_300x182.png │ │ ├── PVRTune_300x182.png │ │ ├── PVRVFrame_300x182.png │ │ ├── PVRlogo.png │ │ ├── PowerVRFrameworkComponents.png │ │ ├── WelcomeGraphic.png │ │ ├── img-footer-logo-grey.png │ │ └── img-icon.png │ └── style.css └── Specifications │ ├── PFX Language Format.Specification.pdf │ ├── POD File Format.Specification.pdf │ ├── PVR File Format.Specification.Legacy.pdf │ └── PVR File Format.Specification.pdf ├── Examples ├── Advanced │ └── Water │ │ ├── FragShader.fsh │ │ ├── Media │ │ ├── Island Height Map3.2.png │ │ ├── NewNormalMap.png │ │ ├── ThickCloudsWaterBack2048.png │ │ ├── ThickCloudsWaterDown2048.png │ │ ├── ThickCloudsWaterFront2048.png │ │ ├── ThickCloudsWaterLeft2048.png │ │ ├── ThickCloudsWaterRight2048.png │ │ ├── ThickCloudsWaterUp2048.png │ │ ├── coins-specular.png │ │ ├── coins.png │ │ ├── crate.png │ │ ├── flag.png │ │ ├── galleon-sails.png │ │ ├── galleon.png │ │ ├── mountain1.png │ │ ├── mountain2.png │ │ ├── mountain3.png │ │ ├── mountain4.png │ │ ├── mountain5.png │ │ ├── mountain6.png │ │ ├── palmleaf.png │ │ ├── sail.png │ │ ├── sand.png │ │ ├── scene.max │ │ └── wood.png │ │ ├── ModelFShader.fsh │ │ ├── ModelVShader.vsh │ │ ├── PlaneTexFShader.fsh │ │ ├── PlaneTexVShader.vsh │ │ ├── Scene.pod │ │ ├── SkyboxFShader.fsh │ │ ├── SkyboxVShader.vsh │ │ ├── Tex2DFShader.fsh │ │ ├── Tex2DVShader.vsh │ │ ├── VertShader.vsh │ │ ├── Water.png │ │ ├── Water.txt │ │ ├── WebGLWater.js │ │ ├── coins-specular.pvr │ │ ├── coins.pvr │ │ ├── crate.pvr │ │ ├── flag.pvr │ │ ├── galleon-sails.pvr │ │ ├── galleon.pvr │ │ ├── index.html │ │ ├── normalmap.pvr │ │ ├── palmleaf.pvr │ │ ├── sand.pvr │ │ ├── skybox.pvr │ │ └── wood.pvr ├── Beginner │ ├── 01_HelloAPI │ │ ├── HelloAPI.png │ │ ├── HelloAPI.txt │ │ ├── WebGLHelloAPI.js │ │ └── index.html │ ├── 02_IntroducingPVRShell │ │ ├── IntroducingPVRShell.png │ │ ├── IntroducingPVRShell.txt │ │ ├── WebGLIntroducingPVRShell.js │ │ └── index.html │ ├── 03_Texturing │ │ ├── Texturing.png │ │ ├── Texturing.txt │ │ ├── WebGLTexturing.js │ │ └── index.html │ ├── 04_BasicTnL │ │ ├── BasicTnL.png │ │ ├── BasicTnL.txt │ │ ├── WebGLBasicTnL.js │ │ └── index.html │ ├── 05_IntroducingPVRTools │ │ ├── FragShader.fsh │ │ ├── Image.pvr │ │ ├── IntroducingPVRTools.png │ │ ├── IntroducingPVRTools.txt │ │ ├── Media │ │ │ └── image.png │ │ ├── VertShader.vsh │ │ ├── WebGLIntroducingPVRTools.js │ │ └── index.html │ ├── 06_IntroducingPrint3D │ │ ├── FragShader.fsh │ │ ├── IntroducingPrint3D.png │ │ ├── IntroducingPrint3D.txt │ │ ├── Text.txt │ │ ├── VertShader.vsh │ │ ├── WebGLIntroducingPrint3D.js │ │ ├── arial_36.pvr │ │ ├── index.html │ │ ├── starjout_60.pvr │ │ └── title_36.pvr │ └── 07_IntroducingPOD │ │ ├── FragShader.fsh │ │ ├── IntroducingPOD.png │ │ ├── IntroducingPOD.txt │ │ ├── Media │ │ ├── scene.max │ │ ├── tex_arm.png │ │ └── tex_base.png │ │ ├── Scene.pod │ │ ├── VertShader.vsh │ │ ├── WebGLIntroducingPOD.js │ │ ├── index.html │ │ ├── tex_arm.pvr │ │ └── tex_base.pvr └── Intermediate │ └── RenderToTexture │ ├── FragShader.fsh │ ├── Media │ ├── MaskAndBox.max │ └── YellowWood.png │ ├── RenderToTexture.png │ ├── RenderToTexture.pod │ ├── RenderToTexture.txt │ ├── VertShader.vsh │ ├── WebGLRenderToTexture.js │ ├── YellowWood.pvr │ └── index.html ├── LICENSE_POWERVR_SDK.txt ├── README.md ├── SDKBrowser.html ├── Shell ├── PVRShell.js └── style.css └── Tools ├── Media ├── PVRPrint3DFont.pvr └── PVRPrint3DLogo.pvr ├── PVRAnimation.js ├── PVRFileStream.js ├── PVRMaths.js ├── PVRMesh.js ├── PVRModel.js ├── PVRPODLoader.js ├── PVRPrint3D.js ├── PVRShader.js └── PVRTexture.js /Documentation/Architecture Guides/PowerVR Hardware.Architecture Overview for Developers.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/Architecture Guides/PowerVR Hardware.Architecture Overview for Developers.pdf -------------------------------------------------------------------------------- /Documentation/Architecture Guides/PowerVR Performance Recommendations.The Golden Rules.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/Architecture Guides/PowerVR Performance Recommendations.The Golden Rules.pdf -------------------------------------------------------------------------------- /Documentation/Architecture Guides/PowerVR.Performance Recommendations.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/Architecture Guides/PowerVR.Performance Recommendations.pdf -------------------------------------------------------------------------------- /Documentation/Architecture Guides/PowerVR.Supported Extensions.OpenGL ES.EGL.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/Architecture Guides/PowerVR.Supported Extensions.OpenGL ES.EGL.pdf -------------------------------------------------------------------------------- /Documentation/SDKBrowser/Contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The PowerVR SDK Browser 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 18 |
19 | 50 | 51 |
52 |

Contact Details

53 |

Forum

54 |

For further support, please visit our forum.

55 |

Support and Ticketing System

56 |

Alternatively, file a ticket in our support system.

57 |

PowerVR Insider

58 |

To learn more about our PowerVR Graphics SDK and Insider programme, please visit our community webpages.

59 |

General Enquiries

60 |

For general enquiries, please visit our corporate website.

61 |
62 |

Further Contact Info

63 | Imagination Technologies Ltd.
64 | Home Park Estate
65 | Kings Langley
66 | Hertfordshire, WD4 8LZ
67 | United Kingdom

68 |

Tel: +44 (0)1923 260511

69 |

Fax: +44 (0)1923 277463

70 |
71 |
72 |
73 |
74 | 77 | 78 |
79 |
80 | 81 | 82 | -------------------------------------------------------------------------------- /Documentation/SDKBrowser/Documentation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The PowerVR SDK Browser 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 18 |
19 | 50 | 51 |
52 |

Documentation

53 |

This page provides a list of documents relevant to the SDK, including architecture guides, specifications and whitepapers. These documents are also accessible from the Documentation folder.

54 |
55 |

Architecture Guides | Specifications | Whitepapers

56 | 57 |
58 |

Architecture Guides

59 | 65 |
66 | 67 |
68 |

Specifications

69 | 75 |
76 | 77 |
78 |

Whitepapers

79 | 90 |
91 |
92 |
93 |
94 |
95 | 98 | 99 |
100 |
101 | 102 | 103 | -------------------------------------------------------------------------------- /Documentation/SDKBrowser/Framework.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The PowerVR SDK Browser 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 18 |
19 | 50 | 51 |
52 |

Framework

53 |

Contents: Overview | Building | Creating an Application | Guidelines and Recommendations

54 |   55 |
56 |

Overview

57 |

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.

58 |

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.

59 |

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.

60 | 61 |

PVRCore

62 |

View source code documentation

63 |

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.

64 |

PVRAssets

65 |

View source code documentation

66 |

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.

67 |

PVRShell

68 |

View source code documentation

69 |

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.

70 |

PVRApi

71 |

View source code documentation

72 |

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.

73 |

PVRPlatformGlue

74 |

View source code documentation

75 |

This helper project provides necessary abstraction between the underlying system (PVRShell) and graphics API (PVRApi).

76 |

PVRUIRenderer

77 |

View source code documentation

78 |

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.

79 |

PVRCamera

80 |

View source code documentation

81 |

This is the code for interfacing with the camera of mobile platforms.

82 |
83 | 84 |
85 |

Building

86 |

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 [SDK]/Framework/Bin/[Platform], where [SDK] is the SDK root and [Platform] is the name of your platform of interest - this is where you would normally link.

87 |

All modules can be built separately, by navigating to [SDK]/Framework/[ModuleName]/Build/[Platform], where [ModuleName] 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. 88 |

89 | 90 |
91 |

Creating an Application

92 |

To create a typical application, please follow these steps:

93 |
    94 |
  1. Firstly, either build the Framework components previously mentioned (by moving to the corresponding /Builds/[Platform] or add their build scripts and projects to your own
  2. 95 |
  3. 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:
  4. 96 |

    Examples/[Intermediate/Advanced]/[API]/Builds/[Platform], where [Intermediate/Advanced] is the folder for either the intermediate or advanced example applications supplied with the SDK. In more detail:

    97 |
      98 |
    • Add include directories:
    • 99 |
        100 |
      • /Framework
      • 101 |
      • /Builds/Include
      • 102 |
      103 |
    • Add library directories:
    • 104 |
        105 |
      • Framework/Bin/[Platform]
      • 106 |
      • (Optional) /Builds/[Platform]/Lib
      • 107 |
      108 |
    • Link against static libraries:
    • 109 |
        110 |
      • (Optional) PVRUIRenderer
      • 111 |
      • PVR[API]
      • 112 |
      • PVRPlatformGlue
      • 113 |
      • PVRShell
      • 114 |
      • PVRAssets
      • 115 |
      • PVRCore
      • 116 |
      117 |
    118 |
  5. Create your application files. For a single CPP file, your includes will usually be:
  6. 119 |
      120 |
    • PVRShell/PVRShell.h
    • 121 |
    • PVRApi/PVRApi.h
    • 122 |
    • PVRApi/AssetManager.h (if you plan to use the AssetManager for loading)
    • 123 |
    • PVRUIRenderer/PVRUIRenderer.h (if you plan to use the UIRenderer)
    • 124 |
    125 |
  7. Write the skeleton of your application (see description of PVRShell)
  8. 126 |
127 |
128 | 129 |
130 |

Guidelines and Recommendations

131 |

Below are a set of guidelines and recommendations you might want to consider when using PowerVR Framework:

132 | 142 |
143 |
144 |
145 |
146 |
147 | 150 | 151 |
152 |
153 | 154 | 155 | -------------------------------------------------------------------------------- /Documentation/SDKBrowser/Home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The PowerVR SDK Browser 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 18 |
19 | 50 |
51 | 52 |

The PowerVR SDK includes source code, example applications, tutorials and documentation. For further details regarding your SDK installation, please visit the Getting Started page.

53 |

The Examples page features a range of methods from initialising the API through to complex 3D graphics techniques. Many of these take advantage of our Framework which includes a range of modules available as source libraries.

54 |

We've also supplied a range of documents which can be accessed from the Documentation page. These documents include the relevant list of architecture guides, specifications, user manuals and whitepapers.

55 |

Additional information is provided in this browser regarding the PowerVR Tools, which are suite of utilities for rapid graphics application development (see PowerVR Tools page). A Release Notes page is also present, detailing what's changed in this release of the PowerVR Tools and SDK.

56 |

Developers can join the PowerVR Insider programme and interact with our online Community at www.powervrinsider.com. Also visit our Contact page for further details on how to get in touch with us.

57 |
58 |
59 |
60 |
61 | 64 | 65 |
66 |
67 | 68 | 69 | -------------------------------------------------------------------------------- /Documentation/SDKBrowser/Licence.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The PowerVR SDK Browser 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 18 |
19 | 50 | 51 |
52 |

End User License Agreement (EULA)

53 |

PowerVR SDK

54 |

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 here to view the "PowerVR SDK Software End User License Agreement".

55 |

PowerVR Tools

56 |

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 here to view the agreement.

57 |

FAQ

58 |

Frequently asked questions about the PowerVR SDK Software EULA and PowerVR Tools Software EULA can be found here.

59 |
60 |
61 |
62 |
63 | 66 | 67 |
68 |
69 | 70 | 71 | -------------------------------------------------------------------------------- /Documentation/SDKBrowser/PowerVRTools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The PowerVR SDK Browser 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 18 |
19 | 50 | 51 |
52 |

PowerVR Tools

53 |

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.

54 |

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):

55 | 60 |

Some utilities may have additional requirements, such as minimum version of OpenGL. For more information, please refer to the webpage of the utility you are interested in.

61 |
62 |

Asset Deployment Utilities | Development Utilities | Performance Analysis Utilities

63 |
64 |

Asset Deployment Utilities

65 | 79 |
80 | 81 |
82 |

Development Utilities

83 | 103 |
104 | 105 |
106 |

Performance Analysis Utilities

107 | 139 |
140 |
141 |
142 |
143 | 146 | 147 |
148 |
149 | 150 | 151 | -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/ExamplesPageGraphic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/ExamplesPageGraphic.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/PVRGeoPOD_300x182.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/PVRGeoPOD_300x182.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/PVRHub_300x182.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/PVRHub_300x182.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/PVRMonitor_300x182.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/PVRMonitor_300x182.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/PVRScope_300x182.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/PVRScope_300x182.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/PVRShaderEditor_300x182.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/PVRShaderEditor_300x182.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/PVRShaman_300x182.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/PVRShaman_300x182.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/PVRTexTool_300x182.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/PVRTexTool_300x182.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/PVRTrace_300x182.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/PVRTrace_300x182.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/PVRTune_300x182.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/PVRTune_300x182.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/PVRVFrame_300x182.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/PVRVFrame_300x182.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/PVRlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/PVRlogo.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/PowerVRFrameworkComponents.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/PowerVRFrameworkComponents.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/WelcomeGraphic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/WelcomeGraphic.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/img-footer-logo-grey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/img-footer-logo-grey.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/images/img-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/SDKBrowser/images/img-icon.png -------------------------------------------------------------------------------- /Documentation/SDKBrowser/style.css: -------------------------------------------------------------------------------- 1 | /*---------------------------------------------------------------*/ 2 | /* Global Style 3 | /*---------------------------------------------------------------*/ 4 | 5 | html,body {width:100%;} 6 | 7 | body { 8 | margin: 0px; 9 | font-family: HelvNeuRoman, Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; 10 | font-size: 13px; 11 | color: #555; 12 | } 13 | 14 | h1 { 15 | font-family: HelvNeuMed, Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; 16 | font-weight: normal; 17 | font-size: 34px; 18 | letter-spacing: -0.01em; 19 | color: #000; 20 | } 21 | 22 | h2 { 23 | font-size: 20px; 24 | font-family: HelvNeuBold, Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; 25 | font-weight: normal; 26 | background-color: #eee; 27 | color: #222; 28 | padding: 15px; 29 | } 30 | 31 | h3 { 32 | font-size: 16px; 33 | font-family: HelvNeuRoman, Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; 34 | font-weight: normal; 35 | color: #222; 36 | } 37 | 38 | p { 39 | font-size: 13px; 40 | line-height: 18px; 41 | } 42 | 43 | a { 44 | color: #cd239d; 45 | text-decoration: none; 46 | } 47 | a:hover { 48 | color: #555; 49 | } 50 | 51 | .content { 52 | max-width: 960px; 53 | position: relative; 54 | margin: 0 auto; 55 | } 56 | 57 | .code 58 | { 59 | font-family: monospace; 60 | background-color: #eee; 61 | } 62 | 63 | i { 64 | color: #cd239d; 65 | } 66 | 67 | .link 68 | { 69 | color: #555; 70 | } 71 | 72 | .link:hover 73 | { 74 | color: #cd239d; 75 | } 76 | 77 | img { 78 | border: none; 79 | max-width: 100%; 80 | height: auto; 81 | } 82 | 83 | table { 84 | margin-top: 20px; 85 | margin-bottom: 20px; 86 | border-bottom: 1px solid #dddddd; 87 | } 88 | 89 | th { 90 | background: #eee; 91 | color:#222; 92 | padding: 10px 10px; 93 | text-align: left; 94 | } 95 | 96 | table tbody tr:nth-child(even) { 97 | background: #f9f9f9; 98 | } 99 | 100 | table tbody td { 101 | color: #555; 102 | padding: 10px 10px; 103 | } 104 | 105 | hr { 106 | border: none; 107 | height: 1px; 108 | background: #eaeaea; 109 | margin: 40px 0px 0px 0px; 110 | display: block; 111 | } 112 | 113 | /*---------------------------------------------------------------*/ 114 | /* Header 115 | /*---------------------------------------------------------------*/ 116 | 117 | #GlobalHeaderContainer { 118 | background: #4f1455; /* Old browsers */ 119 | /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 120 | background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmMTQ1NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMDBiMzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 121 | background: -moz-linear-gradient(top, #4f1455 0%, #300b33 100%); /* FF3.6+ */ 122 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f1455), color-stop(100%,#300b33)); /* Chrome,Safari4+ */ 123 | background: -webkit-linear-gradient(top, #4f1455 0%,#300b33 100%); /* Chrome10+,Safari5.1+ */ 124 | background: -o-linear-gradient(top, #4f1455 0%,#300b33 100%); /* Opera 11.10+ */ 125 | background: -ms-linear-gradient(top, #4f1455 0%,#300b33 100%); /* IE10+ */ 126 | background: linear-gradient(to bottom, #4f1455 0%,#300b33 100%); /* W3C */ 127 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f1455', endColorstr='#300b33',GradientType=0 ); /* IE6-8 */ 128 | } 129 | 130 | #GlobalHeader { 131 | max-width: 960px; 132 | min-height: 83px; 133 | margin: 0px auto; 134 | display: block; 135 | overflow: hidden; 136 | } 137 | 138 | #GlobalHeader .logo { 139 | float: left; 140 | margin-top: 20px; 141 | } 142 | 143 | #GlobalHeader .sitetitle { 144 | font-family: HelvNeuMed, Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; 145 | font-weight: normal; 146 | font-size: 34px; 147 | letter-spacing: -0.01em; 148 | color: white; 149 | float: right; 150 | margin-top: 20px; 151 | } 152 | 153 | /*---------------------------------------------------------------*/ 154 | /* Tab Navigation 155 | /*---------------------------------------------------------------*/ 156 | 157 | #NavContainer { 158 | width: 100%; 159 | background-color: #650f4d; 160 | border-top: 1px solid #300b33; 161 | min-height: 41px; 162 | } 163 | 164 | nav { 165 | max-width: 960px; 166 | margin: 0px auto; 167 | border-left: 1px solid #510c3e; 168 | } 169 | 170 | nav .navlink { 171 | float: left; 172 | font-family: HelvNeuRoman, Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; 173 | font-weight: normal; 174 | font-size: 13px; 175 | text-decoration: none; 176 | border-left: 1px solid #75275f; 177 | border-right: 1px solid #510c3e; 178 | position: relative; 179 | background-color: #650f4d; 180 | } 181 | 182 | .navlink:hover { 183 | background-color: #fff; 184 | color: #222; 185 | box-shadow: 0 -5px 0 #cd2da0; 186 | } 187 | 188 | .navlink a { 189 | color: #fff; 190 | text-decoration: none; 191 | display: block; 192 | padding: 12px 15px 3px 15px !important; 193 | height: 41px; 194 | box-sizing: border-box; 195 | -moz-box-sizing: border-box; 196 | -webkit-box-sizing: border-box; 197 | } 198 | .navlink:hover a { 199 | color: #222; 200 | } 201 | 202 | .navlink a.current { 203 | background-color: #300b33; 204 | color: #fff; 205 | box-shadow: 0 -5px 0 #cd2da0; 206 | } 207 | 208 | .navlink:hover a.current { 209 | background-color: #fff; 210 | color: #222; 211 | box-shadow: 0 -5px 0 #cd2da0; 212 | } 213 | 214 | /* Sub-navigation Styles */ 215 | 216 | #SubNavContainer { 217 | width: 100%; 218 | background-color: #650f4d; 219 | border-top: 5px solid #300b33; 220 | min-height: 41px; 221 | } 222 | 223 | nav .subnavlink { 224 | float: left; 225 | font-family: HelvNeuRoman, Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; 226 | font-weight: normal; 227 | font-size: 13px; 228 | text-decoration: none; 229 | border-left: 1px solid #75275f; 230 | border-right: 1px solid #510c3e; 231 | position: relative; 232 | } 233 | 234 | .subnavlink:hover { 235 | background-color: #fff; 236 | color: #222; 237 | /*box-shadow: 0 -5px 0 #cd2da0;*/ 238 | } 239 | 240 | .subnavlink a { 241 | color: #fff; 242 | text-decoration: none; 243 | display: block; 244 | padding: 12px 15px 3px 15px !important; 245 | height: 41px; 246 | box-sizing: border-box; 247 | -moz-box-sizing: border-box; 248 | -webkit-box-sizing: border-box; 249 | } 250 | .subnavlink:hover a { 251 | color: #222; 252 | } 253 | 254 | .subnavlink a.current { 255 | background-color: #300b33; 256 | color: #fff; 257 | /*box-shadow: 0 -5px 0 #cd2da0;*/ 258 | } 259 | 260 | .subnavlink:hover a.current { 261 | background-color: #fff; 262 | color: #222; 263 | /*box-shadow: 0 -5px 0 #cd2da0;*/ 264 | } 265 | 266 | /*---------------------------------------------------------------*/ 267 | /* Footer 268 | /*---------------------------------------------------------------*/ 269 | 270 | #FooterMainContainer { 271 | width: 100%; 272 | background-color: #F9F9F9; 273 | border-bottom: 10px solid #999; 274 | border-top: 1px solid #e4e4e4 275 | } 276 | 277 | #FooterContainer { 278 | max-width: 960px; 279 | height: 100px; 280 | margin: 0px auto; 281 | padding-bottom: 20px; 282 | } 283 | 284 | #FooterContainer .footerlogo { 285 | float: right; 286 | margin-top: 20px; 287 | } 288 | 289 | #FooterContainer .copyright { 290 | font-family: HelvNeuMed, Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; 291 | font-weight: normal; 292 | letter-spacing: -0.01em; 293 | color: #999; 294 | float: right; 295 | text-align: right; 296 | margin-top: 60px; 297 | margin-right: -136px; 298 | } 299 | 300 | /*---------------------------------------------------------------*/ 301 | /* General styles for Examples page 302 | /*---------------------------------------------------------------*/ 303 | 304 | /* Style for the thumbnail of each example */ 305 | img.examplesmall 306 | { 307 | float:left; 308 | width: 100px; 309 | height: 75px; 310 | margin-right: 10px; 311 | margin-left: 10px; 312 | } 313 | 314 | /* Style for the title section of each example */ 315 | .title { 316 | /*background-color: #eee;*/ 317 | max-width: 960px; 318 | min-height: 85px; 319 | margin-bottom: 10px; 320 | } 321 | 322 | /* Style to use for the full description section of each example */ 323 | .FullDescription { 324 | display: none; 325 | border-left: 10px solid #fff; 326 | border-right: 10px solid #fff; 327 | border-bottom: 10px solid #fff; 328 | } 329 | 330 | /* Styling the checkbox approach used to simulate a click event */ 331 | input[type=checkbox] { 332 | position: absolute; 333 | margin-left: -10px; 334 | display: none; 335 | } 336 | 337 | /* Style for the label of each checkbox */ 338 | label { 339 | display: block; 340 | cursor: pointer; 341 | } 342 | 343 | /* Style for displaying the full description section of each example */ 344 | input[type=checkbox]:checked ~ .FullDescription { 345 | display: block; 346 | } 347 | 348 | /*---------------------------------------------------------------*/ 349 | /* Accordion 350 | /*---------------------------------------------------------------*/ 351 | 352 | /* Adjusting the position of the full accordion */ 353 | ul.accordion { 354 | margin: 0px; 355 | padding: 0px; 356 | } 357 | 358 | /* Add bottom border to separate each list item populated within the accordion */ 359 | ul.accordion > li { 360 | list-style: none; 361 | margin: 0; 362 | padding: 0; 363 | border-bottom: 3px solid #eee; 364 | } 365 | 366 | /* The last child in the list does not have the bottom border */ 367 | ul.accordion > li:last-child { 368 | border-bottom: none; 369 | } 370 | 371 | /* Sets the margin of h3 to be zero when h3 is used in a list item within the accordion. This aligns the top of the example title with its thumbnail */ 372 | ul.accordion > li > div.title h3 { 373 | margin: 0; 374 | } 375 | 376 | /* Adjusting the top padding dimension so that example list appears evenly spaced out */ 377 | ul.accordion > li > div.title { 378 | padding-top: 17px; 379 | } 380 | 381 | /* Toggle the purple colour on hovering over the title of each example */ 382 | ul.accordion > li > div.title h3:hover { 383 | color: #cd239d; 384 | } 385 | 386 | /*---------------------------------------------------------------*/ 387 | /* General styles for Utilities page 388 | /*---------------------------------------------------------------*/ 389 | 390 | /* Float the utility image to the left */ 391 | .utility img{ 392 | float: left; 393 | padding-right: 20px; 394 | } 395 | 396 | /* Adjusting the position of the list of utilities*/ 397 | ul.utility { 398 | margin: 0px; 399 | padding: 0px; 400 | } 401 | 402 | /* Add bottom border to separate each list item populated within the list */ 403 | ul.utility > li { 404 | list-style: none; 405 | margin: 0; 406 | padding: 0; 407 | border-bottom: 3px solid #eee; 408 | min-height: 200px; 409 | } 410 | 411 | /* The last child in the list does not have the bottom border */ 412 | ul.utility > li:last-child { 413 | border-bottom: none; 414 | } 415 | 416 | /*---------------------------------------------------------------*/ 417 | /* Media Queries 418 | /*---------------------------------------------------------------*/ 419 | 420 | @media screen and (max-width:960px) { 421 | 422 | #GlobalHeader { 423 | min-height: 78px; 424 | } 425 | 426 | #NavContainer { 427 | overflow: hidden; 428 | } 429 | 430 | nav { 431 | border-top: 5px solid #300b33; 432 | } 433 | 434 | #SubNavContainer { 435 | overflow: hidden; 436 | border-top: 0px; 437 | } -------------------------------------------------------------------------------- /Documentation/Specifications/PFX Language Format.Specification.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/Specifications/PFX Language Format.Specification.pdf -------------------------------------------------------------------------------- /Documentation/Specifications/POD File Format.Specification.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/Specifications/POD File Format.Specification.pdf -------------------------------------------------------------------------------- /Documentation/Specifications/PVR File Format.Specification.Legacy.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/Specifications/PVR File Format.Specification.Legacy.pdf -------------------------------------------------------------------------------- /Documentation/Specifications/PVR File Format.Specification.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Documentation/Specifications/PVR File Format.Specification.pdf -------------------------------------------------------------------------------- /Examples/Advanced/Water/FragShader.fsh: -------------------------------------------------------------------------------- 1 | uniform sampler2D NormalTex; 2 | uniform sampler2D ReflectionTex; 3 | #ifdef ENABLE_REFRACTION 4 | uniform sampler2D RefractionTex; 5 | #endif 6 | uniform samplerCube NormalisationCubeMap; 7 | 8 | uniform highp mat4 ModelViewMatrix; 9 | uniform lowp vec4 WaterColour; 10 | uniform mediump float RcpMaxFogDepth; 11 | uniform lowp vec4 FogColour; 12 | 13 | #ifdef ENABLE_DISTORTION 14 | uniform mediump float WaveDistortion; 15 | #endif 16 | uniform mediump vec2 RcpWindowSize; 17 | 18 | varying mediump vec2 BumpCoord0; 19 | varying mediump vec2 BumpCoord1; 20 | varying highp vec3 WaterToEye; 21 | varying mediump float WaterToEyeLength; 22 | 23 | void main() 24 | { 25 | // Calculate the tex coords of the fragment (using it's position on the screen), normal map is z-axis major. 26 | lowp vec3 vAccumulatedNormal = vec3(0.0,0.0,1.0); 27 | mediump vec2 vTexCoord = gl_FragCoord.xy * RcpWindowSize; 28 | 29 | // Test depth for fog 30 | lowp float fFogBlend = clamp(WaterToEyeLength * RcpMaxFogDepth, 0.0, 1.0); 31 | 32 | #ifdef ENABLE_DISTORTION 33 | // When distortion is enabled, use the normal map to calculate perturbation 34 | vAccumulatedNormal = texture2D(NormalTex, BumpCoord0).rgb; 35 | vAccumulatedNormal += texture2D(NormalTex, BumpCoord1).rgb; 36 | vAccumulatedNormal -= 1.0; // Same as * 2.0 - 2.0 37 | 38 | lowp vec2 vTmp = vAccumulatedNormal.xy; 39 | /* 40 | Divide by WaterToEyeLength to scale down the distortion 41 | of fragments based on their distance from the camera 42 | */ 43 | vTexCoord.xy -= vTmp * (WaveDistortion / WaterToEyeLength); 44 | #endif 45 | 46 | #ifdef ENABLE_REFRACTION 47 | lowp vec4 vReflectionColour = texture2D(ReflectionTex, vTexCoord); 48 | lowp vec4 vRefractionColour = texture2D(RefractionTex, vTexCoord); 49 | 50 | #ifdef ENABLE_FRESNEL 51 | // Calculate the Fresnel term to determine amount of reflection for each fragment 52 | 53 | // Use normalisation cube map instead of normalize() - See section 3.3.1 of white paper for more info 54 | lowp vec3 vWaterToEyeCube = textureCube(NormalisationCubeMap,WaterToEye).rgb * 2.0 - 1.0; 55 | 56 | //Normal map uses z-axis major instead of y-axis major, so we have to swizzle to switch the normal map's z and y axis. 57 | mediump float fEyeToNormalAngle = clamp(dot(vWaterToEyeCube,vAccumulatedNormal.xzy),0.0,1.0); 58 | 59 | mediump float fAirWaterFresnel = 1.0 - fEyeToNormalAngle; 60 | fAirWaterFresnel = pow(fAirWaterFresnel, 5.0); 61 | fAirWaterFresnel = (0.98 * fAirWaterFresnel) + 0.02; // R(0)-1 = ~0.98 , R(0)= ~0.02 62 | lowp float fTemp = fAirWaterFresnel; 63 | 64 | // Blend reflection and refraction 65 | lowp vec4 vFragColour = mix(vRefractionColour, vReflectionColour, fTemp); 66 | gl_FragColor = mix(vFragColour, FogColour, fFogBlend); 67 | #else 68 | lowp vec4 vFragColour = mix(vRefractionColour, vReflectionColour, 0.4); // Constant mix 69 | gl_FragColor = mix(vFragColour, FogColour, fFogBlend); 70 | #endif 71 | #else 72 | gl_FragColor = mix(texture2D(ReflectionTex, vTexCoord), FogColour, fFogBlend); // Reflection only 73 | #endif 74 | } 75 | -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/Island Height Map3.2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/Island Height Map3.2.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/NewNormalMap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/NewNormalMap.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/ThickCloudsWaterBack2048.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/ThickCloudsWaterBack2048.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/ThickCloudsWaterDown2048.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/ThickCloudsWaterDown2048.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/ThickCloudsWaterFront2048.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/ThickCloudsWaterFront2048.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/ThickCloudsWaterLeft2048.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/ThickCloudsWaterLeft2048.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/ThickCloudsWaterRight2048.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/ThickCloudsWaterRight2048.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/ThickCloudsWaterUp2048.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/ThickCloudsWaterUp2048.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/coins-specular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/coins-specular.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/coins.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/coins.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/crate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/crate.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/flag.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/galleon-sails.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/galleon-sails.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/galleon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/galleon.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/mountain1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/mountain1.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/mountain2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/mountain2.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/mountain3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/mountain3.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/mountain4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/mountain4.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/mountain5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/mountain5.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/mountain6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/mountain6.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/palmleaf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/palmleaf.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/sail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/sail.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/sand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/sand.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/scene.max: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/scene.max -------------------------------------------------------------------------------- /Examples/Advanced/Water/Media/wood.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Media/wood.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/ModelFShader.fsh: -------------------------------------------------------------------------------- 1 | #define ENABLE_TEXTURE 2 | #ifdef ENABLE_TEXTURE 3 | uniform sampler2D ModelTexture; 4 | #ifdef ENABLE_SPECULAR 5 | uniform sampler2D ModelTextureSpec; 6 | #endif 7 | #endif 8 | 9 | #ifdef ENABLE_FOG_DEPTH 10 | uniform lowp vec3 FogColour; 11 | uniform mediump float RcpMaxFogDepth; 12 | #endif 13 | 14 | #ifdef ENABLE_LIGHTING 15 | uniform lowp vec3 EmissiveColour; 16 | uniform lowp vec3 DiffuseColour; 17 | varying lowp float LightIntensity; 18 | #ifdef ENABLE_SPECULAR 19 | uniform lowp vec3 SpecularColour; 20 | varying mediump vec3 EyeDir; 21 | varying mediump vec3 LightDir; 22 | varying mediump vec3 Normal; 23 | #endif 24 | #endif 25 | #ifdef ENABLE_TEXTURE 26 | varying mediump vec2 TexCoord; 27 | #endif 28 | #ifdef ENABLE_FOG_DEPTH 29 | varying mediump float VertexDepth; 30 | #endif 31 | 32 | void main() 33 | { 34 | #ifdef ONLY_ALPHA 35 | gl_FragColor = vec4(vec3(0.5),0.0); 36 | #else 37 | #ifdef ENABLE_TEXTURE 38 | #ifdef ENABLE_FOG_DEPTH 39 | // Mix the object's colour with the fogging colour based on fragment's depth 40 | lowp vec3 vFragColour = texture2D(ModelTexture, TexCoord).rgb; 41 | 42 | // Perform depth test and clamp the values 43 | lowp float fFogBlend = clamp(VertexDepth * RcpMaxFogDepth, 0.0, 1.0); 44 | 45 | #ifdef ENABLE_LIGHTING 46 | vFragColour.rgb = mix(vFragColour.rgb * LightIntensity, FogColour.rgb, fFogBlend); 47 | #else 48 | vFragColour.rgb = mix(vFragColour.rgb, FogColour.rgb, fFogBlend); 49 | #endif 50 | gl_FragColor = vec4(vFragColour,1.0); 51 | #else 52 | #ifdef ENABLE_LIGHTING 53 | lowp vec3 vSpec = vec3(0.0); 54 | #ifdef ENABLE_SPECULAR 55 | lowp vec3 N = normalize(Normal); 56 | lowp vec3 refl = reflect(-LightDir, N); 57 | lowp float SpecPow = clamp(dot(-EyeDir, refl), 0.0, 1.0); 58 | SpecPow = pow(SpecPow, 4.0); 59 | vSpec = SpecularColour * texture2D(ModelTextureSpec, TexCoord).rgb * SpecPow; 60 | #endif 61 | lowp vec4 vTex = texture2D(ModelTexture, TexCoord); 62 | lowp vec3 vDiff = vTex.rgb * DiffuseColour * max(EmissiveColour, LightIntensity); 63 | gl_FragColor = vec4(vDiff + vSpec, vTex.a); 64 | #else 65 | gl_FragColor = vec4(texture2D(ModelTexture, TexCoord).rgb, 1.0); 66 | #endif 67 | #endif 68 | #else 69 | // Solid colour is used instead of texture colour 70 | #ifdef ENABLE_LIGHTING 71 | gl_FragColor = vec4(vec3(0.3,0.3,0.3)* LightIntensity, 1.0); 72 | #else 73 | gl_FragColor = vec4(vec3(0.3,0.3,0.3), 1.0); 74 | #endif 75 | #endif 76 | #endif 77 | } 78 | -------------------------------------------------------------------------------- /Examples/Advanced/Water/ModelVShader.vsh: -------------------------------------------------------------------------------- 1 | #define ENABLE_TEXTURE 2 | attribute highp vec3 inVertex; 3 | attribute highp vec3 inNormal; 4 | attribute highp vec2 inTexCoord; 5 | 6 | #ifdef ENABLE_PERTURB_VTX 7 | uniform highp float fTime; 8 | #endif 9 | 10 | uniform highp mat4 MVPMatrix; 11 | uniform highp mat4 ModelMatrix; 12 | uniform mediump vec4 LightDirection; 13 | #ifdef ENABLE_FOG_DEPTH 14 | uniform mediump float WaterHeight; //Assume water always lies on the y-axis 15 | #endif 16 | 17 | #ifdef ENABLE_LIGHTING 18 | varying lowp float LightIntensity; 19 | 20 | #ifdef ENABLE_SPECULAR 21 | uniform mediump vec3 EyePos; 22 | 23 | varying mediump vec3 EyeDir; 24 | varying mediump vec3 LightDir; 25 | varying mediump vec3 Normal; 26 | #endif 27 | #endif 28 | #ifdef ENABLE_TEXTURE 29 | varying mediump vec2 TexCoord; 30 | #endif 31 | #ifdef ENABLE_FOG_DEPTH 32 | varying mediump float VertexDepth; 33 | #endif 34 | 35 | void main() 36 | { 37 | // Convert each vertex into projection-space and output the value 38 | highp vec4 vInVertex = vec4(inVertex, 1.0); 39 | mediump vec3 vInNormal = vec3(inNormal); 40 | #ifdef ENABLE_PERTURB_VTX 41 | lowp float fStr = inTexCoord.x * 0.7; 42 | mediump float fDroop = 2.0 * inTexCoord.x; 43 | vInVertex.y += fStr * sin(fTime + vInVertex.x); 44 | vInVertex.x += fStr * sin(fTime + vInVertex.x); 45 | vInVertex.z += fDroop*fDroop; 46 | vInNormal.x += fStr * cos(fTime + vInVertex.x) / 2.0; 47 | vInNormal.z += fStr * sin(fTime + vInVertex.x) / 2.0; 48 | vInNormal = normalize(vInNormal); 49 | #endif 50 | gl_Position = MVPMatrix * vInVertex; 51 | 52 | #ifdef ENABLE_TEXTURE 53 | TexCoord = inTexCoord; 54 | #endif 55 | 56 | #ifdef ENABLE_FOG_DEPTH 57 | // Calculate the vertex's distance under water surface. This assumes clipping has removed all objects above the water 58 | mediump float vVertexHeight = (ModelMatrix * vec4(inVertex,1.0)).y; 59 | VertexDepth = WaterHeight - vVertexHeight; 60 | #endif 61 | 62 | #ifdef ENABLE_LIGHTING 63 | // Simple diffuse lighting in world space 64 | lowp vec3 N = normalize((ModelMatrix * vec4(vInNormal, 0.0)).xyz); 65 | lowp vec3 L = normalize(LightDirection).rgb; 66 | LightIntensity = 0.3 + max(0.0, dot(N, -L)); 67 | #ifdef ENABLE_SPECULAR 68 | LightDir = L; 69 | Normal = N; 70 | EyeDir = normalize(EyePos - (ModelMatrix * vInVertex).xyz); 71 | #endif 72 | #endif 73 | } 74 | -------------------------------------------------------------------------------- /Examples/Advanced/Water/PlaneTexFShader.fsh: -------------------------------------------------------------------------------- 1 | uniform sampler2D Texture; 2 | 3 | uniform mediump vec2 RcpWindowSize; 4 | 5 | void main() 6 | { 7 | mediump vec2 vTexCoord = gl_FragCoord.xy * RcpWindowSize; 8 | gl_FragColor = texture2D(Texture, vTexCoord); 9 | } 10 | -------------------------------------------------------------------------------- /Examples/Advanced/Water/PlaneTexVShader.vsh: -------------------------------------------------------------------------------- 1 | attribute highp vec3 inVertex; 2 | 3 | uniform highp mat4 MVPMatrix; 4 | 5 | void main() 6 | { 7 | // Convert each vertex into projection-space and output the value 8 | highp vec4 vInVertex = vec4(inVertex, 1.0); 9 | gl_Position = MVPMatrix * vInVertex; 10 | } 11 | -------------------------------------------------------------------------------- /Examples/Advanced/Water/Scene.pod: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Scene.pod -------------------------------------------------------------------------------- /Examples/Advanced/Water/SkyboxFShader.fsh: -------------------------------------------------------------------------------- 1 | uniform samplerCube CubeMap; 2 | 3 | uniform lowp vec4 FogColour; 4 | uniform mediump float RcpMaxFogDepth; 5 | 6 | #ifdef ENABLE_DISCARD_CLIP 7 | uniform bool ClipPlaneBool; 8 | #endif 9 | varying mediump vec3 EyeDir; 10 | varying mediump float VertexHeight; 11 | #ifdef ENABLE_DISCARD_CLIP 12 | varying highp float ClipDist; 13 | #endif 14 | 15 | void main() 16 | { 17 | #ifdef ENABLE_DISCARD_CLIP 18 | // Reject fragments behind the clip plane 19 | if(ClipDist < 0.0) 20 | { 21 | discard; // Too slow for hardware. Left as an example of how not to do this! 22 | } 23 | #endif 24 | 25 | // Mix the object's colour with the fogging colour based on fragment's depth 26 | lowp vec3 vFragColour = textureCube(CubeMap, EyeDir).rgb; 27 | 28 | // Test depth 29 | lowp float fFogBlend = 1.0 - clamp(VertexHeight * RcpMaxFogDepth, 0.0, 1.0); 30 | vFragColour.rgb = mix(vFragColour.rgb, FogColour.rgb, fFogBlend); 31 | 32 | gl_FragColor = vec4(vFragColour.rgb, 1.0); 33 | } -------------------------------------------------------------------------------- /Examples/Advanced/Water/SkyboxVShader.vsh: -------------------------------------------------------------------------------- 1 | attribute mediump vec3 inVertex; 2 | 3 | uniform mediump mat4 ModelMatrix; 4 | uniform mediump mat4 ModelViewMatrix; 5 | uniform highp mat4 MVPMatrix; 6 | uniform mediump float WaterHeight; //Assume water always lies on the y-axis 7 | #ifdef ENABLE_DISCARD_CLIP 8 | uniform bool ClipPlaneBool; 9 | uniform mediump vec4 ClipPlane; 10 | #endif 11 | 12 | varying mediump vec3 EyeDir; 13 | varying mediump float VertexHeight; 14 | #ifdef ENABLE_DISCARD_CLIP 15 | varying highp float ClipDist; 16 | #endif 17 | 18 | void main() 19 | { 20 | EyeDir = -inVertex; 21 | gl_Position = MVPMatrix * vec4(inVertex, 1.0); 22 | 23 | #ifdef ENABLE_DISCARD_CLIP 24 | // Compute the distance between the vertex and clipping plane (in world space coord system) 25 | mediump vec4 vVertexView = ModelMatrix * vec4(inVertex.xyz,1.0); 26 | ClipDist = dot(vVertexView, ClipPlane); 27 | #endif 28 | 29 | // Calculate the vertex's distance ABOVE water surface. 30 | mediump float vVertexHeight = (ModelMatrix * vec4(inVertex,1.0)).y; 31 | VertexHeight = vVertexHeight - WaterHeight; 32 | } -------------------------------------------------------------------------------- /Examples/Advanced/Water/Tex2DFShader.fsh: -------------------------------------------------------------------------------- 1 | uniform sampler2D Texture; 2 | 3 | varying highp vec2 TexCoord; 4 | 5 | void main() 6 | { 7 | gl_FragColor = texture2D(Texture, TexCoord); 8 | } -------------------------------------------------------------------------------- /Examples/Advanced/Water/Tex2DVShader.vsh: -------------------------------------------------------------------------------- 1 | attribute highp vec3 inVertex; 2 | attribute highp vec2 inTexCoord; 3 | 4 | 5 | uniform mediump mat4 MVPMatrix; 6 | 7 | varying highp vec2 TexCoord; 8 | 9 | void main() 10 | { 11 | TexCoord = inTexCoord; 12 | gl_Position = MVPMatrix * vec4(inVertex, 1.0); 13 | } -------------------------------------------------------------------------------- /Examples/Advanced/Water/VertShader.vsh: -------------------------------------------------------------------------------- 1 | attribute highp vec3 inVertex; 2 | 3 | uniform highp mat4 ModelViewMatrix; 4 | uniform highp mat4 MVPMatrix; 5 | uniform highp vec3 EyePosition; // Eye (aka Camera) positon in model-space 6 | uniform mediump vec2 BumpTranslation0; 7 | uniform mediump vec2 BumpScale0; 8 | uniform mediump vec2 BumpTranslation1; 9 | uniform mediump vec2 BumpScale1; 10 | 11 | varying mediump vec2 BumpCoord0; 12 | varying mediump vec2 BumpCoord1; 13 | varying highp vec3 WaterToEye; 14 | varying mediump float WaterToEyeLength; 15 | 16 | void main() 17 | { 18 | // Convert each vertex into projection-space and output the value 19 | highp vec4 vInVertex = vec4(inVertex, 1.0); 20 | gl_Position = MVPMatrix * vInVertex; 21 | 22 | // The texture coordinate is calculated this way to reduce the number of attributes needed 23 | mediump vec2 vTexCoord = inVertex.xz; 24 | 25 | // Scale and translate texture coordinates used to sample the normal map - section 2.2 of white paper 26 | BumpCoord0 = vTexCoord.xy * BumpScale0; 27 | BumpCoord0 += BumpTranslation0; 28 | 29 | BumpCoord1 = vTexCoord.xy * BumpScale1; 30 | BumpCoord1 += BumpTranslation1; 31 | 32 | /* 33 | The water to eye vector is used to calculate the Fresnel term 34 | and to fade out perturbations based on distance from the viewer 35 | */ 36 | WaterToEye = EyePosition - inVertex; 37 | WaterToEyeLength = length(WaterToEye); 38 | } 39 | -------------------------------------------------------------------------------- /Examples/Advanced/Water/Water.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/Water.png -------------------------------------------------------------------------------- /Examples/Advanced/Water/Water.txt: -------------------------------------------------------------------------------- 1 | :Title: 2 | Water 3 | 4 | :ShortDescription: 5 | This demo shows how to render a water effect on a given plane 6 | 7 | :FullDescription: 8 | 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. 9 | 10 | :Controls: 11 | - Left/Right - Cycle backwards/forwards through available options 12 | - Up/Down - Change (Toggle or Increase/Decrease) the currently selected option 13 | - 1/Space - Toggle Pause/Unpause 14 | 15 | :WhitePaper: 16 | Shader Based Water Effects 17 | 18 | :APIS: 19 | WebGL -------------------------------------------------------------------------------- /Examples/Advanced/Water/coins-specular.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/coins-specular.pvr -------------------------------------------------------------------------------- /Examples/Advanced/Water/coins.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/coins.pvr -------------------------------------------------------------------------------- /Examples/Advanced/Water/crate.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/crate.pvr -------------------------------------------------------------------------------- /Examples/Advanced/Water/flag.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/flag.pvr -------------------------------------------------------------------------------- /Examples/Advanced/Water/galleon-sails.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/galleon-sails.pvr -------------------------------------------------------------------------------- /Examples/Advanced/Water/galleon.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/galleon.pvr -------------------------------------------------------------------------------- /Examples/Advanced/Water/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | WebGLWater 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Examples/Advanced/Water/normalmap.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/normalmap.pvr -------------------------------------------------------------------------------- /Examples/Advanced/Water/palmleaf.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/palmleaf.pvr -------------------------------------------------------------------------------- /Examples/Advanced/Water/sand.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/sand.pvr -------------------------------------------------------------------------------- /Examples/Advanced/Water/skybox.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/skybox.pvr -------------------------------------------------------------------------------- /Examples/Advanced/Water/wood.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Advanced/Water/wood.pvr -------------------------------------------------------------------------------- /Examples/Beginner/01_HelloAPI/HelloAPI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/01_HelloAPI/HelloAPI.png -------------------------------------------------------------------------------- /Examples/Beginner/01_HelloAPI/HelloAPI.txt: -------------------------------------------------------------------------------- 1 | :Title: 2 | HelloAPI 3 | 4 | :ShortDescription: 5 | Draw a triangle to the screen using hardware acceleration. 6 | 7 | :FullDescription: 8 | 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. 9 | 10 | :Controls: 11 | - Esc - Close the application 12 | 13 | :APIS: 14 | WebGL 15 | -------------------------------------------------------------------------------- /Examples/Beginner/01_HelloAPI/WebGLHelloAPI.js: -------------------------------------------------------------------------------- 1 | var gl; 2 | 3 | function testGLError(functionLastCalled) { 4 | /* 5 | gl.getError returns the last error that occurred using WebGL, not necessarily the status of the last called function. The user 6 | has to check after every single WebGL call or at least once every frame. Usually this would be for debugging only, but for this 7 | example is is enabled always. 8 | */ 9 | 10 | var lastError = gl.getError(); 11 | 12 | if (lastError != gl.NO_ERROR) { 13 | alert(functionLastCalled + " failed (" + lastError + ")"); 14 | return false; 15 | } 16 | 17 | return true; 18 | } 19 | 20 | function initialiseGL(canvas) { 21 | try { 22 | // Try to grab the standard context. If it fails, fallback to experimental 23 | gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); 24 | gl.viewport(0, 0, canvas.width, canvas.height); 25 | } 26 | catch (e) { 27 | } 28 | 29 | if (!gl) { 30 | alert("Unable to initialise WebGL. Your browser may not support it"); 31 | return false; 32 | } 33 | 34 | return true; 35 | } 36 | 37 | var shaderProgram; 38 | 39 | function initialiseBuffer() { 40 | /* Concept: Vertices 41 | When rendering a polygon or model to screen, WebGL has to be told where to draw the object, and more fundamentally what shape 42 | it is. The data used to do this is referred to as vertices, points in 3D space which are usually collected into groups of three 43 | to render as triangles. Fundamentally, any advanced 3D shape in WebGL is constructed from a series of these vertices - each 44 | vertex representing one corner of a polygon. 45 | */ 46 | /* Concept: Buffer Objects 47 | To operate on any data, WebGL first needs to be able to access it. The GPU maintains a separate pool of memory it uses independent 48 | of the CPU. Whilst on many embedded systems these are in the same physical memory, the distinction exists so that they can use and 49 | allocate memory without having to worry about synchronising with any other processors in the device. 50 | To this end, data needs to be uploaded into buffers, which are essentially a reserved bit of memory for the GPU to use. By creating 51 | a buffer and giving it some data we can tell the GPU how to render a triangle. 52 | */ 53 | 54 | var vertexData = [ 55 | -0.4, -0.4, 0.0, // Bottom left 56 | 0.4, -0.4, 0.0, // Bottom right 57 | 0.0, 0.4, 0.0 // Top middle 58 | ]; 59 | 60 | // Generate a buffer object 61 | gl.vertexBuffer = gl.createBuffer(); 62 | 63 | // Bind buffer as a vertex buffer so we can fill it with data 64 | gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer); 65 | 66 | /* 67 | Set the buffer's size, data and usage 68 | Note the last argument - gl.STATIC_DRAW. This tells the driver that we intend to read from the buffer on the GPU, and don't intend 69 | to modify the data until we've done with it. 70 | */ 71 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); 72 | 73 | return testGLError("initialiseBuffers"); 74 | } 75 | 76 | function initialiseShaders() { 77 | /* Concept: Shaders 78 | WebGL uses what are known as shaders to determine how to draw objects on the screen. Instead of the fixed function 79 | pipeline in early OpenGL or OpenGL ES 1.x, users can now programmatically define how vertices are transformed on screen, what 80 | data is used where, and how each pixel on the screen is coloured. 81 | These shaders are written in GL Shading Language ES: http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf 82 | which is usually abbreviated to simply "GLSL ES". 83 | Each shader is compiled on-device and then linked into a shader program, which combines a vertex and fragment shader into a form 84 | that the OpenGL ES implementation can execute. 85 | */ 86 | 87 | /* Concept: Fragment Shaders 88 | In a final buffer of image data, each individual point is referred to as a pixel. Fragment shaders are the part of the pipeline 89 | which determine how these final pixels are coloured when drawn to the framebuffer. When data is passed through here, the positions 90 | of these pixels is already set, all that's left to do is set the final colour based on any defined inputs. 91 | The reason these are called "fragment" shaders instead of "pixel" shaders is due to a small technical difference between the two 92 | concepts. When you colour a fragment, it may not be the final colour which ends up on screen. This is particularly true when 93 | performing blending, where multiple fragments can contribute to the final pixel colour. 94 | */ 95 | 96 | var fragmentShaderSource = '\ 97 | void main(void) \ 98 | { \ 99 | gl_FragColor = vec4(1.0, 1.0, 0.66, 1.0); \ 100 | }'; 101 | 102 | // Create the fragment shader object 103 | gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER); 104 | 105 | // Load the source code into it 106 | gl.shaderSource(gl.fragShader, fragmentShaderSource); 107 | 108 | // Compile the source code 109 | gl.compileShader(gl.fragShader); 110 | 111 | // Check if compilation succeeded 112 | if (!gl.getShaderParameter(gl.fragShader, gl.COMPILE_STATUS)) { 113 | // It didn't. Display the info log as to why 114 | alert("Failed to compile the fragment shader.\n" + gl.getShaderInfoLog(gl.fragShader)); 115 | return false; 116 | } 117 | 118 | /* Concept: Vertex Shaders 119 | Vertex shaders primarily exist to allow a developer to express how to orient vertices in 3D space, through transformations like 120 | Scaling, Translation or Rotation. Using the same basic layout and structure as a fragment shader, these take in vertex data and 121 | output a fully transformed set of positions. Other inputs are also able to be used such as normals or texture coordinates, and can 122 | also be transformed and output alongside the position data. 123 | */ 124 | 125 | // Vertex shader code 126 | var vertexShaderSource = '\ 127 | attribute highp vec4 myVertex; \ 128 | uniform mediump mat4 transformationMatrix; \ 129 | void main(void) \ 130 | { \ 131 | gl_Position = transformationMatrix * myVertex; \ 132 | }'; 133 | 134 | // Create the vertex shader object 135 | gl.vertexShader = gl.createShader(gl.VERTEX_SHADER); 136 | 137 | // Load the source code into it 138 | gl.shaderSource(gl.vertexShader, vertexShaderSource); 139 | 140 | // Compile the source code 141 | gl.compileShader(gl.vertexShader); 142 | 143 | // Check if compilation succeeded 144 | if (!gl.getShaderParameter(gl.vertexShader, gl.COMPILE_STATUS)) { 145 | // It didn't. Display the info log as to why 146 | alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(gl.vertexShader)); 147 | return false; 148 | } 149 | 150 | // Create the shader program 151 | gl.programObject = gl.createProgram(); 152 | 153 | // Attach the fragment and vertex shaders to it 154 | gl.attachShader(gl.programObject, gl.fragShader); 155 | gl.attachShader(gl.programObject, gl.vertexShader); 156 | 157 | // Bind the custom vertex attribute "myVertex" to location 0 158 | gl.bindAttribLocation(gl.programObject, 0, "myVertex"); 159 | 160 | // Link the program 161 | gl.linkProgram(gl.programObject); 162 | 163 | // Check if linking succeeded in a similar way we checked for compilation errors 164 | if (!gl.getProgramParameter(gl.programObject, gl.LINK_STATUS)) { 165 | alert("Failed to link the program.\n" + gl.getProgramInfoLog(gl.programObject)); 166 | return false; 167 | } 168 | 169 | /* Use the Program 170 | Calling gl.useProgram tells WebGL that the application intends to use this program for rendering. Now that it's installed into 171 | the current state, any further gl.draw* calls will use the shaders contained within it to process scene data. Only one program can 172 | be active at once, so in a multi-program application this function would be called in the render loop. Since this application only 173 | uses one program it can be installed in the current state and left there. 174 | */ 175 | gl.useProgram(gl.programObject); 176 | 177 | return testGLError("initialiseShaders"); 178 | } 179 | 180 | function renderScene() { 181 | /* 182 | Set the clear colour 183 | At the start of a frame, generally you clear the image to tell WebGL that you're done with whatever was there before and want to 184 | draw a new frame. In order to do that gowever, WebGL needs to know what colour to set in the image's place. gl.clearColor 185 | sets this value as 4 floating point values between 0.0 and 1.0, as the Red, Green, Blue and Alpha channels. Each value represents 186 | the intensity of the particular channel, with all 0.0 being transparent black, and all 1.0 being opaque white. Subsequent calls to 187 | gl.clear with the colour bit will clear the framebuffer to this vlaue. 188 | The functions gl.clearDepth and gl.clearStencil allow an application to do the same with depth and stencil values respectively. 189 | */ 190 | gl.clearColor(0.6, 0.8, 1.0, 1.0); 191 | 192 | /* 193 | Clear the colour buffer 194 | gl.clear is used here with the colour buffer to clear the colour. It can also be used to clear the depth or stencil buffer using 195 | gl.DEPTH_BUFFER_BIT or gl.STENCIL_BUFFER_BIT, respectively. 196 | */ 197 | 198 | gl.clear(gl.COLOR_BUFFER_BIT); 199 | 200 | // Get the location of the transformation matrix in the shader using its name 201 | var matrixLocation = gl.getUniformLocation(gl.programObject, "transformationMatrix"); 202 | 203 | // Matrix used to specify the orientation of the triangle on screen 204 | var transformationMatrix = [ 205 | 1.0, 0.0, 0.0, 0.0, 206 | 0.0, 1.0, 0.0, 0.0, 207 | 0.0, 0.0, 1.0, 0.0, 208 | 0.0, 0.0, 0.0, 1.0 209 | ]; 210 | 211 | // Pass the identity transformation matrix to the shader using its location 212 | gl.uniformMatrix4fv(matrixLocation, gl.FALSE, transformationMatrix); 213 | 214 | if (!testGLError("gl.uniformMatrix4fv")) { 215 | return false; 216 | } 217 | 218 | // Enable the user-defined vertex array 219 | gl.enableVertexAttribArray(0); 220 | 221 | // Set the vertex data to this attribute index, with the number of floats in each position 222 | gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 0, 0); 223 | 224 | if (!testGLError("gl.vertexAttribPointer")) { 225 | return false; 226 | } 227 | 228 | /* 229 | Draw the triangle 230 | gl.drawArrays is a draw call, and executes the shader program using the vertices and other state set by the user. Draw calls are the 231 | functions which tell WebGL when to actually draw something to the framebuffer gived the current state. 232 | gl.drawArrays causes the vertices to be submitted sequentially from the position given by the "first" argument until it has processed 233 | "count" vertices. Other draw calls exist, notably gl.drawElements which also accepts index data to allow the user to specify that 234 | some vertices are accessed multiple times, without copying the vertex multiple times. 235 | Others include versions of the above that allow the user to draw the same ovhect multiple times with slightly different data, and 236 | a version of gl.drawElements which allows a user to restrict the actuial indices accessed. 237 | */ 238 | gl.drawArrays(gl.TRIANGLES, 0, 3); 239 | 240 | if (!testGLError("gl.drawArrays")) { 241 | return false; 242 | } 243 | 244 | return true; 245 | } 246 | 247 | function main() { 248 | var canvas = document.getElementById("helloapicanvas"); 249 | 250 | if (!initialiseGL(canvas)) { 251 | return; 252 | } 253 | 254 | if (!initialiseBuffer()) { 255 | return; 256 | } 257 | 258 | if (!initialiseShaders()) { 259 | return; 260 | } 261 | 262 | // Render loop 263 | requestAnimFrame = (function () { 264 | return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || 265 | function (callback) { 266 | window.setTimeout(callback, 1000, 60); 267 | }; 268 | })(); 269 | 270 | (function renderLoop() { 271 | if (renderScene()) { 272 | // Everything was successful, request that we redraw our scene again in the future 273 | requestAnimFrame(renderLoop); 274 | } 275 | })(); 276 | } 277 | -------------------------------------------------------------------------------- /Examples/Beginner/01_HelloAPI/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WebGLHelloAPI 5 | 6 | 7 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.png -------------------------------------------------------------------------------- /Examples/Beginner/02_IntroducingPVRShell/IntroducingPVRShell.txt: -------------------------------------------------------------------------------- 1 | :Title: 2 | IntroducingPVRShell 3 | 4 | :ShortDescription: 5 | This training course introduces the PVRShell library. 6 | 7 | :FullDescription: 8 | 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. 9 | 10 | :Controls: 11 | - Esc - Close the application 12 | 13 | :APIS: 14 | WebGL -------------------------------------------------------------------------------- /Examples/Beginner/02_IntroducingPVRShell/WebGLIntroducingPVRShell.js: -------------------------------------------------------------------------------- 1 | function WebGLIntroducingPVRShell() 2 | { 3 | var shaders = {}; 4 | var program = null; 5 | var vbo = null; 6 | 7 | this.initView = function(gl) 8 | { 9 | var fragmentShaderSource = 10 | 'void main(void)' + 11 | '{' + 12 | ' gl_FragColor = vec4(1.0, 1.0, 0.66, 1.0);' + 13 | '}'; 14 | 15 | var vertexShaderSource = 16 | 'attribute highp vec4 myVertex;' + 17 | 'uniform mediump mat4 myPMVMatrix;' + 18 | 'void main(void)' + 19 | '{' + 20 | ' gl_Position = myPMVMatrix * myVertex;' + 21 | '}'; 22 | 23 | // Create the fragment shader object 24 | shaders.fragShader = gl.createShader(gl.FRAGMENT_SHADER); 25 | 26 | // Load the source code into it 27 | gl.shaderSource(shaders.fragShader, fragmentShaderSource); 28 | 29 | // Compile the source code 30 | gl.compileShader(shaders.fragShader); 31 | 32 | // Check if compilation succeeded 33 | if (!gl.getShaderParameter(shaders.fragShader, gl.COMPILE_STATUS)) 34 | { 35 | // It didn't. Display the info log as to why 36 | alert("Failed to compile the fragment shader.\n" + gl.getShaderInfoLog(shaders.fragShader)); 37 | 38 | return false; 39 | } 40 | 41 | // Create the vertex shader object 42 | shaders.vertexShader = gl.createShader(gl.VERTEX_SHADER); 43 | 44 | // Load the source code into it 45 | gl.shaderSource(shaders.vertexShader, vertexShaderSource); 46 | 47 | // Compile the source code 48 | gl.compileShader(shaders.vertexShader); 49 | 50 | // Check if compilation succeeded 51 | if (!gl.getShaderParameter(shaders.vertexShader, gl.COMPILE_STATUS)) 52 | { 53 | // It didn't. Display the info log as to why 54 | alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(shaders.vertexShader)); 55 | return false; 56 | } 57 | 58 | // Create the shader program 59 | program = gl.createProgram(); 60 | 61 | // Attach the fragment and vertex shaders to it 62 | gl.attachShader(program, shaders.fragShader); 63 | gl.attachShader(program, shaders.vertexShader); 64 | 65 | // Bind the custom vertex attribute "myVertex" to location 0 66 | gl.bindAttribLocation(program, 0, "myVertex"); 67 | 68 | // Link the program 69 | gl.linkProgram(program); 70 | 71 | // Check if linking succeeded in a similar way we checked for compilation errors 72 | if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 73 | { 74 | alert("Failed to link the program.\n" + gl.getProgramInfoLog(program)); 75 | return false; 76 | } 77 | 78 | // Actually use the created program 79 | gl.useProgram(program); 80 | 81 | // Sets the clear colour 82 | gl.clearColor(0.6, 0.8, 1.0, 1.0); 83 | 84 | // Create VBO for the triangle from our data 85 | 86 | // Vertex data 87 | var vertices = [ 88 | -0.4,-0.4, 0.0, 89 | 0.4,-0.4, 0.0, 90 | 0.0, 0.4, 0.0 91 | ]; 92 | 93 | // Create our VBO 94 | vbo = gl.createBuffer(); 95 | 96 | // Bind the VBO 97 | gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 98 | 99 | // Set the buffer's data 100 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 101 | 102 | // Unbind the VBO 103 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 104 | return true; 105 | } 106 | 107 | this.renderScene = function(gl) 108 | { 109 | // Matrix used for the projection model view 110 | var identity = [ 111 | 1.0, 0.0, 0.0, 0.0, 112 | 0.0, 1.0, 0.0, 0.0, 113 | 0.0, 0.0, 1.0, 0.0, 114 | 0.0, 0.0, 0.0, 1.0 115 | ]; 116 | 117 | /* 118 | Clear the colour buffer 119 | gl.clear can also be used to clear the depth or stencil buffer 120 | (gl.DEPTH_BUFFER_BIT or gl.SENCIL_BUFFER_BIT) 121 | */ 122 | gl.clear(gl.COLOR_BUFFER_BIT); 123 | 124 | /* 125 | Bind the projection model view matrix (PMVMatrix) to the associated 126 | uniform variable in the shader 127 | */ 128 | var location = gl.getUniformLocation(program, "myPMVMatrix"); 129 | 130 | // Then pass the matrix to that variable 131 | gl.uniformMatrix4fv(location, gl.FALSE, identity); 132 | 133 | // Bind the VBO 134 | gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 135 | 136 | /* 137 | Enable the custom vertex attribute at index 0. 138 | We previously bound that index to "MyVertex" in our shader. 139 | */ 140 | gl.enableVertexAttribArray(0); 141 | 142 | // Point at the data for this vertex attribute 143 | gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 0, 0); 144 | 145 | /* 146 | Now lets draw a non-indexed triangle array using the pointers previously given. 147 | This function allows the use of other primitive types : triangle strips, lines, ... 148 | For indexed geometry, use the function gl.drawElements with an index list. 149 | */ 150 | gl.drawArrays(gl.TRIANGLES, 0, 3); 151 | 152 | // Unbind the VBO 153 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 154 | 155 | return true; 156 | } 157 | } 158 | -------------------------------------------------------------------------------- /Examples/Beginner/02_IntroducingPVRShell/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | WebGLIntroducingPVRShell 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Examples/Beginner/03_Texturing/Texturing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/03_Texturing/Texturing.png -------------------------------------------------------------------------------- /Examples/Beginner/03_Texturing/Texturing.txt: -------------------------------------------------------------------------------- 1 | :Title: 2 | Texturing 3 | 4 | :ShortDescription: 5 | This training course demonstrates how to apply a texture to a polygon in :API:. 6 | 7 | :FullDescription: 8 | 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. 9 | 10 | :Controls: 11 | - Esc - Close the application 12 | 13 | 14 | :APIS: 15 | WebGL -------------------------------------------------------------------------------- /Examples/Beginner/03_Texturing/WebGLTexturing.js: -------------------------------------------------------------------------------- 1 | function WebGLTexturing() 2 | { 3 | var shaders = {}; 4 | var program = null; 5 | var vbo = null; 6 | var texture = null; 7 | 8 | this.initView = function(gl) 9 | { 10 | var fragmentShaderSource = 11 | 'uniform sampler2D sampler2d;' + 12 | 'varying mediump vec2 myTexCoord;' + 13 | 'void main (void)' + 14 | '{' + 15 | ' gl_FragColor = texture2D(sampler2d,myTexCoord);' + 16 | '}'; 17 | 18 | var vertexShaderSource = 19 | 'attribute highp vec4 myVertex;' + 20 | 'attribute mediump vec4 myUV;' + 21 | 'uniform mediump mat4 myPMVMatrix;' + 22 | 'varying mediump vec2 myTexCoord;' + 23 | 'void main(void)' + 24 | '{' + 25 | ' gl_Position = myPMVMatrix * myVertex;' + 26 | ' myTexCoord = myUV.st;' + 27 | '}'; 28 | 29 | // Create the fragment shader object 30 | shaders.fragShader = gl.createShader(gl.FRAGMENT_SHADER); 31 | 32 | // Load the source code into it 33 | gl.shaderSource(shaders.fragShader, fragmentShaderSource); 34 | 35 | // Compile the source code 36 | gl.compileShader(shaders.fragShader); 37 | 38 | // Check if compilation succeeded 39 | if (!gl.getShaderParameter(shaders.fragShader, gl.COMPILE_STATUS)) 40 | { 41 | // It didn't. Display the info log as to why 42 | alert("Failed to compile the fragment shader.\n" + gl.getShaderInfoLog(shaders.fragShader)); 43 | return false; 44 | } 45 | 46 | // Create the vertex shader object 47 | shaders.vertexShader = gl.createShader(gl.VERTEX_SHADER); 48 | 49 | // Load the source code into it 50 | gl.shaderSource(shaders.vertexShader, vertexShaderSource); 51 | 52 | // Compile the source code 53 | gl.compileShader(shaders.vertexShader); 54 | 55 | // Check if compilation succeeded 56 | if (!gl.getShaderParameter(shaders.vertexShader, gl.COMPILE_STATUS)) 57 | { 58 | // It didn't. Display the info log as to why 59 | alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(shaders.vertexShader)); 60 | return false; 61 | } 62 | 63 | // Create the shader program 64 | program = gl.createProgram(); 65 | 66 | // Attach the fragment and vertex shaders to it 67 | gl.attachShader(program, shaders.fragShader); 68 | gl.attachShader(program, shaders.vertexShader); 69 | 70 | // Bind the custom vertex attribute "myVertex" to location 0 71 | gl.bindAttribLocation(program, 0, "myVertex"); 72 | 73 | // Bind the custom vertex attribute "myUV" to location 1 74 | gl.bindAttribLocation(program, 1, "myUV"); 75 | 76 | // Link the program 77 | gl.linkProgram(program); 78 | 79 | // Check if linking succeeded in a similar way we checked for compilation errors 80 | if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 81 | { 82 | alert("Failed to link the program.\n" + gl.getProgramInfoLog(program)); 83 | return false; 84 | } 85 | 86 | // Actually use the created program 87 | gl.useProgram(program); 88 | 89 | // Sets the clear colour 90 | gl.clearColor(0.6, 0.8, 1.0, 1.0); 91 | 92 | /* 93 | Create the texture 94 | */ 95 | 96 | // Allocate one texture handle 97 | texture = gl.createTexture(); 98 | 99 | // Bind the texture 100 | gl.bindTexture(gl.TEXTURE_2D, texture); 101 | 102 | // Create the data as a 32bits integer array (8 bits per component) 103 | var textureSize = 128; 104 | var textureData = new Uint8Array(textureSize * textureSize * 4); 105 | 106 | for(var i = 0; i < textureSize; ++i) 107 | { 108 | for(var j = 0; j < textureSize; ++j) 109 | { 110 | var index = (j * textureSize + i) * 4; 111 | 112 | if ( (((i*j)/8) >> 0) % 2 ) 113 | { 114 | textureData[index + 0] = 255; 115 | textureData[index + 1] = 0; 116 | textureData[index + 2] = 255; 117 | textureData[index + 3] = 255; 118 | } 119 | else 120 | { 121 | textureData[index + 3] = 255; 122 | textureData[index + 2] = 255 - j * 2; 123 | textureData[index + 1] = 255 - i; 124 | textureData[index + 0] = 255 - i * 2; 125 | 126 | } 127 | } 128 | } 129 | 130 | /* 131 | gl.texImage2D loads the texture data into the texture object. 132 | */ 133 | 134 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, textureSize, textureSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData); 135 | 136 | // Set the texture parameters 137 | gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 138 | gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 139 | 140 | // Create VBO for the triangle from our data 141 | 142 | // Vertex data 143 | var vertices = [ 144 | -0.4,-0.4, 0.0, 145 | 0.0, 0.0, 146 | 0.4,-0.4, 0.0, 147 | 1.0, 0.0, 148 | 0.0, 0.4, 0.0, 149 | 0.5, 1.0 150 | ]; 151 | 152 | // Create our VBO 153 | vbo = gl.createBuffer(); 154 | 155 | // Bind the VBO 156 | gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 157 | 158 | // Set the buffer's data 159 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 160 | 161 | // Unbind the VBO 162 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 163 | return true; 164 | } 165 | 166 | this.renderScene = function(gl) 167 | { 168 | // Matrix used for the projection model view 169 | var identity = [ 170 | 1.0, 0.0, 0.0, 0.0, 171 | 0.0, 1.0, 0.0, 0.0, 172 | 0.0, 0.0, 1.0, 0.0, 173 | 0.0, 0.0, 0.0, 1.0 174 | ]; 175 | 176 | /* 177 | Clear the colour buffer 178 | gl.clear can also be used to clear the depth or stencil buffer 179 | (gl.DEPTH_BUFFER_BIT or gl.SENCIL_BUFFER_BIT) 180 | */ 181 | gl.clear(gl.COLOR_BUFFER_BIT); 182 | 183 | /* 184 | Bind the projection model view matrix (PMVMatrix) to the associated 185 | uniform variable in the shader 186 | */ 187 | var location = gl.getUniformLocation(program, "myPMVMatrix"); 188 | 189 | // Then pass the matrix to that variable 190 | gl.uniformMatrix4fv(location, gl.FALSE, identity); 191 | 192 | // Bind the VBO 193 | gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 194 | 195 | /* 196 | Enable the custom vertex attribute at index 0. 197 | We previously bound that index to "MyVertex" in our shader. 198 | */ 199 | gl.enableVertexAttribArray(0); 200 | 201 | // Point at the data for this vertex attribute 202 | gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 20, 0); 203 | 204 | // Point at the data for this vertex attribute 205 | gl.enableVertexAttribArray(1); 206 | gl.vertexAttribPointer(1, 2, gl.FLOAT, gl.FALSE, 20, 12); 207 | 208 | /* 209 | Now lets draw a non-indexed triangle array using the pointers previously given. 210 | This function allows the use of other primitive types : triangle strips, lines, ... 211 | For indexed geometry, use the function gl.drawElements with an index list. 212 | */ 213 | gl.drawArrays(gl.TRIANGLES, 0, 3); 214 | 215 | // Unbind the VBO 216 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 217 | 218 | return true; 219 | } 220 | } 221 | -------------------------------------------------------------------------------- /Examples/Beginner/03_Texturing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | WebGLTexturing 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Examples/Beginner/04_BasicTnL/BasicTnL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/04_BasicTnL/BasicTnL.png -------------------------------------------------------------------------------- /Examples/Beginner/04_BasicTnL/BasicTnL.txt: -------------------------------------------------------------------------------- 1 | :Title: 2 | BasicTnL 3 | 4 | :ShortDescription: 5 | This training course consists of a demonstration of basic transformation and lighting. 6 | 7 | :FullDescription: 8 | This training course consists of a demonstration of basic transformation and lighting, growing on the basic drawing techniques learnt in HelloTriangle. 9 | 10 | :Controls: 11 | - Esc - Close the application 12 | 13 | :APIS: 14 | WebGL -------------------------------------------------------------------------------- /Examples/Beginner/04_BasicTnL/WebGLBasicTnL.js: -------------------------------------------------------------------------------- 1 | function WebGLBasicTnL() 2 | { 3 | var angle = 0.0; 4 | var shaders = {}; 5 | var program = null; 6 | var texture = null; 7 | var vbo = null; 8 | 9 | this.initView = function(gl) 10 | { 11 | var fragmentShaderSource = 12 | 'uniform sampler2D sampler2d;' + 13 | 'varying mediump float varDot;' + 14 | 'varying mediump vec2 varCoord;' + 15 | 'void main (void)' + 16 | '{' + 17 | ' gl_FragColor.rgb = texture2D(sampler2d,varCoord).rgb * varDot;' + 18 | ' gl_FragColor.a = 1.0;' + 19 | '}'; 20 | 21 | var vertexShaderSource = 22 | 'attribute highp vec4 myVertex;' + 23 | 'attribute mediump vec3 myNormal;' + 24 | 'attribute mediump vec4 myUV;' + 25 | 'uniform mediump mat4 myPMVMatrix;' + 26 | 'uniform mediump mat3 myModelViewIT;' + 27 | 'uniform mediump vec3 myLightDirection;' + 28 | 'varying mediump float varDot;' + 29 | 'varying mediump vec2 varCoord;' + 30 | 'void main(void)' + 31 | '{' + 32 | ' gl_Position = myPMVMatrix * myVertex;' + 33 | ' varCoord = myUV.st;' + 34 | ' mediump vec3 transNormal = myModelViewIT * myNormal;' + 35 | ' varDot = max( dot(transNormal, myLightDirection), 0.0 );' + 36 | '}'; 37 | 38 | 39 | // Create the fragment shader object 40 | shaders.fragShader = gl.createShader(gl.FRAGMENT_SHADER); 41 | 42 | // Load the source code into it 43 | gl.shaderSource(shaders.fragShader, fragmentShaderSource); 44 | 45 | // Compile the source code 46 | gl.compileShader(shaders.fragShader); 47 | 48 | // Check if compilation succeeded 49 | if (!gl.getShaderParameter(shaders.fragShader, gl.COMPILE_STATUS)) 50 | { 51 | // It didn't. Display the info log as to why 52 | alert("Failed to compile the fragment shader.\n" + gl.getShaderInfoLog(shaders.fragShader)); 53 | return false; 54 | } 55 | 56 | // Create the vertex shader object 57 | shaders.vertexShader = gl.createShader(gl.VERTEX_SHADER); 58 | 59 | // Load the source code into it 60 | gl.shaderSource(shaders.vertexShader, vertexShaderSource); 61 | 62 | // Compile the source code 63 | gl.compileShader(shaders.vertexShader); 64 | 65 | // Check if compilation succeeded 66 | if (!gl.getShaderParameter(shaders.vertexShader, gl.COMPILE_STATUS)) 67 | { 68 | // It didn't. Display the info log as to why 69 | alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(shaders.vertexShader)); 70 | return false; 71 | } 72 | 73 | // Create the shader program 74 | program = gl.createProgram(); 75 | 76 | // Attach the fragment and vertex shaders to it 77 | gl.attachShader(program, shaders.fragShader); 78 | gl.attachShader(program, shaders.vertexShader); 79 | 80 | // Bind the custom vertex attribute "myVertex" to location 0 81 | gl.bindAttribLocation(program, 0, "myVertex"); 82 | 83 | // Bind the custom vertex attribute "myUV" to location 1 84 | gl.bindAttribLocation(program, 1, "myUV"); 85 | 86 | // Bind the custom vertex attribute "myNormal" to location 2 87 | gl.bindAttribLocation(program, 2, "myNormal"); 88 | 89 | // Link the program 90 | gl.linkProgram(program); 91 | 92 | // Check if linking succeeded in a similar way we checked for compilation errors 93 | if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 94 | { 95 | alert("Failed to link the program.\n" + gl.getProgramInfoLog(program)); 96 | return false; 97 | } 98 | 99 | // Actually use the created program 100 | gl.useProgram(program); 101 | 102 | // Sets the clear colour 103 | gl.clearColor(0.6, 0.8, 1.0, 1.0); 104 | 105 | /* 106 | Create the texture 107 | */ 108 | 109 | // Allocate one texture handle 110 | texture = gl.createTexture(); 111 | 112 | // Bind the texture 113 | gl.bindTexture(gl.TEXTURE_2D, texture); 114 | 115 | // Create the data as a 32bits integer array (8 bits per component) 116 | var textureSize = 128; 117 | var textureData = new Uint8Array(textureSize * textureSize * 4); 118 | 119 | for(var i = 0; i < textureSize; ++i) 120 | { 121 | for(var j = 0; j < textureSize; ++j) 122 | { 123 | var index = (j * textureSize + i) * 4; 124 | 125 | if ( (((i*j)/8) >> 0) % 2 ) 126 | { 127 | textureData[index + 0] = 255; 128 | textureData[index + 1] = 0; 129 | textureData[index + 2] = 255; 130 | textureData[index + 3] = 255; 131 | } 132 | else 133 | { 134 | textureData[index + 3] = 255; 135 | textureData[index + 2] = 255 - j * 2; 136 | textureData[index + 1] = 255 - i; 137 | textureData[index + 0] = 255 - i * 2; 138 | } 139 | } 140 | } 141 | 142 | /* 143 | gl.texImage2D loads the texture data into the texture object. 144 | */ 145 | 146 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, textureSize, textureSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData); 147 | 148 | // Set the texture parameters 149 | gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 150 | gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 151 | 152 | // Create VBO for the triangle from our data 153 | 154 | // Vertex data 155 | var vertices = [ 156 | -0.4,-0.4, 0.0, // Position 157 | 0.0, 0.0, // UVs 158 | 0.0, 0.0, 1.0, // Normals 159 | 0.4,-0.4, 0.0, 160 | 1.0, 0.0, 161 | 0.0, 0.0, 1.0, 162 | 0.0, 0.4, 0.0, 163 | 0.5, 1.0, 164 | 0.0, 0.0, 1.0 165 | ]; 166 | 167 | // Create our VBO 168 | vbo = gl.createBuffer(); 169 | 170 | // Bind the VBO 171 | gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 172 | 173 | // Set the buffer's data 174 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 175 | 176 | // Unbind the VBO 177 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 178 | return true; 179 | } 180 | 181 | this.renderScene = function(gl) 182 | { 183 | // Matrix used for the model view inverse transpose 184 | var modelViewIT = [ 185 | Math.cos(angle), 0.0, Math.sin(angle), 186 | 0.0, 1.0, 0.0, 187 | -Math.sin(angle), 0.0, Math.cos(angle), 188 | ]; 189 | 190 | // Matrix used for the model view projection matrix 191 | var modelViewProj = [ 192 | Math.cos(angle), 0.0, Math.sin(angle), 0.0, 193 | 0.0, 1.0, 0.0, 0.0, 194 | -Math.sin(angle), 0.0, Math.cos(angle), 0.0, 195 | 0.0, 0.0, 0.0, 1.0 196 | ]; 197 | 198 | // Increment the angle 199 | angle += 0.05; 200 | 201 | /* 202 | Clear the colour buffer 203 | gl.clear can also be used to clear the depth or stencil buffer 204 | (gl.DEPTH_BUFFER_BIT or gl.SENCIL_BUFFER_BIT) 205 | */ 206 | gl.clear(gl.COLOR_BUFFER_BIT); 207 | 208 | /* 209 | Bind the projection model view matrix (PMVMatrix) to the associated 210 | uniform variable in the shader 211 | */ 212 | var location = gl.getUniformLocation(program, "myPMVMatrix"); 213 | 214 | // Then pass the matrix to that variable 215 | gl.uniformMatrix4fv(location, gl.FALSE, modelViewProj); 216 | 217 | /* 218 | Bind the model view inverse transpose matrix to the shader. 219 | This matrix is used in the vertex shader to transform the normals. 220 | */ 221 | location = gl.getUniformLocation(program, "myModelViewIT"); 222 | gl.uniformMatrix3fv(location, gl.FALSE, modelViewIT); 223 | 224 | // Bind the light direction vector to the shader 225 | location = gl.getUniformLocation(program, "myLightDirection"); 226 | gl.uniform3f(location, 0, 0, 1); 227 | 228 | // Bind the VBO 229 | gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 230 | 231 | /* 232 | Enable the custom vertex attribute at index 0. 233 | We previously bound that index to "MyVertex" in our shader. 234 | */ 235 | gl.enableVertexAttribArray(0); 236 | 237 | // Point at the data for this vertex attribute (vertex positions) 238 | gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 32, 0); 239 | 240 | // Point at the data for this vertex attribute (texcoords) 241 | gl.enableVertexAttribArray(1); 242 | gl.vertexAttribPointer(1, 2, gl.FLOAT, gl.FALSE, 32, 12 /* UVs start after the vertex position */ ); 243 | 244 | // Point at the data for this vertex attribute (normals) 245 | gl.enableVertexAttribArray(2); 246 | gl.vertexAttribPointer(2, 3, gl.FLOAT, gl.FALSE, 32, 20 /* Normals start after the position and uvs */ ); 247 | 248 | /* 249 | Now lets draw a non-indexed triangle array using the pointers previously given. 250 | This function allows the use of other primitive types : triangle strips, lines, ... 251 | For indexed geometry, use the function gl.drawElements with an index list. 252 | */ 253 | gl.drawArrays(gl.TRIANGLES, 0, 3); 254 | 255 | // Unbind the VBO 256 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 257 | 258 | return true; 259 | } 260 | } 261 | -------------------------------------------------------------------------------- /Examples/Beginner/04_BasicTnL/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | WebGLBasicTnL 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Examples/Beginner/05_IntroducingPVRTools/FragShader.fsh: -------------------------------------------------------------------------------- 1 | uniform sampler2D sTexture; 2 | 3 | varying mediump vec2 TexCoord; 4 | 5 | void main() 6 | { 7 | gl_FragColor = texture2D(sTexture, TexCoord); 8 | } 9 | -------------------------------------------------------------------------------- /Examples/Beginner/05_IntroducingPVRTools/Image.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/05_IntroducingPVRTools/Image.pvr -------------------------------------------------------------------------------- /Examples/Beginner/05_IntroducingPVRTools/IntroducingPVRTools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/05_IntroducingPVRTools/IntroducingPVRTools.png -------------------------------------------------------------------------------- /Examples/Beginner/05_IntroducingPVRTools/IntroducingPVRTools.txt: -------------------------------------------------------------------------------- 1 | :Title: 2 | IntroducingPVRTools 3 | 4 | :ShortDescription: 5 | This training course introduces the PVRTools libraries. 6 | 7 | :FullDescription: 8 | 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. 9 | 10 | :Controls: 11 | - Esc - Close the application 12 | 13 | :APIS: 14 | WebGL -------------------------------------------------------------------------------- /Examples/Beginner/05_IntroducingPVRTools/Media/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/05_IntroducingPVRTools/Media/image.png -------------------------------------------------------------------------------- /Examples/Beginner/05_IntroducingPVRTools/VertShader.vsh: -------------------------------------------------------------------------------- 1 | attribute highp vec4 inVertex; 2 | attribute mediump vec2 inTexCoord; 3 | 4 | uniform mediump mat4 MVPMatrix; 5 | 6 | varying mediump vec2 TexCoord; 7 | 8 | void main() 9 | { 10 | gl_Position = MVPMatrix * inVertex; 11 | TexCoord = inTexCoord; 12 | } 13 | -------------------------------------------------------------------------------- /Examples/Beginner/05_IntroducingPVRTools/WebGLIntroducingPVRTools.js: -------------------------------------------------------------------------------- 1 | function WebGLIntroducingPVRTools() 2 | { 3 | var VERTEX_ARRAY = 0; 4 | var TEXCOORD_ARRAY = 1; 5 | 6 | var print3D; 7 | var texture = null; 8 | var vbo = null; 9 | var vertexStride; 10 | var shaders = {}; 11 | var shaderProgram = {}; 12 | var loaded = false; 13 | 14 | var handleTextureLoaded = function(gl, textureID, header, metaData) 15 | { 16 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 17 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); 18 | texture = textureID; 19 | loaded = true; 20 | } 21 | 22 | this.initView = function(gl) 23 | { 24 | print3D = new PVRPrint3D(); 25 | print3D.setTextures(gl, PVRShell.data.width, PVRShell.data.height); 26 | 27 | // Sets the clear color 28 | gl.clearColor(0.6, 0.8, 1.0, 1.0); 29 | 30 | PVRTexture.loadFromURI(gl, "Image.pvr", 0, 31 | function(gl, textureID, header, metaData) 32 | { handleTextureLoaded(gl, textureID, header, metaData); }); 33 | 34 | shaders.vertexShader = PVRShader.loadFromURI(gl, "VertShader.vsh", gl.VERTEX_SHADER, [], function(e){alert(e);}); 35 | if(!shaders.vertexShader) 36 | return false; 37 | 38 | shaders.fragShader = PVRShader.loadFromURI(gl, "FragShader.fsh", gl.FRAGMENT_SHADER, [], function(e){alert(e);}); 39 | if(!shaders.fragShader) 40 | return false; 41 | 42 | var attribs = ["inVertex", "inTexCoord"]; 43 | shaderProgram.id = PVRShader.createProgram(gl, shaders.vertexShader, shaders.fragShader, attribs, function(e){alert(e);}); 44 | if(!shaderProgram.id) 45 | false; 46 | 47 | shaderProgram.MVPMatrix = gl.getUniformLocation(shaderProgram.id, "MVPMatrix"); 48 | gl.uniform1i(gl.getUniformLocation(shaderProgram.id, "sTexture"), 0); 49 | 50 | // Create VBO for the triangle from our data 51 | 52 | // Vertex data 53 | var vertices = [ 54 | -0.4,-0.4, 0.0, 55 | 0.0, 0.0, 56 | 0.4,-0.4, 0.0, 57 | 1.0, 0.0, 58 | 0.0, 0.4, 0.0, 59 | 0.5, 1.0 60 | ]; 61 | 62 | // Create our VBO 63 | vbo = gl.createBuffer(); 64 | 65 | // Bind the VBO 66 | gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 67 | 68 | // Set the buffer's data 69 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 70 | 71 | // Unbind the VBO 72 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 73 | 74 | vertexStride = 5 * 4; // 3 floats for the pos, 2 for the UVs 75 | 76 | // Enable culling 77 | gl.enable(gl.CULL_FACE); 78 | return true; 79 | } 80 | 81 | this.renderScene = function(gl) 82 | { 83 | // Clears the color and depth buffer 84 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 85 | 86 | // Binds the loaded texture 87 | gl.bindTexture(gl.TEXTURE_2D, texture); 88 | 89 | // Use the loaded shader program 90 | gl.useProgram(shaderProgram.id); 91 | 92 | /* 93 | Creates the Model View Projection (MVP) matrix using the PVRTMat4 class from the tools. 94 | The tools contain a complete set of functions to operate on 4x4 matrices. 95 | */ 96 | var mMVP = PVRMatrix4x4.identity(); 97 | 98 | /* 99 | Pass this matrix to the shader. 100 | The .m field of a PVRTMat4 contains the array of float used to 101 | communicate with OpenGL ES. 102 | */ 103 | gl.uniformMatrix4fv(shaderProgram.MVPMatrix, gl.FALSE, mMVP.data); 104 | 105 | /* 106 | Draw a triangle. 107 | Please refer to the training course IntroducingPVRShell for a detailed explanation. 108 | */ 109 | 110 | // Bind the VBO 111 | gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 112 | 113 | // Pass the vertex data 114 | gl.enableVertexAttribArray(VERTEX_ARRAY); 115 | gl.vertexAttribPointer(VERTEX_ARRAY, 3, gl.FLOAT, gl.FALSE, vertexStride, 0); 116 | 117 | // Pass the texture coordinates data 118 | gl.enableVertexAttribArray(TEXCOORD_ARRAY); 119 | gl.vertexAttribPointer(TEXCOORD_ARRAY, 2, gl.FLOAT, gl.FALSE, vertexStride, 3*4); 120 | 121 | // Draws a non-indexed triangle array 122 | gl.drawArrays(gl.TRIANGLES, 0, 3); 123 | 124 | /* 125 | Display some text. 126 | Print3D() function allows to draw text anywhere on the screen using any color. 127 | Param 1: Position of the text along X (from 0 to 100 scale independent) 128 | Param 2: Position of the text along Y (from 0 to 100 scale independent) 129 | Param 3: Scale of the text 130 | Param 4: Colour of the text (0xAABBGGRR format) 131 | Param 5: Formatted string (uses the same syntax as printf) 132 | */ 133 | print3D.print3D(8.0, 30.0, 1.0, 0xFFAA4040, "example"); 134 | 135 | /* 136 | DisplayDefaultTitle() writes a title and description text on the top left of the screen. 137 | It can also display the PVR logo (ePVRTPrint3DLogoPVR), the IMG logo (ePVRTPrint3DLogoIMG) or both (ePVRTPrint3DLogoPVR | ePVRTPrint3DLogoIMG). 138 | Set this last parameter to NULL not to display the logos. 139 | */ 140 | print3D.displayDefaultTitle("IntroducingPVRTools", "Description", EPVRPrint3D.Logo.PowerVR); 141 | 142 | // Tells Print3D to do all the pending text rendering now 143 | print3D.flush(gl); 144 | 145 | return true; 146 | } 147 | } 148 | -------------------------------------------------------------------------------- /Examples/Beginner/05_IntroducingPVRTools/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | WebGLIntroducingPVRTools 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Examples/Beginner/06_IntroducingPrint3D/FragShader.fsh: -------------------------------------------------------------------------------- 1 | uniform sampler2D sTexture; 2 | 3 | varying mediump vec2 TexCoord; 4 | 5 | void main() 6 | { 7 | gl_FragColor = texture2D(sTexture, TexCoord); 8 | } 9 | -------------------------------------------------------------------------------- /Examples/Beginner/06_IntroducingPrint3D/IntroducingPrint3D.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/06_IntroducingPrint3D/IntroducingPrint3D.png -------------------------------------------------------------------------------- /Examples/Beginner/06_IntroducingPrint3D/IntroducingPrint3D.txt: -------------------------------------------------------------------------------- 1 | :Title: 2 | IntroducingPrint3D 3 | 4 | :ShortDescription: 5 | This training course introduces the Print3D class featured within the PVRTools library. 6 | 7 | :FullDescription: 8 | 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. 9 | 10 | :APIS: 11 | WebGL -------------------------------------------------------------------------------- /Examples/Beginner/06_IntroducingPrint3D/Text.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/06_IntroducingPrint3D/Text.txt -------------------------------------------------------------------------------- /Examples/Beginner/06_IntroducingPrint3D/VertShader.vsh: -------------------------------------------------------------------------------- 1 | attribute highp vec2 inVertex; 2 | attribute mediump vec2 inTexCoord; 3 | 4 | uniform mediump mat4 MVPMatrix; 5 | 6 | varying mediump vec2 TexCoord; 7 | 8 | void main() 9 | { 10 | gl_Position = MVPMatrix * vec4(inVertex, 0.0, 1.0); 11 | TexCoord = inTexCoord; 12 | } 13 | -------------------------------------------------------------------------------- /Examples/Beginner/06_IntroducingPrint3D/WebGLIntroducingPrint3D.js: -------------------------------------------------------------------------------- 1 | function WebGLIntroducingPrint3D() 2 | { 3 | var TEXTFONT = "arial_36.pvr"; 4 | var INTROFONT = "starjout_60.pvr"; 5 | var TITLEFONT = "title_36.pvr"; 6 | var TEXTFILE = "Text.txt"; 7 | 8 | var INTRO_TIME = 4000; 9 | var INTRO_FADE_TIME = 1000; 10 | var TITLE_TIME = 4000; 11 | var TITLE_FADE_TIME = 500; 12 | 13 | var TEXT_START_Y = -650.0; 14 | var TEXT_END_Y = 1300.0; 15 | var TEXT_FADE_START = 300.0; 16 | var TEXT_FADE_END = 500.0; 17 | 18 | var targetFPS = 1.0/60.0; 19 | var shaders = {}; 20 | var shaderProgram = {}; 21 | var vbo = null; 22 | var starTexture = null; 23 | 24 | var ETitleLanguage = 25 | { 26 | eLang_English : 0, 27 | eLang_German : 1, 28 | eLang_Norwegian : 2, 29 | eLang_Bulgarian : 3, 30 | 31 | eLang_Size : 4 32 | }; 33 | 34 | var titles = 35 | [ 36 | "IntroducingPrint3D", 37 | "Einf\u00FChrungPrint3D", 38 | "Innf\u00F8ringPrint3D", 39 | "\u0432\u044A\u0432\u0435\u0436\u0434\u0430\u043D\u0435Print3D", 40 | ]; 41 | 42 | var generateBackgroundTexture = function(gl, screenWidth, screenHeight) 43 | { 44 | // Generate star texture 45 | var starW = PVRMaths.POTHigher(screenWidth, 1); 46 | var starH = PVRMaths.POTHigher(screenHeight, 1); 47 | 48 | starTexture = gl.createTexture(); 49 | gl.bindTexture(gl.TEXTURE_2D, starTexture); 50 | var texData = new Uint8Array(starW*starH); 51 | for (var y = 0; y < starH; y++) 52 | { 53 | for (var x = 0; x < starW; x++) 54 | { 55 | var idx = (y*starW+x); 56 | if(Math.floor(Math.random() * 200) == 1) 57 | { 58 | texData[idx] = Math.random() * 255 + 1; 59 | } 60 | } 61 | } 62 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, starW, starH, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, texData); 63 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 64 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 65 | 66 | shaders.vertexShader = PVRShader.loadFromURI(gl, "VertShader.vsh", gl.VERTEX_SHADER, [], function(e){alert(e);}); 67 | if(!shaders.vertexShader) 68 | return false; 69 | 70 | shaders.fragShader = PVRShader.loadFromURI(gl, "FragShader.fsh", gl.FRAGMENT_SHADER, [], function(e){alert(e);}); 71 | if(!shaders.fragShader) 72 | return false; 73 | 74 | var attribs = ["inVertex", "inTexCoord"]; 75 | shaderProgram.id = PVRShader.createProgram(gl, shaders.vertexShader, shaders.fragShader, attribs, function(e){alert(e);}); 76 | if(!shaderProgram.id) 77 | false; 78 | 79 | shaderProgram.MVPMatrix = gl.getUniformLocation(shaderProgram.id, "MVPMatrix"); 80 | gl.uniform1i(gl.getUniformLocation(shaderProgram.id, "sTexture"), 0); 81 | 82 | // Vertex data 83 | var vertices = [ 84 | -1.0, 1.0, 0.0, 85 | 0.0, 1.0, 86 | 87 | -1.0, -1.0, 0.0, 88 | 0.0, 0.0, 89 | 90 | 1.0, 1.0, 0.0, 91 | 1.0, 1.0, 92 | 93 | 1.0, -1.0, 0.0, 94 | 1.0, 0.0, 95 | ]; 96 | 97 | // Create our VBO 98 | vbo = gl.createBuffer(); 99 | gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 100 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 101 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 102 | } 103 | 104 | this.initApplication = function() 105 | { 106 | this.centralTextData = new Array(); 107 | 108 | // Load the string table 109 | var fs = new PVRFileStream(); 110 | textLoaded = function(stream, demo) 111 | { 112 | var centralTextIdx = 0; 113 | for(var idx = 0; idx < stream.GetSize(); idx+=2) 114 | { 115 | if(demo.centralTextData[centralTextIdx] == undefined) 116 | demo.centralTextData[centralTextIdx] = new String(); 117 | 118 | var c = stream.ReadUInt16(idx); 119 | demo.centralTextData[centralTextIdx] += String.fromCharCode(c); 120 | if(c == 0x0A) 121 | { 122 | centralTextIdx++; 123 | continue; 124 | } 125 | } 126 | } 127 | fs.Open(TEXTFILE, false, textLoaded, this); 128 | 129 | this.textOffset = TEXT_START_Y; 130 | this.previousFrameT = 0; 131 | this.titleLang = ETitleLanguage.eEnglish; 132 | 133 | return true; 134 | } 135 | 136 | this.initView = function(gl) 137 | { 138 | var width = PVRShell.data.width; 139 | var height = PVRShell.data.height; 140 | 141 | this.print3D = new PVRPrint3D(); 142 | this.print3D.setTextures(gl, width, height); 143 | 144 | this.centralText = new PVRPrint3D(); 145 | this.centralText.setTextures(gl, width, height, TEXTFONT); 146 | 147 | this.introText = new PVRPrint3D(); 148 | this.introText.setTextures(gl, width, height, INTROFONT); 149 | 150 | this.titleText = new PVRPrint3D(); 151 | this.titleText.setTextures(gl, width, height, TITLEFONT); 152 | 153 | // Sets the clear color 154 | gl.clearColor(0.0, 1.0, 0.0, 1.0); 155 | 156 | // Generate background texture 157 | generateBackgroundTexture(gl, width, height); 158 | 159 | this.startTime = PVRShell.getTimeNow(); 160 | 161 | // Enable culling 162 | gl.enable(gl.CULL_FACE); 163 | 164 | return true; 165 | } 166 | 167 | this.renderScene = function(gl) 168 | { 169 | // Clears the color and depth buffer 170 | gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 171 | 172 | var currentTime = PVRShell.getTimeNow() - this.startTime; 173 | 174 | // Draw star background 175 | { 176 | gl.bindTexture(gl.TEXTURE_2D, starTexture); 177 | gl.useProgram(shaderProgram.id); 178 | gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 179 | 180 | var mMVP = PVRMatrix4x4.identity(); 181 | gl.uniformMatrix4fv(shaderProgram.MVPMatrix, gl.FALSE, mMVP.data); 182 | 183 | // Pass the vertex data 184 | gl.enableVertexAttribArray(0); 185 | gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 3*4 + 2*4, 0); 186 | 187 | // Pass the texture coordinates data 188 | gl.enableVertexAttribArray(1); 189 | gl.vertexAttribPointer(1, 2, gl.FLOAT, gl.FALSE, 3*4 + 2*4, 3*4); 190 | 191 | // Draws a non-indexed triangle array 192 | gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 193 | } 194 | 195 | // Render the 'Introducing Print3D' title for the first n seconds. 196 | if(currentTime < INTRO_TIME) 197 | { 198 | var fadeAmount = 1.0; 199 | 200 | // Fade in 201 | if(currentTime < INTRO_FADE_TIME) 202 | { 203 | fadeAmount = currentTime / INTRO_FADE_TIME; 204 | } 205 | // Fade out 206 | else if(currentTime > INTRO_TIME - INTRO_FADE_TIME) 207 | { 208 | fadeAmount = 1.0 - ((currentTime - (INTRO_TIME - INTRO_FADE_TIME)) / INTRO_FADE_TIME); 209 | } 210 | 211 | renderTitle(gl, fadeAmount, this.introText); 212 | } 213 | // Render the 3D text. 214 | else 215 | { 216 | renderText(gl, this); 217 | } 218 | 219 | /* 220 | Here we are passing in a wide-character string to Print3D function. This allows 221 | Unicode to be compiled in to string-constants, which this code snippet 222 | demonstrates. 223 | Because we are not setting a projection or a model-view matrix the default projection 224 | matrix is used. 225 | */ 226 | var titleLang = Math.floor((currentTime / 1000) / (TITLE_TIME / 1000)) % ETitleLanguage.eLang_Size; 227 | var nextLang = Math.floor(titleLang + 1) % ETitleLanguage.eLang_Size; 228 | var modTime = currentTime % TITLE_TIME; 229 | var titlePerc = 1.0; 230 | var nextPerc = 0.0; 231 | if(modTime > TITLE_TIME - TITLE_FADE_TIME) 232 | { 233 | titlePerc = 1.0 - ((modTime - (INTRO_TIME - INTRO_FADE_TIME)) / INTRO_FADE_TIME); 234 | nextPerc = 1.0 - titlePerc; 235 | } 236 | var titleCol = ((titlePerc * 255) << 24) | 0xFFFFFF; 237 | var nextCol = ((nextPerc * 255) << 24) | 0xFFFFFF; 238 | this.titleText.print3D(0, 0, 1, titleCol, titles[titleLang]); 239 | this.titleText.print3D(0, 0, 1, nextCol, titles[nextLang]); 240 | this.titleText.flush(gl); 241 | 242 | /* 243 | DisplayDefaultTitle() writes a title and description text on the top left of the screen. 244 | It can also display the PVR logo (ePVRTPrint3DLogoPowerVR), the IMG logo (ePVRTPrint3DLogoIMG) or both (ePVRTPrint3DLogoPowerVR | ePVRTPrint3DLogoIMG) 245 | which is what we are using the function for here. 246 | Set this last parameter to NULL not to display the logos. 247 | Passing NULL for the first two parameters will not display any text. 248 | */ 249 | this.print3D.displayDefaultTitle(null, null, EPVRPrint3D.Logo.PowerVR); 250 | 251 | // Tells Print3D to do all the pending text rendering now 252 | this.print3D.flush(gl); 253 | 254 | return true; 255 | } 256 | 257 | var renderTitle = function(gl, fadeAmount, introText) 258 | { 259 | var col = ((fadeAmount * 255) << 24) | 0x00FFFF; 260 | 261 | var w = PVRShell.data.width * 0.5; 262 | var h = PVRShell.data.height * 0.5; 263 | 264 | /* 265 | Print3D can optionally be provided with user-defined projection and modelview matrices 266 | which allow custom layout of text. Here we are just providing a projection matrix 267 | so that text can be placed in viewport coordinates, rather than the default, more 268 | abstract coordinate system of 0.0-100.0. 269 | */ 270 | var mProjection = PVRMatrix4x4.createOrthographicProjection(-w, h, w, -h, -1.0, 1.0); 271 | introText.setProjection(mProjection); 272 | 273 | /* 274 | Using the MeasureText() method provided by Print3D, we can determine the bounding-box 275 | size of a string of text. This can be useful for justify text centrally, as we are 276 | doing here. 277 | */ 278 | var line1W = 0.0; 279 | var line2W = 0.0; 280 | var line1WH = introText.measureText(1.0, "introducing"); 281 | var line2WH = introText.measureText(1.0, "print3d"); 282 | 283 | /* 284 | Display some text. 285 | Print3D() function allows to draw text anywhere on the screen using any colour. 286 | Param 1: Position of the text along X 287 | Param 2: Position of the text along Y 288 | Param 3: Scale of the text 289 | Param 4: Colour of the text (0xAABBGGRR format) 290 | Param 5: Formatted string (uses the same syntax as printf) 291 | ... 292 | */ 293 | introText.print3D(-line1WH.width*0.5, 50.0, 1.0, col, "introducing"); 294 | introText.print3D(-line2WH.width*0.5, 0.0, 1.0, col, "print3d"); 295 | 296 | // Tells Print3D to do all the pending text rendering now 297 | introText.flush(gl); 298 | } 299 | 300 | var renderText = function(gl, demo) 301 | { 302 | var aspect = PVRShell.data.width / PVRShell.data.height; 303 | 304 | // Calculate the frame delta. 305 | var now = PVRShell.getTimeNow(); 306 | if(demo.previousFrameT == 0) 307 | demo.previousFrameT = now; 308 | 309 | var dt = (now - demo.previousFrameT) * 0.001; 310 | demo.previousFrameT = now; 311 | 312 | // Calculate the FPS scale. 313 | var FPSScale = dt / targetFPS; 314 | 315 | // Move the text. Progressively speed up. 316 | var speedInc = 0.0; 317 | if(demo.textOffset > 0.0) 318 | speedInc = demo.textOffset / TEXT_END_Y; 319 | demo.textOffset += (0.75 + (1.0 * speedInc)) * FPSScale; 320 | if(demo.textOffset > TEXT_END_Y) 321 | demo.textOffset = TEXT_START_Y; 322 | 323 | var mProjection = PVRMatrix4x4.createPerspectiveProjection(1.0, 2000.0, 0.7, aspect); 324 | var mCamera = PVRMatrix4x4.createLookAt(new PVRVector3(0.0, -900.0, 700.0), new PVRVector3(0.0, -200.0, 0.0), new PVRVector3(0.0, 1.0, 0.0)); 325 | var mTrans = PVRMatrix4x4.translation(0.0, demo.textOffset, 0.0); 326 | var mModelView = PVRMatrix4x4.matrixMultiply(mCamera, mTrans); 327 | var strWidth = 0.0; 328 | 329 | /* 330 | Print3D can optionally be provided with user-defined projection and model-view matrices 331 | which allow custom layout of text. Here we are proving both a projection and model-view 332 | matrix. The projection matrix specified here uses perspective projection which will 333 | provide the 3D effect. The model-view matrix positions the the text in world space 334 | providing the 'camera' position and the scrolling of the text. 335 | */ 336 | demo.centralText.setProjection(mProjection); 337 | demo.centralText.setModelView(mModelView); 338 | 339 | /* 340 | The previous method (RenderTitle()) explains the following functions in more detail 341 | however put simply, we are looping the entire array of loaded text which is encoded 342 | in UTF-8. Print3D batches this internally and the call to Flush() will render the 343 | text to the frame buffer. We are also fading out the text over a certain distance. 344 | */ 345 | var pos, fade; 346 | var col; 347 | for(var index = 0; index < demo.centralTextData.length; ++index) 348 | { 349 | pos = (demo.textOffset - (index * 36.0)); 350 | fade = 1.0; 351 | if(pos > TEXT_FADE_START) 352 | { 353 | fade = Math.max(Math.min(1.0 - ((pos - TEXT_FADE_START) / (TEXT_FADE_END - TEXT_FADE_START)), 1.0), 0.0); 354 | } 355 | 356 | col = ((fade * 255) << 24) | 0x00FFFF; 357 | 358 | var textWH = demo.centralText.measureText(1.0, demo.centralTextData[index]); 359 | var textW = textWH.width; 360 | demo.centralText.print3D(-(textW * 0.5), -(index * 36.0), 1.0, col, demo.centralTextData[index]); 361 | } 362 | 363 | demo.centralText.flush(gl); 364 | } 365 | } 366 | 367 | -------------------------------------------------------------------------------- /Examples/Beginner/06_IntroducingPrint3D/arial_36.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/06_IntroducingPrint3D/arial_36.pvr -------------------------------------------------------------------------------- /Examples/Beginner/06_IntroducingPrint3D/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | WebGLIntroducingPrint3D 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Examples/Beginner/06_IntroducingPrint3D/starjout_60.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/06_IntroducingPrint3D/starjout_60.pvr -------------------------------------------------------------------------------- /Examples/Beginner/06_IntroducingPrint3D/title_36.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/06_IntroducingPrint3D/title_36.pvr -------------------------------------------------------------------------------- /Examples/Beginner/07_IntroducingPOD/FragShader.fsh: -------------------------------------------------------------------------------- 1 | uniform sampler2D sTexture; 2 | 3 | varying lowp float LightIntensity; 4 | varying mediump vec2 TexCoord; 5 | 6 | void main() 7 | { 8 | gl_FragColor.rgb = texture2D(sTexture, TexCoord).rgb * LightIntensity; 9 | gl_FragColor.a = 1.0; 10 | } -------------------------------------------------------------------------------- /Examples/Beginner/07_IntroducingPOD/IntroducingPOD.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/07_IntroducingPOD/IntroducingPOD.png -------------------------------------------------------------------------------- /Examples/Beginner/07_IntroducingPOD/IntroducingPOD.txt: -------------------------------------------------------------------------------- 1 | :Title: 2 | IntroducingPOD 3 | 4 | :ShortDescription: 5 | This training course introduces the PowerVR Object Data (.pod) format. 6 | 7 | :FullDescription: 8 | 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. 9 | 10 | :Controls: 11 | - Esc - Close the application 12 | 13 | :APIS: 14 | WebGL -------------------------------------------------------------------------------- /Examples/Beginner/07_IntroducingPOD/Media/scene.max: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/07_IntroducingPOD/Media/scene.max -------------------------------------------------------------------------------- /Examples/Beginner/07_IntroducingPOD/Media/tex_arm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/07_IntroducingPOD/Media/tex_arm.png -------------------------------------------------------------------------------- /Examples/Beginner/07_IntroducingPOD/Media/tex_base.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/07_IntroducingPOD/Media/tex_base.png -------------------------------------------------------------------------------- /Examples/Beginner/07_IntroducingPOD/Scene.pod: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/07_IntroducingPOD/Scene.pod -------------------------------------------------------------------------------- /Examples/Beginner/07_IntroducingPOD/VertShader.vsh: -------------------------------------------------------------------------------- 1 | attribute highp vec3 inVertex; 2 | attribute mediump vec3 inNormal; 3 | attribute mediump vec2 inTexCoord; 4 | 5 | uniform highp mat4 MVPMatrix; 6 | uniform mediump vec3 LightDirection; 7 | 8 | varying lowp float LightIntensity; 9 | varying mediump vec2 TexCoord; 10 | 11 | void main() 12 | { 13 | // Transform position 14 | gl_Position = MVPMatrix * vec4(inVertex, 1.0); 15 | 16 | // Pass through texcoords 17 | TexCoord = inTexCoord; 18 | 19 | // Simple diffuse lighting in model space 20 | LightIntensity = dot(inNormal, -LightDirection); 21 | } -------------------------------------------------------------------------------- /Examples/Beginner/07_IntroducingPOD/WebGLIntroducingPOD.js: -------------------------------------------------------------------------------- 1 | function WebGLIntroducingPOD() 2 | { 3 | var mdl; 4 | var print3D; 5 | var meshBuffers = null; 6 | var textures = null; 7 | var shaders = {}; 8 | var program = null; 9 | var loadStatus = {}; 10 | var prevTime = 0; 11 | var frame = 0.0; 12 | var demoFPS = 1.0 / 30.0; 13 | 14 | var handleTextureLoaded = function(gl, textureID, header, metaData, index) 15 | { 16 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 17 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); 18 | gl.bindTexture(gl.TEXTURE_2D, null); 19 | 20 | textures[index] = textureID; 21 | loadStatus["texture"+index] = 1; 22 | } 23 | 24 | var loadTextures = function(gl) 25 | { 26 | gl.getError(); 27 | 28 | textures = new Array(mdl.data.numTextures); 29 | 30 | for(var i = 0; i < mdl.data.numMaterials; i++) 31 | { 32 | (function(index) 33 | { 34 | var material = mdl.data.materials[index]; 35 | if(material.data.diffuseTextureIndex != -1) 36 | { 37 | var material = mdl.data.materials[i]; 38 | var texName = mdl.data.textures[material.data.diffuseTextureIndex].data.name; 39 | PVRTexture.loadFromURI(gl, texName, 0, 40 | function(gl, textureID, header, metaData) 41 | { handleTextureLoaded(gl, textureID, header, metaData, index); }); 42 | } 43 | })(i); 44 | } 45 | } 46 | 47 | var loadPOD = function(stream, gl) 48 | { 49 | mdl = new PVRModel(); 50 | var podLoader = new PVRPODLoader(); 51 | var result = podLoader.load(stream, mdl); 52 | if(result != EPODErrorCodes.eNoError) 53 | { 54 | alert("Failed to load POD: " + result); 55 | return; 56 | } 57 | 58 | if(mdl.data.numCameras == 0) 59 | { 60 | alert("This demo requires the POD file to contain at least one camera."); 61 | return; 62 | } 63 | 64 | meshBuffers = new Array(mdl.data.numMeshes); 65 | 66 | for(var i = 0; i < mdl.data.numMeshes; i++) 67 | { 68 | var mesh = mdl.data.meshes[i]; 69 | var meshBuffer = { 70 | VBOs: new Array(), 71 | IBO: null, 72 | }; 73 | 74 | // Vertex data 75 | for(var e = 0; e < mesh.data.vertexElementData.length; e++) 76 | { 77 | // Gen a VBO 78 | var vbo = gl.createBuffer(); 79 | 80 | // Bind 81 | gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 82 | 83 | // Set the buffer's data 84 | gl.bufferData(gl.ARRAY_BUFFER, mesh.data.vertexElementData[e], gl.STATIC_DRAW); 85 | 86 | // Add to the list 87 | meshBuffer.VBOs.push(vbo); 88 | } 89 | 90 | // Face data 91 | if(mesh.data.faces.data.length > 0) 92 | { 93 | var ibo = gl.createBuffer(); 94 | 95 | // Bind 96 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo); 97 | 98 | // Set the buffer's data 99 | gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, mesh.data.faces.data, gl.STATIC_DRAW); 100 | 101 | // Add to the list 102 | meshBuffer.IBO = ibo; 103 | } 104 | 105 | meshBuffers[i] = meshBuffer; 106 | } 107 | 108 | // Unbind 109 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 110 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); 111 | 112 | // Set the load status object up for textures 113 | for(var i = 0; i < mdl.data.numTextures; i++) 114 | { 115 | loadStatus["texture"+i] = 0; 116 | } 117 | 118 | // Load textures 119 | loadTextures(gl); 120 | 121 | // Set POD load status 122 | loadStatus.pod = 1; 123 | } 124 | 125 | var loadShaders = function(gl) 126 | { 127 | shaders.vs = PVRShader.loadFromURI(gl, "VertShader.vsh", gl.VERTEX_SHADER, [], function(e){ alert(e); }); 128 | if(!shaders.vs) 129 | return false; 130 | 131 | shaders.fs = PVRShader.loadFromURI(gl, "FragShader.fsh", gl.FRAGMENT_SHADER, [], function(e){ alert(e); }); 132 | if(!shaders.fs) 133 | return false; 134 | 135 | // Create the program 136 | var attribs = ["inVertex", "inNormal", "inTexCoord"]; 137 | program = PVRShader.createProgram(gl, shaders.vs, shaders.fs, attribs, function(e) { alert(e); }); 138 | if(!program) 139 | return false; 140 | 141 | return true; 142 | } 143 | 144 | this.initView = function(gl) 145 | { 146 | loadStatus.pod = 0; 147 | 148 | // Load the shaders 149 | if(!loadShaders(gl)) 150 | return false; 151 | 152 | // Load the POD file 153 | var fs = new PVRFileStream(); 154 | fs.Open("Scene.pod", true, loadPOD, gl); 155 | 156 | // Initialise Print3D 157 | print3D = new PVRPrint3D(); 158 | print3D.setTextures(gl, PVRShell.data.width, PVRShell.data.height); 159 | 160 | // Sets the clear colour 161 | gl.clearColor(0.6, 0.8, 1.0, 1.0); 162 | 163 | // Setup states 164 | gl.enable(gl.DEPTH_TEST); 165 | gl.enable(gl.CULL_FACE); 166 | gl.disable(gl.BLEND); 167 | 168 | // Initialise the time 169 | prevTime = PVRShell.getTimeNow(); 170 | 171 | return true; 172 | } 173 | 174 | this.renderScene = function(gl) 175 | { 176 | /* 177 | Clear the colour buffer 178 | gl.clear can also be used to clear the depth or stencil buffer 179 | (gl.DEPTH_BUFFER_BIT or gl.SENCIL_BUFFER_BIT) 180 | */ 181 | gl.clear(gl.COLOR_BUFFER_BIT); 182 | 183 | // Check the loadStatus object to see if everything is complete 184 | var loaded = 1; 185 | for(var key in loadStatus) 186 | loaded &= loadStatus[key]; 187 | 188 | if(loaded) 189 | { 190 | var time = PVRShell.getTimeNow(); 191 | var delta = time - prevTime; 192 | prevTime = time; 193 | frame += delta * demoFPS; 194 | 195 | if(frame > mdl.data.numFrames - 1) 196 | frame = 0; 197 | 198 | mdl.setCurrentFrame(frame); 199 | 200 | /* 201 | Setup the camera. This is loaded from the POD model. 202 | */ 203 | var props = mdl.getCameraProperties(0); // Camera 0 204 | var aspect = PVRShell.data.width / PVRShell.data.height; 205 | var mView = PVRMatrix4x4.createLookAt(props.from, props.to, props.up); 206 | var mProj = PVRMatrix4x4.createPerspectiveProjection(4, 5000, props.fov, aspect); 207 | 208 | /* 209 | Setup lights. 210 | */ 211 | var lightDir = mdl.getLightDirection(0); // Light 0 212 | 213 | // Get shader uniform locations 214 | var mvpLoc = gl.getUniformLocation(program, "MVPMatrix"); 215 | var lightDirLoc = gl.getUniformLocation(program, "LightDirection"); 216 | 217 | // Render 218 | for(var i = 0; i < mdl.data.numMeshNodes; i++) 219 | { 220 | // Setup MVP matrix 221 | var mWorld = mdl.getWorldMatrix(i); 222 | var mMVP = PVRMatrix4x4.matrixMultiply(PVRMatrix4x4.matrixMultiply(mProj, mView), mWorld); 223 | gl.uniformMatrix4fv(mvpLoc, gl.FALSE, mMVP.data); 224 | 225 | // Pass the light direction in model space to the shader 226 | var vLightDirModel = PVRMatrix4x4.vectorMultiply(PVRMatrix4x4.inverse(mWorld), lightDir); 227 | gl.uniform3f(lightDirLoc, vLightDirModel.data[0], 228 | vLightDirModel.data[1], 229 | vLightDirModel.data[2]); 230 | 231 | // Get node 232 | var node = mdl.data.nodes[i]; 233 | 234 | // Setup texture 235 | var materialIndex = node.data.materialIndex; 236 | if(materialIndex == -1) 237 | { 238 | gl.bindTexture(gl.TEXTURE_2D, null); 239 | } 240 | else 241 | { 242 | gl.bindTexture(gl.TEXTURE_2D, textures[materialIndex]); 243 | } 244 | 245 | // Draw 246 | drawMesh(node.data.index, gl); 247 | } 248 | } 249 | 250 | print3D.displayDefaultTitle("IntroducingPOD", null, EPVRPrint3D.Logo.PowerVR); 251 | print3D.flush(gl); 252 | 253 | return true; 254 | } 255 | 256 | var drawMesh = function(meshIndex, gl) 257 | { 258 | var mesh = mdl.data.meshes[meshIndex]; 259 | 260 | // Bind IBO 261 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, meshBuffers[meshIndex].IBO); 262 | 263 | // Bind VBO 264 | gl.bindBuffer(gl.ARRAY_BUFFER, meshBuffers[meshIndex].VBOs[0]); 265 | 266 | // Setup pointers 267 | var positions = mesh.data.vertexElements["POSITION0"]; 268 | if(positions != undefined) 269 | { 270 | gl.enableVertexAttribArray(0); 271 | gl.vertexAttribPointer(0, positions.numComponents, gl.FLOAT, gl.FALSE, positions.stride, positions.offset); 272 | } 273 | 274 | var normals = mesh.data.vertexElements["NORMAL0"]; 275 | if(normals != undefined) 276 | { 277 | gl.enableVertexAttribArray(1); 278 | gl.vertexAttribPointer(1, normals.numComponents, gl.FLOAT, gl.FALSE, normals.stride, normals.offset); 279 | } 280 | 281 | var uvs = mesh.data.vertexElements["UV0"]; 282 | if(uvs != undefined) 283 | { 284 | gl.enableVertexAttribArray(2); 285 | gl.vertexAttribPointer(2, uvs.numComponents, gl.FLOAT, gl.FALSE, uvs.stride, uvs.offset); 286 | } 287 | 288 | switch (mesh.data.primitiveData.primitiveType) 289 | { 290 | case EPVRMesh.eIndexedTriangleList: 291 | gl.drawElements(gl.TRIANGLES, mesh.data.faces.data.length, gl.UNSIGNED_SHORT, 0); 292 | break; 293 | default: 294 | throw "Unhandled primitive type"; 295 | } 296 | 297 | // Unbind 298 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); 299 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 300 | gl.disableVertexAttribArray(0); 301 | gl.disableVertexAttribArray(1); 302 | gl.disableVertexAttribArray(2); 303 | } 304 | } 305 | -------------------------------------------------------------------------------- /Examples/Beginner/07_IntroducingPOD/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | WebGLIntroducingPOD 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Examples/Beginner/07_IntroducingPOD/tex_arm.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/07_IntroducingPOD/tex_arm.pvr -------------------------------------------------------------------------------- /Examples/Beginner/07_IntroducingPOD/tex_base.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Beginner/07_IntroducingPOD/tex_base.pvr -------------------------------------------------------------------------------- /Examples/Intermediate/RenderToTexture/FragShader.fsh: -------------------------------------------------------------------------------- 1 | uniform sampler2D sTexture; 2 | 3 | varying lowp float LightIntensity; 4 | varying mediump vec2 TexCoord; 5 | 6 | void main() 7 | { 8 | gl_FragColor = vec4(texture2D(sTexture, TexCoord).rgb * LightIntensity, 1.0); 9 | } 10 | -------------------------------------------------------------------------------- /Examples/Intermediate/RenderToTexture/Media/MaskAndBox.max: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Intermediate/RenderToTexture/Media/MaskAndBox.max -------------------------------------------------------------------------------- /Examples/Intermediate/RenderToTexture/Media/YellowWood.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Intermediate/RenderToTexture/Media/YellowWood.png -------------------------------------------------------------------------------- /Examples/Intermediate/RenderToTexture/RenderToTexture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Intermediate/RenderToTexture/RenderToTexture.png -------------------------------------------------------------------------------- /Examples/Intermediate/RenderToTexture/RenderToTexture.pod: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Intermediate/RenderToTexture/RenderToTexture.pod -------------------------------------------------------------------------------- /Examples/Intermediate/RenderToTexture/RenderToTexture.txt: -------------------------------------------------------------------------------- 1 | :Title: 2 | RenderToTexture 3 | 4 | :ShortDescription: 5 | This training course demonstrates the use of rendering to a texture. 6 | 7 | :FullDescription: 8 | 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. 9 | 10 | :Controls: 11 | - Left - Toggles multisampling of the FBOs 12 | - Esc - Close the application 13 | 14 | :APIS: 15 | WebGL -------------------------------------------------------------------------------- /Examples/Intermediate/RenderToTexture/VertShader.vsh: -------------------------------------------------------------------------------- 1 | attribute highp vec3 inVertex; 2 | attribute mediump vec3 inNormal; 3 | attribute mediump vec2 inTexCoord; 4 | 5 | uniform highp mat4 MVPMatrix; 6 | uniform mediump vec3 LightDirection; 7 | 8 | varying lowp float LightIntensity; 9 | varying mediump vec2 TexCoord; 10 | 11 | void main() 12 | { 13 | // Transform position 14 | gl_Position = MVPMatrix * vec4(inVertex, 1.0); 15 | 16 | // Pass through texcoords 17 | TexCoord = inTexCoord; 18 | 19 | // Simple diffuse lighting in model space 20 | LightIntensity = dot(inNormal, -LightDirection) + 0.2; 21 | } 22 | -------------------------------------------------------------------------------- /Examples/Intermediate/RenderToTexture/YellowWood.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Examples/Intermediate/RenderToTexture/YellowWood.pvr -------------------------------------------------------------------------------- /Examples/Intermediate/RenderToTexture/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | WebGLRenderToTexture 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /LICENSE_POWERVR_SDK.txt: -------------------------------------------------------------------------------- 1 | ----------------------------------------------- 2 | POWERVR SDK SOFTWARE END USER LICENSE AGREEMENT 3 | ----------------------------------------------- 4 | The MIT License (MIT) 5 | Copyright (c) Imagination Technologies Ltd. 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in 15 | all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 23 | THE SOFTWARE. 24 | 25 | 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PowerVR Graphics WebGL SDK # 2 | ![WebGL Water demo screenshot](http://powervr-graphics.github.io/WebGL_SDK/images/WebGLWaterDemo.png) 3 | This repository contains the source code for the PowerVR Graphics WebGL SDK. 4 | 5 | The WebGL SDK includes an abstraction layer that handles application life-cycle events (Shell), a 3D maths, text printing and resource loading framework (Tools), and a sub-set of the native OpenGL ES SDK's 3D graphics example applications. The SDK has been optimized for PowerVR devices, but should run efficiently on all WebGL capable phones, tablets, laptops and PCs. 6 | 7 | If you would like to know more about the WebGL SDK, please visit our [SDK Browser](http://powervr-graphics.github.io/WebGL_SDK/WebGL_SDK/SDKBrowser.html). 8 | 9 | To keep up to date with changes to the SDK read the [what's new](http://community.imgtec.com/developers/powervr/whats-new/) page. 10 | 11 | ## Setup ## 12 | Many of the WebGL Examples require the code to be hosted on a server. For demonstration purposes we've used GitHub's [Pages feature](https://pages.github.com/) to host the WebGL SDK. If you fork the code on GitHub you can use the same mechanism to host your modified code. If you would prefer not to use GitHub, you will need to host the code on your own web server. 13 | 14 | ### Beginner ### 15 |
    16 |
  1. 01_HelloAPI
  2. 17 |
  3. 02_IntroducingPVRShell
  4. 18 |
  5. 03_Texturing
  6. 19 |
  7. 04_BasicTnL
  8. 20 |
  9. 05_IntroducingPVRTools
  10. 21 |
  11. 06_IntroducingPrint3D
  12. 22 |
  13. 07_IntroducingPOD
  14. 23 |
24 | ### Intermediate ### 25 |
    26 |
  1. RenderToTexture
  2. 27 |
28 | ### Advanced ### 29 |
    30 |
  1. Water
  2. 31 |
32 | 33 | ## License ## 34 | The SDK is distributed under the MIT license. 35 | -------------------------------------------------------------------------------- /SDKBrowser.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Shell/PVRShell.js: -------------------------------------------------------------------------------- 1 | // Insert our canvas element into the html code 2 | document.write("Your browser doesn't appear to support the HTML5 <canvas> element."); 3 | 4 | // PVRShell "class" 5 | var PVRShell = { 6 | // Internal data 7 | data : { width:800, height:600, fullscreen:false }, 8 | 9 | getTimeNow: function() 10 | { 11 | if (window.performance) 12 | { 13 | if (window.performance.now) 14 | return window.performance.now() 15 | else if (window.performance.webkitNow) 16 | return window.performance.webkitNow() 17 | else if (window.performance.mozNow) 18 | return window.performance.mozNow() 19 | else if (window.performance.oNow) 20 | return window.performance.oNow() 21 | else 22 | return Date.now() 23 | } 24 | else 25 | { 26 | return Date.now() 27 | } 28 | }, 29 | 30 | // define our "main" function 31 | main: function(demo) 32 | { 33 | // Utility function 34 | function parseBool(value) 35 | { 36 | if(value.toLowerCase() === 'true') 37 | return true; 38 | else if(parseInt(value, 10) !== 0) 39 | return true; 40 | 41 | return false; 42 | } 43 | 44 | // Based on http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ 45 | requestAnimFrame = (function() { 46 | return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || 47 | function(callback){ 48 | window.setTimeout(callback, 1000, 60); 49 | }; 50 | })(); 51 | 52 | // Initialise the PVRShell data 53 | var canvas = document.getElementById("surface"); 54 | var gl = null; 55 | var urlLine = []; 56 | var state = 0; 57 | var i; 58 | 59 | (function mainloop() { 60 | switch(state) 61 | { 62 | case 0: // Initialise app 63 | // Parse "command-line" 64 | urlLine = []; 65 | var argIndex = window.location.href.indexOf('?'); 66 | 67 | if (argIndex > -1) 68 | { 69 | var arg; 70 | var args = window.location.href.slice(argIndex + 1).split('&'); 71 | var argc = args.length; 72 | 73 | for(i = 0; i < argc; i++) 74 | { 75 | arg = args[i].split('='); 76 | 77 | // Add our arg name and value 78 | urlLine[i] = { name:arg[0], value:arg[1] }; 79 | } 80 | } 81 | 82 | // Call initApplication 83 | if(demo.initApplication) 84 | { 85 | if(demo.initApplication() === false) 86 | { 87 | alert("initApplication failed"); 88 | return; 89 | } 90 | } 91 | 92 | ++state; 93 | requestAnimFrame(mainloop); 94 | break; 95 | case 1: // Initialise instance 96 | 97 | // Apply our command-line 98 | urlLineLength = urlLine.length; 99 | 100 | for(i = 0; i < urlLineLength; ++i) 101 | { 102 | switch(urlLine[i].name.toLowerCase()) 103 | { 104 | case "width": 105 | PVRShell.data.width = parseInt(urlLine[i].value, 10); 106 | break; 107 | case "height": 108 | PVRShell.data.height = parseInt(urlLine[i].value, 10); 109 | break; 110 | case "fullscreen": 111 | PVRShell.data.fullscreen = parseBool(urlLine[i].value); 112 | break; 113 | } 114 | } 115 | 116 | if (PVRShell.data.fullscreen) 117 | { 118 | PVRShell.data.width = window.innerWidth; 119 | PVRShell.data.height = window.innerHeight; 120 | } 121 | 122 | // Setup our canvas dimensions 123 | canvas.width = PVRShell.data.width; 124 | canvas.height = PVRShell.data.height; 125 | 126 | // Initialise GL 127 | try 128 | { 129 | // Update our canvas's dimensions 130 | // Try to grab the standard context. If it fails, fallback to experimental 131 | gl = canvas.getContext("webgl", {alpha: false}) || canvas.getContext("experimental-webgl", {alpha: false}); 132 | gl.viewport(0, 0, canvas.width, canvas.height); 133 | } 134 | catch (e) 135 | { 136 | } 137 | 138 | if (!gl) 139 | { 140 | alert("Unable to initialise WebGL. Your browser may not support it"); 141 | return; 142 | } 143 | 144 | // Call InitView 145 | if(demo.initView) 146 | { 147 | if(demo.initView(gl) === false) 148 | { 149 | alert("initView failed"); 150 | return; 151 | } 152 | } 153 | 154 | ++state; 155 | requestAnimFrame(mainloop); 156 | break; 157 | case 2: // Render 158 | requestAnimFrame(mainloop); 159 | if(PVRShell.data.fullscreen) 160 | { 161 | PVRShell.data.width = window.innerWidth; 162 | PVRShell.data.height = window.innerHeight; 163 | if(PVRShell.data.width != canvas.width || PVRShell.data.height != canvas.height) 164 | { 165 | canvas.width = PVRShell.data.width; 166 | canvas.height = PVRShell.data.height; 167 | } 168 | } 169 | if (demo.renderScene) 170 | { 171 | if(demo.renderScene(gl) === false) 172 | { 173 | ++state; 174 | break; 175 | } 176 | } 177 | break; 178 | case 3: // Release view 179 | // Call ReleaseView 180 | if(demo.releaseView) 181 | { 182 | if(demo.releaseView(gl) === false) 183 | { 184 | alert("releaseView failed"); 185 | return; 186 | } 187 | } 188 | ++state; 189 | requestAnimFrame(mainloop); 190 | break; 191 | case 4: // Quit application 192 | if(demo.quitApplication) 193 | { 194 | if(demo.quitApplication() === false) 195 | { 196 | alert("quitApplication failed"); 197 | return; 198 | } 199 | } 200 | 201 | ++state; 202 | requestAnimFrame(mainloop); 203 | break; 204 | default: 205 | // Do nothing 206 | break; 207 | } 208 | })(); 209 | } 210 | }; 211 | -------------------------------------------------------------------------------- /Shell/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0px; 3 | padding: 0px; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /Tools/Media/PVRPrint3DFont.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Tools/Media/PVRPrint3DFont.pvr -------------------------------------------------------------------------------- /Tools/Media/PVRPrint3DLogo.pvr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/powervr-graphics/WebGL_SDK/bb78e5345e22194c23863eec6f66e667df213f56/Tools/Media/PVRPrint3DLogo.pvr -------------------------------------------------------------------------------- /Tools/PVRAnimation.js: -------------------------------------------------------------------------------- 1 | /* 2 | PVRAnimation 3 | */ 4 | 5 | EPVRAnimation = 6 | { 7 | eHasPositionAnimation: 0x01, 8 | eHasRotationAnimation: 0x02, 9 | eHasScaleAnimation: 0x04, 10 | eHasMatrixAnimation: 0x08, 11 | } 12 | 13 | function PVRAnimation() 14 | { 15 | this.data = 16 | { 17 | flags: 0, 18 | numFrames: 0, 19 | 20 | positions: null, 21 | rotations: null, 22 | scales: null, 23 | matrices: null, 24 | positionIndices: null, 25 | rotationIndices: null, 26 | scaleIndices: null, 27 | matrixIndices: null, 28 | } 29 | 30 | this.getTranslationMatrix = function(frame, interp) 31 | { 32 | if(this.data.positions != null) 33 | { 34 | if(this.data.flags & EPVRAnimation.eHasPositionAnimation) 35 | { 36 | /* if(frame >= this.data.numFrames - 1) 37 | throw new RangeError; */ // TODO 38 | 39 | var index0, index1; 40 | 41 | if(this.data.positionIndices != null) 42 | { 43 | index0 = this.data.positionIndices[frame + 0]; 44 | index1 = this.data.positionIndices[frame + 1]; 45 | } 46 | else 47 | { 48 | index0 = 3 * (frame + 0); 49 | index1 = 3 * (frame + 1); 50 | } 51 | 52 | var p0 = new PVRVector3(this.data.positions[index0+0], 53 | this.data.positions[index0+1], 54 | this.data.positions[index0+2]); 55 | 56 | var p1 = new PVRVector3(this.data.positions[index1+0], 57 | this.data.positions[index1+1], 58 | this.data.positions[index1+2]); 59 | 60 | var interp = PVRVector3.linearInterpolate(p0, p1, interp); 61 | return PVRMatrix4x4.createTranslation3D(interp.data[0], interp.data[1], interp.data[2]); 62 | } 63 | else 64 | { 65 | return PVRMatrix4x4.createTranslation3D(this.data.positions[0], this.data.positions[1], this.data.positions[2]); 66 | } 67 | } 68 | return PVRMatrix4x4.identity(); 69 | } 70 | 71 | this.getRotationMatrix = function(frame, interp) 72 | { 73 | if(this.data.rotations) 74 | { 75 | if(this.data.flags & EPVRAnimation.eHasRotationAnimation) 76 | { 77 | /* if(frame >= this.data.numFrames - 1) 78 | throw new RangeError; */ // TODO 79 | 80 | var index0, index1; 81 | 82 | if(this.data.rotationIndices != null) 83 | { 84 | index0 = this.data.rotationIndices[frame + 0]; 85 | index1 = this.data.rotationIndices[frame + 1]; 86 | } 87 | else 88 | { 89 | index0 = 4 * (frame + 0); 90 | index1 = 4 * (frame + 1); 91 | } 92 | 93 | var q0 = new PVRQuaternion(this.data.rotations[index0+0], 94 | this.data.rotations[index0+1], 95 | this.data.rotations[index0+2], 96 | this.data.rotations[index0+3]); 97 | 98 | var q1 = new PVRQuaternion(this.data.rotations[index1+0], 99 | this.data.rotations[index1+1], 100 | this.data.rotations[index1+2], 101 | this.data.rotations[index1+3]); 102 | 103 | var q = PVRQuaternion.sphericalLinearInterpolation(q0, q1, interp); 104 | return q.toRotationMatrix(); 105 | } 106 | else 107 | { 108 | var q = new PVRQuaternion(this.data.rotations[0], 109 | this.data.rotations[1], 110 | this.data.rotations[2], 111 | this.data.rotations[3]); 112 | return q.toRotationMatrix(); 113 | } 114 | } 115 | 116 | return PVRMatrix4x4.identity(); 117 | } 118 | 119 | this.getScalingMatrix = function(frame, interp) 120 | { 121 | if(this.data.scales) 122 | { 123 | if(this.data.flags & EPVRAnimation.eHasScaleAnimation) 124 | { 125 | var index0, index1; 126 | if(this.data.scaleIndices) 127 | { 128 | index0 = this.data.scaleIndices[frame + 0]; 129 | index1 = this.data.scaleIndices[frame + 1]; 130 | } 131 | else 132 | { 133 | index0 = 7 * (frame + 0); 134 | index1 = 7 * (frame + 1); 135 | } 136 | 137 | var s0 = new PVRVector3(this.data.scales[index0+0], 138 | this.data.scales[index0+1], 139 | this.data.scales[index0+2]); 140 | 141 | var s1 = new PVRVector3(this.data.scales[index1+0], 142 | this.data.scales[index1+1], 143 | this.data.scales[index1+2]); 144 | 145 | var v = PVRVector3.linearInterpolate(s0, s1, interp); 146 | return PVRMatrix4x4.scale(v.data[0], v.data[1], v.data[2]); 147 | } 148 | else 149 | { 150 | return PVRMatrix4x4.scale(this.data.scales[0], this.data.scales[1], this.data.scales[2]); 151 | } 152 | } 153 | 154 | return PVRMatrix4x4.identity(); 155 | } 156 | 157 | this.getTransformationMatrix = function(frame, interp) 158 | { 159 | if(this.data.matrices) 160 | { 161 | // TODO 162 | throw "TODO"; 163 | } 164 | else 165 | { 166 | var m = PVRMatrix4x4.identity(); 167 | var tmp; 168 | 169 | // Translation 170 | tmp = this.getTranslationMatrix(frame, interp); 171 | m = PVRMatrix4x4.matrixMultiply(m, tmp); 172 | 173 | // Rotation 174 | tmp = this.getRotationMatrix(frame, interp); 175 | m = PVRMatrix4x4.matrixMultiply(m, tmp); 176 | 177 | // Scale 178 | tmp = this.getScalingMatrix(frame, interp); 179 | m = PVRMatrix4x4.matrixMultiply(m, tmp); 180 | 181 | return m; 182 | } 183 | } 184 | } 185 | -------------------------------------------------------------------------------- /Tools/PVRFileStream.js: -------------------------------------------------------------------------------- 1 | /* 2 | PVRFileStream 3 | */ 4 | 5 | EPVRFileStreamSeekMode = 6 | { 7 | eFromStart : 1, 8 | eFromCurrent : 2, 9 | } 10 | 11 | function PVRFileStream() 12 | { 13 | this.offset = 0; 14 | this.buffer = null; 15 | this.raw = null; 16 | this.littleEndian = false; 17 | 18 | this.Open = function (uri, littleEndian, completionFunc) 19 | { 20 | var args = [this]; 21 | args = args.concat(Array.prototype.slice.call(arguments, 3)); 22 | 23 | var req = new XMLHttpRequest(); 24 | req.open('GET', uri); 25 | req.responseType = "arraybuffer"; 26 | req.callback = completionFunc; 27 | req.arguments = args; 28 | req.onload = function(e) 29 | { 30 | if(req.readyState == 4) 31 | { 32 | var stream = this.arguments[0]; 33 | stream.raw = this.response.slice(0); 34 | stream.buffer = new DataView(stream.raw); 35 | this.callback.apply(null, args); 36 | } 37 | }; 38 | req.onerror = function(e) 39 | { 40 | console.error(this.statusText); 41 | } 42 | 43 | this.littleEndian = littleEndian; 44 | 45 | req.send(); 46 | } 47 | 48 | this.IsOpen = function () 49 | { 50 | return this.buffer != null; 51 | } 52 | 53 | this.GetPosition = function () 54 | { 55 | return this.offset; 56 | } 57 | 58 | this.GetSize = function () 59 | { 60 | return this.buffer.byteLength; 61 | } 62 | 63 | this.Seek = function (offset, mode) 64 | { 65 | if(mode == EPVRFileStreamSeekMode.eFromStart) 66 | { 67 | if(offset > this.buffer.byteLength) 68 | return false; 69 | 70 | this.offset = offset; 71 | } 72 | else if(mode == EPVRFileStreamSeekMode.eFromCurrent) 73 | { 74 | if(this.offset + offset > this.buffer.byteLength) 75 | return false; 76 | 77 | this.offset += offset; 78 | } 79 | return true; 80 | } 81 | 82 | /* 83 | Int8 84 | */ 85 | this.ReadInt8 = function (offset) 86 | { 87 | offset = (typeof offset === "undefined") ? this.offset : offset; 88 | var v = this.buffer.getInt8(offset); 89 | this.offset = offset + 1; 90 | return v; 91 | } 92 | 93 | /* 94 | Uint8 / Bytes 95 | */ 96 | this.ReadUInt8 = function (offset) 97 | { 98 | offset = (typeof offset === "undefined") ? this.offset : offset; 99 | var v = this.buffer.getUint8(offset); 100 | this.offset = offset + 1; 101 | return v; 102 | } 103 | 104 | this.ReadArrayBuffer = function (count, offset) 105 | { 106 | offset = (typeof offset === "undefined") ? this.offset : offset; 107 | var buff = this.raw.slice(offset, offset + count); 108 | this.offset += count; 109 | return buff; 110 | } 111 | 112 | this.ReadByteArray = function (count, offset) 113 | { 114 | offset = (typeof offset === "undefined") ? this.offset : offset; 115 | var vA = new Array(); 116 | for(var i = 0; i < count; i++) 117 | { 118 | vA[i] = this.buffer.getUint8(offset, this.littleEndian); 119 | offset++; 120 | } 121 | this.offset = offset; 122 | return new Uint8Array(vA); 123 | } 124 | 125 | /* 126 | Int16 127 | */ 128 | this.ReadInt16 = function (offset) 129 | { 130 | offset = (typeof offset === "undefined") ? this.offset : offset; 131 | var v = this.buffer.getInt16(offset, this.littleEndian); 132 | this.offset = offset + 2; 133 | return v; 134 | } 135 | 136 | /* 137 | Uint16 138 | */ 139 | this.ReadUInt16 = function (offset) 140 | { 141 | offset = (typeof offset === "undefined") ? this.offset : offset; 142 | var v = this.buffer.getUint16(offset, this.littleEndian); 143 | this.offset = offset + 2; 144 | return v; 145 | } 146 | 147 | this.ReadUInt16Array = function (count, offset) 148 | { 149 | offset = (typeof offset === "undefined") ? this.offset : offset; 150 | var vA = new Array(); 151 | for(var i = 0; i < count; i++) 152 | { 153 | vA[i] = this.buffer.getUint16(offset, this.littleEndian); 154 | offset += 2; 155 | } 156 | this.offset = offset; 157 | return new Uint16Array(vA); 158 | } 159 | 160 | /* 161 | Int32 162 | */ 163 | this.ReadInt32 = function (offset) 164 | { 165 | offset = (typeof offset === "undefined") ? this.offset : offset; 166 | var v = this.buffer.getInt32(offset, this.littleEndian); 167 | this.offset = offset + 4; 168 | return v; 169 | } 170 | 171 | this.ReadInt32Array = function (count, offset) 172 | { 173 | offset = (typeof offset === "undefined") ? this.offset : offset; 174 | var vA = new Array(); 175 | for(var i = 0; i < count; i++) 176 | { 177 | vA[i] = this.buffer.getInt32(offset, this.littleEndian); 178 | offset += 4; 179 | } 180 | this.offset = offset; 181 | return new Int32Array(vA); 182 | } 183 | 184 | /* 185 | Uint32 186 | */ 187 | this.ReadUInt32 = function (offset) 188 | { 189 | offset = (typeof offset === "undefined") ? this.offset : offset; 190 | var v = this.buffer.getUint32(offset, this.littleEndian); 191 | this.offset = offset + 4; 192 | return v; 193 | } 194 | 195 | this.ReadUInt32Array = function (count, offset) 196 | { 197 | offset = (typeof offset === "undefined") ? this.offset : offset; 198 | var vA = new Array(); 199 | for(var i = 0; i < count; i++) 200 | { 201 | vA[i] = this.buffer.getUint32(offset, this.littleEndian); 202 | offset += 4; 203 | } 204 | this.offset = offset; 205 | return new Uint32Array(vA); 206 | } 207 | 208 | /* 209 | Float32 210 | */ 211 | this.ReadFloat32 = function (offset) 212 | { 213 | offset = (typeof offset === "undefined") ? this.offset : offset; 214 | var v = this.buffer.getFloat32(offset, this.littleEndian); 215 | this.offset = offset + 4; 216 | return v; 217 | } 218 | 219 | this.ReadFloat32Array = function (count, offset) 220 | { 221 | offset = (typeof offset === "undefined") ? this.offset : offset; 222 | var vA = new Array(); 223 | for(var i = 0; i < count; i++) 224 | { 225 | vA[i] = this.buffer.getFloat32(offset, this.littleEndian); 226 | offset += 4; 227 | } 228 | this.offset = offset; 229 | return new Float32Array(vA); 230 | } 231 | 232 | /* 233 | Float64 234 | */ 235 | this.ReadFloat64 = function (offset) 236 | { 237 | offset = (typeof offset === "undefined") ? this.offset : offset; 238 | var v = this.buffer.getFloat64(offset, this.littleEndian); 239 | this.offset = offset + 8; 240 | return v; 241 | } 242 | 243 | /* 244 | String 245 | */ 246 | this.ReadString = function (length, offset) 247 | { 248 | offset = (typeof offset === "undefined") ? this.offset : offset; 249 | var v = ""; 250 | for(var i = 0; i < length; i++) 251 | { 252 | var c = this.buffer.getUint8(offset+i); 253 | if(c != 0) 254 | v += String.fromCharCode(c); 255 | } 256 | this.offset = offset + length; 257 | return v; 258 | } 259 | } 260 | -------------------------------------------------------------------------------- /Tools/PVRMesh.js: -------------------------------------------------------------------------------- 1 | /* 2 | PVRMesh 3 | */ 4 | 5 | EPVRMesh = 6 | { 7 | eTriangleList: 0, 8 | eIndexedTriangleList: 1, 9 | eTriangleStrips: 2, 10 | eIndexedTriangleStrips: 3, 11 | eTriPatchList: 4, 12 | eQuadPatchList: 5, 13 | 14 | VertexData: 15 | { 16 | eNone: 0, 17 | eFloat: 1, 18 | eInt: 2, 19 | eUnsignedShort: 3, 20 | eRGBA: 4, 21 | eARGB: 5, 22 | eD3DCOLOR: 6, 23 | eUBYTE4: 7, 24 | eDEC3N: 8, 25 | eFixed16_16: 9, 26 | eUnsignedByte: 10, 27 | eShort: 11, 28 | eShortNorm: 12, 29 | eByte: 13, 30 | eByteNorm: 14, 31 | eUnsignedByteNorm: 15, 32 | eUnsignedShortNorm: 16, 33 | eUnsignedInt: 17, 34 | eABGR: 18, 35 | 36 | eCustom: 1000, 37 | }, 38 | 39 | FaceData: 40 | { 41 | e16Bit: 3, 42 | e32Bit: 17, 43 | }, 44 | } 45 | 46 | function PVRMesh() 47 | { 48 | // Public data 49 | this.data = 50 | { 51 | unpackMatrix: new Array(), 52 | vertexElementData: new Array(), // Allows us to have multiple interleaved/non-interleaved arrays. 53 | vertexElements: new Object(), // Map of semantics (e.g POSITION0, NORMALS0) 54 | 55 | primitiveData: 56 | { 57 | numVertices: 0, 58 | numFaces: 0, 59 | numStrips: 0, 60 | numPatchesSubdivisions: 0, 61 | numPatches: 0, 62 | numControlPointsPerPatch: 0, 63 | 64 | stripLengths: null, 65 | primitiveType: EPVRMesh.eIndexedTriangleList 66 | }, 67 | 68 | boneBatches: 69 | { 70 | boneMax: 0, 71 | count: 0, 72 | batches: null, 73 | boneCounts: null, 74 | offsets: null 75 | }, 76 | 77 | faces: 78 | { 79 | indexType: EPVRMesh.FaceData.e16Bit, 80 | data: null 81 | }, 82 | } 83 | 84 | // Private methods 85 | var VertexData = function(semantic, type, numComponents, stride, offset, dataIndex) 86 | { 87 | this.semantic = semantic; 88 | this.dataType = type; 89 | this.numComponents = numComponents; 90 | this.stride = stride; 91 | this.offset = offset; 92 | this.dataIndex = dataIndex; 93 | } 94 | 95 | // Public methods 96 | this.AddData = function (data) 97 | { 98 | this.data.vertexElementData.push(data); 99 | return this.data.vertexElementData.length - 1; 100 | } 101 | 102 | this.AddFaces = function (data, type) 103 | { 104 | this.data.faces.indexType = type; 105 | this.data.faces.data = data; 106 | 107 | if(data.length > 0) 108 | { 109 | this.data.primitiveData.numFaces = data.length / 3; 110 | } 111 | else 112 | { 113 | this.data.primitiveData.numFaces = 0; 114 | } 115 | 116 | return EPODErrorCodes.eNoError; 117 | } 118 | 119 | this.AddElement = function (semantic, type, numComponents, stride, offset, dataIndex) 120 | { 121 | if(this.data.vertexElements.hasOwnProperty(semantic)) 122 | return EPODErrorCodes.eKeyAlreadyExists; 123 | 124 | var vertexData = new VertexData(semantic, type, numComponents, stride, offset, dataIndex); 125 | this.data.vertexElements[semantic] = vertexData; 126 | 127 | return EPODErrorCodes.eNoError; 128 | } 129 | 130 | this.GetNumElementsOfSemantic = function (semantic) 131 | { 132 | var count = 0; 133 | for(k in this.data.vertexElements) 134 | { 135 | if(semantic == k) 136 | ++count; 137 | } 138 | return count; 139 | } 140 | } -------------------------------------------------------------------------------- /Tools/PVRModel.js: -------------------------------------------------------------------------------- 1 | /* 2 | PVRModel 3 | */ 4 | 5 | EPVRModel = 6 | { 7 | Light: 8 | { 9 | ePoint : 0, 10 | eDirectional : 1, 11 | eSpot : 2, 12 | }, 13 | 14 | Material: 15 | { 16 | BlendFunction: 17 | { 18 | eZERO : 0, 19 | eONE : 1, 20 | eBLEND_FACTOR : 2, 21 | eONE_MINUS_BLEND_FACTOR : 3, 22 | 23 | eSRC_COLOR : 0x0300, 24 | eONE_MINUS_SRC_COLOR : 0x0301, 25 | eSRC_ALPHA : 0x0302, 26 | eONE_MINUS_SRC_ALPHA : 0x0303, 27 | eDST_ALPHA : 0x0304, 28 | eONE_MINUS_DST_ALPHA : 0x0305, 29 | eDST_COLOR : 0x0306, 30 | eONE_MINUS_DST_COLOR : 0x0307, 31 | eSRC_ALPHA_SATURATE : 0x0308, 32 | 33 | eCONSTANT_COLOR : 0x8001, 34 | eONE_MINUS_CONSTANT_COLOR : 0x8002, 35 | eCONSTANT_ALPHA : 0x8003, 36 | eONE_MINUS_CONSTANT_ALPHA : 0x8004, 37 | }, 38 | 39 | BlendOperation: 40 | { 41 | eADD : 0x8006, 42 | eMIN : 0x8007, 43 | eMAX : 0x8008, 44 | eSUBTRACT : 0x800A, 45 | eREVERSE_SUBTRACT : 0x800B, 46 | } 47 | } 48 | } 49 | 50 | function PVRModel() 51 | { 52 | // Public data 53 | this.data = 54 | { 55 | clearColour: null, 56 | ambientColour: null, 57 | 58 | numCameras: 0, 59 | cameras: new Array(), 60 | 61 | numLights: 0, 62 | lights: new Array(), 63 | 64 | numMeshes: 0, 65 | meshes: new Array(), 66 | 67 | numNodes: 0, 68 | numMeshNodes: 0, 69 | nodes: new Array(), 70 | 71 | numTextures: 0, 72 | textures: new Array(), 73 | 74 | numMaterials: 0, 75 | materials: new Array(), 76 | 77 | numFrames: 0, 78 | currentFrame: 0, 79 | fps: 0, 80 | 81 | userData: null, 82 | 83 | units: 0.0, 84 | flags: 0, 85 | 86 | cache: {} 87 | } 88 | 89 | // Public methods 90 | this.InitCache = function () 91 | { 92 | this.data.cache.worldMatrixFrameZero = []; 93 | this.data.cache.cachedFrame = []; 94 | this.data.cache.worldMatrixFrameN = []; 95 | this.data.cache.frame = 0; 96 | this.data.cache.frameFraction = 0.0; 97 | 98 | this.FlushCache(); 99 | 100 | return EPODErrorCodes.eNoError; 101 | } 102 | 103 | this.FlushCache = function () 104 | { 105 | this.setCurrentFrame(0); 106 | 107 | for(var i = 0; i < this.data.numNodes; ++i) 108 | { 109 | var m = this.getWorldMatrixNoCache(i); 110 | this.data.cache.worldMatrixFrameZero[i] = m; 111 | 112 | // Set out caches to frame 0 113 | this.data.cache.worldMatrixFrameN[i] = m; 114 | this.data.cache.cachedFrame[i] = 0.0; 115 | } 116 | } 117 | 118 | this.Material = function () 119 | { 120 | this.data = 121 | { 122 | name: "", 123 | diffuseTextureIndex : -1, 124 | ambientTextureIndex : -1, 125 | specularTextureIndex : -1, 126 | specularLevelTextureIndex : -1, 127 | bumpMapTextureIndex : -1, 128 | emissiveTextureIndex : -1, 129 | glossinessTextureIndex : -1, 130 | opacityTextureIndex : -1, 131 | reflectionTextureIndex : -1, 132 | refractionTextureIndex : -1, 133 | opacity : 1, 134 | ambient : null, 135 | diffuse : null, 136 | specular : null, 137 | shininess : 0, 138 | effectFile : "", 139 | effectName : "", 140 | 141 | blendSrcRGB : EPVRModel.Material.BlendFunction.eONE, 142 | blendSrcA : EPVRModel.Material.BlendFunction.eONE, 143 | blendDstRGB : EPVRModel.Material.BlendFunction.eZERO, 144 | blendDstA : EPVRModel.Material.BlendFunction.eZERO, 145 | blendOpRGB : EPVRModel.Material.BlendOperation.eADD, 146 | blendOpA : EPVRModel.Material.BlendOperation.eADD, 147 | 148 | flags : 0, 149 | userData : null, 150 | } 151 | } 152 | 153 | this.Texture = function () 154 | { 155 | this.data = 156 | { 157 | name: "" 158 | } 159 | } 160 | 161 | this.Light = function () 162 | { 163 | this.data = 164 | { 165 | targetIndex: -1, 166 | colour: null, 167 | type: EPVRModel.Light.ePoint, 168 | constantAttenuation: 1.0, 169 | linearAttenuation: 0.0, 170 | quadraticAttenuation: 0.0, 171 | falloffAngle: Math.pi, 172 | falloffExponent: 0.0, 173 | } 174 | } 175 | 176 | this.Camera = function () 177 | { 178 | this.data = 179 | { 180 | targetIndex: 0, 181 | far: 0.0, 182 | near: 0.0, 183 | numFrames: 0, 184 | FOVs: null, 185 | } 186 | 187 | this.getFOV = function (frame, interp) 188 | { 189 | if(this.data.FOVs) 190 | { 191 | if(this.data.numFrames > 1) 192 | { 193 | if(frame >= this.data.numFrames-1) 194 | throw new RangeError; 195 | 196 | var fov0 = this.data.FOVs[frame+0]; 197 | var fov1 = this.data.FOVs[frame+1]; 198 | return fov0 + interp * (fov1 - fov0); 199 | } 200 | else 201 | { 202 | return this.data.FOVs[0]; 203 | } 204 | } 205 | else 206 | { 207 | return 0.7; 208 | } 209 | } 210 | } 211 | 212 | this.Node = function () 213 | { 214 | this.data = 215 | { 216 | index: -1, 217 | name: "", 218 | materialIndex: -1, 219 | 220 | parentIndex: -1, 221 | 222 | animation: null, 223 | 224 | userData: null, 225 | } 226 | } 227 | 228 | this.setCurrentFrame = function(frame) 229 | { 230 | if(this.data.numFrames > 0) 231 | { 232 | /* 233 | Limit animation frames. 234 | 235 | Example: If there are 100 frames of animation, the highest frame 236 | number allowed is 98, since that will blend between frames 98 and 237 | 99. (99 being of course the 100th frame.) 238 | */ 239 | 240 | if(frame > (this.data.numFrames - 1)) 241 | throw new RangeError; 242 | 243 | this.data.cache.frame = Math.floor(frame); 244 | this.data.cache.frameFraction = frame - this.data.cache.frame; 245 | } 246 | else 247 | { 248 | if(Math.floor(frame) != 0) 249 | throw new RangeError; 250 | 251 | this.data.cache.frame = 0; 252 | this.data.cache.frameFraction = 0; 253 | } 254 | 255 | this.data.currentFrame = frame; 256 | } 257 | 258 | this.getWorldMatrix = function(id) 259 | { 260 | // There is a dedicated cache for frame 0 261 | if(this.data.currentFrame == 0) 262 | { 263 | return this.data.cache.worldMatrixFrameZero[id]; 264 | } 265 | 266 | // Has this matrix been calculated and cached? 267 | if(this.data.currentFrame == this.data.cache.cachedFrame[id]) 268 | { 269 | return this.data.cache.worldMatrixFrameN[id]; 270 | } 271 | 272 | // Calculate the matrix and cache it 273 | var node = this.data.nodes[id]; 274 | var m = this.data.cache.worldMatrixFrameN[id] = node.data.animation.getTransformationMatrix(this.data.cache.frame, 275 | this.data.cache.frameFraction); 276 | var parentID = node.data.parentIndex; 277 | if(parentID < 0) 278 | { 279 | this.data.cache.worldMatrixFrameN[id] = m; 280 | } 281 | else 282 | { 283 | this.data.cache.worldMatrixFrameN[id] = PVRMatrix4x4.matrixMultiply(this.getWorldMatrix(parentID), m); 284 | } 285 | 286 | this.data.cache.cachedFrame[id] = this.data.currentFrame; 287 | return this.data.cache.worldMatrixFrameN[id]; 288 | } 289 | 290 | this.getWorldMatrixNoCache = function(id) 291 | { 292 | var m = this.data.nodes[id].data.animation.getTransformationMatrix(this.data.cache.frame, 293 | this.data.cache.frameFraction); 294 | var parentID = this.data.nodes[id].data.parentIndex; 295 | 296 | if(parentID < 0) 297 | return m; 298 | 299 | return PVRMatrix4x4.matrixMultiply(this.getWorldMatrixNoCache(parentID), m); 300 | } 301 | 302 | this.getCameraProperties = function(cameraIdx) 303 | { 304 | if(cameraIdx < 0 || cameraIdx >= this.data.numCameras) 305 | throw new RangeError; 306 | 307 | var m = this.getWorldMatrix(this.data.numMeshNodes + this.data.numLights + cameraIdx); 308 | var props = {}; 309 | 310 | props.from = new PVRVector3(); 311 | props.up = new PVRVector3(); 312 | props.to = new PVRVector3(); 313 | 314 | // View position is 0,0,0,1 transformed by world matrix 315 | props.from.data[0] = m.data[12]; 316 | props.from.data[1] = m.data[13]; 317 | props.from.data[2] = m.data[14]; 318 | 319 | // When you rotate the camera from "straight forward" to "straight down", in OpenGL the UP vector will be [0, 0, -1] 320 | props.up.data[0] = -m.data[8]; 321 | props.up.data[1] = -m.data[9]; 322 | props.up.data[2] = -m.data[10]; 323 | 324 | var camera = this.data.cameras[cameraIdx]; 325 | 326 | // TODO: Experimental! 327 | if(camera.data.targetIndex != -1) 328 | { 329 | var atCurrent, atTarget; 330 | var targetMatrix = this.getWorldMatrix(camera.data.targetIndex); 331 | 332 | props.to.data[0] = targetMatrix.data[12]; 333 | props.to.data[1] = targetMatrix.data[13]; 334 | props.to.data[2] = targetMatrix.data[14]; 335 | 336 | // Rotate our up vector 337 | atTarget = PVRVector3.subtract(props.to, props.from); 338 | atTarget.normalise(); 339 | 340 | atCurrent = PVRVector3.subtract(props.to, props.from); 341 | atCurrent.normalise(); 342 | 343 | var axis = PVRVector3.cross(atCurrent, atTarget); 344 | var angle = PVRVector3.dot(atCurrent, atTarget); 345 | 346 | var q = PVRQuaternion.createFromAxisAndAngle(axis, angle); 347 | props.up = PVRVector3.matrixMultiply(props.up, q.toRotationMatrix()); 348 | props.up.normalise(); 349 | } 350 | else 351 | { 352 | // View direction is 0,-1,0,1 transformed by world matrix 353 | props.to.data[0] = -m.data[4] + props.from.data[0]; 354 | props.to.data[1] = -m.data[5] + props.from.data[1]; 355 | props.to.data[2] = -m.data[6] + props.from.data[2]; 356 | } 357 | 358 | props.fov = camera.getFOV(this.data.cache.frame, this.data.cache.frameFraction); 359 | return props; 360 | } 361 | 362 | this.getLightDirection = function (lightIdx) 363 | { 364 | if(lightIdx < 0 || lightIdx >= this.data.numLights) 365 | throw new RangeError; 366 | 367 | var m = this.getWorldMatrix(this.data.numMeshNodes + lightIdx); 368 | var targetIndex = this.data.lights[lightIdx].data.targetIndex; 369 | 370 | var directionVector = new PVRVector4(); 371 | directionVector.data[3] = 0.0; 372 | if(targetIndex != -1) 373 | { 374 | var targetMatrix = this.getWorldMatrix(targetIndex); 375 | directionVector.data[0] = targetMatrix.data[12] - m.data[12]; 376 | directionVector.data[1] = targetMatrix.data[13] - m.data[13]; 377 | directionVector.data[2] = targetMatrix.data[14] - m.data[14]; 378 | directionVector.normalise(); 379 | } 380 | else 381 | { 382 | directionVector.data[0] = -m.data[4]; 383 | directionVector.data[1] = -m.data[5]; 384 | directionVector.data[2] = -m.data[6]; 385 | } 386 | 387 | return directionVector; 388 | } 389 | } 390 | -------------------------------------------------------------------------------- /Tools/PVRShader.js: -------------------------------------------------------------------------------- 1 | /* 2 | PVRShader 3 | */ 4 | 5 | PVRShader = {} 6 | 7 | PVRShader.loadFromURI = function(gl, uri, type, defines, errorFunc, callback) 8 | { 9 | function loaded() 10 | { 11 | var req = this; 12 | if(req.readyState == 4) 13 | { 14 | var shader = PVRShader.loadFromMemory(gl, req.responseText, type, defines, errorFunc); 15 | if(typeof callback == "function") 16 | callback(this.shader); // Asynchronous 17 | else 18 | return shader; // Synchronous 19 | } 20 | else 21 | { 22 | errorFunc("Failed to load file: " + uri); 23 | } 24 | } 25 | 26 | var async = (typeof callback == "function" ? true : false); 27 | var httpReq = new XMLHttpRequest(); 28 | httpReq.open("GET", uri, async); 29 | if(async) 30 | httpReq.onreadystatechange = loaded; 31 | httpReq.send(null); 32 | 33 | if(!async) 34 | { 35 | return loaded.call(httpReq); 36 | } 37 | 38 | return null; 39 | } 40 | 41 | PVRShader.loadFromMemory = function(gl, source, type, defines, errorFunc) 42 | { 43 | // Append defines, if any 44 | var processedSource = ""; 45 | if (defines.length > 0) 46 | { 47 | // Check for the #version tag 48 | var versionRX = /\s*#\s*version\s*\d+\s*\w*/ 49 | var ver = source.match(versionRX); 50 | if (ver) 51 | { 52 | // The source contains a #version tag, and needs to be placed first. 53 | processedSource += ver + "\n"; 54 | source = source.slice(ver.length); 55 | } 56 | 57 | for (var key in defines) 58 | { 59 | processedSource += "#define " + defines[key] + "\n"; 60 | } 61 | } 62 | 63 | // Append the source to the definition string 64 | processedSource += source; 65 | 66 | // Create the shader object and compile 67 | var shader = gl.createShader(type); 68 | gl.shaderSource(shader, processedSource); 69 | gl.compileShader(shader); 70 | 71 | // Test if compilation was successful 72 | if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) 73 | { 74 | var errorLog = gl.getShaderInfoLog(shader); 75 | if (typeof errorFunc == "function") 76 | errorFunc(errorLog); 77 | else 78 | throw new Error(errorLog); 79 | 80 | gl.deleteShader(shader); 81 | return null; 82 | } 83 | 84 | return shader 85 | } 86 | 87 | PVRShader.createProgram = function(gl, vertex, fragment, attribs, errorFunc) 88 | { 89 | // Create the program and attach the shaders 90 | var program = gl.createProgram(); 91 | gl.attachShader(program, vertex); 92 | gl.attachShader(program, fragment); 93 | 94 | // Bind attributes 95 | for (var i = 0; i < attribs.length; i++) 96 | { 97 | gl.bindAttribLocation(program, i, attribs[i]); 98 | } 99 | 100 | // Link the program 101 | gl.linkProgram(program); 102 | if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 103 | { 104 | var errorLog = gl.getProgramInfoLog(program); 105 | if (typeof errorFunc == "function") 106 | errorFunc(errorLog); 107 | else 108 | throw new Error(errorLog); 109 | 110 | gl.deleteProgram(program); 111 | return null; 112 | } 113 | 114 | // Make the program active 115 | gl.useProgram(program); 116 | 117 | return program; 118 | } 119 | -------------------------------------------------------------------------------- /Tools/PVRTexture.js: -------------------------------------------------------------------------------- 1 | /* 2 | PVRTexture 3 | */ 4 | 5 | PVRTextureHeader = function() 6 | { 7 | this.version = 0x03525650; 8 | this.flags = 0; 9 | this.pixelFormatH = 0; 10 | this.pixelFormatL = 0; 11 | this.colourSpace = 0; 12 | this.channelType = 0; 13 | this.height = 1; 14 | this.width = 1; 15 | this.depth = 1; 16 | this.numSurfaces = 1; 17 | this.numFaces = 1; 18 | this.MIPMapCount = 1; 19 | this.metaDataSize = 0; 20 | } 21 | 22 | EPVRTexture = 23 | { 24 | ChannelTypes: 25 | { 26 | UnsignedByteNorm : 0, 27 | SignedByteNorm : 1, 28 | UnsignedByte : 2, 29 | SignedByte: 3, 30 | UnsignedShortNorm: 4, 31 | SignedShortNorm: 5, 32 | UnsignedShort: 6, 33 | SignedShort: 7, 34 | UnsignedIntegerNorm: 8, 35 | SignedIntegerNorm: 9, 36 | UnsignedInteger: 10, 37 | SignedInteger: 11, 38 | SignedFloat: 12, 39 | Float: 12, //the name Float is now deprecated. 40 | UnsignedFloat: 13, 41 | } 42 | } 43 | 44 | PVRTexture = 45 | { 46 | PVRTEX3_IDENT: 0x03525650, 47 | } 48 | 49 | PVRTexture.genPixelTypeH = function(c1Name, c2Name, c3Name, c4Name) 50 | { 51 | var val = 0; 52 | val |= c1Name.charCodeAt(); 53 | 54 | if(c2Name != undefined) 55 | val |= c2Name.charCodeAt() << 8; 56 | 57 | if(c3Name != undefined) 58 | val |= c3Name.charCodeAt() << 16; 59 | 60 | if(c4Name != undefined) 61 | val |= c4Name.charCodeAt() << 24; 62 | 63 | return val; 64 | } 65 | 66 | PVRTexture.genPixelTypeL = function(c1Bits, c2Bits, c3Bits, c4Bits) 67 | { 68 | var val = 0; 69 | val |= c1Bits; 70 | 71 | if(c2Bits != undefined) 72 | val |= c2Bits << 8; 73 | 74 | if(c3Bits != undefined) 75 | val |= c3Bits << 16; 76 | 77 | if(c4Bits != undefined) 78 | val |= c4Bits << 24; 79 | 80 | return val; 81 | } 82 | 83 | PVRTexture.getTextureFormat = function(gl, header) 84 | { 85 | var ret = {}; 86 | ret.format = 0; 87 | ret.type = 0; 88 | ret.internalFormat = 0; 89 | 90 | if(header.pixelFormatH == 0 ) 91 | { 92 | // TODO: Compressed texture support. 93 | return; 94 | } 95 | 96 | switch(header.channelType) 97 | { 98 | case EPVRTexture.ChannelTypes.Float: 99 | { 100 | // TODO: Add support. 101 | return; 102 | } 103 | case EPVRTexture.ChannelTypes.UnsignedByteNorm: 104 | { 105 | ret.type = gl.UNSIGNED_BYTE; 106 | switch(header.pixelFormatL) 107 | { 108 | case PVRTexture.genPixelTypeL(8,8,8,8): 109 | if(header.pixelFormatH == PVRTexture.genPixelTypeH('r', 'g', 'b', 'a')) 110 | ret.format = ret.internalFormat = gl.RGBA; 111 | else 112 | ret.format = ret.internalFormat = gl.BGRA; 113 | break; 114 | case PVRTexture.genPixelTypeL(8,8,8): 115 | ret.format = ret.internalFormat = gl.RGB; 116 | break; 117 | case PVRTexture.genPixelTypeL(8,8): 118 | ret.format = ret.internalFormat = gl.LUMINANCE_ALPHA; 119 | break; 120 | case PVRTexture.genPixelTypeL(8): 121 | if(header.pixelFormatH == PVRTexture.genPixelTypeH('l')) 122 | ret.format = ret.internalFormat = gl.LUMINANCE; 123 | else 124 | ret.format = ret.internalFormat = gl.ALPHA; 125 | break; 126 | } 127 | } 128 | case EPVRTexture.ChannelTypes.UnsignedShortNorm: 129 | { 130 | switch(header.pixelFormatL) 131 | { 132 | case PVRTexture.genPixelTypeL(4,4,4,4): 133 | ret.type = gl.UNSIGNED_SHORT_4_4_4_4; 134 | ret.format = ret.internalFormat = gl.BGRA; 135 | break; 136 | case PVRTexture.genPixelTypeL(5,5,5,1): 137 | ret.type = gl.UNSIGNED_SHORT_5_5_5_1; 138 | ret.format = ret.internalFormat = gl.RGBA; 139 | break; 140 | case PVRTexture.genPixelTypeL(5,6,5): 141 | ret.type = gl.UNSIGNED_SHORT_5_6_5; 142 | ret.format = ret.internalFormat = gl.RGB; 143 | break; 144 | } 145 | } 146 | } 147 | 148 | return ret; 149 | } 150 | 151 | PVRTexture.getBitsPerPixel = function(header) 152 | { 153 | if(header.pixelFormatH != 0) 154 | { 155 | var lowPart = header.pixelFormatL; 156 | var c1Bits = (lowPart >> 24) & 0xFF; 157 | var c2Bits = (lowPart >> 16) & 0xFF; 158 | var c3Bits = (lowPart >> 8) & 0xFF; 159 | var c4Bits = lowPart & 0xFF; 160 | return c1Bits + c2Bits + c3Bits + c4Bits; 161 | } 162 | 163 | // TODO: Compressed texture support. 164 | 165 | return 0; 166 | } 167 | 168 | PVRTexture.getDataSize = function(header, MIPLevel, allSurfaces, allFaces) 169 | { 170 | var smallestWidth = 1; 171 | var smallestHeight = 1; 172 | var smallestDepth = 1; 173 | 174 | var pixelFormatH = header.pixelFormatH; 175 | 176 | if(pixelFormatH == 0) 177 | { 178 | // TODO: Handle compressed textures. 179 | PVRTexture.getFormatMinDims(header); 180 | } 181 | 182 | var dataSize = 0; 183 | if(MIPLevel == -1) 184 | { 185 | for(var currentMIP = 0; currentMIP < header.MIPMapCount; ++currentMIP) 186 | { 187 | var width = Math.max(1, header.width>>currentMIP); 188 | var height = Math.max(1, header.height>>currentMIP); 189 | var depth = Math.max(1, header.depth>>currentMIP); 190 | 191 | if(header.pixelFormatH == 0) 192 | { 193 | // Pad the dimensions if the texture is compressed 194 | width = width + ((-1*width)%smallestWidth); 195 | height = height + ((-1*height)%smallestHeight); 196 | depth = depth + ((-1*depth)%smallestDepth); 197 | } 198 | 199 | // Add the current MIP map's data size 200 | dataSize += PVRTexture.getBitsPerPixel(header) * width * height * depth; 201 | } 202 | } 203 | else 204 | { 205 | var width = Math.max(1, header.width>>MIPLevel); 206 | var height = Math.max(1, header.height>>MIPLevel); 207 | var depth = Math.max(1, header.depth>>MIPLevel); 208 | 209 | if(header.pixelFormatH == 0) 210 | { 211 | // Pad the dimensions if the texture is compressed 212 | width = width + ((-1*width)%smallestWidth); 213 | height = height + ((-1*height)%smallestHeight); 214 | depth = depth + ((-1*depth)%smallestDepth); 215 | } 216 | 217 | // Add the current MIP map's data size 218 | dataSize += PVRTexture.getBitsPerPixel(header) * width * height * depth; 219 | } 220 | 221 | var numFaces = (allFaces ? header.numFaces : 1); 222 | var numSurfs = (allSurfaces ? header.numSurfaces : 1); 223 | 224 | return (dataSize/8) * numSurfs * numFaces; 225 | } 226 | 227 | PVRTexture.loadFromURI = function(gl, uri, loadFromLevel, callback) 228 | { 229 | var fs = new PVRFileStream(); 230 | var args = [uri, true, PVRTexture.loadFromMemory, gl, null, loadFromLevel, null, callback]; 231 | args = args.concat(Array.prototype.slice.call(arguments, 4)); 232 | fs.Open.apply(fs, args); 233 | } 234 | 235 | PVRTexture.loadFromMemory = function(stream, gl, header, loadFromLevel, metaData, callback) 236 | { 237 | var pvrHeader = new PVRTextureHeader(); 238 | var pvrMetaData = new Object(); 239 | pvrHeader.version = stream.ReadUInt32(); 240 | 241 | if(pvrHeader.version != PVRTexture.PVRTEX3_IDENT) 242 | { 243 | return false; 244 | } 245 | 246 | pvrHeader.flags = stream.ReadUInt32(); 247 | pvrHeader.pixelFormatH = stream.ReadUInt32(); 248 | pvrHeader.pixelFormatL = stream.ReadUInt32(); 249 | pvrHeader.colourSpace = stream.ReadUInt32(); 250 | pvrHeader.channelType = stream.ReadUInt32(); 251 | pvrHeader.height = stream.ReadUInt32(); 252 | pvrHeader.width = stream.ReadUInt32(); 253 | pvrHeader.depth = stream.ReadUInt32(); 254 | pvrHeader.numSurfaces = stream.ReadUInt32(); 255 | pvrHeader.numFaces = stream.ReadUInt32(); 256 | pvrHeader.MIPMapCount = stream.ReadUInt32(); 257 | pvrHeader.metaDataSize = stream.ReadUInt32(); 258 | 259 | //Get the meta data. 260 | var metaDataSize = 0; 261 | while(metaDataSize < pvrHeader.metaDataSize) 262 | { 263 | var devFourCC = stream.ReadUInt32(); 264 | metaDataSize += 4; 265 | 266 | var key = stream.ReadUInt32(); 267 | metaDataSize += 4; 268 | 269 | var dataSize = stream.ReadUInt32(); 270 | metaDataSize += 4; 271 | 272 | if(!(devFourCC in pvrMetaData)) 273 | pvrMetaData[devFourCC] = new Object(); 274 | 275 | pvrMetaData[devFourCC][key] = new Object(); 276 | var currentData = pvrMetaData[devFourCC][key]; 277 | currentData.devFourCC = devFourCC; 278 | currentData.key = key; 279 | currentData.dataSize = dataSize; 280 | 281 | if(dataSize > 0) 282 | { 283 | currentData.data = stream.ReadArrayBuffer(dataSize); 284 | metaDataSize += dataSize; 285 | } 286 | } 287 | 288 | var ret = PVRTexture.getTextureFormat(gl, pvrHeader); 289 | var textureFormat = ret.format; 290 | var textureInternalFormat = ret.internalFormat; 291 | var textureType = ret.type; 292 | 293 | if(textureInternalFormat == 0) 294 | return false; 295 | 296 | gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); 297 | var textureID = gl.createTexture(); 298 | var target = gl.TEXTURE_2D; 299 | 300 | if(pvrHeader.numFaces > 1) 301 | { 302 | target = gl.TEXTURE_CUBE_MAP; 303 | } 304 | 305 | if(pvrHeader.numSurfaces > 1) 306 | { 307 | return false; 308 | } 309 | 310 | gl.bindTexture(target, textureID); 311 | 312 | var currentMIPSize = 0; 313 | 314 | // Loop through the faces 315 | if(pvrHeader.numFaces > 1) 316 | target = gl.TEXTURE_CUBE_MAP_POSITIVE_X; 317 | 318 | var MIPWidth = pvrHeader.width; 319 | var MIPHeight = pvrHeader.height; 320 | 321 | for(var MIPLevel = 0; MIPLevel < pvrHeader.MIPMapCount; ++MIPLevel) 322 | { 323 | currentMIPSize = PVRTexture.getDataSize(pvrHeader, MIPLevel, false, false); 324 | var eTextureTarget = target; 325 | 326 | for(var face = 0; face < pvrHeader.numFaces; ++face) 327 | { 328 | if(MIPLevel >= loadFromLevel) 329 | { 330 | var textureData = stream.ReadByteArray(currentMIPSize); 331 | gl.texImage2D(eTextureTarget, MIPLevel-loadFromLevel, textureInternalFormat, MIPWidth, MIPHeight, 0, textureFormat, textureType, textureData); 332 | } 333 | eTextureTarget++; 334 | } 335 | 336 | // Reduce the MIP size 337 | MIPWidth = Math.max(1, MIPWidth >> 1); 338 | MIPHeight = Math.max(1, MIPHeight >> 1); 339 | } 340 | 341 | if(header != null) 342 | header = pvrHeader; 343 | 344 | if(metaData != null) 345 | metaData = pvrMetaData; 346 | 347 | if(typeof callback == "function") 348 | { 349 | var args = [gl, textureID, pvrHeader, pvrMetaData]; 350 | args = args.concat(Array.prototype.slice.call(arguments, 6)); 351 | callback.apply(null, args); 352 | } 353 | 354 | return true; 355 | } 356 | 357 | --------------------------------------------------------------------------------