simplify wasm loading

examples/index.html

@@ -10,7 +10,9 @@
 <script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
 
 <script type="text/javascript">
-    let aladin;
+    
+
+    var aladin;
     A.init.then(() => {
         /*aladin = A.aladin('#aladin-lite-div', {fov: 360, fullScreen: true, cooFrame: 'galactic'});
         aladin.setProjection('MOL');

src/js/Aladin.js

@@ -1678,9 +1678,18 @@ A.hipsDefinitionFromURL = function(url, successCallback) {
 };
 
 A.init = (async () => {
-    Aladin.wasmLibs.webgl = await WebGLCtx();
+    const isWebGL2Supported = document
+        .createElement('canvas')
+        .getContext('webgl2');
+
+    // Check for webgl2 support
+    if (isWebGL2Supported) {
+        Aladin.wasmLibs.webgl = await import('../../pkg-webgl2');
+    } else {
+        // WebGL1 not supported
+        // According to caniuse, https://caniuse.com/webgl2, webgl2 is supported by 89% of users
+        throw "WebGL2 not supported by your browser";
+    }
 })();
 
-// this is ugly for sure and there must be a better way (export A ??)
-window.A = A;
-
+window.A = A;

src/js/View.js

@@ -38,7 +38,6 @@ import { AladinUtils } from "./AladinUtils.js";
 import { Utils } from "./Utils.js";
 import { SimbadPointer } from "./SimbadPointer.js";
 import { Stats } from "./libs/Stats.js";
-import { ColorMap } from "./ColorMap.js";
 import { Footprint } from "./Footprint.js";
 import { Circle } from "./Circle.js";
 import { CooFrameEnum } from "./CooFrameEnum.js";
@@ -56,14 +55,14 @@ export let View = (function () {
         this.options = aladin.options;
         this.aladinDiv = this.aladin.aladinDiv;
         this.popup = new Popup(this.aladinDiv, this);
-        this.webGL2Support = WebGLCtx.checkForWebGL2Support();
         this.createCanvases();
         // Init the WebGL context
         // At this point, the view has been created so the image canvas too
         try {
             // Start our Rust application. You can find `WebClient` in `src/lib.rs`
             // The Rust part should also create a new WebGL2 or WebGL1 context depending on the WebGL2 brower support.
-            this.aladin.webglAPI = new WebGLCtx.init(Aladin.wasmLibs.webgl, this.aladinDiv.id);
+            const webglCtx = new WebGLCtx(Aladin.wasmLibs.webgl, this.aladinDiv.id);
+            this.aladin.webglAPI = webglCtx.webclient;
         } catch (e) {
             // For browsers not supporting WebGL2:
             // 1. Print the original exception message in the console
@@ -258,7 +257,7 @@ export let View = (function () {
         this.mouseMoveIncrement = 160 / this.largestDim;
 
         // reinitialize 2D context
-        this.imageCtx = this.imageCanvas.getContext(this.webGL2Support ? "webgl2" : "webgl");
+        this.imageCtx = this.imageCanvas.getContext("webgl2");
         //this.aladinDiv.style.width = this.width + "px";
         //this.aladinDiv.style.height = this.height + "px";
 

src/js/WebGL.js

@@ -6,31 +6,13 @@ import colormaps from '../img/colormaps/colormaps.png';
 import letters from '../img/letters.png';
 import lettersMetadata from '../img/letters.json';
 
-
 export let WebGLCtx = (function() {
-    /** Constructor */
-    async function WebGLCtx () {
-        // Check for webgl2 support
-        const webGL2support = checkForWebGL2Support();
-
-        if (webGL2support) {
-            return await import('../../pkg-webgl2');
-        } else {
-            // WebGL1 not supported
-            // According to caniuse, https://caniuse.com/webgl2, webgl2 is supported by 89% of users
-            throw "WebGL2 not supported by your browser";
-            //return await import('../core/pkg-webgl1');
-        }
-    };
-
-    WebGLCtx.checkForWebGL2Support = checkForWebGL2Support;
-
-    WebGLCtx.init = function(ctx, div) {
-        //const shaders = WebGLCtx.checkForWebGL2Support() ? loadShadersWebGL2() : loadShadersWebGL1();
-        let shaders = loadShadersWebGL2();
-        //shaders = shaders.map((s) => { return {id: s.id, content: s.content.sourceCode}; });
+    // constructor
+    function WebGLCtx(ctx, div) {
+        const shaders = loadShadersWebGL2();
         const lettersMeta = JSON.stringify(lettersMetadata);
-        return new ctx.WebClient(
+
+        this.webclient = new ctx.WebClient(
             div,
             shaders,
             {
@@ -40,20 +22,8 @@ export let WebGLCtx = (function() {
                 'letters_metadata': lettersMeta,
             }
         );
-    }
+    };
 
     return WebGLCtx;
 })();
 
-function checkForWebGL2Support() {        
-    const gl = document
-        .createElement('canvas')
-        .getContext('webgl2');
-    return gl;
-    /*
-    // Run WebGL1 version only
-    return false;
-    */
-}
-
-