Add WebGL compatibility

src/graphics/graphics-library/helper/enable-extension.ts

@@ -1,4 +1,5 @@
 import { Insights } from '../../rendering/insights';
+import { UniversalRenderingContext } from '../universal-rendering-context';
 
 const extensions: Map<string, any> = new Map();
 
@@ -11,7 +12,7 @@ const logExtensions = () => {
 };
 
 export const tryEnableExtension = (
-  gl: WebGL2RenderingContext,
+  gl: UniversalRenderingContext,
   name: string
 ): any | null => {
   if (extensions.has(name)) {
@@ -30,7 +31,7 @@ export const tryEnableExtension = (
   return extension;
 };
 
-export const enableExtension = (gl: WebGL2RenderingContext, name: string): any => {
+export const enableExtension = (gl: UniversalRenderingContext, name: string): any => {
   const extension = tryEnableExtension(gl, name);
 
   if (extension === null) {

src/graphics/graphics-library/helper/get-webgl2-context.ts

@@ -1,9 +0,0 @@
-export const getWebGl2Context = (canvas: HTMLCanvasElement): WebGL2RenderingContext => {
-  const gl = canvas.getContext('webgl2');
-
-  if (!gl) {
-    throw new Error('WebGl2 is not supported');
-  }
-
-  return gl;
-};

src/graphics/graphics-library/helper/load-uniform.ts

@@ -1,20 +1,21 @@
 import { mat3, ReadonlyVec3, vec2, vec3 } from 'gl-matrix';
+import { UniversalRenderingContext } from '../universal-rendering-context';
 
 const loaderMat3 = mat3.create();
 
 export const loadUniform = (
-  gl: WebGL2RenderingContext,
+  gl: UniversalRenderingContext,
   value: any,
   type: GLenum,
   location: WebGLUniformLocation
 ): any => {
   const converters: Map<
     GLenum,
-    (gl: WebGL2RenderingContext, value: any, location: WebGLUniformLocation) => void
+    (gl: UniversalRenderingContext, value: any, location: WebGLUniformLocation) => void
   > = new Map();
   {
-    converters.set(WebGL2RenderingContext.FLOAT, (gl, v, l) => {
-      if (v instanceof Array) {
+    converters.set(WebGLRenderingContext.FLOAT, (gl, v, l) => {
+      if (v instanceof Array || v[0] instanceof Float32Array) {
         if (v.length == 0) {
           return;
         }
@@ -25,19 +26,18 @@ export const loadUniform = (
       }
     });
 
-    converters.set(WebGL2RenderingContext.FLOAT_VEC2, (gl, v: vec2 | Array<vec2>, l) => {
+    converters.set(WebGLRenderingContext.FLOAT_VEC2, (gl, v: vec2 | Array<vec2>, l) => {
       if (v.length == 0) {
         return;
       }
 
-      if (v[0] instanceof Array) {
+      if (v[0] instanceof Array || v[0] instanceof Float32Array) {
         const result = new Float32Array(v.length * 2);
 
         for (let i = 0; i < v.length; i++) {
           result[2 * i] = (v[i] as Array<number>).x;
           result[2 * i + 1] = (v[i] as Array<number>).y;
         }
-
         gl.uniform2fv(l, result);
       } else {
         gl.uniform2fv(l, v as vec2);
@@ -45,13 +45,13 @@ export const loadUniform = (
     });
 
     converters.set(
-      WebGL2RenderingContext.FLOAT_VEC3,
+      WebGLRenderingContext.FLOAT_VEC3,
       (gl, v: ReadonlyVec3 | Array<vec3>, l) => {
         if (v.length == 0) {
           return;
         }
 
-        if (v[0] instanceof Array) {
+        if (v[0] instanceof Array || v[0] instanceof Float32Array) {
           const result = new Float32Array(v.length * 3);
 
           for (let i = 0; i < v.length; i++) {
@@ -67,11 +67,19 @@ export const loadUniform = (
       }
     );
 
-    converters.set(WebGL2RenderingContext.FLOAT_MAT3, (gl, v, l) => {
-      gl.uniformMatrix3fv(l, true, mat3.fromMat2d(loaderMat3, v));
+    converters.set(WebGLRenderingContext.FLOAT_MAT3, (gl, v, l) => {
+      if (gl.isWebGL2) {
+        gl.uniformMatrix3fv(l, true, mat3.fromMat2d(loaderMat3, v));
+      } else {
+        gl.uniformMatrix3fv(
+          l,
+          false,
+          mat3.transpose(mat3.create(), mat3.fromMat2d(loaderMat3, v))
+        );
+      }
     });
 
-    converters.set(WebGL2RenderingContext.BOOL, (gl, v, l) => gl.uniform1i(l, v));
+    converters.set(WebGLRenderingContext.BOOL, (gl, v, l) => gl.uniform1i(l, v));
 
     if (!converters.has(type)) {
       throw new Error(`Unimplemented webgl type: ${type}`);

src/graphics/graphics-library/helper/stopwatch.ts

@@ -1,3 +1,4 @@
+import { UniversalRenderingContext } from '../universal-rendering-context';
 import { enableExtension } from './enable-extension';
 
 enum StopwatchState {
@@ -13,7 +14,7 @@ export class WebGlStopwatch {
   private timerExtension: any;
   private timerQuery?: WebGLQuery;
 
-  constructor(private gl: WebGL2RenderingContext) {
+  constructor(private gl: UniversalRenderingContext) {
     this.timerExtension = enableExtension(gl, 'EXT_disjoint_timer_query_webgl2');
   }