├── UIWebViewWebGL.xcodeproj
    └── project.pbxproj
└── UIWebViewWebGL
    ├── UIWebViewWebGL-Info.plist
    ├── UIWebViewWebGL-Prefix.pch
    ├── WGLAppDelegate.h
    ├── WGLAppDelegate.m
    ├── WebGL.html
    ├── en.lproj
        └── InfoPlist.strings
    └── main.m


/UIWebViewWebGL.xcodeproj/project.pbxproj:
--------------------------------------------------------------------------------
  1 | // !$*UTF8*$!
  2 | {
  3 | 	archiveVersion = 1;
  4 | 	classes = {
  5 | 	};
  6 | 	objectVersion = 46;
  7 | 	objects = {
  8 | 
  9 | /* Begin PBXBuildFile section */
 10 | 		D89DC61D14592F50000FC7C6 /* UIKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = D89DC61C14592F50000FC7C6 /* UIKit.framework */; };
 11 | 		D89DC61F14592F50000FC7C6 /* Foundation.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = D89DC61E14592F50000FC7C6 /* Foundation.framework */; };
 12 | 		D89DC62114592F50000FC7C6 /* CoreGraphics.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = D89DC62014592F50000FC7C6 /* CoreGraphics.framework */; };
 13 | 		D89DC62714592F50000FC7C6 /* InfoPlist.strings in Resources */ = {isa = PBXBuildFile; fileRef = D89DC62514592F50000FC7C6 /* InfoPlist.strings */; };
 14 | 		D89DC62914592F50000FC7C6 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = D89DC62814592F50000FC7C6 /* main.m */; };
 15 | 		D89DC62D14592F50000FC7C6 /* WGLAppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = D89DC62C14592F50000FC7C6 /* WGLAppDelegate.m */; };
 16 | 		D89DC634145931B3000FC7C6 /* WebGL.html in Resources */ = {isa = PBXBuildFile; fileRef = D89DC633145931B3000FC7C6 /* WebGL.html */; };
 17 | /* End PBXBuildFile section */
 18 | 
 19 | /* Begin PBXFileReference section */
 20 | 		D89DC61814592F50000FC7C6 /* UIWebViewWebGL.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = UIWebViewWebGL.app; sourceTree = BUILT_PRODUCTS_DIR; };
 21 | 		D89DC61C14592F50000FC7C6 /* UIKit.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = UIKit.framework; path = System/Library/Frameworks/UIKit.framework; sourceTree = SDKROOT; };
 22 | 		D89DC61E14592F50000FC7C6 /* Foundation.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Foundation.framework; path = System/Library/Frameworks/Foundation.framework; sourceTree = SDKROOT; };
 23 | 		D89DC62014592F50000FC7C6 /* CoreGraphics.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = CoreGraphics.framework; path = System/Library/Frameworks/CoreGraphics.framework; sourceTree = SDKROOT; };
 24 | 		D89DC62414592F50000FC7C6 /* UIWebViewWebGL-Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = "UIWebViewWebGL-Info.plist"; sourceTree = "<group>"; };
 25 | 		D89DC62614592F50000FC7C6 /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = en; path = en.lproj/InfoPlist.strings; sourceTree = "<group>"; };
 26 | 		D89DC62814592F50000FC7C6 /* main.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = "<group>"; };
 27 | 		D89DC62A14592F50000FC7C6 /* UIWebViewWebGL-Prefix.pch */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "UIWebViewWebGL-Prefix.pch"; sourceTree = "<group>"; };
 28 | 		D89DC62B14592F50000FC7C6 /* WGLAppDelegate.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = WGLAppDelegate.h; sourceTree = "<group>"; };
 29 | 		D89DC62C14592F50000FC7C6 /* WGLAppDelegate.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = WGLAppDelegate.m; sourceTree = "<group>"; };
 30 | 		D89DC633145931B3000FC7C6 /* WebGL.html */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.html; path = WebGL.html; sourceTree = "<group>"; };
 31 | /* End PBXFileReference section */
 32 | 
 33 | /* Begin PBXFrameworksBuildPhase section */
 34 | 		D89DC61514592F50000FC7C6 /* Frameworks */ = {
 35 | 			isa = PBXFrameworksBuildPhase;
 36 | 			buildActionMask = 2147483647;
 37 | 			files = (
 38 | 				D89DC61D14592F50000FC7C6 /* UIKit.framework in Frameworks */,
 39 | 				D89DC61F14592F50000FC7C6 /* Foundation.framework in Frameworks */,
 40 | 				D89DC62114592F50000FC7C6 /* CoreGraphics.framework in Frameworks */,
 41 | 			);
 42 | 			runOnlyForDeploymentPostprocessing = 0;
 43 | 		};
 44 | /* End PBXFrameworksBuildPhase section */
 45 | 
 46 | /* Begin PBXGroup section */
 47 | 		D89DC60D14592F4F000FC7C6 = {
 48 | 			isa = PBXGroup;
 49 | 			children = (
 50 | 				D89DC62214592F50000FC7C6 /* UIWebViewWebGL */,
 51 | 				D89DC61B14592F50000FC7C6 /* Frameworks */,
 52 | 				D89DC61914592F50000FC7C6 /* Products */,
 53 | 			);
 54 | 			indentWidth = 2;
 55 | 			sourceTree = "<group>";
 56 | 			tabWidth = 2;
 57 | 		};
 58 | 		D89DC61914592F50000FC7C6 /* Products */ = {
 59 | 			isa = PBXGroup;
 60 | 			children = (
 61 | 				D89DC61814592F50000FC7C6 /* UIWebViewWebGL.app */,
 62 | 			);
 63 | 			name = Products;
 64 | 			sourceTree = "<group>";
 65 | 		};
 66 | 		D89DC61B14592F50000FC7C6 /* Frameworks */ = {
 67 | 			isa = PBXGroup;
 68 | 			children = (
 69 | 				D89DC61C14592F50000FC7C6 /* UIKit.framework */,
 70 | 				D89DC61E14592F50000FC7C6 /* Foundation.framework */,
 71 | 				D89DC62014592F50000FC7C6 /* CoreGraphics.framework */,
 72 | 			);
 73 | 			name = Frameworks;
 74 | 			sourceTree = "<group>";
 75 | 		};
 76 | 		D89DC62214592F50000FC7C6 /* UIWebViewWebGL */ = {
 77 | 			isa = PBXGroup;
 78 | 			children = (
 79 | 				D89DC62B14592F50000FC7C6 /* WGLAppDelegate.h */,
 80 | 				D89DC62C14592F50000FC7C6 /* WGLAppDelegate.m */,
 81 | 				D89DC633145931B3000FC7C6 /* WebGL.html */,
 82 | 				D89DC62314592F50000FC7C6 /* Supporting Files */,
 83 | 			);
 84 | 			path = UIWebViewWebGL;
 85 | 			sourceTree = "<group>";
 86 | 		};
 87 | 		D89DC62314592F50000FC7C6 /* Supporting Files */ = {
 88 | 			isa = PBXGroup;
 89 | 			children = (
 90 | 				D89DC62414592F50000FC7C6 /* UIWebViewWebGL-Info.plist */,
 91 | 				D89DC62514592F50000FC7C6 /* InfoPlist.strings */,
 92 | 				D89DC62814592F50000FC7C6 /* main.m */,
 93 | 				D89DC62A14592F50000FC7C6 /* UIWebViewWebGL-Prefix.pch */,
 94 | 			);
 95 | 			name = "Supporting Files";
 96 | 			sourceTree = "<group>";
 97 | 		};
 98 | /* End PBXGroup section */
 99 | 
100 | /* Begin PBXNativeTarget section */
101 | 		D89DC61714592F50000FC7C6 /* UIWebViewWebGL */ = {
102 | 			isa = PBXNativeTarget;
103 | 			buildConfigurationList = D89DC63014592F50000FC7C6 /* Build configuration list for PBXNativeTarget "UIWebViewWebGL" */;
104 | 			buildPhases = (
105 | 				D89DC61414592F50000FC7C6 /* Sources */,
106 | 				D89DC61514592F50000FC7C6 /* Frameworks */,
107 | 				D89DC61614592F50000FC7C6 /* Resources */,
108 | 			);
109 | 			buildRules = (
110 | 			);
111 | 			dependencies = (
112 | 			);
113 | 			name = UIWebViewWebGL;
114 | 			productName = UIWebViewWebGL;
115 | 			productReference = D89DC61814592F50000FC7C6 /* UIWebViewWebGL.app */;
116 | 			productType = "com.apple.product-type.application";
117 | 		};
118 | /* End PBXNativeTarget section */
119 | 
120 | /* Begin PBXProject section */
121 | 		D89DC60F14592F4F000FC7C6 /* Project object */ = {
122 | 			isa = PBXProject;
123 | 			attributes = {
124 | 				LastUpgradeCheck = 0420;
125 | 				ORGANIZATIONNAME = "Nathan de Vries";
126 | 			};
127 | 			buildConfigurationList = D89DC61214592F4F000FC7C6 /* Build configuration list for PBXProject "UIWebViewWebGL" */;
128 | 			compatibilityVersion = "Xcode 3.2";
129 | 			developmentRegion = English;
130 | 			hasScannedForEncodings = 0;
131 | 			knownRegions = (
132 | 				en,
133 | 			);
134 | 			mainGroup = D89DC60D14592F4F000FC7C6;
135 | 			productRefGroup = D89DC61914592F50000FC7C6 /* Products */;
136 | 			projectDirPath = "";
137 | 			projectRoot = "";
138 | 			targets = (
139 | 				D89DC61714592F50000FC7C6 /* UIWebViewWebGL */,
140 | 			);
141 | 		};
142 | /* End PBXProject section */
143 | 
144 | /* Begin PBXResourcesBuildPhase section */
145 | 		D89DC61614592F50000FC7C6 /* Resources */ = {
146 | 			isa = PBXResourcesBuildPhase;
147 | 			buildActionMask = 2147483647;
148 | 			files = (
149 | 				D89DC62714592F50000FC7C6 /* InfoPlist.strings in Resources */,
150 | 				D89DC634145931B3000FC7C6 /* WebGL.html in Resources */,
151 | 			);
152 | 			runOnlyForDeploymentPostprocessing = 0;
153 | 		};
154 | /* End PBXResourcesBuildPhase section */
155 | 
156 | /* Begin PBXSourcesBuildPhase section */
157 | 		D89DC61414592F50000FC7C6 /* Sources */ = {
158 | 			isa = PBXSourcesBuildPhase;
159 | 			buildActionMask = 2147483647;
160 | 			files = (
161 | 				D89DC62914592F50000FC7C6 /* main.m in Sources */,
162 | 				D89DC62D14592F50000FC7C6 /* WGLAppDelegate.m in Sources */,
163 | 			);
164 | 			runOnlyForDeploymentPostprocessing = 0;
165 | 		};
166 | /* End PBXSourcesBuildPhase section */
167 | 
168 | /* Begin PBXVariantGroup section */
169 | 		D89DC62514592F50000FC7C6 /* InfoPlist.strings */ = {
170 | 			isa = PBXVariantGroup;
171 | 			children = (
172 | 				D89DC62614592F50000FC7C6 /* en */,
173 | 			);
174 | 			name = InfoPlist.strings;
175 | 			sourceTree = "<group>";
176 | 		};
177 | /* End PBXVariantGroup section */
178 | 
179 | /* Begin XCBuildConfiguration section */
180 | 		D89DC62E14592F50000FC7C6 /* Debug */ = {
181 | 			isa = XCBuildConfiguration;
182 | 			buildSettings = {
183 | 				ALWAYS_SEARCH_USER_PATHS = NO;
184 | 				ARCHS = "$(ARCHS_STANDARD_32_BIT)";
185 | 				CODE_SIGN_IDENTITY = "iPhone Developer";
186 | 				COPY_PHASE_STRIP = NO;
187 | 				GCC_C_LANGUAGE_STANDARD = gnu99;
188 | 				GCC_DYNAMIC_NO_PIC = NO;
189 | 				GCC_OPTIMIZATION_LEVEL = 0;
190 | 				GCC_PREPROCESSOR_DEFINITIONS = (
191 | 					"DEBUG=1",
192 | 					"$(inherited)",
193 | 				);
194 | 				GCC_SYMBOLS_PRIVATE_EXTERN = NO;
195 | 				GCC_VERSION = com.apple.compilers.llvm.clang.1_0;
196 | 				GCC_WARN_ABOUT_MISSING_PROTOTYPES = YES;
197 | 				GCC_WARN_ABOUT_RETURN_TYPE = YES;
198 | 				GCC_WARN_UNUSED_VARIABLE = YES;
199 | 				IPHONEOS_DEPLOYMENT_TARGET = 5.0;
200 | 				PROVISIONING_PROFILE = "";
201 | 				SDKROOT = iphoneos;
202 | 			};
203 | 			name = Debug;
204 | 		};
205 | 		D89DC62F14592F50000FC7C6 /* Release */ = {
206 | 			isa = XCBuildConfiguration;
207 | 			buildSettings = {
208 | 				ALWAYS_SEARCH_USER_PATHS = NO;
209 | 				ARCHS = "$(ARCHS_STANDARD_32_BIT)";
210 | 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
211 | 				COPY_PHASE_STRIP = YES;
212 | 				GCC_C_LANGUAGE_STANDARD = gnu99;
213 | 				GCC_VERSION = com.apple.compilers.llvm.clang.1_0;
214 | 				GCC_WARN_ABOUT_MISSING_PROTOTYPES = YES;
215 | 				GCC_WARN_ABOUT_RETURN_TYPE = YES;
216 | 				GCC_WARN_UNUSED_VARIABLE = YES;
217 | 				IPHONEOS_DEPLOYMENT_TARGET = 5.0;
218 | 				OTHER_CFLAGS = "-DNS_BLOCK_ASSERTIONS=1";
219 | 				SDKROOT = iphoneos;
220 | 				VALIDATE_PRODUCT = YES;
221 | 			};
222 | 			name = Release;
223 | 		};
224 | 		D89DC63114592F50000FC7C6 /* Debug */ = {
225 | 			isa = XCBuildConfiguration;
226 | 			buildSettings = {
227 | 				GCC_PRECOMPILE_PREFIX_HEADER = YES;
228 | 				GCC_PREFIX_HEADER = "UIWebViewWebGL/UIWebViewWebGL-Prefix.pch";
229 | 				INFOPLIST_FILE = "UIWebViewWebGL/UIWebViewWebGL-Info.plist";
230 | 				PRODUCT_NAME = "$(TARGET_NAME)";
231 | 				WRAPPER_EXTENSION = app;
232 | 			};
233 | 			name = Debug;
234 | 		};
235 | 		D89DC63214592F50000FC7C6 /* Release */ = {
236 | 			isa = XCBuildConfiguration;
237 | 			buildSettings = {
238 | 				GCC_PRECOMPILE_PREFIX_HEADER = YES;
239 | 				GCC_PREFIX_HEADER = "UIWebViewWebGL/UIWebViewWebGL-Prefix.pch";
240 | 				INFOPLIST_FILE = "UIWebViewWebGL/UIWebViewWebGL-Info.plist";
241 | 				PRODUCT_NAME = "$(TARGET_NAME)";
242 | 				WRAPPER_EXTENSION = app;
243 | 			};
244 | 			name = Release;
245 | 		};
246 | /* End XCBuildConfiguration section */
247 | 
248 | /* Begin XCConfigurationList section */
249 | 		D89DC61214592F4F000FC7C6 /* Build configuration list for PBXProject "UIWebViewWebGL" */ = {
250 | 			isa = XCConfigurationList;
251 | 			buildConfigurations = (
252 | 				D89DC62E14592F50000FC7C6 /* Debug */,
253 | 				D89DC62F14592F50000FC7C6 /* Release */,
254 | 			);
255 | 			defaultConfigurationIsVisible = 0;
256 | 			defaultConfigurationName = Release;
257 | 		};
258 | 		D89DC63014592F50000FC7C6 /* Build configuration list for PBXNativeTarget "UIWebViewWebGL" */ = {
259 | 			isa = XCConfigurationList;
260 | 			buildConfigurations = (
261 | 				D89DC63114592F50000FC7C6 /* Debug */,
262 | 				D89DC63214592F50000FC7C6 /* Release */,
263 | 			);
264 | 			defaultConfigurationIsVisible = 0;
265 | 			defaultConfigurationName = Release;
266 | 		};
267 | /* End XCConfigurationList section */
268 | 	};
269 | 	rootObject = D89DC60F14592F4F000FC7C6 /* Project object */;
270 | }
271 | 


--------------------------------------------------------------------------------
/UIWebViewWebGL/UIWebViewWebGL-Info.plist:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 3 | <plist version="1.0">
 4 | <dict>
 5 | 	<key>CFBundleDevelopmentRegion</key>
 6 | 	<string>en</string>
 7 | 	<key>CFBundleDisplayName</key>
 8 | 	<string>${PRODUCT_NAME}</string>
 9 | 	<key>CFBundleExecutable</key>
10 | 	<string>${EXECUTABLE_NAME}</string>
11 | 	<key>CFBundleIconFiles</key>
12 | 	<array/>
13 | 	<key>CFBundleIdentifier</key>
14 | 	<string>com.atnan.${PRODUCT_NAME:rfc1034identifier}</string>
15 | 	<key>CFBundleInfoDictionaryVersion</key>
16 | 	<string>6.0</string>
17 | 	<key>CFBundleName</key>
18 | 	<string>${PRODUCT_NAME}</string>
19 | 	<key>CFBundlePackageType</key>
20 | 	<string>APPL</string>
21 | 	<key>CFBundleShortVersionString</key>
22 | 	<string>1.0</string>
23 | 	<key>CFBundleSignature</key>
24 | 	<string>????</string>
25 | 	<key>CFBundleVersion</key>
26 | 	<string>1.0</string>
27 | 	<key>LSRequiresIPhoneOS</key>
28 | 	<true/>
29 | 	<key>UIRequiredDeviceCapabilities</key>
30 | 	<array>
31 | 		<string>armv7</string>
32 | 	</array>
33 | 	<key>UISupportedInterfaceOrientations</key>
34 | 	<array>
35 | 		<string>UIInterfaceOrientationPortrait</string>
36 | 		<string>UIInterfaceOrientationLandscapeLeft</string>
37 | 		<string>UIInterfaceOrientationLandscapeRight</string>
38 | 	</array>
39 | </dict>
40 | </plist>
41 | 


--------------------------------------------------------------------------------
/UIWebViewWebGL/UIWebViewWebGL-Prefix.pch:
--------------------------------------------------------------------------------
 1 | //
 2 | // Prefix header for all source files of the 'UIWebViewWebGL' target in the 'UIWebViewWebGL' project
 3 | //
 4 | 
 5 | #import <Availability.h>
 6 | 
 7 | #ifndef __IPHONE_3_0
 8 | #warning "This project uses features only available in iOS SDK 3.0 and later."
 9 | #endif
10 | 
11 | #ifdef __OBJC__
12 |     #import <UIKit/UIKit.h>
13 |     #import <Foundation/Foundation.h>
14 | #endif
15 | 


--------------------------------------------------------------------------------
/UIWebViewWebGL/WGLAppDelegate.h:
--------------------------------------------------------------------------------
 1 | //
 2 | //  WGLAppDelegate.h
 3 | //  UIWebViewWebGL
 4 | //
 5 | //  Created by Nathan de Vries on 27/10/11.
 6 | //  Copyright (c) 2011 Nathan de Vries. All rights reserved.
 7 | //
 8 | 
 9 | #import <UIKit/UIKit.h>
10 | 
11 | @interface WGLAppDelegate : UIResponder <UIApplicationDelegate>
12 | 
13 | @property (strong, nonatomic) UIWindow *window;
14 | 
15 | @end
16 | 


--------------------------------------------------------------------------------
/UIWebViewWebGL/WGLAppDelegate.m:
--------------------------------------------------------------------------------
 1 | //
 2 | //  WGLAppDelegate.m
 3 | //  UIWebViewWebGL
 4 | //
 5 | //  Created by Nathan de Vries on 27/10/11.
 6 | //  Copyright (c) 2011 Nathan de Vries. All rights reserved.
 7 | //
 8 | 
 9 | #import "WGLAppDelegate.h"
10 | 
11 | @implementation WGLAppDelegate
12 | 
13 | @synthesize window=_window;
14 | 
15 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
16 |   self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
17 |   
18 | //  Class ADWebView = NSClassFromString(@"ADWebView");
19 | //  UIWebView* webView = (UIWebView *)[[[ADWebView alloc] initWithFrame:self.window.bounds] autorelease];
20 | //  [webView setWebGLEnabled:YES];
21 |     
22 |   UIWebView* webView = [[[UIWebView alloc] initWithFrame:self.window.bounds] autorelease];
23 |   
24 |   id webDocumentView = [webView performSelector:@selector(_browserView)];
25 |   id backingWebView = [webDocumentView performSelector:@selector(webView)];
26 |   [backingWebView _setWebGLEnabled:YES];
27 |   
28 |   NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"WebGL" ofType:@"html"];
29 |   NSURLRequest* request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:htmlPath]];
30 |   [webView loadRequest:request];
31 |   
32 |   UIViewController* viewController = [[[UIViewController alloc] init] autorelease];
33 |   viewController.view = webView;
34 |   
35 |   self.window.rootViewController = viewController;
36 |   [self.window makeKeyAndVisible];
37 |   
38 |   return YES;
39 | }
40 | 
41 | @end
42 | 


--------------------------------------------------------------------------------
/UIWebViewWebGL/WebGL.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 |   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  6 |   
  7 |   <style type="text/css" media="screen">
  8 |     canvas { width: 100%; height: 100%; }
  9 |   </style>
 10 |   
 11 |   <script type="text/javascript" charset="utf-8">
 12 |     // glMatrix v0.9.5
 13 |     glMatrixArrayType=typeof Float32Array!="undefined"?Float32Array:typeof WebGLFloatArray!="undefined"?WebGLFloatArray:Array;var vec3={};vec3.create=function(a){var b=new glMatrixArrayType(3);if(a){b[0]=a[0];b[1]=a[1];b[2]=a[2]}return b};vec3.set=function(a,b){b[0]=a[0];b[1]=a[1];b[2]=a[2];return b};vec3.add=function(a,b,c){if(!c||a==c){a[0]+=b[0];a[1]+=b[1];a[2]+=b[2];return a}c[0]=a[0]+b[0];c[1]=a[1]+b[1];c[2]=a[2]+b[2];return c};
 14 |     vec3.subtract=function(a,b,c){if(!c||a==c){a[0]-=b[0];a[1]-=b[1];a[2]-=b[2];return a}c[0]=a[0]-b[0];c[1]=a[1]-b[1];c[2]=a[2]-b[2];return c};vec3.negate=function(a,b){b||(b=a);b[0]=-a[0];b[1]=-a[1];b[2]=-a[2];return b};vec3.scale=function(a,b,c){if(!c||a==c){a[0]*=b;a[1]*=b;a[2]*=b;return a}c[0]=a[0]*b;c[1]=a[1]*b;c[2]=a[2]*b;return c};
 15 |     vec3.normalize=function(a,b){b||(b=a);var c=a[0],d=a[1],e=a[2],g=Math.sqrt(c*c+d*d+e*e);if(g){if(g==1){b[0]=c;b[1]=d;b[2]=e;return b}}else{b[0]=0;b[1]=0;b[2]=0;return b}g=1/g;b[0]=c*g;b[1]=d*g;b[2]=e*g;return b};vec3.cross=function(a,b,c){c||(c=a);var d=a[0],e=a[1];a=a[2];var g=b[0],f=b[1];b=b[2];c[0]=e*b-a*f;c[1]=a*g-d*b;c[2]=d*f-e*g;return c};vec3.length=function(a){var b=a[0],c=a[1];a=a[2];return Math.sqrt(b*b+c*c+a*a)};vec3.dot=function(a,b){return a[0]*b[0]+a[1]*b[1]+a[2]*b[2]};
 16 |     vec3.direction=function(a,b,c){c||(c=a);var d=a[0]-b[0],e=a[1]-b[1];a=a[2]-b[2];b=Math.sqrt(d*d+e*e+a*a);if(!b){c[0]=0;c[1]=0;c[2]=0;return c}b=1/b;c[0]=d*b;c[1]=e*b;c[2]=a*b;return c};vec3.lerp=function(a,b,c,d){d||(d=a);d[0]=a[0]+c*(b[0]-a[0]);d[1]=a[1]+c*(b[1]-a[1]);d[2]=a[2]+c*(b[2]-a[2]);return d};vec3.str=function(a){return"["+a[0]+", "+a[1]+", "+a[2]+"]"};var mat3={};
 17 |     mat3.create=function(a){var b=new glMatrixArrayType(9);if(a){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];b[4]=a[4];b[5]=a[5];b[6]=a[6];b[7]=a[7];b[8]=a[8];b[9]=a[9]}return b};mat3.set=function(a,b){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];b[4]=a[4];b[5]=a[5];b[6]=a[6];b[7]=a[7];b[8]=a[8];return b};mat3.identity=function(a){a[0]=1;a[1]=0;a[2]=0;a[3]=0;a[4]=1;a[5]=0;a[6]=0;a[7]=0;a[8]=1;return a};
 18 |     mat3.transpose=function(a,b){if(!b||a==b){var c=a[1],d=a[2],e=a[5];a[1]=a[3];a[2]=a[6];a[3]=c;a[5]=a[7];a[6]=d;a[7]=e;return a}b[0]=a[0];b[1]=a[3];b[2]=a[6];b[3]=a[1];b[4]=a[4];b[5]=a[7];b[6]=a[2];b[7]=a[5];b[8]=a[8];return b};mat3.toMat4=function(a,b){b||(b=mat4.create());b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=0;b[4]=a[3];b[5]=a[4];b[6]=a[5];b[7]=0;b[8]=a[6];b[9]=a[7];b[10]=a[8];b[11]=0;b[12]=0;b[13]=0;b[14]=0;b[15]=1;return b};
 19 |     mat3.str=function(a){return"["+a[0]+", "+a[1]+", "+a[2]+", "+a[3]+", "+a[4]+", "+a[5]+", "+a[6]+", "+a[7]+", "+a[8]+"]"};var mat4={};mat4.create=function(a){var b=new glMatrixArrayType(16);if(a){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];b[4]=a[4];b[5]=a[5];b[6]=a[6];b[7]=a[7];b[8]=a[8];b[9]=a[9];b[10]=a[10];b[11]=a[11];b[12]=a[12];b[13]=a[13];b[14]=a[14];b[15]=a[15]}return b};
 20 |     mat4.set=function(a,b){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];b[4]=a[4];b[5]=a[5];b[6]=a[6];b[7]=a[7];b[8]=a[8];b[9]=a[9];b[10]=a[10];b[11]=a[11];b[12]=a[12];b[13]=a[13];b[14]=a[14];b[15]=a[15];return b};mat4.identity=function(a){a[0]=1;a[1]=0;a[2]=0;a[3]=0;a[4]=0;a[5]=1;a[6]=0;a[7]=0;a[8]=0;a[9]=0;a[10]=1;a[11]=0;a[12]=0;a[13]=0;a[14]=0;a[15]=1;return a};
 21 |     mat4.transpose=function(a,b){if(!b||a==b){var c=a[1],d=a[2],e=a[3],g=a[6],f=a[7],h=a[11];a[1]=a[4];a[2]=a[8];a[3]=a[12];a[4]=c;a[6]=a[9];a[7]=a[13];a[8]=d;a[9]=g;a[11]=a[14];a[12]=e;a[13]=f;a[14]=h;return a}b[0]=a[0];b[1]=a[4];b[2]=a[8];b[3]=a[12];b[4]=a[1];b[5]=a[5];b[6]=a[9];b[7]=a[13];b[8]=a[2];b[9]=a[6];b[10]=a[10];b[11]=a[14];b[12]=a[3];b[13]=a[7];b[14]=a[11];b[15]=a[15];return b};
 22 |     mat4.determinant=function(a){var b=a[0],c=a[1],d=a[2],e=a[3],g=a[4],f=a[5],h=a[6],i=a[7],j=a[8],k=a[9],l=a[10],o=a[11],m=a[12],n=a[13],p=a[14];a=a[15];return m*k*h*e-j*n*h*e-m*f*l*e+g*n*l*e+j*f*p*e-g*k*p*e-m*k*d*i+j*n*d*i+m*c*l*i-b*n*l*i-j*c*p*i+b*k*p*i+m*f*d*o-g*n*d*o-m*c*h*o+b*n*h*o+g*c*p*o-b*f*p*o-j*f*d*a+g*k*d*a+j*c*h*a-b*k*h*a-g*c*l*a+b*f*l*a};
 23 |     mat4.inverse=function(a,b){b||(b=a);var c=a[0],d=a[1],e=a[2],g=a[3],f=a[4],h=a[5],i=a[6],j=a[7],k=a[8],l=a[9],o=a[10],m=a[11],n=a[12],p=a[13],r=a[14],s=a[15],A=c*h-d*f,B=c*i-e*f,t=c*j-g*f,u=d*i-e*h,v=d*j-g*h,w=e*j-g*i,x=k*p-l*n,y=k*r-o*n,z=k*s-m*n,C=l*r-o*p,D=l*s-m*p,E=o*s-m*r,q=1/(A*E-B*D+t*C+u*z-v*y+w*x);b[0]=(h*E-i*D+j*C)*q;b[1]=(-d*E+e*D-g*C)*q;b[2]=(p*w-r*v+s*u)*q;b[3]=(-l*w+o*v-m*u)*q;b[4]=(-f*E+i*z-j*y)*q;b[5]=(c*E-e*z+g*y)*q;b[6]=(-n*w+r*t-s*B)*q;b[7]=(k*w-o*t+m*B)*q;b[8]=(f*D-h*z+j*x)*q;
 24 |     b[9]=(-c*D+d*z-g*x)*q;b[10]=(n*v-p*t+s*A)*q;b[11]=(-k*v+l*t-m*A)*q;b[12]=(-f*C+h*y-i*x)*q;b[13]=(c*C-d*y+e*x)*q;b[14]=(-n*u+p*B-r*A)*q;b[15]=(k*u-l*B+o*A)*q;return b};mat4.toRotationMat=function(a,b){b||(b=mat4.create());b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];b[4]=a[4];b[5]=a[5];b[6]=a[6];b[7]=a[7];b[8]=a[8];b[9]=a[9];b[10]=a[10];b[11]=a[11];b[12]=0;b[13]=0;b[14]=0;b[15]=1;return b};
 25 |     mat4.toMat3=function(a,b){b||(b=mat3.create());b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[4];b[4]=a[5];b[5]=a[6];b[6]=a[8];b[7]=a[9];b[8]=a[10];return b};mat4.toInverseMat3=function(a,b){var c=a[0],d=a[1],e=a[2],g=a[4],f=a[5],h=a[6],i=a[8],j=a[9],k=a[10],l=k*f-h*j,o=-k*g+h*i,m=j*g-f*i,n=c*l+d*o+e*m;if(!n)return null;n=1/n;b||(b=mat3.create());b[0]=l*n;b[1]=(-k*d+e*j)*n;b[2]=(h*d-e*f)*n;b[3]=o*n;b[4]=(k*c-e*i)*n;b[5]=(-h*c+e*g)*n;b[6]=m*n;b[7]=(-j*c+d*i)*n;b[8]=(f*c-d*g)*n;return b};
 26 |     mat4.multiply=function(a,b,c){c||(c=a);var d=a[0],e=a[1],g=a[2],f=a[3],h=a[4],i=a[5],j=a[6],k=a[7],l=a[8],o=a[9],m=a[10],n=a[11],p=a[12],r=a[13],s=a[14];a=a[15];var A=b[0],B=b[1],t=b[2],u=b[3],v=b[4],w=b[5],x=b[6],y=b[7],z=b[8],C=b[9],D=b[10],E=b[11],q=b[12],F=b[13],G=b[14];b=b[15];c[0]=A*d+B*h+t*l+u*p;c[1]=A*e+B*i+t*o+u*r;c[2]=A*g+B*j+t*m+u*s;c[3]=A*f+B*k+t*n+u*a;c[4]=v*d+w*h+x*l+y*p;c[5]=v*e+w*i+x*o+y*r;c[6]=v*g+w*j+x*m+y*s;c[7]=v*f+w*k+x*n+y*a;c[8]=z*d+C*h+D*l+E*p;c[9]=z*e+C*i+D*o+E*r;c[10]=z*
 27 |     g+C*j+D*m+E*s;c[11]=z*f+C*k+D*n+E*a;c[12]=q*d+F*h+G*l+b*p;c[13]=q*e+F*i+G*o+b*r;c[14]=q*g+F*j+G*m+b*s;c[15]=q*f+F*k+G*n+b*a;return c};mat4.multiplyVec3=function(a,b,c){c||(c=b);var d=b[0],e=b[1];b=b[2];c[0]=a[0]*d+a[4]*e+a[8]*b+a[12];c[1]=a[1]*d+a[5]*e+a[9]*b+a[13];c[2]=a[2]*d+a[6]*e+a[10]*b+a[14];return c};
 28 |     mat4.multiplyVec4=function(a,b,c){c||(c=b);var d=b[0],e=b[1],g=b[2];b=b[3];c[0]=a[0]*d+a[4]*e+a[8]*g+a[12]*b;c[1]=a[1]*d+a[5]*e+a[9]*g+a[13]*b;c[2]=a[2]*d+a[6]*e+a[10]*g+a[14]*b;c[3]=a[3]*d+a[7]*e+a[11]*g+a[15]*b;return c};
 29 |     mat4.translate=function(a,b,c){var d=b[0],e=b[1];b=b[2];if(!c||a==c){a[12]=a[0]*d+a[4]*e+a[8]*b+a[12];a[13]=a[1]*d+a[5]*e+a[9]*b+a[13];a[14]=a[2]*d+a[6]*e+a[10]*b+a[14];a[15]=a[3]*d+a[7]*e+a[11]*b+a[15];return a}var g=a[0],f=a[1],h=a[2],i=a[3],j=a[4],k=a[5],l=a[6],o=a[7],m=a[8],n=a[9],p=a[10],r=a[11];c[0]=g;c[1]=f;c[2]=h;c[3]=i;c[4]=j;c[5]=k;c[6]=l;c[7]=o;c[8]=m;c[9]=n;c[10]=p;c[11]=r;c[12]=g*d+j*e+m*b+a[12];c[13]=f*d+k*e+n*b+a[13];c[14]=h*d+l*e+p*b+a[14];c[15]=i*d+o*e+r*b+a[15];return c};
 30 |     mat4.scale=function(a,b,c){var d=b[0],e=b[1];b=b[2];if(!c||a==c){a[0]*=d;a[1]*=d;a[2]*=d;a[3]*=d;a[4]*=e;a[5]*=e;a[6]*=e;a[7]*=e;a[8]*=b;a[9]*=b;a[10]*=b;a[11]*=b;return a}c[0]=a[0]*d;c[1]=a[1]*d;c[2]=a[2]*d;c[3]=a[3]*d;c[4]=a[4]*e;c[5]=a[5]*e;c[6]=a[6]*e;c[7]=a[7]*e;c[8]=a[8]*b;c[9]=a[9]*b;c[10]=a[10]*b;c[11]=a[11]*b;c[12]=a[12];c[13]=a[13];c[14]=a[14];c[15]=a[15];return c};
 31 |     mat4.rotate=function(a,b,c,d){var e=c[0],g=c[1];c=c[2];var f=Math.sqrt(e*e+g*g+c*c);if(!f)return null;if(f!=1){f=1/f;e*=f;g*=f;c*=f}var h=Math.sin(b),i=Math.cos(b),j=1-i;b=a[0];f=a[1];var k=a[2],l=a[3],o=a[4],m=a[5],n=a[6],p=a[7],r=a[8],s=a[9],A=a[10],B=a[11],t=e*e*j+i,u=g*e*j+c*h,v=c*e*j-g*h,w=e*g*j-c*h,x=g*g*j+i,y=c*g*j+e*h,z=e*c*j+g*h;e=g*c*j-e*h;g=c*c*j+i;if(d){if(a!=d){d[12]=a[12];d[13]=a[13];d[14]=a[14];d[15]=a[15]}}else d=a;d[0]=b*t+o*u+r*v;d[1]=f*t+m*u+s*v;d[2]=k*t+n*u+A*v;d[3]=l*t+p*u+B*
 32 |     v;d[4]=b*w+o*x+r*y;d[5]=f*w+m*x+s*y;d[6]=k*w+n*x+A*y;d[7]=l*w+p*x+B*y;d[8]=b*z+o*e+r*g;d[9]=f*z+m*e+s*g;d[10]=k*z+n*e+A*g;d[11]=l*z+p*e+B*g;return d};mat4.rotateX=function(a,b,c){var d=Math.sin(b);b=Math.cos(b);var e=a[4],g=a[5],f=a[6],h=a[7],i=a[8],j=a[9],k=a[10],l=a[11];if(c){if(a!=c){c[0]=a[0];c[1]=a[1];c[2]=a[2];c[3]=a[3];c[12]=a[12];c[13]=a[13];c[14]=a[14];c[15]=a[15]}}else c=a;c[4]=e*b+i*d;c[5]=g*b+j*d;c[6]=f*b+k*d;c[7]=h*b+l*d;c[8]=e*-d+i*b;c[9]=g*-d+j*b;c[10]=f*-d+k*b;c[11]=h*-d+l*b;return c};
 33 |     mat4.rotateY=function(a,b,c){var d=Math.sin(b);b=Math.cos(b);var e=a[0],g=a[1],f=a[2],h=a[3],i=a[8],j=a[9],k=a[10],l=a[11];if(c){if(a!=c){c[4]=a[4];c[5]=a[5];c[6]=a[6];c[7]=a[7];c[12]=a[12];c[13]=a[13];c[14]=a[14];c[15]=a[15]}}else c=a;c[0]=e*b+i*-d;c[1]=g*b+j*-d;c[2]=f*b+k*-d;c[3]=h*b+l*-d;c[8]=e*d+i*b;c[9]=g*d+j*b;c[10]=f*d+k*b;c[11]=h*d+l*b;return c};
 34 |     mat4.rotateZ=function(a,b,c){var d=Math.sin(b);b=Math.cos(b);var e=a[0],g=a[1],f=a[2],h=a[3],i=a[4],j=a[5],k=a[6],l=a[7];if(c){if(a!=c){c[8]=a[8];c[9]=a[9];c[10]=a[10];c[11]=a[11];c[12]=a[12];c[13]=a[13];c[14]=a[14];c[15]=a[15]}}else c=a;c[0]=e*b+i*d;c[1]=g*b+j*d;c[2]=f*b+k*d;c[3]=h*b+l*d;c[4]=e*-d+i*b;c[5]=g*-d+j*b;c[6]=f*-d+k*b;c[7]=h*-d+l*b;return c};
 35 |     mat4.frustum=function(a,b,c,d,e,g,f){f||(f=mat4.create());var h=b-a,i=d-c,j=g-e;f[0]=e*2/h;f[1]=0;f[2]=0;f[3]=0;f[4]=0;f[5]=e*2/i;f[6]=0;f[7]=0;f[8]=(b+a)/h;f[9]=(d+c)/i;f[10]=-(g+e)/j;f[11]=-1;f[12]=0;f[13]=0;f[14]=-(g*e*2)/j;f[15]=0;return f};mat4.perspective=function(a,b,c,d,e){a=c*Math.tan(a*Math.PI/360);b=a*b;return mat4.frustum(-b,b,-a,a,c,d,e)};
 36 |     mat4.ortho=function(a,b,c,d,e,g,f){f||(f=mat4.create());var h=b-a,i=d-c,j=g-e;f[0]=2/h;f[1]=0;f[2]=0;f[3]=0;f[4]=0;f[5]=2/i;f[6]=0;f[7]=0;f[8]=0;f[9]=0;f[10]=-2/j;f[11]=0;f[12]=-(a+b)/h;f[13]=-(d+c)/i;f[14]=-(g+e)/j;f[15]=1;return f};
 37 |     mat4.lookAt=function(a,b,c,d){d||(d=mat4.create());var e=a[0],g=a[1];a=a[2];var f=c[0],h=c[1],i=c[2];c=b[1];var j=b[2];if(e==b[0]&&g==c&&a==j)return mat4.identity(d);var k,l,o,m;c=e-b[0];j=g-b[1];b=a-b[2];m=1/Math.sqrt(c*c+j*j+b*b);c*=m;j*=m;b*=m;k=h*b-i*j;i=i*c-f*b;f=f*j-h*c;if(m=Math.sqrt(k*k+i*i+f*f)){m=1/m;k*=m;i*=m;f*=m}else f=i=k=0;h=j*f-b*i;l=b*k-c*f;o=c*i-j*k;if(m=Math.sqrt(h*h+l*l+o*o)){m=1/m;h*=m;l*=m;o*=m}else o=l=h=0;d[0]=k;d[1]=h;d[2]=c;d[3]=0;d[4]=i;d[5]=l;d[6]=j;d[7]=0;d[8]=f;d[9]=
 38 |     o;d[10]=b;d[11]=0;d[12]=-(k*e+i*g+f*a);d[13]=-(h*e+l*g+o*a);d[14]=-(c*e+j*g+b*a);d[15]=1;return d};mat4.str=function(a){return"["+a[0]+", "+a[1]+", "+a[2]+", "+a[3]+", "+a[4]+", "+a[5]+", "+a[6]+", "+a[7]+", "+a[8]+", "+a[9]+", "+a[10]+", "+a[11]+", "+a[12]+", "+a[13]+", "+a[14]+", "+a[15]+"]"};quat4={};quat4.create=function(a){var b=new glMatrixArrayType(4);if(a){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3]}return b};quat4.set=function(a,b){b[0]=a[0];b[1]=a[1];b[2]=a[2];b[3]=a[3];return b};
 39 |     quat4.calculateW=function(a,b){var c=a[0],d=a[1],e=a[2];if(!b||a==b){a[3]=-Math.sqrt(Math.abs(1-c*c-d*d-e*e));return a}b[0]=c;b[1]=d;b[2]=e;b[3]=-Math.sqrt(Math.abs(1-c*c-d*d-e*e));return b};quat4.inverse=function(a,b){if(!b||a==b){a[0]*=1;a[1]*=1;a[2]*=1;return a}b[0]=-a[0];b[1]=-a[1];b[2]=-a[2];b[3]=a[3];return b};quat4.length=function(a){var b=a[0],c=a[1],d=a[2];a=a[3];return Math.sqrt(b*b+c*c+d*d+a*a)};
 40 |     quat4.normalize=function(a,b){b||(b=a);var c=a[0],d=a[1],e=a[2],g=a[3],f=Math.sqrt(c*c+d*d+e*e+g*g);if(f==0){b[0]=0;b[1]=0;b[2]=0;b[3]=0;return b}f=1/f;b[0]=c*f;b[1]=d*f;b[2]=e*f;b[3]=g*f;return b};quat4.multiply=function(a,b,c){c||(c=a);var d=a[0],e=a[1],g=a[2];a=a[3];var f=b[0],h=b[1],i=b[2];b=b[3];c[0]=d*b+a*f+e*i-g*h;c[1]=e*b+a*h+g*f-d*i;c[2]=g*b+a*i+d*h-e*f;c[3]=a*b-d*f-e*h-g*i;return c};
 41 |     quat4.multiplyVec3=function(a,b,c){c||(c=b);var d=b[0],e=b[1],g=b[2];b=a[0];var f=a[1],h=a[2];a=a[3];var i=a*d+f*g-h*e,j=a*e+h*d-b*g,k=a*g+b*e-f*d;d=-b*d-f*e-h*g;c[0]=i*a+d*-b+j*-h-k*-f;c[1]=j*a+d*-f+k*-b-i*-h;c[2]=k*a+d*-h+i*-f-j*-b;return c};quat4.toMat3=function(a,b){b||(b=mat3.create());var c=a[0],d=a[1],e=a[2],g=a[3],f=c+c,h=d+d,i=e+e,j=c*f,k=c*h;c=c*i;var l=d*h;d=d*i;e=e*i;f=g*f;h=g*h;g=g*i;b[0]=1-(l+e);b[1]=k-g;b[2]=c+h;b[3]=k+g;b[4]=1-(j+e);b[5]=d-f;b[6]=c-h;b[7]=d+f;b[8]=1-(j+l);return b};
 42 |     quat4.toMat4=function(a,b){b||(b=mat4.create());var c=a[0],d=a[1],e=a[2],g=a[3],f=c+c,h=d+d,i=e+e,j=c*f,k=c*h;c=c*i;var l=d*h;d=d*i;e=e*i;f=g*f;h=g*h;g=g*i;b[0]=1-(l+e);b[1]=k-g;b[2]=c+h;b[3]=0;b[4]=k+g;b[5]=1-(j+e);b[6]=d-f;b[7]=0;b[8]=c-h;b[9]=d+f;b[10]=1-(j+l);b[11]=0;b[12]=0;b[13]=0;b[14]=0;b[15]=1;return b};quat4.slerp=function(a,b,c,d){d||(d=a);var e=c;if(a[0]*b[0]+a[1]*b[1]+a[2]*b[2]+a[3]*b[3]<0)e=-1*c;d[0]=1-c*a[0]+e*b[0];d[1]=1-c*a[1]+e*b[1];d[2]=1-c*a[2]+e*b[2];d[3]=1-c*a[3]+e*b[3];return d};
 43 |     quat4.str=function(a){return"["+a[0]+", "+a[1]+", "+a[2]+", "+a[3]+"]"};
 44 |     
 45 |   </script>
 46 |   
 47 |   <script type="text/javascript" charset="utf-8">
 48 |     /*
 49 |      * Copyright 2010, Google Inc.
 50 |      * All rights reserved.
 51 |      *
 52 |      * Redistribution and use in source and binary forms, with or without
 53 |      * modification, are permitted provided that the following conditions are
 54 |      * met:
 55 |      *
 56 |      *     * Redistributions of source code must retain the above copyright
 57 |      * notice, this list of conditions and the following disclaimer.
 58 |      *     * Redistributions in binary form must reproduce the above
 59 |      * copyright notice, this list of conditions and the following disclaimer
 60 |      * in the documentation and/or other materials provided with the
 61 |      * distribution.
 62 |      *     * Neither the name of Google Inc. nor the names of its
 63 |      * contributors may be used to endorse or promote products derived from
 64 |      * this software without specific prior written permission.
 65 |      *
 66 |      * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 67 |      * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 68 |      * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 69 |      * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 70 |      * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 71 |      * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 72 |      * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 73 |      * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 74 |      * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 75 |      * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 76 |      * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 77 |      */
 78 | 
 79 | 
 80 |     /**
 81 |      * @fileoverview This file contains functions every webgl program will need
 82 |      * a version of one way or another.
 83 |      *
 84 |      * Instead of setting up a context manually it is recommended to
 85 |      * use. This will check for success or failure. On failure it
 86 |      * will attempt to present an approriate message to the user.
 87 |      *
 88 |      *       gl = WebGLUtils.setupWebGL(canvas);
 89 |      *
 90 |      * For animated WebGL apps use of setTimeout or setInterval are
 91 |      * discouraged. It is recommended you structure your rendering
 92 |      * loop like this.
 93 |      *
 94 |      *       function render() {
 95 |      *         window.requestAnimFrame(render, canvas);
 96 |      *
 97 |      *         // do rendering
 98 |      *         ...
 99 |      *       }
100 |      *       render();
101 |      *
102 |      * This will call your rendering function up to the refresh rate
103 |      * of your display but will stop rendering if your app is not
104 |      * visible.
105 |      */
106 | 
107 |     WebGLUtils = function() {
108 | 
109 |     /**
110 |      * Creates the HTLM for a failure message
111 |      * @param {string} canvasContainerId id of container of th
112 |      *        canvas.
113 |      * @return {string} The html.
114 |      */
115 |     var makeFailHTML = function(msg) {
116 |       return '' +
117 |         '<table style="background-color: #8CE; width: 100%; height: 100%;"><tr>' +
118 |         '<td align="center">' +
119 |         '<div style="display: table-cell; vertical-align: middle;">' +
120 |         '<div style="">' + msg + '</div>' +
121 |         '</div>' +
122 |         '</td></tr></table>';
123 |     };
124 | 
125 |     /**
126 |      * Mesasge for getting a webgl browser
127 |      * @type {string}
128 |      */
129 |     var GET_A_WEBGL_BROWSER = '' +
130 |       'This page requires a browser that supports WebGL.<br/>' +
131 |       '<a href="http://get.webgl.org">Click here to upgrade your browser.</a>';
132 | 
133 |     /**
134 |      * Mesasge for need better hardware
135 |      * @type {string}
136 |      */
137 |     var OTHER_PROBLEM = '' +
138 |       "It doesn't appear your computer can support WebGL.<br/>" +
139 |       '<a href="http://get.webgl.org/troubleshooting/">Click here for more information.</a>';
140 | 
141 |     /**
142 |      * Creates a webgl context. If creation fails it will
143 |      * change the contents of the container of the <canvas>
144 |      * tag to an error message with the correct links for WebGL.
145 |      * @param {Element} canvas. The canvas element to create a
146 |      *     context from.
147 |      * @param {WebGLContextCreationAttirbutes} opt_attribs Any
148 |      *     creation attributes you want to pass in.
149 |      * @param {function:(msg)} opt_onError An function to call
150 |      *     if there is an error during creation.
151 |      * @return {WebGLRenderingContext} The created context.
152 |      */
153 |     var setupWebGL = function(canvas, opt_attribs, opt_onError) {
154 |       function handleCreationError(msg) {
155 |         var container = canvas.parentNode;
156 |         if (container) {
157 |           var str = window.WebGLRenderingContext ?
158 |                OTHER_PROBLEM :
159 |                GET_A_WEBGL_BROWSER;
160 |           if (msg) {
161 |             str += "<br/><br/>Status: " + msg;
162 |           }
163 |           container.innerHTML = makeFailHTML(str);
164 |         }
165 |       };
166 | 
167 |       opt_onError = opt_onError || handleCreationError;
168 | 
169 |       if (canvas.addEventListener) {
170 |         canvas.addEventListener("webglcontextcreationerror", function(event) {
171 |               opt_onError(event.statusMessage);
172 |             }, false);
173 |       }
174 |       var context = create3DContext(canvas, opt_attribs);
175 |       if (!context) {
176 |         if (!window.WebGLRenderingContext) {
177 |           opt_onError("");
178 |         }
179 |       }
180 |       return context;
181 |     };
182 | 
183 |     /**
184 |      * Creates a webgl context.
185 |      * @param {!Canvas} canvas The canvas tag to get context
186 |      *     from. If one is not passed in one will be created.
187 |      * @return {!WebGLContext} The created context.
188 |      */
189 |     var create3DContext = function(canvas, opt_attribs) {
190 |       var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
191 |       var context = null;
192 |       for (var ii = 0; ii < names.length; ++ii) {
193 |         try {
194 |           context = canvas.getContext(names[ii], opt_attribs);
195 |         } catch(e) {}
196 |         if (context) {
197 |           break;
198 |         }
199 |       }
200 |       return context;
201 |     }
202 | 
203 |     return {
204 |       create3DContext: create3DContext,
205 |       setupWebGL: setupWebGL
206 |     };
207 |     }();
208 | 
209 |     /**
210 |      * Provides requestAnimationFrame in a cross browser way.
211 |      */
212 |     window.requestAnimFrame = (function() {
213 |       return window.requestAnimationFrame ||
214 |              window.webkitRequestAnimationFrame ||
215 |              window.mozRequestAnimationFrame ||
216 |              window.oRequestAnimationFrame ||
217 |              window.msRequestAnimationFrame ||
218 |              function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
219 |                window.setTimeout(callback, 1000/60);
220 |              };
221 |     })();
222 | 
223 |   </script>
224 | 
225 |   <script id="shader-fs" type="x-shader/x-fragment">
226 |       #ifdef GL_ES
227 |       precision highp float;
228 |       #endif
229 | 
230 |       varying vec4 vColor;
231 | 
232 |       void main(void) {
233 |           gl_FragColor = vColor;
234 |       }
235 |   </script>
236 | 
237 |   <script id="shader-vs" type="x-shader/x-vertex">
238 |       attribute vec3 aVertexPosition;
239 |       attribute vec4 aVertexColor;
240 | 
241 |       uniform mat4 uMVMatrix;
242 |       uniform mat4 uPMatrix;
243 | 
244 |       varying vec4 vColor;
245 | 
246 |       void main(void) {
247 |           gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
248 |           vColor = aVertexColor;
249 |       }
250 |   </script>
251 | 
252 | 
253 |   <script type="text/javascript">
254 | 
255 |       var gl;
256 | 
257 |       function initGL(canvas) {
258 |           try {
259 |               gl = canvas.getContext("experimental-webgl");
260 |               gl.viewportWidth = canvas.width;
261 |               gl.viewportHeight = canvas.height;
262 |           } catch (e) {
263 |           }
264 |           if (!gl) {
265 |               alert("Could not initialise WebGL, sorry :-(");
266 |           }
267 |       }
268 | 
269 | 
270 |       function getShader(gl, id) {
271 |           var shaderScript = document.getElementById(id);
272 |           if (!shaderScript) {
273 |               return null;
274 |           }
275 | 
276 |           var str = "";
277 |           var k = shaderScript.firstChild;
278 |           while (k) {
279 |               if (k.nodeType == 3) {
280 |                   str += k.textContent;
281 |               }
282 |               k = k.nextSibling;
283 |           }
284 | 
285 |           var shader;
286 |           if (shaderScript.type == "x-shader/x-fragment") {
287 |               shader = gl.createShader(gl.FRAGMENT_SHADER);
288 |           } else if (shaderScript.type == "x-shader/x-vertex") {
289 |               shader = gl.createShader(gl.VERTEX_SHADER);
290 |           } else {
291 |               return null;
292 |           }
293 | 
294 |           gl.shaderSource(shader, str);
295 |           gl.compileShader(shader);
296 | 
297 |           if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
298 |               alert(gl.getShaderInfoLog(shader));
299 |               return null;
300 |           }
301 | 
302 |           return shader;
303 |       }
304 | 
305 | 
306 |       var shaderProgram;
307 | 
308 |       function initShaders() {
309 |           var fragmentShader = getShader(gl, "shader-fs");
310 |           var vertexShader = getShader(gl, "shader-vs");
311 | 
312 |           shaderProgram = gl.createProgram();
313 |           gl.attachShader(shaderProgram, vertexShader);
314 |           gl.attachShader(shaderProgram, fragmentShader);
315 |           gl.linkProgram(shaderProgram);
316 | 
317 |           if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
318 |               alert("Could not initialise shaders");
319 |           }
320 | 
321 |           gl.useProgram(shaderProgram);
322 | 
323 |           shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
324 |           gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
325 | 
326 |           shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
327 |           gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
328 | 
329 |           shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
330 |           shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
331 |       }
332 | 
333 | 
334 |       var mvMatrix = mat4.create();
335 |       var mvMatrixStack = [];
336 |       var pMatrix = mat4.create();
337 | 
338 |       function mvPushMatrix() {
339 |           var copy = mat4.create();
340 |           mat4.set(mvMatrix, copy);
341 |           mvMatrixStack.push(copy);
342 |       }
343 | 
344 |       function mvPopMatrix() {
345 |           if (mvMatrixStack.length == 0) {
346 |               throw "Invalid popMatrix!";
347 |           }
348 |           mvMatrix = mvMatrixStack.pop();
349 |       }
350 | 
351 | 
352 |       function setMatrixUniforms() {
353 |           gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
354 |           gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
355 |       }
356 | 
357 | 
358 |       function degToRad(degrees) {
359 |           return degrees * Math.PI / 180;
360 |       }
361 | 
362 | 
363 |       var pyramidVertexPositionBuffer;
364 |       var pyramidVertexColorBuffer;
365 |       var cubeVertexPositionBuffer;
366 |       var cubeVertexColorBuffer;
367 |       var cubeVertexIndexBuffer;
368 | 
369 |       function initBuffers() {
370 |           pyramidVertexPositionBuffer = gl.createBuffer();
371 |           gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexPositionBuffer);
372 |           var vertices = [
373 |               // Front face
374 |                0.0,  1.0,  0.0,
375 |               -1.0, -1.0,  1.0,
376 |                1.0, -1.0,  1.0,
377 | 
378 |               // Right face
379 |                0.0,  1.0,  0.0,
380 |                1.0, -1.0,  1.0,
381 |                1.0, -1.0, -1.0,
382 | 
383 |               // Back face
384 |                0.0,  1.0,  0.0,
385 |                1.0, -1.0, -1.0,
386 |               -1.0, -1.0, -1.0,
387 | 
388 |               // Left face
389 |                0.0,  1.0,  0.0,
390 |               -1.0, -1.0, -1.0,
391 |               -1.0, -1.0,  1.0
392 |           ];
393 |           gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
394 |           pyramidVertexPositionBuffer.itemSize = 3;
395 |           pyramidVertexPositionBuffer.numItems = 12;
396 | 
397 |           pyramidVertexColorBuffer = gl.createBuffer();
398 |           gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexColorBuffer);
399 |           var colors = [
400 |               // Front face
401 |               1.0, 0.0, 0.0, 1.0,
402 |               0.0, 1.0, 0.0, 1.0,
403 |               0.0, 0.0, 1.0, 1.0,
404 | 
405 |               // Right face
406 |               1.0, 0.0, 0.0, 1.0,
407 |               0.0, 0.0, 1.0, 1.0,
408 |               0.0, 1.0, 0.0, 1.0,
409 | 
410 |               // Back face
411 |               1.0, 0.0, 0.0, 1.0,
412 |               0.0, 1.0, 0.0, 1.0,
413 |               0.0, 0.0, 1.0, 1.0,
414 | 
415 |               // Left face
416 |               1.0, 0.0, 0.0, 1.0,
417 |               0.0, 0.0, 1.0, 1.0,
418 |               0.0, 1.0, 0.0, 1.0
419 |           ];
420 |           gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
421 |           pyramidVertexColorBuffer.itemSize = 4;
422 |           pyramidVertexColorBuffer.numItems = 12;
423 | 
424 | 
425 |           cubeVertexPositionBuffer = gl.createBuffer();
426 |           gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
427 |           vertices = [
428 |               // Front face
429 |               -1.0, -1.0,  1.0,
430 |                1.0, -1.0,  1.0,
431 |                1.0,  1.0,  1.0,
432 |               -1.0,  1.0,  1.0,
433 | 
434 |               // Back face
435 |               -1.0, -1.0, -1.0,
436 |               -1.0,  1.0, -1.0,
437 |                1.0,  1.0, -1.0,
438 |                1.0, -1.0, -1.0,
439 | 
440 |               // Top face
441 |               -1.0,  1.0, -1.0,
442 |               -1.0,  1.0,  1.0,
443 |                1.0,  1.0,  1.0,
444 |                1.0,  1.0, -1.0,
445 | 
446 |               // Bottom face
447 |               -1.0, -1.0, -1.0,
448 |                1.0, -1.0, -1.0,
449 |                1.0, -1.0,  1.0,
450 |               -1.0, -1.0,  1.0,
451 | 
452 |               // Right face
453 |                1.0, -1.0, -1.0,
454 |                1.0,  1.0, -1.0,
455 |                1.0,  1.0,  1.0,
456 |                1.0, -1.0,  1.0,
457 | 
458 |               // Left face
459 |               -1.0, -1.0, -1.0,
460 |               -1.0, -1.0,  1.0,
461 |               -1.0,  1.0,  1.0,
462 |               -1.0,  1.0, -1.0
463 |           ];
464 |           gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
465 |           cubeVertexPositionBuffer.itemSize = 3;
466 |           cubeVertexPositionBuffer.numItems = 24;
467 | 
468 |           cubeVertexColorBuffer = gl.createBuffer();
469 |           gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
470 |           colors = [
471 |               [1.0, 0.0, 0.0, 1.0], // Front face
472 |               [1.0, 1.0, 0.0, 1.0], // Back face
473 |               [0.0, 1.0, 0.0, 1.0], // Top face
474 |               [1.0, 0.5, 0.5, 1.0], // Bottom face
475 |               [1.0, 0.0, 1.0, 1.0], // Right face
476 |               [0.0, 0.0, 1.0, 1.0]  // Left face
477 |           ];
478 |           var unpackedColors = [];
479 |           for (var i in colors) {
480 |               var color = colors[i];
481 |               for (var j=0; j < 4; j++) {
482 |                   unpackedColors = unpackedColors.concat(color);
483 |               }
484 |           }
485 |           gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unpackedColors), gl.STATIC_DRAW);
486 |           cubeVertexColorBuffer.itemSize = 4;
487 |           cubeVertexColorBuffer.numItems = 24;
488 | 
489 |           cubeVertexIndexBuffer = gl.createBuffer();
490 |           gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
491 |           var cubeVertexIndices = [
492 |               0, 1, 2,      0, 2, 3,    // Front face
493 |               4, 5, 6,      4, 6, 7,    // Back face
494 |               8, 9, 10,     8, 10, 11,  // Top face
495 |               12, 13, 14,   12, 14, 15, // Bottom face
496 |               16, 17, 18,   16, 18, 19, // Right face
497 |               20, 21, 22,   20, 22, 23  // Left face
498 |           ];
499 |           gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
500 |           cubeVertexIndexBuffer.itemSize = 1;
501 |           cubeVertexIndexBuffer.numItems = 36;
502 |       }
503 | 
504 | 
505 |       var rPyramid = 0;
506 |       var rCube = 0;
507 | 
508 |       function drawScene() {
509 |           gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
510 |           gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
511 | 
512 |           mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
513 | 
514 |           mat4.identity(mvMatrix);
515 | 
516 |           mat4.translate(mvMatrix, [-1.5, 0.0, -8.0]);
517 | 
518 |           mvPushMatrix();
519 |           mat4.rotate(mvMatrix, degToRad(rPyramid), [0, 1, 0]);
520 | 
521 |           gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexPositionBuffer);
522 |           gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, pyramidVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
523 | 
524 |           gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexColorBuffer);
525 |           gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, pyramidVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
526 | 
527 |           setMatrixUniforms();
528 |           gl.drawArrays(gl.TRIANGLES, 0, pyramidVertexPositionBuffer.numItems);
529 | 
530 |           mvPopMatrix();
531 | 
532 | 
533 |           mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
534 | 
535 |           mvPushMatrix();
536 |           mat4.rotate(mvMatrix, degToRad(rCube), [1, 1, 1]);
537 | 
538 |           gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
539 |           gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
540 | 
541 |           gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
542 |           gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, cubeVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
543 | 
544 |           gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
545 |           setMatrixUniforms();
546 |           gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
547 | 
548 |           mvPopMatrix();
549 | 
550 |       }
551 | 
552 | 
553 |       var lastTime = 0;
554 | 
555 |       function animate() {
556 |           var timeNow = new Date().getTime();
557 |           if (lastTime != 0) {
558 |               var elapsed = timeNow - lastTime;
559 | 
560 |               rPyramid += (90 * elapsed) / 1000.0;
561 |               rCube -= (75 * elapsed) / 1000.0;
562 |           }
563 |           lastTime = timeNow;
564 |       }
565 | 
566 | 
567 |       function tick() {
568 |           requestAnimFrame(tick);
569 |           drawScene();
570 |           animate();
571 |       }
572 | 
573 | 
574 |       function webGLStart() {
575 |           var canvas = document.getElementById("webglcanvas");
576 |           initGL(canvas);
577 |           initShaders()
578 |           initBuffers();
579 | 
580 |           gl.clearColor(0.0, 0.0, 0.0, 1.0);
581 |           gl.enable(gl.DEPTH_TEST);
582 | 
583 |           tick();
584 |       }
585 | 
586 |   </script>
587 | </head>
588 | <body onload="webGLStart();">
589 |   <canvas id="webglcanvas"></canvas>
590 | </body>
591 | </html>


--------------------------------------------------------------------------------
/UIWebViewWebGL/en.lproj/InfoPlist.strings:
--------------------------------------------------------------------------------
1 | /* Localized versions of Info.plist keys */
2 | 
3 | 


--------------------------------------------------------------------------------
/UIWebViewWebGL/main.m:
--------------------------------------------------------------------------------
 1 | //
 2 | //  main.m
 3 | //  UIWebViewWebGL
 4 | //
 5 | //  Created by Nathan de Vries on 27/10/11.
 6 | //  Copyright (c) 2011 Nathan de Vries. All rights reserved.
 7 | //
 8 | 
 9 | #import <UIKit/UIKit.h>
10 | 
11 | #import "WGLAppDelegate.h"
12 | 
13 | int main(int argc, char *argv[])
14 | {
15 |     @autoreleasepool {
16 |         return UIApplicationMain(argc, argv, nil, NSStringFromClass([WGLAppDelegate class]));
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------