refactor(LayeredMaterial): migrate to TypeScript

src/Converter/convertToTile.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import TileMesh from 'Core/TileMesh';
-import LayeredMaterial from 'Renderer/LayeredMaterial';
+import { LayeredMaterial } from 'Renderer/LayeredMaterial';
 import { newTileGeometry } from 'Core/Prefab/TileBuilder';
 import ReferLayerProperties from 'Layer/ReferencingLayerProperties';
 import { geoidLayerIsVisible } from 'Layer/GeoidLayer';
@@ -13,7 +13,7 @@ function setTileFromTiledLayer(tile, tileLayer) {
     }
 
     if (__DEBUG__) {
-        tile.material.showOutline = tileLayer.showOutline || false;
+        tile.material.setUniform('showOutline', tileLayer.showOutline || false);
     }
 
     if (tileLayer.isGlobeLayer) {
@@ -31,6 +31,22 @@ function setTileFromTiledLayer(tile, tileLayer) {
     }
 }
 
+class AccessMap {
+    constructor() {
+        this.accessed = new Map();
+    }
+
+    insert(prop) {
+        const count = this.accessed.get(prop);
+        this.accessed.set(prop, (count ?? 0) + 1);
+        if (count === undefined) {
+            console.log(prop, this.accessed, this.accessed != undefined ? 'exists' : 'missing');
+        }
+    }
+}
+
+const accessMap = new AccessMap();
+
 export default {
     convert(requester, extent, layer) {
         const builder = layer.builder;
@@ -50,7 +66,23 @@ export default {
             result.geometry.increaseRefCount();
             const crsCount = layer.tileMatrixSets.length;
             const material = new LayeredMaterial(layer.materialOptions, crsCount);
-            ReferLayerProperties(material, layer);
+
+            const handler = {
+                get(target, prop, receiver) {
+                    accessMap.insert(prop);
+                    if (typeof target[prop] === 'object' && target[prop] !== null) {
+                        // eslint-disable-next-line prefer-rest-params
+                        return new Proxy(Reflect.get(...arguments), handler);
+                    } else {
+                        // eslint-disable-next-line prefer-rest-params
+                        return Reflect.get(...arguments);
+                    }
+                },
+            };
+
+            const proxy = new Proxy(material, handler);
+
+            ReferLayerProperties(proxy, layer);
 
             const tile = new TileMesh(result.geometry, material, layer, extent, level);
 
@@ -73,7 +105,7 @@ export default {
                 tile.geoidHeight = parent.geoidHeight;
                 const geoidHeight = geoidLayerIsVisible(layer) ? tile.geoidHeight : 0;
                 tile.setBBoxZ({ min: parent.obb.z.min, max: parent.obb.z.max, geoidHeight });
-                tile.material.geoidHeight = geoidHeight;
+                tile.material.setUniform('geoidHeight', geoidHeight);
             }
 
             return tile;

src/Core/View.js

@@ -200,7 +200,7 @@ class View extends THREE.EventDispatcher {
             this.mainLoop.gfxEngine.getWindowSize().y,
             options.camera);
 
-        this._frameRequesters = { };
+        this._frameRequesters = {};
 
         this._resizeListener = () => this.resize();
         window.addEventListener('resize', this._resizeListener, false);
@@ -217,8 +217,8 @@ class View extends THREE.EventDispatcher {
             // all layers must be ready
             const allReady = this.getLayers().every(layer => layer.ready);
             if (allReady &&
-                    this.mainLoop.scheduler.commandsWaitingExecutionCount() == 0 &&
-                    this.mainLoop.renderingState == RENDERING_PAUSED) {
+                this.mainLoop.scheduler.commandsWaitingExecutionCount() == 0 &&
+                this.mainLoop.renderingState == RENDERING_PAUSED) {
                 this.dispatchEvent({ type: VIEW_EVENTS.LAYERS_INITIALIZED });
                 this.removeFrameRequester(MAIN_LOOP_EVENTS.UPDATE_END, this._allLayersAreReadyCallback);
             }
@@ -954,7 +954,7 @@ class View extends THREE.EventDispatcher {
                 continue;
             }
 
-            for (const materialLayer of tile.object.material.getLayers(layers)) {
+            for (const materialLayer of tile.object.material.getTiles(layers)) {
                 for (const texture of materialLayer.textures) {
                     if (!texture.features) {
                         continue;

src/Layer/ColorLayer.js

@@ -144,13 +144,13 @@ class ColorLayer extends RasterLayer {
      * @return     {RasterColorTile}  The raster color node added.
      */
     setupRasterNode(node) {
-        const rasterColorNode = new RasterColorTile(node.material, this);
+        const rasterColorTile = new RasterColorTile(node.material, this);
 
-        node.material.addLayer(rasterColorNode);
+        node.material.addColorTile(rasterColorTile);
         // set up ColorLayer ordering.
-        node.material.setSequence(this.parent.colorLayersOrder);
+        node.material.setColorTileIds(this.parent.colorLayersOrder);
 
-        return rasterColorNode;
+        return rasterColorTile;
     }
 
     update(context, layer, node, parent) {

src/Layer/ElevationLayer.js

@@ -117,8 +117,8 @@ class ElevationLayer extends RasterLayer {
     setupRasterNode(node) {
         const rasterElevationNode = new RasterElevationTile(node.material, this);
 
-        node.material.addLayer(rasterElevationNode);
-        node.material.setSequenceElevation(this.id);
+        node.material.setElevationTile(rasterElevationNode);
+        node.material.setElevationTileId(this.id);
         // bounding box initialisation
         const updateBBox = () => node.setBBoxZ({
             min: rasterElevationNode.min, max: rasterElevationNode.max, scale: this.scale,

src/Layer/InfoLayer.js

@@ -35,7 +35,7 @@ export class InfoTiledGeometryLayer extends InfoLayer {
                     let layers = [];
                     this.displayed.tiles.forEach((tile) => {
                         const m = tile.material;
-                        layers = [...new Set([...layers, ...m.colorLayerIds.filter(id => m.getLayer(id)), ...m.elevationLayerIds])];
+                        layers = [...new Set([...layers, ...m.colorTileIds.filter(id => m.getColorTile(id)), m.elevationTileId])];
                     });
 
                     return this.layer.attachedLayers.filter(l => layers.includes(l.id));

src/Layer/LabelLayer.js

@@ -474,8 +474,8 @@ class LabelLayer extends GeometryLayer {
                 // Necessary event listener, to remove any Label attached to
                 node.addEventListener('removed', () => this.removeNodeDomElement(node));
 
-                if (labelsNode.needsAltitude && node.material.getElevationLayer()) {
-                    node.material.getElevationLayer().addEventListener('rasterElevationLevelChanged', () => { labelsNode.needsUpdate = true; });
+                if (labelsNode.needsAltitude && node.material.getElevationTile()) {
+                    node.material.getElevationTile().addEventListener('rasterElevationLevelChanged', () => { labelsNode.needsUpdate = true; });
                 }
 
                 if (this.performance) {

src/Layer/RasterLayer.js

@@ -1,5 +1,5 @@
 import Layer from 'Layer/Layer';
-import { removeLayeredMaterialNodeLayer } from 'Process/LayeredMaterialNodeProcessing';
+import { removeLayeredMaterialNodeTile } from 'Process/LayeredMaterialNodeProcessing';
 import textureConverter from 'Converter/textureConverter';
 import { CACHE_POLICIES } from 'Core/Scheduler/Cache';
 
@@ -34,7 +34,7 @@ class RasterLayer extends Layer {
             this.cache.clear();
         }
         for (const root of this.parent.level0Nodes) {
-            root.traverse(removeLayeredMaterialNodeLayer(this.id));
+            root.traverse(removeLayeredMaterialNodeTile(this.id));
         }
     }
 }

src/Layer/TiledGeometryLayer.js

@@ -373,7 +373,7 @@ class TiledGeometryLayer extends GeometryLayer {
      */
     static hasEnoughTexturesToSubdivide(context, node) {
         const layerUpdateState = node.layerUpdateState || {};
-        let nodeLayer = node.material.getElevationLayer();
+        let nodeLayer = node.material.getElevationTile();
 
         for (const e of context.elevationLayers) {
             const extents = node.getExtentsByProjection(e.crs);
@@ -403,7 +403,7 @@ class TiledGeometryLayer extends GeometryLayer {
             if (layerUpdateState[c.id] && layerUpdateState[c.id].inError()) {
                 continue;
             }
-            nodeLayer = node.material.getLayer(c.id);
+            nodeLayer = node.material.getColorTile(c.id);
             if (c.source.extentInsideLimit(node.extent, zoom) && (!nodeLayer || nodeLayer.level < 0)) {
                 return false;
             }

src/Process/LayeredMaterialNodeProcessing.js

@@ -17,8 +17,8 @@ function refinementCommandCancellationFn(cmd) {
     // Cancel the command if the tile already has a better texture.
     // This is only needed for elevation layers, because we may have several
     // concurrent layers but we can only use one texture.
-    if (cmd.layer.isElevationLayer && cmd.requester.material.getElevationLayer() &&
-        cmd.targetLevel <= cmd.requester.material.getElevationLayer().level) {
+    if (cmd.layer.isElevationLayer && cmd.requester.material.getElevationTile() &&
+        cmd.targetLevel <= cmd.requester.material.getElevationTile().level) {
         return true;
     }
 
@@ -55,7 +55,7 @@ export function updateLayeredMaterialNodeImagery(context, layer, node, parent) {
         return;
     }
 
-    let nodeLayer = material.getLayer(layer.id);
+    let nodeLayer = material.getTile(layer.id);
 
     // Initialisation
     if (node.layerUpdateState[layer.id] === undefined) {
@@ -67,8 +67,8 @@ export function updateLayeredMaterialNodeImagery(context, layer, node, parent) {
             // parent texture
             if (!layer.noTextureParentOutsideLimit &&
                 parent.material &&
-                parent.material.getLayer &&
-                parent.material.getLayer(layer.id)) {
+                parent.material.getTile &&
+                parent.material.getTile(layer.id)) {
                 // ok, we're going to inherit our parent's texture
             } else {
                 node.layerUpdateState[layer.id].noMoreUpdatePossible();
@@ -81,7 +81,7 @@ export function updateLayeredMaterialNodeImagery(context, layer, node, parent) {
             nodeLayer = layer.setupRasterNode(node);
 
             // Init the node by parent
-            const parentLayer = parent.material?.getLayer(layer.id);
+            const parentLayer = parent.material?.getTile(layer.id);
             nodeLayer.initFromParent(parentLayer, extentsDestination);
         }
 
@@ -171,15 +171,15 @@ export function updateLayeredMaterialNodeElevation(context, layer, node, parent)
         return;
     }
     // Init elevation layer, and inherit from parent if possible
-    let nodeLayer = material.getElevationLayer();
+    let nodeLayer = material.getElevationTile();
     if (!nodeLayer) {
         nodeLayer = layer.setupRasterNode(node);
     }
 
     if (node.layerUpdateState[layer.id] === undefined) {
         node.layerUpdateState[layer.id] = new LayerUpdateState();
 
-        const parentLayer = parent.material?.getLayer(layer.id);
+        const parentLayer = parent.material?.getTile(layer.id);
         nodeLayer.initFromParent(parentLayer, extentsDestination);
 
         if (nodeLayer.level >= layer.source.zoom.min) {
@@ -190,8 +190,8 @@ export function updateLayeredMaterialNodeElevation(context, layer, node, parent)
 
     // Possible conditions to *not* update the elevation texture
     if (layer.frozen ||
-            !material.visible ||
-            !node.layerUpdateState[layer.id].canTryUpdate()) {
+        !material.visible ||
+        !node.layerUpdateState[layer.id].canTryUpdate()) {
         return;
     }
 
@@ -232,19 +232,19 @@ export function updateLayeredMaterialNodeElevation(context, layer, node, parent)
         err => handlingError(err, node, layer, targetLevel, context.view));
 }
 
-export function removeLayeredMaterialNodeLayer(layerId) {
+export function removeLayeredMaterialNodeTile(tileId) {
     /**
      * @param {TileMesh} node - The node to udpate.
      */
-    return function removeLayeredMaterialNodeLayer(node) {
-        if (node.material?.removeLayer) {
-            if (node.material.elevationLayerIds.indexOf(layerId) > -1) {
+    return function removeLayeredMaterialNodeTile(node) {
+        if (node.material?.removeTile) {
+            if (node.material.elevationTile !== undefined) {
                 node.setBBoxZ({ min: 0, max: 0 });
             }
-            node.material.removeLayer(layerId);
+            node.material.removeTile(tileId);
         }
-        if (node.layerUpdateState && node.layerUpdateState[layerId]) {
-            delete node.layerUpdateState[layerId];
+        if (node.layerUpdateState && node.layerUpdateState[tileId]) {
+            delete node.layerUpdateState[tileId];
         }
     };
 }

src/Renderer/ColorLayersOrdering.js

@@ -3,8 +3,8 @@ import { ImageryLayers } from 'Layer/Layer';
 function updateLayersOrdering(geometryLayer, imageryLayers) {
     const sequence = ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers);
     const cO = function cO(object) {
-        if (object.material?.setSequence) {
-            object.material.setSequence(sequence);
+        if (object.material?.setColorTileIds) {
+            object.material.setColorTileIds(sequence);
         }
     };
 
@@ -38,7 +38,8 @@ export default {
             const previousSequence = ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers);
             ImageryLayers.moveLayerUp(layer, imageryLayers);
             updateLayersOrdering(view.tileLayer, imageryLayers);
-            view.dispatchEvent({ type: COLOR_LAYERS_ORDER_CHANGED,
+            view.dispatchEvent({
+                type: COLOR_LAYERS_ORDER_CHANGED,
                 previous: { sequence: previousSequence },
                 new: { sequence: ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers) },
             });
@@ -64,7 +65,8 @@ export default {
             const previousSequence = ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers);
             ImageryLayers.moveLayerDown(layer, imageryLayers);
             updateLayersOrdering(view.tileLayer, imageryLayers);
-            view.dispatchEvent({ type: COLOR_LAYERS_ORDER_CHANGED,
+            view.dispatchEvent({
+                type: COLOR_LAYERS_ORDER_CHANGED,
                 previous: { sequence: previousSequence },
                 new: { sequence: ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers) },
             });
@@ -91,7 +93,8 @@ export default {
             const previousSequence = ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers);
             ImageryLayers.moveLayerToIndex(layer, index, imageryLayers);
             updateLayersOrdering(view.tileLayer, imageryLayers);
-            view.dispatchEvent({ type: COLOR_LAYERS_ORDER_CHANGED,
+            view.dispatchEvent({
+                type: COLOR_LAYERS_ORDER_CHANGED,
                 previous: { sequence: previousSequence },
                 new: { sequence: ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers) },
             });