Update WebGLExtensions.js

refactor WebGLExtensions to class
epreston · Dec 1, 2023 · 0112125 · 0112125
1 parent 9664f28
commit 0112125
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 35 deletions.
diff --git a/packages/renderers/src/WebGLRenderer.js b/packages/renderers/src/WebGLRenderer.js
@@ -312,7 +312,7 @@ class WebGLRenderer {
     let uniformsGroups;
 
     function initGLContext() {
-      extensions = WebGLExtensions(_gl);
+      extensions = new WebGLExtensions(_gl);
 
       capabilities = WebGLCapabilities(_gl, extensions, parameters);
 

diff --git a/packages/webgl/src/WebGLExtensions.js b/packages/webgl/src/WebGLExtensions.js
@@ -1,52 +1,58 @@
-function WebGLExtensions(gl) {
-  const extensions = {};
+class WebGLExtensions {
+  /** !param { WebGL2RenderingContext} gl */
+  constructor(gl) {
+    this.gl = gl;
+    this.extensions = [];
 
-  function getExtension(name) {
-    if (extensions[name] !== undefined) {
-      return extensions[name];
+    // debug: gl.getSupportedExtensions();
+  }
+
+  _getExtension(name) {
+    if (this.extensions[name] !== undefined) {
+      return this.extensions[name];
     }
 
     let extension;
 
     switch (name) {
       case 'WEBGL_compressed_texture_pvrtc':
         extension =
-          gl.getExtension('WEBGL_compressed_texture_pvrtc') ||
-          gl.getExtension('WEBKIT_WEBGL_compressed_texture_pvrtc');
+          this.gl.getExtension('WEBGL_compressed_texture_pvrtc') ||
+          this.gl.getExtension('WEBKIT_WEBGL_compressed_texture_pvrtc');
         break;
 
       default:
-        extension = gl.getExtension(name);
+        extension = this.gl.getExtension(name);
     }
 
-    extensions[name] = extension;
+    this.extensions[name] = extension;
 
     return extension;
   }
 
-  return {
-    has(name) {
-      return getExtension(name) !== null;
-    },
+  //
 
-    init(capabilities) {
-      // EP: some extensions need to be initialised by a query to function
-      // Browser support percentages sourced from https://web3dsurvey.com/webgl2
-      getExtension('EXT_color_buffer_float'); // 99.8%
-      getExtension('OES_texture_float_linear'); // 86.31%
-      getExtension('EXT_color_buffer_half_float'); // 92.2%
-    },
+  has(name) {
+    return this._getExtension(name) !== null;
+  }
 
-    get(name) {
-      const extension = getExtension(name);
+  init(capabilities) {
+    // EP: some extensions need to be initialised by a query to function
+    // Browser support percentages sourced from https://web3dsurvey.com/webgl2
+    this._getExtension('EXT_color_buffer_float'); // 99.8%
+    this._getExtension('OES_texture_float_linear'); // 86.31%
+    this._getExtension('EXT_color_buffer_half_float'); // 92.2%
+  }
 
-      if (extension === null) {
-        console.warn(`WebGLRenderer: ${name} extension not supported.`);
-      }
+  get(name) {
+    const extension = this._getExtension(name);
 
-      return extension;
+    if (extension === null) {
+      console.warn(`WebGLRenderer: ${name} extension not supported.`);
     }
-  };
+
+    return extension;
+  }
 }
 
 export { WebGLExtensions };
diff --git a/packages/webgl/tests/WebGLExtensions.unit.test.js b/packages/webgl/tests/WebGLExtensions.unit.test.js
@@ -4,6 +4,9 @@ import { WebGLExtensions } from '../src/WebGLExtensions.js';
 
 const WebglContextMock = function (supportedExtensions) {
   this.supportedExtensions = supportedExtensions || [];
+  this.getSupportedExtensions = function () {
+    return this.supportedExtensions;
+  };
   this.getExtension = function (name) {
     if (this.supportedExtensions.indexOf(name) > -1) {
       return { name: name };
@@ -15,20 +18,21 @@ const WebglContextMock = function (supportedExtensions) {
 
 describe('WebGL', () => {
   describe('WebGLExtensions', () => {
-    it('should expose a function', () => {
+    it('should expose a class', () => {
       expect(WebGLExtensions).toBeDefined();
     });
 
     test('constructor', () => {
       const gl = new WebglContextMock();
-      const extensions = WebGLExtensions(gl);
+      const extensions = new WebGLExtensions(gl);
 
       expect(extensions).toBeInstanceOf(Object);
+      expect(extensions).toBeInstanceOf(WebGLExtensions);
     });
 
     test('has', () => {
       const gl = new WebglContextMock(['Extension1', 'Extension2']);
-      const extensions = WebGLExtensions(gl);
+      const extensions = new WebGLExtensions(gl);
 
       expect(extensions.has('Extension1')).toBeTruthy();
       expect(extensions.has('Extension2')).toBeTruthy();
@@ -38,15 +42,15 @@ describe('WebGL', () => {
 
     test('has (with aliases)', () => {
       const gl = new WebglContextMock(['WEBKIT_WEBGL_compressed_texture_pvrtc']);
-      const extensions = WebGLExtensions(gl);
+      const extensions = new WebGLExtensions(gl);
 
       expect(extensions.has('WEBGL_compressed_texture_pvrtc')).toBeTruthy();
       expect(extensions.has('NonExistingExtension')).toBeFalsy();
     });
 
     test('get', () => {
       const gl = new WebglContextMock(['Extension1', 'Extension2']);
-      const extensions = WebGLExtensions(gl);
+      const extensions = new WebGLExtensions(gl);
 
       expect(extensions.get('Extension1')).toBeTruthy();
       expect(extensions.get('Extension2')).toBeTruthy();
@@ -58,7 +62,7 @@ describe('WebGL', () => {
 
     test('get (with aliases)', () => {
       const gl = new WebglContextMock(['WEBKIT_WEBGL_compressed_texture_pvrtc']);
-      const extensions = WebGLExtensions(gl);
+      const extensions = new WebGLExtensions(gl);
 
       expect(extensions.get('WEBGL_compressed_texture_pvrtc')).toBeTruthy();
 
@@ -69,7 +73,7 @@ describe('WebGL', () => {
 
     test('init', () => {
       const gl = new WebglContextMock();
-      const extensions = WebGLExtensions(gl);
+      const extensions = new WebGLExtensions(gl);
       extensions.init();
 
       expect(extensions).toBeDefined();