v3.6.1-beta

maint: add zenodo.json file

.github/workflows/api_doc.yml

@@ -37,7 +37,7 @@ jobs:
         uses: actions/configure-pages@v4
       - name: Build docs
         run: |
-          npm install -g jsdoc
+          npm install
           npm run doc
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

.github/workflows/npm-publish.yml

@@ -24,8 +24,6 @@ jobs:
         run: |
           curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
           source "$HOME/.cargo/env"
-          rustup default nightly
-          rustup component add rust-src --toolchain nightly-x86_64-unknown-linux-gnu
       - name: "Install wasm-pack"
         run: |
           curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y

.github/workflows/test.yml

@@ -22,8 +22,6 @@ jobs:
         run: |
           curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
           source "$HOME/.cargo/env"
-          rustup default nightly
-          rustup component add rust-src --toolchain nightly-x86_64-unknown-linux-gnu
       - name: "Install wasm-pack"
         run: |
           curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -y
@@ -32,7 +30,7 @@ jobs:
           npm install
       - name: "Build Aladin Lite"
         run: |
-          npm run build
+          npm run build:dbg
       - name: "Run the rust tests"
         run: |
           npm run test:build

.gitignore

@@ -0,0 +1,43 @@
+# vscode files
+.vscode/
+# for mac os users
+.DS_Store
+
+out/
+# deployment scripts
+deploy/
+# node dependencies
+node_modules/
+
+package-lock.json
+
+# rust tmp files for useful for the compilation phase
+src/core/Cargo.lock
+src/core/target/
+
+# this rust file is generated when compiling the code, so it is not
+# useful to put it on git
+src/core/src/shaders.rs
+
+## python related
+# python environment
+aladin-lite-venv
+# python cached files
+__pycache__/
+
+## API doc related
+# folder containing the generated HTML API documentation files
+docs/
+# style jsdoc files generated with npm run doc
+jsdoc-custom-styledocs
+# responsive jsdoc files generated with npm run doc
+jsdoc-make-responsivedocs
+
+## playwright testing framework related
+test-results/
+playwright-report/
+
+## packaged tar obtained from the cmd: npm run predeploy or npm run deploy
+aladin-lite*.tgz
+# folder where the generated bundle lies 
+dist/

.zenodo.json

@@ -0,0 +1,33 @@
+{
+    "license": "GPL-3.0",
+    "access_right": "open",
+    "description": "An astronomical HiPS visualizer in the browser ",
+    "keywords": ["astronomy", "visualizer", "images"],
+    "language": "eng",
+    "title": "Aladin Lite",
+    "grants": [
+        {
+            "id": "824064"
+        }
+    ],
+    "creators": [
+        {
+            "type": "ProjectLeader",
+            "orcid": "0000-0002-7123-773X",
+            "name": "Baumann, Matthieu",
+            "affiliation": "Université de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
+        },
+        {
+            "type": "ProjectLeader",
+            "orcid": "0000-0001-5818-2781",
+            "name": "Boch, Thomas",
+            "affiliation": "Université de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
+        },
+        {
+            "type": "ProjectMember",
+            "orcid": "0000-0001-5713-0998",
+            "name": "Marchand, Manon",
+            "affiliation": "Université de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
+        }
+    ]
+}

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelogs
 
+## unreleased
+
+* [fix] request a redraw after adding an array of footprints [PR #218]
+
 ## 3.5.1-beta
 
 * [feat] Add support for name removing in `removeOverlay` method

README.md

@@ -13,6 +13,7 @@ A new [API technical documentation](https://cds-astro.github.io/aladin-lite/) is
 
 [![Run tests](https://github.com/cds-astro/aladin-lite/actions/workflows/test.yml/badge.svg)](https://github.com/cds-astro/aladin-lite/actions/workflows/test.yml)
 [![API Documentation](https://img.shields.io/badge/API-documentation-blue.svg)](https://cds-astro.github.io/aladin-lite)
+[![Releases page](https://img.shields.io/badge/Releases-forge-yellow.svg)](https://aladin.cds.unistra.fr/AladinLite/doc/release/)
 
 Aladin Lite is available [at this link](https://aladin.u-strasbg.fr/AladinLite).
 
@@ -47,6 +48,8 @@ Editable examples showing the API can also be found [here](https://aladin.cds.un
 
 ## Embed it into your projects
 
+**Terms of use**: you are welcome to integrate Aladin Lite in your web pages and to customize its GUI to your needs, but **please leave the Aladin logo and link intact** at the bottom right of the view.
+
 You can embed Aladin Lite it into your webpages in two ways
 
 ### The vanilla way
@@ -87,6 +90,7 @@ Aladin Lite can be imported with:
 ```html
 <script type="module">
     import A from 'aladin-lite';
+    // your code...
 </script>
 ```
 
@@ -138,12 +142,6 @@ to compile the core project into WebAssembly.
 Follow the steps from the Rust official website [here](https://www.rust-lang.org/learn/get-started)
 You will also need [wasm-pack](https://rustwasm.github.io/wasm-pack/), a tool helping compiling rust into a proper .wasm file.
 
-Once it's installed you will need to switch to the nightly rust version:
-
-```sh
-rustup default nightly
-```
-
 Then you can build the project:
 
 ```sh
@@ -156,10 +154,6 @@ npm run build
 > ```sh
 > cargo install wasm-pack --version ~0.12
 > ```
-> - Make sure you are using the rust **nightly** toolchain
-> ```sh
-> rustup default nightly
-> ```
 > - Remove your `src/core/Cargo.lock` file and `src/core/target` directory -- this ensures that you'd escape any bad compilation state:
 > ```sh
 > git clean -di

codemeta.json

@@ -8,8 +8,8 @@
     "dateModified": "2023-01-31",
     "issueTracker": "https://github.com/cds-astro/aladin-lite/issues",
     "name": "Aladin Lite",
-    "version": "3.5.1-beta",
-    "softwareVersion": "3.5.1-beta",
+    "version": "3.6.0-beta",
+    "softwareVersion": "3.6.0-beta",
     "description": "An astronomical HiPS visualizer in the browser.",
     "identifier": "10.5281/zenodo.7638833",
     "applicationCategory": "Astronomy, Visualization",

examples/CDS_P_DSS2_color/properties

@@ -0,0 +1,45 @@
+hips_doi             = 10.26093/cds/aladin/ht9n-7r
+creator_did          = ivo://CDS/P/DSS2/color
+obs_collection       = DSS colored
+obs_title            = DSS colored
+obs_description      = Color composition generated by CDS. This HiPS survey is based on 2 others HiPS surveys, respectively DSS2-red and DSS2-blue HiPS, both of them directly generated from original scanned plates downloaded from STScI site. The red component has been built from POSS-II F, AAO-SES,SR and SERC-ER plates. The blue component has been build from POSS-II J and SERC-J,EJ. The green component is based on the mean of other components. Three missing plates from red survey (253, 260, 359) has been replaced by pixels from the DSSColor STScI jpeg survey. The 11 missing blue plates (mainly in galactic plane) have not been replaced (only red component).
+obs_copyright        = Digitized Sky Survey - STScI/NASA, Colored & Healpixed by CDS
+obs_copyright_url    = http://archive.stsci.edu/dss/copyright.html
+client_category      = Image/Optical/DSS
+client_sort_key      = 03-00
+hips_builder         = Aladin/HipsGen v10.123
+hips_creation_date   = 2010-05-01T19:05Z
+hips_release_date    = 2019-05-07T10:55Z
+hips_creator         = Oberto A. (CDS) , Fernique P. (CDS)
+hips_version         = 1.4
+hips_order           = 7
+hips_frame           = equatorial
+hips_tile_width      = 512
+hips_tile_format     = jpeg
+dataproduct_type     = image
+client_application   = AladinLite
+hips_status          = public partial unclonable
+hips_rgb_red         = DSS2Merged [1488.0 8488.8125 14666.0 Linear]
+hips_rgb_blue        = DSS2-blue-XJ-S [4286.0 12122.5 19959.0 Linear]
+hips_hierarchy       = median
+hips_pixel_scale     = 2.236E-4
+hips_initial_ra      = 085.30251
+hips_initial_dec     = -02.25468
+hips_initial_fov     = 2
+moc_sky_fraction     = 0.001302
+hips_copyright       = CNRS/Unistra
+obs_ack              = The Digitized Sky Surveys were produced at the Space Telescope Science Institute under U.S. Government grant NAG W-2166. The images of these surveys are based on photographic data obtained using the Oschin Schmidt Telescope on Palomar Mountain and the UK Schmidt Telescope. The plates were processed into the present compressed digital form with the permission of these institutions. The National Geographic Society - Palomar Observatory Sky Atlas (POSS-I) was made by the California Institute of Technology with grants from the National Geographic Society. The Second Palomar Observatory Sky Survey (POSS-II) was made by the California Institute of Technology with funds from the National Science Foundation, the National Geographic Society, the Sloan Foundation, the Samuel Oschin Foundation, and the Eastman Kodak Corporation. The Oschin Schmidt Telescope is operated by the California Institute of Technology and Palomar Observatory. The UK Schmidt Telescope was operated by the Royal Observatory Edinburgh, with funding from the UK Science and Engineering Research Council (later the UK Particle Physics and Astronomy Research Council), until 1988 June, and thereafter by the Anglo-Australian Observatory. The blue plates of the southern Sky Atlas and its Equatorial Extension (together known as the SERC-J), as well as the Equatorial Red (ER), and the Second Epoch [red] Survey (SES) were all taken with the UK Schmidt. Supplemental funding for sky-survey work at the ST ScI is provided by the European Southern Observatory.
+prov_progenitor      = STScI
+bib_reference        = 1996ASPC..101...88L
+bib_reference_url    = http://cdsads.u-strasbg.fr/abs/1996ASPC..101...88L
+t_min                = 42413
+t_max                = 51179
+obs_regime           = Optical
+em_min               = 4e-7
+em_max               = 6e-7
+hips_order_min       = 0
+dataproduct_subtype  = color
+hipsgen_date         = 2019-05-07T10:55Z
+hipsgen_params       = out=/asd-volumes/sc1-asd-volume8/DSS/DSSColor UPDATE
+hipsgen_date_1       = 2024-09-10T16:50Z
+hipsgen_params_1     = in=https://alasky.cds.unistra.fr/DSS/DSSColor/ out=./CDS_P_DSS2_color region=3/357 order=5 MIRROR

examples/al-aas225.html

@@ -16,9 +16,9 @@
         simbad.addSources([A.marker(204.97010833333336, 0.8400166666666667, {popupTitle: 'NGC 5257', popupDesc: '<em>Object type:</em> HII galaxy<br/><em>Morphological type:</em> Sbc<br/><br/>More info <a href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NGC+5257">in Simbad</a>'}), A.marker(204.9903125, 0.8309694444444445,  {popupTitle: 'NGC 5258', popupDesc: '<em>Object type:</em>  Galaxy in Pair of Galaxies <br/><em>Morphological type:</em> Sb<br/><br/>More info <a href="https://simbad.u-strasbg.fr/simbad/sim-id?Ident=NGC+5258">in Simbad</a>'})]);
 
         var overlay = A.graphicOverlay({color: '#aa2222', lineWidth: 4});
+        overlay.addFootprints(A.polygon([[204.970214, 0.81206], [204.97110047, 0.80993368], [204.978723, 0.79165], [204.999152, 0.800162], [204.99482125, 0.81055582], [205.002941, 0.813851], [204.99986816, 0.82141125], [205.010312, 0.825578], [205.002112, 0.846123], [204.981546, 0.837916], [204.98157771, 0.83783654], [204.962977, 0.830202], [204.9703941, 0.81213504]]));
 
         aladin.addOverlay(overlay);
-        overlay.addFootprints(A.polygon([[204.970214, 0.81206], [204.97110047, 0.80993368], [204.978723, 0.79165], [204.999152, 0.800162], [204.99482125, 0.81055582], [205.002941, 0.813851], [204.99986816, 0.82141125], [205.010312, 0.825578], [205.002112, 0.846123], [204.981546, 0.837916], [204.98157771, 0.83783654], [204.962977, 0.830202], [204.9703941, 0.81213504]]));
 
         aladin.displayJPG('http://images.ipac.caltech.edu/esahubble/heic0810at/esahubble_heic0810at_1600.jpg');
     });

examples/al-adass2022.html

@@ -10,8 +10,9 @@
     import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {showSettingsControl: true, survey: "P/PanSTARRS/DR1/color-z-zg-g", showReticle: false, projection: "AIT", cooFrame: 'icrs', target: "stephan's quintet", fov: 1000, showGotoControl: false, showFrame: false, fullScreen: true, showLayersControl: true, showCooGridControl: false});
-	aladin.showHealpixGrid(true);
+        let startFov = 1000;
+        aladin = A.aladin('#aladin-lite-div', {showSettingsControl: true, survey: "P/PanSTARRS/DR1/color-z-zg-g", showReticle: false, projection: "AIT", cooFrame: 'icrs', target: "stephan's quintet", fov: startFov, showGotoControl: false, showFrame: false, fullScreen: true, showLayersControl: true, showCooGridControl: false});
+
         const chft = aladin.createImageSurvey('CFHT', "CFHT deep view of NGC7331 and Stephan's quintet u+g+r", "https://cds.unistra.fr/~derriere/PR_HiPS/2022_Duc/", null, null, {imgFormat: 'png'});
         const nircamJWST = aladin.createImageSurvey('Nircam', "Stephans Quintet NIRCam+MIRI", "http://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_NIRCam+MIRI/", null, null, {imgFormat: 'png', colormap: "viridis"});
         
@@ -21,7 +22,7 @@
         aladin.getOverlayImageLayer("CFHT").toggle();
         aladin.getOverlayImageLayer("Nircam").toggle();
 
-        let fov = 360;
+        let fov = startFov;
         let rotation = 0;
 
         setInterval(function zoom() {

examples/al-additive-blend.html

@@ -5,7 +5,8 @@
 <body>
     <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 <script type="module">
-    import A from '../src/js/A.js';
+import A from '../src/js/A.js';
+
 A.init.then(() => {
     let aladin = A.aladin('#aladin-lite-div', {projection: "TAN", survey: "P/HSC/DR2/deep/g", target: '02 21 36.529 -05 31 20.16', fov: 0.1});
 
@@ -16,6 +17,7 @@ A.init.then(() => {
 
     const HSCRedSurvey = aladin.newImageSurvey('P/HSC/DR2/deep/r', {imgFormat: 'fits', colormap: "red", minCut: 0.34228, maxCut: 2.75785, additive: true, stretch: "asinh"});
     const HSCBlueSurvey = aladin.newImageSurvey('P/HSC/DR2/deep/z', {imgFormat: 'fits', colormap: "blue", minCut: -0.01218, maxCut: 2.27397, additive: true, stretch: "asinh"});
+    HSCRedSurvey.setColormap('red', {stretch: 'linear'});
 
     aladin.setOverlayImageLayer('P/HSC/DR2/deep/r', 'hsc red layer');
     aladin.setOverlayImageLayer('P/HSC/DR2/deep/z', 'hsc blue layer');

examples/al-cfht.html

@@ -10,7 +10,7 @@
   import A from '../src/js/A.js';
   let aladin;
   A.init.then(() => {
-      aladin = A.aladin('#aladin-lite-div', {survey: "data/hips/PanSTARRS_DR1_color-z-zg-g", fov:2.0, target: "22 35 58.39 +33 57 57.8", showSettingsControl: true, log: false});
+      aladin = A.aladin('#aladin-lite-div', {samp: true, survey: "data/hips/PanSTARRS_DR1_color-z-zg-g", fov:2.0, target: "22 35 58.39 +33 57 57.8", showSettingsControl: true, log: false});
       aladin.setProjection('AIT');
       let cfht = aladin.createImageSurvey("CFHT", "CFHT MegaCam u+g+r", "./data/hips/CFHT", "equatorial", 10, {imgFormat: 'png'});
       let jwst1 = aladin.createImageSurvey("CDS/P/JWST/Stephans-Quintet/NIRCam+MIRI", "JWST NIRCam+MIRI", "data/hips/JWST_NIRCam_MIRI", null, null, {imgFormat: 'png'});

examples/al-change-cat-color.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
+    </head>
+<body>
+
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px">
+    <div class="box-content" style="width:200px">
+        <div style="display:inline-flex">
+            <label for="cat-color">Color</label>
+            <input type="color" id="cat-color" value="#ff0000">
+        </div>
+       
+    </div>
+</div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        var aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                fov: 1.5, // initial field of view in degrees
+                target: 'NGC 2175', // initial target
+            }
+        );
+
+        // Add a catalog
+        let cat = A.catalogFromSimbad('NGC 2175', 0.1, {onClick: 'showTable'});
+        aladin.addCatalog(cat);
+
+        // Logic for changing the color of catalog sources
+        let colorPicker = document.querySelector('#cat-color');
+        colorPicker.value = cat.color;
+        colorPicker.addEventListener('input', function (e) {
+            // Change the color of the catalog
+            cat.updateShape({color: this.value});
+        })
+
+        // Define the box
+        let catalogSettingsBox = A.box({
+            header: {
+                title: "Settings",
+            },
+            content: document.querySelectorAll('.box-content')[0],
+        });
+        catalogSettingsBox._hide();
+
+        // Define the button that toggles the box
+        let catalogSettingsBtn = A.button({
+            content: 'Catalog',
+            classList: ['catalogSettingsTogglerBtn'],
+            action(o) {
+                if (catalogSettingsBox.isHidden) {
+                    catalogSettingsBox._show({
+                        position: {
+                            nextTo: catalogSettingsBtn,
+                            direction: 'right',
+                        }
+                    })
+                } else {
+                    catalogSettingsBox._hide()
+                }
+            }
+        });
+
+        aladin.addUI([catalogSettingsBtn, catalogSettingsBox])
+    });
+</script>
+<style>
+    .catalogSettingsTogglerBtn {
+        position: absolute;
+        top: 200px;
+        left: 0;
+    }
+</style>
+</body>
+</html>

examples/al-cuts-fits-hips.html

@@ -12,9 +12,11 @@
     A.init.then(() => {
     aladin = A.aladin('#aladin-lite-div', {projection: 'AIT', cooFrame: 'galactic', fov: 200, target: 'galactic center'});
         let dss = aladin.createImageSurvey("DSS blue band", "Color DSS blue HiPS", "http://alasky.cds.unistra.fr/DSS/DSS2-blue-XJ-S/", "equatorial", 9, {imgFormat: 'fits'})
+
         aladin.setBaseImageLayer(dss);
 
-        aladin.getBaseImageLayer().setCuts(2, 10000);
+        dss.setCuts(2, 10000);
+
 
     });
 </script>

examples/al-disto.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+  import A from '../src/js/A.js';
+  var aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {showContextMenu: true, survey: 'https://alasky.cds.unistra.fr/Pan-STARRS/DR1/color-i-r-g/', fov: 0.00833333333, target: '270.334079 66.730469'});
+        aladin.showHealpixGrid(true)
+    });
+</script>
+
+</body>
+</html>

examples/al-footprints.html

@@ -13,7 +13,7 @@
         // Start up Aladin Lite
         aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M 1', fov: 0.2, showContextMenu: true, fullScreen: true});
         var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3, lineDash: [2, 2]});
-        aladin.addOverlay(overlay);
+        /*aladin.addOverlay(overlay);
         overlay.addFootprints([
             A.polygon([[83.64287, 22.01713], [83.59872, 22.01692], [83.59852, 21.97629], [83.64295, 21.97629]], {hoverColor: 'green'}),
             A.polygon([[83.62807, 22.06330], [83.58397, 22.02280], [83.62792, 22.02258]]),
@@ -21,7 +21,7 @@
         ]);
         overlay.add(A.circle(83.66067, 22.03081, 0.04, {color: 'cyan'})); // radius in degrees
         overlay.add(A.vector(83.66067, 22.03081, 0.04, {color: 'cyan'})); // radius in degrees
-
+        */
         aladin.on("footprintClicked", (footprint, xyMouseCoords) => {
             console.log("footprint clicked catched: ", footprint, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
         })
@@ -35,7 +35,7 @@
             console.log("Object hovered stopped: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
         })
 
-        const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 10, {onClick: 'showTable', hoverColor: 'purple', limit: 10000});
+        const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 10, {onClick: 'showTable', selectionColor: "orange", hoverColor: 'red', limit: 10000});
         aladin.addCatalog(cat);
     });
 </script>

examples/al-gw.html

@@ -14,10 +14,10 @@
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {survey: "data/hips/CDS_P_DSS2_color", showReticle: true, showSurveyStackControl: true, showOverlayStackControl: false, projection: "TAN", target: '15 16 57.636 -60 55 7.49', showProjectionControl: true, realFullscreen: true, showZoomControl: true, showSimbadPointerControl: true, showShareControl: true, showContextMenu: true, showCooGridControl: true, fullScreen: true, showCooGrid: true, fov: 180, log: false});
 
-        var moc_0_99 = A.MOCFromURL("./data/gw/gw_0.9.fits",{ name: "GW 90%", color: "#ff0000", opacity: 0.0, lineWidth: 10, fill: false, perimeter: true});
-        var moc_0_95 = A.MOCFromURL("./data/gw/gw_0.6.fits",{ name: "GW 60%", color: "#00ff00", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true});
-        var moc_0_5 = A.MOCFromURL("./data/gw/gw_0.3.fits",{ name: "GW 30%", color: "#00ffff", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true});
-        var moc_0_2 = A.MOCFromURL("./data/gw/gw_0.1.fits",{ name: "GW 10%", color: "#ff00ff", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true});
+        var moc_0_99 = A.MOCFromURL("./data/gw/gw_0.9.fits",{ name: "GW 90%", color: "#ff0000", opacity: 0.7, lineWidth: 10, fill: false, perimeter: true});
+        var moc_0_95 = A.MOCFromURL("./data/gw/gw_0.6.fits",{ name: "GW 60%", color: "#00ff00", opacity: 0.3, lineWidth: 3, fill: false, perimeter: true});
+        var moc_0_5 = A.MOCFromURL("./data/gw/gw_0.3.fits",{ name: "GW 30%", color: "#00ffff", opacity: 0.2, lineWidth: 3, fill: true, perimeter: true});
+        var moc_0_2 = A.MOCFromURL("./data/gw/gw_0.1.fits",{ name: "GW 10%", color: "#ff00ff", opacity: 0.1, lineWidth: 3});
 
         aladin.addMOC(moc_0_99);
         aladin.addMOC(moc_0_95);

examples/al-hips-cube.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html>
+    <head>
+    </head>
+<body>
+
+
+<div id="aladin-lite-div" style="width: 768px; height: 512px"></div>
+<script>let aladin; let hips;</script>
+<script type="module">
+    import A from '../src/js/A.js';
+    A.init.then(() => {
+        aladin = A.aladin(
+            '#aladin-lite-div',
+            {
+                showSimbadPointerControl: true,
+                projection: 'AIT', // set a projection
+                fov: 360, // initial field of view in degrees
+                target: '169.58868 +45.74914', // initial target
+                cooFrame: 'icrs', // set galactic frame
+                reticleColor: '#ff89ff', // change reticle color
+                reticleSize: 64, // change reticle size
+                showContextMenu: true,
+                showFrame: true,
+                showZoomControl:true,
+                showSettingsControl:true,
+                showCooGrid: true,
+                fullScreen: true,
+                samp: true,
+            }
+        );
+
+        hips = aladin.newImageSurvey("https://alasky.cds.unistra.fr/GALFAHI/GALFAHI-Narrow-DR2/");
+        aladin.setImageLayer(hips)
+
+        /*let id;
+        aladin.on("zoomChanged", () => {
+            if (id)
+                clearTimeout(id);
+            id = setTimeout(() => {
+                console.log("wheel stopped, new cone search here")
+            }, 500);
+        })*/
+    });
+</script>
+<style>
+    .aladin-cat-browser-box {
+        width: 600px;
+    }
+</style>
+</body>
+</html>

examples/al-init-custom-options.html

@@ -16,7 +16,7 @@
                 showSimbadPointerControl: true,
                 survey: 'P/allWISE/color', // set initial image survey
                 projection: 'AIT', // set a projection
-                fov: 1.5, // initial field of view in degrees
+                fov: 360, // initial field of view in degrees
                 target: 'orion', // initial target
                 cooFrame: 'icrs', // set galactic frame
                 reticleColor: '#ff89ff', // change reticle color

examples/al-ivoa-sydney.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+    <head> </head>
+
+    <body>
+        <div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+        <script type="module">
+            import A from "../src/js/A.js";
+            let aladin;
+            A.init.then(() => {
+                aladin = A.aladin("#aladin-lite-div", {
+                    fullScreen: true,
+                    target: "abell 194",
+                    fov: 15,
+                    projection: "AIT",
+                    showContextMenu: true,
+                    showShareControl: true,
+                    samp: true,
+                    showSettingsControl: true,
+                    showZoomControl: true,
+                });
+
+                /*let pmraMean = null, pmdecMean = null;
+
+                const pmCat = A.catalogFromURL('./data/proper_motion.xml', {
+                    onClick: 'showTable',
+                    name: 'mean pm over HPX cells around LMC from GaiaDR2',
+                    hoverColor: 'yellow',
+                    selectionColor: 'white',
+                    color: 'yellow',
+                    // Footprint associated to sources
+                    shape: (s) => {
+                        // discard drawing a vector for big pm
+                        let totalPmSquared = s.data.pmra*s.data.pmra + s.data.pmdec*s.data.pmdec;
+                        if (totalPmSquared > 6) {
+                            return;
+                        }
+
+                        let color = rainbowColorMap((totalPmSquared - 2.5) / 2)
+
+                        // Compute the mean of pm over the catalog sources
+                        if (!pmraMean || !pmdecMean) {
+                            pmraMean = 0, pmdecMean = 0;
+                            for (var s of pmCat.getSources()) {
+                                pmraMean += +s.data.pmra;
+                                pmdecMean += +s.data.pmdec;
+                            }
+
+                            const numSources = pmCat.getSources().length;
+
+                            pmraMean /= numSources
+                            pmdecMean /= numSources
+                        }
+
+                        let dra = +s.data.pmra - pmraMean;
+                        let ddec = +s.data.pmdec - pmdecMean;
+
+                        return A.vector(
+                            s.ra,
+                            s.dec,
+                            s.ra + dra,
+                            s.dec + ddec,
+                            {lineWidth: 3, color}
+                        )
+                    }
+                });
+                aladin.addCatalog(pmCat);*/
+
+                /*aladin.addCatalog(
+                    A.catalogFromURL("./data/votable/obscore_rucio-sdc03.votable", {
+                        name: 'SKA discovery ObsCore around: SDC03',
+                        onClick: 'showTable',
+                        hoverColor: "yellow",
+                    })
+                );
+                aladin.addCatalog(
+                    A.catalogFromURL("./data/votable/obscore_rucio-abell194.votable", {
+                        name: 'SKA discovery ObsCore around: Abell 194',
+                        onClick: 'showTable',
+                        hoverColor: "yellow",
+                    })
+                );*/
+                aladin.addCatalog(
+                    A.catalogFromSKAORucio("abell 194", 15, {
+                        onClick: 'showTable',
+                        hoverColor: "yellow",
+                    })
+                );
+                aladin.addCatalog(
+                    A.catalogFromSKAORucio("m51", 15, {
+                        onClick: 'showTable',
+                        hoverColor: "yellow",
+                    })
+                );
+            });
+
+      function rainbowColorMap(value) {
+    // Ensure value is within range [0, 1]
+    value = Math.max(0, Math.min(1, value));
+
+    // Convert value to hue
+    var hue = (1 - value) * 240; // 240 is the maximum hue value for blue
+
+    // Convert HSV to RGB
+    var chroma = 1;
+    var x = chroma * (1 - Math.abs((hue / 60) % 2 - 1));
+    var r1, g1, b1;
+
+    if (hue >= 0 && hue < 60) {
+        [r1, g1, b1] = [chroma, x, 0];
+    } else if (hue >= 60 && hue < 120) {
+        [r1, g1, b1] = [x, chroma, 0];
+    } else if (hue >= 120 && hue < 180) {
+        [r1, g1, b1] = [0, chroma, x];
+    } else if (hue >= 180 && hue < 240) {
+        [r1, g1, b1] = [0, x, chroma];
+    }
+
+    var m = 1 - chroma;
+    var r = r1 + m;
+    var g = g1 + m;
+    var b = b1 + m;
+
+    // Convert RGB to HEX
+    r = Math.round(r * 255);
+    g = Math.round(g * 255);
+    b = Math.round(b * 255);
+    var colorHex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+
+    return colorHex;
+  }
+        </script>
+    </body>
+</html>

examples/al-moc-json.html

@@ -24,7 +24,7 @@
         //var json = {"3":[517],
         //"4":[2065, 2067]};        
         
-        var moc = A.MOCFromJSON(json, {opacity: 0.25, color: 'magenta', lineWidth: 1, adaptativeDisplay: false});
+        var moc = A.MOCFromJSON(json, {opacity: 0.5, color: 'magenta', lineWidth: 1, adaptativeDisplay: false});
         aladin.addMOC(moc);
     });
 </script>

examples/al-moc-sdss9.html

@@ -20,7 +20,7 @@
 
             console.log(moc.serialize("json"))
         });
-        var moc10 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=11&fmt=fits', {color: '#ffffff', perimeter: true, fillColor: '#aabbcc', opacity: 0.3, lineWidth: 3});
+        var moc10 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=11&fmt=fits', {color: '#ffffff', perimeter: true, fill:true, fillColor: '#aabbcc', opacity: 0.3, lineWidth: 3});
         var moc9 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=4&fmt=fits', {color: '#00ff00', opacity: 0.5, lineWidth: 3, perimeter: true});
 
         aladin.addMOC(moc11);

examples/al-onthefly.html

@@ -77,7 +77,7 @@
         });
 
         aladin.addCatalog(
-            A.catalogFromSKAORucio("ngc 1436", 15, {
+            A.catalogFromSKAORucio("abell 196", 90, {
                 onClick: 'showTable',
                 hoverColor: "yellow",
             })

examples/al-save-colormap.html

@@ -25,9 +25,9 @@
 
         aladin.setImageLayer(survey2);
 
-        /*setTimeout(() => {
+        setTimeout(() => {
             aladin.removeHiPSFromFavorites(survey3)
-        }, 10000);*/
+        }, 5000);
 
 
         aladin.addColormap('mycmap', ["lightblue", "red", "violet", "lightgreen"])

examples/al-set-colormap.html

@@ -15,10 +15,6 @@
         // 'rdbu', 'rdylbu', 'redtemperature', 'sinebow', 'spectral', 'summer', 'viridis', 'ylgnbu' and 'ylorbr'
         hips = aladin.getBaseImageLayer()
         hips.setColormap("cubehelix");
-
-        aladin.setImageSurvey('astron.nl/P/lotss_dr2_high')
-
-        //aladin.getBaseImageLayer().setColor([1.0, 0.0, 1.0, 1.0], { tf: 'Linear'} );
     });
 </script>
 

jsdoc-custom-style.css

@@ -0,0 +1,8 @@
+nav > h2 {
+    color: blue;
+    font-size: medium;
+}
+
+nav > ul > li > a {
+    font-size: medium;
+}

jsdoc-make-responsive.js

@@ -0,0 +1,7 @@
+var meta = document.createElement("meta");
+meta.name = "viewport"
+meta.content = "width=device-width, height=device-height, initial-scale=1.0, user-scalable=no"
+
+document.querySelector("head").appendChild(
+    meta
+)

jsdoc.json

@@ -10,13 +10,85 @@
         "allowUnknownTags": true,
         "dictionaries": ["jsdoc","closure"]
     },
+    "docdash": {
+        "typedefs": true,
+        "scripts": [
+            "jsdoc-custom-style.css",
+            "jsdoc-make-responsive.js"
+        ],
+        "sectionOrder": [
+            "Namespaces",
+            "Classes",
+            "Modules",
+            "Externals",
+            "Events",
+            "Mixins",
+            "Interfaces",
+            "Global"
+       ],
+       "openGraph": {
+            "title": "Aladin Lite API documentation",
+            "type": "website",
+            "image": "https://cds-astro.github.io/aladin-lite/aladin-logo.png",
+            "site_name": "Aladin Lite API documentation",
+            "url": "https://cds-astro.github.io/aladin-lite/"
+        },
+        "meta": {
+            "title": "Aladin Lite API documentation",
+            "description": "Aladin Lite API documentation",
+            "keyword": "astronomy"
+        },
+       "search": true,
+       "menu": {                      
+            "Aladin Lite portal": {
+                "href":"https://aladin.cds.unistra.fr/AladinLite",
+                "target":"_blank",
+                "class":"menu-item",
+                "id":"website_link"
+            },
+            "API examples": {
+                "href":"https://aladin.cds.unistra.fr/AladinLite/doc/API/examples",
+                "target":"_blank",
+                "class":"menu-item",
+                "id":"website_link"
+            },
+            "Documentation": {
+                "href":"https://aladin.cds.unistra.fr/AladinLite/doc/",
+                "target":"_blank",
+                "class":"menu-item",
+                "id":"website_link"
+            },
+            "Releases": {
+                "href":"https://aladin.cds.unistra.fr/AladinLite/doc/release",
+                "target":"_blank",
+                "class":"menu-item",
+                "id":"website_link"
+            },
+            "GitHub": {
+                "href":"https://github.com/cds-astro/aladin-lite",
+                "target":"_blank",
+                "class":"menu-item",
+                "id":"website_link"
+            }
+        }
+    },
     "templates": {
         "cleverLinks": true,
-        "monospaceLinks": true
+        "monospaceLinks": true,
+        "default": {
+            "staticFiles": {
+                "include": [
+                  "./jsdoc-custom-style.css",
+                  "./jsdoc-make-responsive.js"
+                ]
+            }
+        }
     },
     "opts": {
         "readme": "./README.md",
         "destination": "./docs/",
-        "tutorials": "./tutorials"
+        "template": "node_modules/docdash",
+        "encoding": "utf8",
+        "verbose": true
     }
-}
+}

package.json

@@ -2,7 +2,7 @@
   "homepage": "https://aladin.u-strasbg.fr/",
   "name": "aladin-lite",
   "type": "module",
-  "version": "3.5.1-beta",
+  "version": "3.6.1-beta",
   "description": "An astronomical HiPS visualizer in the browser",
   "author": "Thomas Boch and Matthieu Baumann",
   "license": "GPL-3",
@@ -30,8 +30,8 @@
     "HiPS"
   ],
   "scripts": {
-    "wasm": "wasm-pack build ./src/core --target web --release --out-name core -- --features webgl2 -Z build-std=panic_abort,std -Z build-std-features=panic_immediate_abort ",
-    "wasm:dbg": "wasm-pack build --dev ./src/core --target web --out-name core -- --features=webgl2,dbg -Z build-std=panic_abort,std -Z build-std-features=panic_immediate_abort ",
+    "wasm": "wasm-pack build ./src/core --target web --release --out-name core -- --features webgl2",
+    "wasm:dbg": "wasm-pack build --dev ./src/core --target web --out-name core -- --features=webgl2,dbg",
     "predeploy": "npm run build && rm -rf aladin-lite*.tgz && npm pack",
     "deploy": "python3 deploy/deploy.py",
     "build": "npm run wasm && vite build",
@@ -44,11 +44,12 @@
     "test:build": "cd src/core && cargo test --release --features webgl2",
     "test:playwright": "npx playwright test",
     "test:update-snapshots": "npx playwright test --update-snapshots",
-    "doc": "jsdoc -c jsdoc.json src/js src/js/shapes src/js/libs/astro && cp aladin-logo.png docs/",
+    "doc": "jsdoc -c jsdoc.json src/js src/js/shapes src/js/libs/astro && cp aladin-logo.png docs/ && cp jsdoc-custom-style.css docs/ && cp jsdoc-make-responsive.js docs/",
     "doc:dev": "npm run doc && open docs/index.html"
   },
   "devDependencies": {
     "@playwright/test": "^1.47.0",
+    "docdash": "^2.0.2",
     "jsdoc": "^4.0.2",
     "vite": "^4.3.8",
     "vite-plugin-glsl": "^1.1.2",

src/core/Cargo.toml

@@ -3,7 +3,7 @@ name = "aladin-lite"
 description = "Aladin Lite v3 introduces a new graphical engine written in Rust with the use of WebGL"
 license = "BSD-3-Clause"
 repository = "https://github.com/cds-astro/aladin-lite"
-version = "3.5.1-beta"
+version = "3.6.0-beta"
 authors = [ "baumannmatthieu0@gmail.com", "matthieu.baumann@astro.unistra.fr",]
 edition = "2018"
 
@@ -22,7 +22,7 @@ url-lite = "0.1.0"
 serde_json = "1.0.104"
 serde-wasm-bindgen = "0.5"
 enum_dispatch = "0.3.8"
-wasm-bindgen = "0.2.79"
+wasm-bindgen = "0.2.92"
 wasm-streams = "0.3.0"
 async-channel = "1.8.0"
 mapproj = "0.3.0"
@@ -50,13 +50,11 @@ optional = true
 
 [dependencies.healpix]
 package = "cdshealpix"
-git = "https://github.com/cds-astro/cds-healpix-rust"
-branch = "master"
+version = "0.7.0"
 
 [dependencies.moclib]
 package = "moc"
-git = "https://github.com/bmatthieu3/cds-moc-rust"
-branch = "overlap"
+version = "0.17.0"
 
 [dependencies.serde]
 version = "^1.0.183"

src/core/al-api/Cargo.toml

@@ -9,7 +9,7 @@ js-sys = "0.3.47"
 cgmath = "*"
 serde = { version = "^1.0.59", features = ["derive"] }
 serde-wasm-bindgen = "0.4"
-wasm-bindgen = "0.2.79"
+wasm-bindgen = "0.2.92"
 colorgrad = "0.6.2"
 
 [features]
@@ -76,16 +76,5 @@ incremental = true
 codegen-units = 256
 rpath = false
 
-[profile.release]
-opt-level = 'z'
-debug = false
-debug-assertions = false
-overflow-checks = false
-lto = true
-panic = 'unwind'
-incremental = false
-codegen-units = 16
-rpath = false
-
 [package.metadata.wasm-pack.profile.release]
 wasm-opt = true

src/core/al-api/src/hips.rs

@@ -47,6 +47,7 @@ pub struct HiPSProperties {
     hips_initial_fov: Option<f64>,
     hips_initial_ra: Option<f64>,
     hips_initial_dec: Option<f64>,
+    hips_cube_depth: Option<u32>,
 
     // Parametrable by the user
     #[allow(unused)]
@@ -78,6 +79,11 @@ impl HiPSProperties {
         self.min_order
     }
 
+    #[inline(always)]
+    pub fn get_cube_depth(&self) -> Option<u32> {
+        self.hips_cube_depth
+    }
+
     #[inline(always)]
     pub fn get_bitpix(&self) -> Option<i32> {
         self.bitpix

src/core/al-api/src/moc.rs

@@ -42,7 +42,7 @@ impl MOC {
             }
         };
 
-        let color = parse_color(hex_color, 1.0);
+        let color = parse_color(hex_color, opacity);
         let fill_color = parse_color(fill_color, opacity);
 
         Self {

src/core/al-core/Cargo.toml

@@ -19,7 +19,7 @@ futures = "0.3.25"
 colorgrad = "0.6.2"
 
 [dependencies.wasm-bindgen]
-version = "0.2.79"
+version = "0.2.92"
 
 [dev-dependencies]
 fontdue = "0.7.2"
@@ -88,16 +88,5 @@ incremental = true
 codegen-units = 256
 rpath = false
 
-[profile.release]
-opt-level = 'z'
-debug = false
-debug-assertions = false
-overflow-checks = false
-lto = true
-panic = 'unwind'
-incremental = false
-codegen-units = 16
-rpath = false
-
 [package.metadata.wasm-pack.profile.release]
 wasm-opt = true

src/core/al-core/src/image/bitmap.rs

@@ -19,16 +19,18 @@ where
         }
     }
 }
+use crate::texture::Tex3D;
 use wasm_bindgen::JsValue;
-use crate::texture::Texture2DArray;
 impl<F> Image for Bitmap<F>
 where
     F: ImageFormat + Clone,
 {
-    fn tex_sub_image_3d(&self, textures: &Texture2DArray, offset: &Vector3<i32>) -> Result<(), JsValue> {
-        textures[offset.z as usize]
-            .bind()
-            .tex_sub_image_2d_with_u32_and_u32_and_image_bitmap(offset.x, offset.y, &self.image);
+    fn insert_into_3d_texture<T: Tex3D>(
+        &self,
+        textures: &T,
+        offset: &Vector3<i32>,
+    ) -> Result<(), JsValue> {
+        textures.tex_sub_image_3d_with_image_bitmap(offset.x, offset.y, offset.z, &self.image);
 
         Ok(())
     }

src/core/al-core/src/image/canvas.rs

@@ -17,29 +17,28 @@ where
     }
 }
 
-use cgmath::Vector3;
-use wasm_bindgen::JsValue;
 use crate::image::format::ImageFormat;
 use crate::image::Image;
-use crate::texture::Texture2DArray;
+use crate::texture::Tex3D;
+use cgmath::Vector3;
+use wasm_bindgen::JsValue;
 impl<F> Image for Canvas<F>
 where
     F: ImageFormat,
 {
-    fn tex_sub_image_3d(
+    fn insert_into_3d_texture<T: Tex3D>(
         &self,
         // The texture array
-        textures: &Texture2DArray,
+        textures: &T,
         // An offset to write the image in the texture array
         offset: &Vector3<i32>,
     ) -> Result<(), JsValue> {
-        textures[offset.z as usize]
-            .bind()
-            .tex_sub_image_2d_with_u32_and_u32_and_html_canvas_element(
-                offset.x,
-                offset.y,
-                &self.canvas,
-            );
+        textures.tex_sub_image_3d_with_html_canvas_element(
+            offset.x,
+            offset.y,
+            offset.z,
+            &self.canvas,
+        );
 
         Ok(())
     }

src/core/al-core/src/image/fits.rs

@@ -116,64 +116,63 @@ impl<'a> Fits<'a> {
     }
 }*/
 
-use crate::image::Image;
-use crate::Texture2DArray;
+use crate::{image::Image, texture::Tex3D};
 impl Image for Fits<'_> {
-    fn tex_sub_image_3d(
+    fn insert_into_3d_texture<T: Tex3D>(
         &self,
         // The texture array
-        textures: &Texture2DArray,
+        textures: &T,
         // An offset to write the image in the texture array
         offset: &Vector3<i32>,
     ) -> Result<(), JsValue> {
         match &self.data {
             Data::U8(data) => {
                 let view = unsafe { R8UI::view(&data) };
-                textures[offset.z as usize]
-                    .bind()
-                    .tex_sub_image_2d_with_i32_and_i32_and_u32_and_type_and_opt_array_buffer_view(
-                        offset.x,
-                        offset.y,
-                        self.size.x,
-                        self.size.y,
-                        Some(view.as_ref()),
-                    );
+                textures.tex_sub_image_3d_with_opt_array_buffer_view(
+                    offset.x,
+                    offset.y,
+                    offset.z,
+                    self.size.x,
+                    self.size.y,
+                    1,
+                    Some(view.as_ref()),
+                );
             }
             Data::I16(data) => {
                 let view = unsafe { R16I::view(&data) };
-                textures[offset.z as usize]
-                    .bind()
-                    .tex_sub_image_2d_with_i32_and_i32_and_u32_and_type_and_opt_array_buffer_view(
-                        offset.x,
-                        offset.y,
-                        self.size.x,
-                        self.size.y,
-                        Some(view.as_ref()),
-                    );
+                textures.tex_sub_image_3d_with_opt_array_buffer_view(
+                    offset.x,
+                    offset.y,
+                    offset.z,
+                    self.size.x,
+                    self.size.y,
+                    1,
+                    Some(view.as_ref()),
+                );
             }
             Data::I32(data) => {
                 let view = unsafe { R32I::view(&data) };
-                textures[offset.z as usize]
-                    .bind()
-                    .tex_sub_image_2d_with_i32_and_i32_and_u32_and_type_and_opt_array_buffer_view(
-                        offset.x,
-                        offset.y,
-                        self.size.x,
-                        self.size.y,
-                        Some(view.as_ref()),
-                    );
+                textures.tex_sub_image_3d_with_opt_array_buffer_view(
+                    offset.x,
+                    offset.y,
+                    offset.z,
+                    self.size.x,
+                    self.size.y,
+                    1,
+                    Some(view.as_ref()),
+                );
             }
             Data::F32(data) => {
                 let view = unsafe { R32F::view(&data) };
-                textures[offset.z as usize]
-                    .bind()
-                    .tex_sub_image_2d_with_i32_and_i32_and_u32_and_type_and_opt_array_buffer_view(
-                        offset.x,
-                        offset.y,
-                        self.size.x,
-                        self.size.y,
-                        Some(view.as_ref()),
-                    );
+                textures.tex_sub_image_3d_with_opt_array_buffer_view(
+                    offset.x,
+                    offset.y,
+                    offset.z,
+                    self.size.x,
+                    self.size.y,
+                    1,
+                    Some(view.as_ref()),
+                );
             }
         }
 

src/core/al-core/src/image/format.rs

@@ -41,7 +41,7 @@ impl ImageFormat for RGB8U {
     const NUM_CHANNELS: usize = 3;
 
     const FORMAT: u32 = WebGlRenderingCtx::RGB as u32;
-    const INTERNAL_FORMAT: i32 = WebGlRenderingCtx::RGB as i32;
+    const INTERNAL_FORMAT: i32 = WebGlRenderingCtx::RGB8 as i32;
     const TYPE: u32 = WebGlRenderingCtx::UNSIGNED_BYTE;
 
     const CHANNEL_TYPE: ChannelType = ChannelType::RGB8U;
@@ -71,7 +71,7 @@ impl ImageFormat for RGBA8U {
     const NUM_CHANNELS: usize = 4;
 
     const FORMAT: u32 = WebGlRenderingCtx::RGBA as u32;
-    const INTERNAL_FORMAT: i32 = WebGlRenderingCtx::RGBA as i32;
+    const INTERNAL_FORMAT: i32 = WebGlRenderingCtx::RGBA8 as i32;
     const TYPE: u32 = WebGlRenderingCtx::UNSIGNED_BYTE;
 
     const CHANNEL_TYPE: ChannelType = ChannelType::RGBA8U;

src/core/al-core/src/image/html.rs

@@ -17,29 +17,28 @@ where
     }
 }
 
-use cgmath::Vector3;
-use wasm_bindgen::JsValue;
 use crate::image::format::ImageFormat;
 use crate::image::Image;
-use crate::texture::Texture2DArray;
+use crate::texture::{Tex3D, Texture2DArray};
+use cgmath::Vector3;
+use wasm_bindgen::JsValue;
 impl<F> Image for HTMLImage<F>
 where
     F: ImageFormat,
 {
-    fn tex_sub_image_3d(
+    fn insert_into_3d_texture<T: Tex3D>(
         &self,
         // The texture array
-        textures: &Texture2DArray,
+        textures: &T,
         // An offset to write the image in the texture array
         offset: &Vector3<i32>,
     ) -> Result<(), JsValue> {
-        textures[offset.z as usize]
-            .bind()
-            .tex_sub_image_2d_with_u32_and_u32_and_html_image_element(
-                offset.x,
-                offset.y,
-                &self.image,
-            );
+        textures.tex_sub_image_3d_with_html_image_element(
+            offset.x,
+            offset.y,
+            offset.z,
+            &self.image,
+        );
 
         Ok(())
     }

src/core/al-core/src/image/mod.rs

@@ -184,10 +184,10 @@ use self::html::HTMLImage;
 use super::Texture2DArray;
 use wasm_bindgen::JsValue;
 pub trait Image {
-    fn tex_sub_image_3d(
+    fn insert_into_3d_texture<T: Tex3D>(
         &self,
         // The texture array
-        textures: &Texture2DArray,
+        textures: &T,
         // An offset to write the image in the texture array
         offset: &Vector3<i32>,
     ) -> Result<(), JsValue>;
@@ -197,15 +197,15 @@ impl<'a, I> Image for &'a I
 where
     I: Image,
 {
-    fn tex_sub_image_3d(
+    fn insert_into_3d_texture<T: Tex3D>(
         &self,
         // The texture array
-        textures: &Texture2DArray,
+        textures: &T,
         // An offset to write the image in the texture array
         offset: &Vector3<i32>,
     ) -> Result<(), JsValue> {
         let image = &**self;
-        image.tex_sub_image_3d(textures, offset)?;
+        image.insert_into_3d_texture(textures, offset)?;
 
         Ok(())
     }
@@ -216,22 +216,20 @@ impl<I> Image for Rc<I>
 where
     I: Image,
 {
-    fn tex_sub_image_3d(
+    fn insert_into_3d_texture<T: Tex3D>(
         &self,
         // The texture array
-        textures: &Texture2DArray,
+        textures: &T,
         // An offset to write the image in the texture array
         offset: &Vector3<i32>,
     ) -> Result<(), JsValue> {
         let image = &**self;
-        image.tex_sub_image_3d(textures, offset)?;
+        image.insert_into_3d_texture(textures, offset)?;
 
         Ok(())
     }
 }
-use crate::Abort;
 
-use std::sync::{Arc, Mutex};
 /*impl<I> Image for Arc<Mutex<Option<I>>>
 where
     I: Image,
@@ -253,7 +251,10 @@ where
 
 #[cfg(feature = "webgl2")]
 use crate::image::format::{R16I, R32I, R64F, R8UI};
-use crate::image::format::{R32F, RGB8U, RGBA8U};
+use crate::{
+    image::format::{R32F, RGB8U, RGBA8U},
+    texture::Tex3D,
+};
 
 use bitmap::Bitmap;
 use fits::Fits;
@@ -290,10 +291,10 @@ pub enum ImageType {
 
 use cgmath::Vector3;
 impl Image for ImageType {
-    fn tex_sub_image_3d(
+    fn insert_into_3d_texture<T: Tex3D>(
         &self,
         // The texture array
-        textures: &Texture2DArray,
+        textures: &T,
         // An offset to write the image in the texture array
         offset: &Vector3<i32>,
     ) -> Result<(), JsValue> {
@@ -307,19 +308,23 @@ impl Image for ImageType {
 
                 let mut bytes_reader = Cursor::new(raw_bytes.as_slice());
                 let fits_img = Fits::from_byte_slice(&mut bytes_reader)?;
-                fits_img.tex_sub_image_3d(textures, offset)?
+                fits_img.insert_into_3d_texture(textures, offset)?
             }
-            ImageType::Canvas { canvas } => canvas.tex_sub_image_3d(textures, offset)?,
-            ImageType::ImageRgba8u { image } => image.tex_sub_image_3d(textures, offset)?,
-            ImageType::ImageRgb8u { image } => image.tex_sub_image_3d(textures, offset)?,
-            ImageType::HTMLImageRgba8u { image } => image.tex_sub_image_3d(textures, offset)?,
-            ImageType::HTMLImageRgb8u { image } => image.tex_sub_image_3d(textures, offset)?,
-            ImageType::RawRgb8u { image } => image.tex_sub_image_3d(textures, offset)?,
-            ImageType::RawRgba8u { image } => image.tex_sub_image_3d(textures, offset)?,
-            ImageType::RawR32f { image } => image.tex_sub_image_3d(textures, offset)?,
-            ImageType::RawR32i { image } => image.tex_sub_image_3d(textures, offset)?,
-            ImageType::RawR16i { image } => image.tex_sub_image_3d(textures, offset)?,
-            ImageType::RawR8ui { image } => image.tex_sub_image_3d(textures, offset)?,
+            ImageType::Canvas { canvas } => canvas.insert_into_3d_texture(textures, offset)?,
+            ImageType::ImageRgba8u { image } => image.insert_into_3d_texture(textures, offset)?,
+            ImageType::ImageRgb8u { image } => image.insert_into_3d_texture(textures, offset)?,
+            ImageType::HTMLImageRgba8u { image } => {
+                image.insert_into_3d_texture(textures, offset)?
+            }
+            ImageType::HTMLImageRgb8u { image } => {
+                image.insert_into_3d_texture(textures, offset)?
+            }
+            ImageType::RawRgb8u { image } => image.insert_into_3d_texture(textures, offset)?,
+            ImageType::RawRgba8u { image } => image.insert_into_3d_texture(textures, offset)?,
+            ImageType::RawR32f { image } => image.insert_into_3d_texture(textures, offset)?,
+            ImageType::RawR32i { image } => image.insert_into_3d_texture(textures, offset)?,
+            ImageType::RawR16i { image } => image.insert_into_3d_texture(textures, offset)?,
+            ImageType::RawR8ui { image } => image.insert_into_3d_texture(textures, offset)?,
         }
 
         Ok(())

src/core/al-core/src/image/raw.rs

@@ -1,5 +1,6 @@
 use crate::image::format::ImageFormat;
 use crate::texture::pixel::Pixel;
+use crate::texture::Tex3D;
 #[derive(Debug)]
 #[allow(dead_code)]
 pub struct ImageBuffer<T>
@@ -31,10 +32,14 @@ where
         Self { data, size }
     }
 
-    pub fn from_encoded_raw_bytes(raw_bytes: &[u8], width: i32, height: i32) -> Result<Self, JsValue> {
+    pub fn from_encoded_raw_bytes(
+        raw_bytes: &[u8],
+        width: i32,
+        height: i32,
+    ) -> Result<Self, JsValue> {
         let mut decoded_bytes = match T::decode(raw_bytes).map_err(|e| JsValue::from_str(e))? {
             Bytes::Borrowed(bytes) => bytes.to_vec(),
-            Bytes::Owned(bytes) => bytes
+            Bytes::Owned(bytes) => bytes,
         };
 
         let decoded_pixels = unsafe {
@@ -80,12 +85,7 @@ where
         ImageBuffer::<T>::new(data, width, height)
     }
 
-    pub fn tex_sub(
-        &mut self,
-        src: &Self,
-        s: &ImageBufferView,
-        d: &ImageBufferView,
-    ) {
+    pub fn tex_sub(&mut self, src: &Self, s: &ImageBufferView, d: &ImageBufferView) {
         let mut di = d.x;
         let mut dj = d.y;
 
@@ -144,24 +144,24 @@ impl<I> Image for ImageBuffer<I>
 where
     I: ImageFormat,
 {
-    fn tex_sub_image_3d(
+    fn insert_into_3d_texture<T: Tex3D>(
         &self,
         // The texture array
-        textures: &Texture2DArray,
+        textures: &T,
         // An offset to write the image in the texture array
         offset: &Vector3<i32>,
     ) -> Result<(), JsValue> {
         let js_array =
             <<<I as ImageFormat>::P as Pixel>::Container as ArrayBuffer>::new(&self.data);
-        textures[offset.z as usize]
-            .bind()
-            .tex_sub_image_2d_with_i32_and_i32_and_u32_and_type_and_opt_array_buffer_view(
-                offset.x,
-                offset.y,
-                self.size.x,
-                self.size.y,
-                Some(js_array.as_ref()),
-            );
+        textures.tex_sub_image_3d_with_opt_array_buffer_view(
+            offset.x,
+            offset.y,
+            offset.z,
+            self.width(),
+            self.height(),
+            1,
+            Some(js_array.as_ref()),
+        );
 
         Ok(())
     }

src/core/al-core/src/object/framebuffer.rs

@@ -1,14 +1,16 @@
 use {wasm_bindgen::prelude::*, web_sys::WebGlFramebuffer};
 
 use crate::webgl_ctx::WebGlRenderingCtx;
+// Internal format used for the framebuffer final texture
+use crate::image::format::RGBA8U;
 
 pub struct FrameBufferObject {
     gl: WebGlContext,
     fbo: WebGlFramebuffer,
     pub texture: Texture2D,
 }
-use crate::webgl_ctx::WebGlContext;
 use crate::texture::Texture2D;
+use crate::webgl_ctx::WebGlContext;
 
 impl FrameBufferObject {
     pub fn new(gl: &WebGlContext, width: usize, height: usize) -> Result<Self, JsValue> {
@@ -17,7 +19,7 @@ impl FrameBufferObject {
             .ok_or("failed to create framebuffer")?;
         gl.bind_framebuffer(WebGlRenderingCtx::FRAMEBUFFER, Some(&fbo));
 
-        let texture = Texture2D::create_empty_with_format::<crate::image::format::RGBA8U>(
+        let texture = Texture2D::create_empty_with_format::<RGBA8U>(
             gl,
             width as i32,
             height as i32,
@@ -60,29 +62,39 @@ impl FrameBufferObject {
                 self.texture.height() as usize,
             )
         {
-            //let pixels = [0, 0, 0, 0].iter().cloned().cycle().take(4*height*width).collect::<Vec<_>>();
-            #[cfg(feature = "webgl2")]
-            self.texture
-                .bind_mut()
-                .tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array(
-                    width as i32,
-                    height as i32,
-                    WebGlRenderingCtx::SRGB8_ALPHA8 as i32,
-                    WebGlRenderingCtx::RGBA,
-                    WebGlRenderingCtx::UNSIGNED_BYTE,
-                    None,
-                );
-            #[cfg(feature = "webgl1")]
-            self.texture
-                .bind_mut()
-                .tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array(
-                    width as i32,
-                    height as i32,
-                    WebGlRenderingCtx::RGBA as i32,
-                    WebGlRenderingCtx::RGBA,
-                    WebGlRenderingCtx::UNSIGNED_BYTE,
-                    None,
-                );
+            drop(self.texture.clone());
+
+            self.gl
+                .bind_framebuffer(WebGlRenderingCtx::FRAMEBUFFER, Some(&self.fbo));
+            self.texture = Texture2D::create_empty_with_format::<RGBA8U>(
+                &self.gl,
+                width as i32,
+                height as i32,
+                &[
+                    (
+                        WebGlRenderingCtx::TEXTURE_MIN_FILTER,
+                        WebGlRenderingCtx::LINEAR,
+                    ),
+                    (
+                        WebGlRenderingCtx::TEXTURE_MAG_FILTER,
+                        WebGlRenderingCtx::LINEAR,
+                    ),
+                    // Prevents s-coordinate wrapping (repeating)
+                    (
+                        WebGlRenderingCtx::TEXTURE_WRAP_S,
+                        WebGlRenderingCtx::CLAMP_TO_EDGE,
+                    ),
+                    // Prevents t-coordinate wrapping (repeating)
+                    (
+                        WebGlRenderingCtx::TEXTURE_WRAP_T,
+                        WebGlRenderingCtx::CLAMP_TO_EDGE,
+                    ),
+                ],
+            )
+            .unwrap();
+            self.texture.attach_to_framebuffer();
+            self.gl
+                .bind_framebuffer(WebGlRenderingCtx::FRAMEBUFFER, None);
         }
     }
 
@@ -106,7 +118,6 @@ impl FrameBufferObject {
         self.bind();
 
         // clear the fbo
-        self.gl.clear_color(0.0, 0.0, 0.0, 1.0);
         self.gl.clear(WebGlRenderingCtx::COLOR_BUFFER_BIT);
 
         // render all the things onto the fbo

src/core/al-core/src/texture/3d.rs

@@ -1,306 +1,81 @@
+use crate::image::format::ImageFormat;
+use web_sys::HtmlCanvasElement;
+use web_sys::WebGlTexture;
+
+use crate::Abort;
+
+use crate::texture::Texture2DMeta;
 use crate::webgl_ctx::WebGlContext;
 use crate::webgl_ctx::WebGlRenderingCtx;
+use std::cell::RefCell;
+use std::rc::Rc;
 use wasm_bindgen::prelude::*;
-use wasm_bindgen::JsCast;
-use web_sys::HtmlCanvasElement;
 use web_sys::HtmlImageElement;
 
-/// Some GPU texture relative:
-// * Usual texture parameters when defining a texture
-pub const TEX_PARAMS: &'static [(u32, u32); 4] = &[
-    (
-        WebGlRenderingCtx::TEXTURE_MIN_FILTER,
-        WebGlRenderingCtx::NEAREST,
-    ),
-    (
-        WebGlRenderingCtx::TEXTURE_MAG_FILTER,
-        WebGlRenderingCtx::NEAREST,
-    ),
-    // Prevents s-coordinate wrapping (repeating)
-    (
-        WebGlRenderingCtx::TEXTURE_WRAP_S,
-        WebGlRenderingCtx::CLAMP_TO_EDGE,
-    ),
-    // Prevents t-coordinate wrapping (repeating)
-    (
-        WebGlRenderingCtx::TEXTURE_WRAP_T,
-        WebGlRenderingCtx::CLAMP_TO_EDGE,
-    ),
-];
-
-pub static mut CUR_IDX_TEX_UNIT: u8 = 0;
-
-#[derive(Clone)]
-#[allow(dead_code)]
-struct Texture3DMeta {
-    pub format: u32,
-    pub internal_format: i32,
-    pub type_: u32,
-
-    pub width: u32,
-    pub height: u32,
-}
-
-use web_sys::WebGlTexture;
 #[derive(Clone)]
 pub struct Texture3D {
-    pub texture: Option<WebGlTexture>,
-
     gl: WebGlContext,
 
-    metadata: Option<Rc<RefCell<Texture3DMeta>>>,
+    texture: Option<WebGlTexture>,
+
+    metadata: Option<Rc<RefCell<Texture2DMeta>>>,
+    depth: i32,
 }
 
-pub enum SamplerType {
-    Float,
-    Integer,
-    Unsigned,
-}
-
-use crate::image::format::ImageFormat;
-//use super::pixel::PixelType;
-use std::cell::RefCell;
-use std::path::Path;
-use std::rc::Rc;
 impl Texture3D {
-    /*pub fn create_from_path<P: AsRef<Path>, F: ImageFormat>(
-        gl: &WebGlContext,
-        name: &'static str,
-        src: &P,
-        tex_params: &'static [(u32, u32)],
-    ) -> Result<Texture3D, JsValue> {
-        let image = HtmlImageElement::new().unwrap_abort();
-
-        let texture = gl.create_texture();
-        let onerror = {
-            Closure::wrap(Box::new(move || {
-                println!("Cannot load texture located at: {:?}", name);
-            }) as Box<dyn Fn()>)
-        };
-
-        let width = image.width();
-        let height = image.height();
-
-        let metadata = Rc::new(RefCell::new(Texture3DMeta {
-            width: width,
-            height: height,
-            internal_format: F::INTERNAL_FORMAT,
-            format: F::FORMAT,
-            type_: F::TYPE,
-        }));
-
-        let onload = {
-            let image = image.clone();
-            let gl = gl.clone();
-            let texture = texture.clone();
-            let metadata = metadata.clone();
-
-            Closure::wrap(Box::new(move || {
-                gl.bind_texture(WebGlRenderingCtx::TEXTURE_2D, texture.as_ref());
-
-                for (pname, param) in tex_params.iter() {
-                    gl.tex_parameteri(WebGlRenderingCtx::TEXTURE_2D, *pname, *param as i32);
-                }
-
-                #[cfg(feature = "webgl2")]
-                gl.tex_image_2d_with_u32_and_u32_and_html_image_element(
-                    WebGlRenderingCtx::TEXTURE_2D,
-                    0,
-                    F::INTERNAL_FORMAT,
-                    F::FORMAT,
-                    F::TYPE,
-                    &image,
-                )
-                .expect("Texture 2D");
-
-                metadata.borrow_mut().width = image.width();
-                metadata.borrow_mut().height = image.height();
-
-                //gl.generate_mipmap(WebGl2RenderingContext::TEXTURE_2D);
-            }) as Box<dyn Fn()>)
-        };
-
-        image.set_onload(Some(onload.as_ref().unchecked_ref()));
-        image.set_onerror(Some(onerror.as_ref().unchecked_ref()));
-
-        image.set_cross_origin(Some(""));
-        image.set_src(src.as_ref().to_str().unwrap_abort());
-
-        onload.forget();
-        onerror.forget();
-
-        let gl = gl.clone();
-        Ok(Texture3D {
-            texture,
-
-            gl,
-
-            metadata: Some(metadata),
-        })
-    }*/
-
-    pub fn create_from_raw_pixels<F: ImageFormat>(
+    pub fn create_empty<F: ImageFormat>(
         gl: &WebGlContext,
+        // The weight of the individual textures
         width: i32,
+        // Their height
         height: i32,
+        // The depth of the cube
+        depth: i32,
         tex_params: &'static [(u32, u32)],
-        data: Option<&[<F::P as Pixel>::Item]>,
-    ) -> Result<Texture3D, JsValue> {
-        let texture = Texture3D::create_empty_with_format::<F>(gl, width, height, tex_params)?;
-
-        if let Some(data) = data {
-            let buf_data = unsafe { F::view(data) };
-            texture
-                .bind()
-                .tex_sub_image_2d_with_i32_and_i32_and_u32_and_type_and_opt_array_buffer_view(
-                    0,
-                    0,
-                    width,
-                    height,
-                    Some(buf_data.as_ref()),
-                );
-        }
-
-        Ok(texture)
-    }
-
-    pub fn create_from_raw_bytes<F: ImageFormat>(
-        gl: &WebGlContext,
-        width: i32,
-        height: i32,
-        tex_params: &'static [(u32, u32)],
-        bytes: Option<&[u8]>,
-    ) -> Result<Texture3D, JsValue> {
+    ) -> Result<Self, JsValue> {
         let texture = gl.create_texture();
 
-        gl.bind_texture(WebGlRenderingCtx::TEXTURE_2D, texture.as_ref());
+        gl.bind_texture(WebGlRenderingCtx::TEXTURE_3D, texture.as_ref());
 
         for (pname, param) in tex_params.iter() {
-            gl.tex_parameteri(WebGlRenderingCtx::TEXTURE_2D, *pname, *param as i32);
+            gl.tex_parameteri(WebGlRenderingCtx::TEXTURE_3D, *pname, *param as i32);
         }
 
-        gl.tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array(
-            WebGlRenderingCtx::TEXTURE_2D,
-            0,
-            F::INTERNAL_FORMAT,
+        gl.tex_storage_3d(
+            WebGlRenderingCtx::TEXTURE_3D,
+            1,
+            F::INTERNAL_FORMAT as u32,
             width,
             height,
-            0,
-            F::FORMAT,
-            F::TYPE,
-            bytes,
-        )
-        .expect("Texture 2D");
-
-        let gl = gl.clone();
-        let metadata = Some(Rc::new(RefCell::new(Texture3DMeta {
-            width: width as u32,
-            height: height as u32,
-            internal_format: F::INTERNAL_FORMAT,
-            format: F::FORMAT,
-            type_: F::TYPE,
-        })));
-
-        Ok(Texture3D {
-            texture,
-
-            gl,
-
-            metadata,
-        })
-    }
-
-    pub fn create_empty_unsized(
-        gl: &WebGlContext,
-        tex_params: &'static [(u32, u32)],
-    ) -> Result<Texture3D, JsValue> {
-        let texture = gl.create_texture();
-
-        gl.bind_texture(WebGlRenderingCtx::TEXTURE_2D, texture.as_ref());
-
-        for (pname, param) in tex_params.iter() {
-            gl.tex_parameteri(WebGlRenderingCtx::TEXTURE_2D, *pname, *param as i32);
-        }
-
-        let gl = gl.clone();
-
-        let metadata = None;
-        Ok(Texture3D {
-            texture,
-
-            gl,
-
-            metadata,
-        })
-    }
-
-    pub fn create_empty_with_format<F: ImageFormat>(
-        gl: &WebGlContext,
-        width: i32,
-        height: i32,
-        tex_params: &'static [(u32, u32)],
-    ) -> Result<Texture3D, JsValue> {
-        let texture = gl.create_texture();
-
-        gl.bind_texture(WebGlRenderingCtx::TEXTURE_2D, texture.as_ref());
-
-        for (pname, param) in tex_params.iter() {
-            gl.tex_parameteri(WebGlRenderingCtx::TEXTURE_2D, *pname, *param as i32);
-        }
-
-        gl.tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array(
-            WebGlRenderingCtx::TEXTURE_2D,
-            0,
-            F::INTERNAL_FORMAT,
-            width,
-            height,
-            0,
-            F::FORMAT,
-            F::TYPE,
-            None,
-        )
-        .expect("Texture 2D");
-
-        let gl = gl.clone();
-        let metadata = Some(Rc::new(RefCell::new(Texture3DMeta {
-            width: width as u32,
-            height: height as u32,
-            internal_format: F::INTERNAL_FORMAT,
-            format: F::FORMAT,
-            type_: F::TYPE,
-        })));
-        Ok(Texture3D {
-            texture,
-
-            gl,
-
-            metadata,
-        })
-    }
-
-    pub fn attach_to_framebuffer(&self) {
-        self.gl.framebuffer_texture_2d(
-            WebGlRenderingCtx::FRAMEBUFFER,
-            WebGlRenderingCtx::COLOR_ATTACHMENT0,
-            WebGlRenderingCtx::TEXTURE_2D,
-            self.texture.as_ref(),
-            0,
+            depth,
         );
+
+        let gl = gl.clone();
+        let metadata = Some(Rc::new(RefCell::new(Texture2DMeta {
+            width: width as u32,
+            height: height as u32,
+            internal_format: F::INTERNAL_FORMAT,
+            format: F::FORMAT,
+            type_: F::TYPE,
+        })));
+
+        Ok(Texture3D {
+            texture,
+            gl: gl.clone(),
+            depth,
+            metadata,
+        })
     }
 
-    pub fn get_size(&self) -> (u32, u32) {
-        (
-            self.metadata.as_ref().unwrap_abort().borrow().width,
-            self.metadata.as_ref().unwrap_abort().borrow().height,
-        )
+    pub fn generate_mipmap(&self) {
+        self.gl.generate_mipmap(WebGlRenderingCtx::TEXTURE_3D);
     }
 
-    pub fn width(&self) -> u32 {
-        self.metadata.as_ref().unwrap_abort().borrow().width
-    }
+    pub fn bind(&self) -> Texture3DBound {
+        self.gl
+            .bind_texture(WebGlRenderingCtx::TEXTURE_3D, self.texture.as_ref());
 
-    pub fn height(&self) -> u32 {
-        self.metadata.as_ref().unwrap_abort().borrow().height
+        Texture3DBound { tex: self }
     }
 
     pub fn active_texture(&self, idx_tex_unit: u8) -> &Self {
@@ -308,162 +83,84 @@ impl Texture3D {
             .active_texture(WebGlRenderingCtx::TEXTURE0 + idx_tex_unit as u32);
         self
     }
-
-    pub fn bind(&self) -> Texture3DBound {
-        self.gl
-            .bind_texture(WebGlRenderingCtx::TEXTURE_2D, self.texture.as_ref());
-
-        Texture3DBound { texture: self }
-    }
-
-    pub fn bind_mut(&mut self) -> Texture3DBoundMut {
-        self.gl
-            .bind_texture(WebGlRenderingCtx::TEXTURE_2D, self.texture.as_ref());
-
-        Texture3DBoundMut { texture: self }
-    }
-
-    pub fn read_pixel(&self, x: i32, y: i32) -> Result<JsValue, JsValue> {
-        // Create and bind the framebuffer
-        let reader = self.gl.create_framebuffer();
-        self.gl
-            .bind_framebuffer(WebGlRenderingCtx::FRAMEBUFFER, reader.as_ref());
-
-        // Attach the texture as the first color attachment
-        //self.attach_to_framebuffer();
-        self.gl.framebuffer_texture_2d(
-            WebGlRenderingCtx::READ_FRAMEBUFFER,
-            WebGlRenderingCtx::COLOR_ATTACHMENT0,
-            WebGlRenderingCtx::TEXTURE_2D,
-            self.texture.as_ref(),
-            0,
-        );
-
-        let status = self
-            .gl
-            .check_framebuffer_status(WebGlRenderingCtx::FRAMEBUFFER);
-        if status != WebGlRenderingCtx::FRAMEBUFFER_COMPLETE {
-            // Unbind the framebuffer
-            self.gl
-                .bind_framebuffer(WebGlRenderingCtx::FRAMEBUFFER, None);
-            // Delete the framebuffer
-            self.gl.delete_framebuffer(reader.as_ref());
-
-            Err(JsValue::from_str("incomplete framebuffer"))
-        } else {
-            // set the viewport as the FBO won't be the same dimension as the screen
-            let metadata = self.metadata.as_ref().unwrap_abort().borrow();
-            self.gl
-                .viewport(x, y, metadata.width as i32, metadata.height as i32);
-            #[cfg(feature = "webgl2")]
-            let value = match (metadata.format, metadata.type_) {
-                (WebGlRenderingCtx::RED_INTEGER, WebGlRenderingCtx::UNSIGNED_BYTE) => {
-                    let p = <[u8; 1]>::read_pixel(&self.gl, x, y)?;
-                    Ok(serde_wasm_bindgen::to_value(&p[0])?)
-                }
-                (WebGlRenderingCtx::RED_INTEGER, WebGlRenderingCtx::SHORT) => {
-                    let p = <[i16; 1]>::read_pixel(&self.gl, x, y)?;
-                    Ok(serde_wasm_bindgen::to_value(&p[0])?)
-                }
-                (WebGlRenderingCtx::RED_INTEGER, WebGlRenderingCtx::INT) => {
-                    let p = <[i32; 1]>::read_pixel(&self.gl, x, y)?;
-                    Ok(serde_wasm_bindgen::to_value(&p[0])?)
-                }
-                (WebGlRenderingCtx::RED, WebGlRenderingCtx::FLOAT) => {
-                    let p = <[f32; 1]>::read_pixel(&self.gl, x, y)?;
-                    Ok(serde_wasm_bindgen::to_value(&p[0])?)
-                }
-                (WebGlRenderingCtx::RGB, WebGlRenderingCtx::UNSIGNED_BYTE) => {
-                    let p = <[u8; 3]>::read_pixel(&self.gl, x, y)?;
-                    Ok(serde_wasm_bindgen::to_value(&p)?)
-                }
-                (WebGlRenderingCtx::RGBA, WebGlRenderingCtx::UNSIGNED_BYTE) => {
-                    let p = <[u8; 4]>::read_pixel(&self.gl, x, y)?;
-                    Ok(serde_wasm_bindgen::to_value(&p)?)
-                }
-                _ => Err(JsValue::from_str(
-                    "Pixel retrieval not implemented for that texture format.",
-                )),
-            };
-
-            // Unbind the framebuffer
-            self.gl
-                .bind_framebuffer(WebGlRenderingCtx::FRAMEBUFFER, None);
-            // Delete the framebuffer
-            self.gl.delete_framebuffer(reader.as_ref());
-
-            // set the viewport as the FBO won't be the same dimension as the screen
-            let canvas = self
-                .gl
-                .canvas()
-                .unwrap_abort()
-                .dyn_into::<web_sys::HtmlCanvasElement>()
-                .unwrap_abort();
-            self.gl
-                .viewport(0, 0, canvas.width() as i32, canvas.height() as i32);
-
-            value
-        }
-    }
 }
 
 impl Drop for Texture3D {
     fn drop(&mut self) {
         self.gl.delete_texture(self.texture.as_ref());
-
-        // free the texture unit
-        /*let i = (self.idx_texture_unit - WebGl2RenderingContext::TEXTURE0) as usize;
-        unsafe {
-            AVAILABLE_TEX_UNITS[i] = Some(self.idx_texture_unit);
-        }*/
     }
 }
-use crate::Abort;
+
+use super::CUR_IDX_TEX_UNIT;
+use crate::shader::UniformType;
+use web_sys::WebGlUniformLocation;
+impl UniformType for Texture3D {
+    fn uniform(gl: &WebGlContext, location: Option<&WebGlUniformLocation>, tex: &Self) {
+        unsafe {
+            let _ = tex
+                // 1. Active the texture unit of the texture
+                .active_texture(CUR_IDX_TEX_UNIT)
+                // 2. Bind the texture to that texture unit
+                .bind();
+
+            gl.uniform1i(location, CUR_IDX_TEX_UNIT as i32);
+            CUR_IDX_TEX_UNIT += 1;
+        };
+    }
+}
 
 pub struct Texture3DBound<'a> {
-    texture: &'a Texture3D,
+    tex: &'a Texture3D,
 }
 
 impl<'a> Texture3DBound<'a> {
-    pub fn tex_sub_image_2d_with_u32_and_u32_and_html_image_element(
+    pub fn tex_sub_image_3d_with_html_image_element(
         &self,
         dx: i32,
         dy: i32,
+        dz: i32,
         image: &HtmlImageElement,
     ) {
-        let metadata = self.texture.metadata.as_ref().unwrap_abort().borrow();
+        let metadata = self.tex.metadata.as_ref().unwrap_abort().borrow();
 
-        #[cfg(feature = "webgl2")]
-        self.texture
+        self.tex
             .gl
-            .tex_sub_image_2d_with_u32_and_u32_and_html_image_element(
-                WebGlRenderingCtx::TEXTURE_2D,
+            .tex_sub_image_3d_with_html_image_element(
+                WebGlRenderingCtx::TEXTURE_3D,
                 0,
                 dx,
                 dy,
+                dz,
+                image.width() as i32,
+                image.height() as i32,
+                1,
                 metadata.format,
                 metadata.type_,
                 image,
             )
-            .expect("Sub texture 2d");
+            .expect("Sub texture 3d");
     }
 
-    pub fn tex_sub_image_2d_with_u32_and_u32_and_html_canvas_element(
+    pub fn tex_sub_image_3d_with_html_canvas_element(
         &self,
         dx: i32,
         dy: i32,
+        dz: i32,
         canvas: &HtmlCanvasElement,
     ) {
-        let metadata = self.texture.metadata.as_ref().unwrap_abort().borrow();
+        let metadata = self.tex.metadata.as_ref().unwrap_abort().borrow();
 
-        #[cfg(feature = "webgl2")]
-        self.texture
+        self.tex
             .gl
-            .tex_sub_image_2d_with_u32_and_u32_and_html_canvas_element(
-                WebGlRenderingCtx::TEXTURE_2D,
+            .tex_sub_image_3d_with_html_canvas_element(
+                WebGlRenderingCtx::TEXTURE_3D,
                 0,
                 dx,
                 dy,
+                dz,
+                canvas.width() as i32,
+                canvas.height() as i32,
+                1,
                 metadata.format,
                 metadata.type_,
                 canvas,
@@ -471,22 +168,26 @@ impl<'a> Texture3DBound<'a> {
             .expect("Sub texture 2d");
     }
 
-    pub fn tex_sub_image_2d_with_u32_and_u32_and_image_bitmap(
+    pub fn tex_sub_image_3d_with_image_bitmap(
         &self,
         dx: i32,
         dy: i32,
+        dz: i32,
         image: &web_sys::ImageBitmap,
     ) {
-        let metadata = self.texture.metadata.as_ref().unwrap_abort().borrow();
+        let metadata = self.tex.metadata.as_ref().unwrap_abort().borrow();
 
-        #[cfg(feature = "webgl2")]
-        self.texture
+        self.tex
             .gl
-            .tex_sub_image_2d_with_u32_and_u32_and_image_bitmap(
-                WebGlRenderingCtx::TEXTURE_2D,
+            .tex_sub_image_3d_with_image_bitmap(
+                WebGlRenderingCtx::TEXTURE_3D,
                 0,
                 dx,
                 dy,
+                dz,
+                image.width() as i32,
+                image.height() as i32,
+                1,
                 metadata.format,
                 metadata.type_,
                 image,
@@ -494,25 +195,29 @@ impl<'a> Texture3DBound<'a> {
             .expect("Sub texture 2d");
     }
 
-    pub fn tex_sub_image_2d_with_i32_and_i32_and_u32_and_type_and_opt_array_buffer_view(
+    pub fn tex_sub_image_3d_with_opt_array_buffer_view(
         &self,
         dx: i32,
         dy: i32,
-        width: i32,  // Width of the image
-        height: i32, // Height of the image
+        dz: i32,
+        w: i32,
+        h: i32,
+        d: i32,
         image: Option<&js_sys::Object>,
     ) {
-        let metadata = self.texture.metadata.as_ref().unwrap_abort().borrow();
+        let metadata = self.tex.metadata.as_ref().unwrap_abort().borrow();
 
-        self.texture
+        self.tex
             .gl
-            .tex_sub_image_2d_with_i32_and_i32_and_u32_and_type_and_opt_array_buffer_view(
-                WebGlRenderingCtx::TEXTURE_2D,
+            .tex_sub_image_3d_with_opt_array_buffer_view(
+                WebGlRenderingCtx::TEXTURE_3D,
                 0,
                 dx,
                 dy,
-                width,
-                height,
+                dz,
+                w,
+                h,
+                d,
                 metadata.format,
                 metadata.type_,
                 image,
@@ -521,24 +226,28 @@ impl<'a> Texture3DBound<'a> {
     }
 
     #[allow(dead_code)]
-    pub fn tex_sub_image_2d_with_i32_and_i32_and_u32_and_type_and_opt_u8_array(
+    pub fn tex_sub_image_3d_with_opt_u8_array(
         &self,
+        idx: i32,
         dx: i32,
         dy: i32,
-        width: i32,  // Width of the image
-        height: i32, // Height of the image
+        w: i32,
+        h: i32,
+        d: i32,
         pixels: Option<&[u8]>,
     ) {
-        let metadata = self.texture.metadata.as_ref().unwrap_abort().borrow();
-        self.texture
+        let metadata = self.tex.metadata.as_ref().unwrap_abort().borrow();
+        self.tex
             .gl
-            .tex_sub_image_2d_with_i32_and_i32_and_u32_and_type_and_opt_u8_array(
-                WebGlRenderingCtx::TEXTURE_2D,
+            .tex_sub_image_3d_with_opt_u8_array(
+                WebGlRenderingCtx::TEXTURE_3D,
                 0,
                 dx,
                 dy,
-                width,
-                height,
+                idx,
+                w,
+                h,
+                d,
                 metadata.format,
                 metadata.type_,
                 pixels,
@@ -546,70 +255,3 @@ impl<'a> Texture3DBound<'a> {
             .expect("Sub texture 2d");
     }
 }
-
-pub struct Texture3DBoundMut<'a> {
-    texture &'a mut Texture3D,
-}
-
-impl<'a> Texture3DBoundMut<'a> {
-    #[allow(dead_code)]
-    pub fn tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array(
-        &mut self,
-        width: i32,  // Width of the image
-        height: i32, // Height of the image
-        internal_format: i32,
-        src_format: u32,
-        src_type: u32,
-        pixels: Option<&[u8]>,
-    ) {
-        self.texture
-            .gl
-            .tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array(
-                WebGlRenderingCtx::TEXTURE_2D,
-                0,
-                internal_format as i32,
-                width as i32,
-                height as i32,
-                0,
-                src_format,
-                src_type,
-                pixels,
-            )
-            .expect("Sub texture 2d");
-        //self.texture.gl.generate_mipmap(WebGlRenderingCtx::TEXTURE_2D);
-
-        self.texture.metadata = Some(Rc::new(RefCell::new(Texture3DMeta {
-            format: src_format,
-            internal_format,
-            type_: src_type,
-            width: width as u32,
-            height: height as u32,
-        })));
-    }
-
-    pub fn tex_sub_image_2d_with_i32_and_i32_and_u32_and_type_and_opt_array_buffer_view(
-        &self,
-        dx: i32,
-        dy: i32,
-        width: i32,  // Width of the image
-        height: i32, // Height of the image
-        image: Option<&js_sys::Object>,
-    ) {
-        let metadata = self.texture.metadata.as_ref().unwrap_abort().borrow();
-
-        self.texture
-            .gl
-            .tex_sub_image_2d_with_i32_and_i32_and_u32_and_type_and_opt_array_buffer_view(
-                WebGlRenderingCtx::TEXTURE_2D,
-                0,
-                dx,
-                dy,
-                width,
-                height,
-                metadata.format,
-                metadata.type_,
-                image,
-            )
-            .expect("Sub texture 2d");
-    }
-}