materials should be ordered following the element order close #13

src/Projection.js

@@ -35,6 +35,7 @@ export default class Projection {
   id
   ready = false
   #focus
+  #index
 
   constructor ({
     renderer,
@@ -54,7 +55,8 @@ export default class Projection {
     attributes,
     id,
     focus,
-    element
+    element,
+    index
   } = {}) {
     this.id = id
     this.renderer = renderer
@@ -67,6 +69,8 @@ export default class Projection {
 
     // this.updateLayerMeshes()
 
+    this.index = index
+
     this.camera = orthographic
       ? new OrthographicCamera(...(bounds ?? [100, -100, -100, 100]), 0, far)
       : new PerspectiveCamera(fov, ratio, near, far)
@@ -102,6 +106,17 @@ export default class Projection {
     this.ready = true
   }
 
+  set index (index) {
+    this.#index = index
+    for (const layer in this.material) {
+      this.#layers[layer].material[this.index] = this.material[layer]
+    }
+  }
+
+  get index () {
+    return this.#index
+  }
+
   set layers (layers) {
     this.#layerNames = layers
     this.updateLayers()
@@ -285,7 +300,7 @@ export default class Projection {
       })
 
       this.#layers[layer].geometry.addGroup(0, Infinity, this.#layers[layer].geometry.groups.length)
-      this.#layers[layer].material.push(this.material[layer])
+      this.#layers[layer].material[this.index] = this.material[layer]
     }
 
     this.updateLayers()

src/main.js

@@ -91,8 +91,6 @@ class VantageRenderer extends HTMLElement {
     })
 
     this.scene.add(setupLights())
-
-    console.log('----   READY   ----')
   }
 
   update = () => {
@@ -116,8 +114,14 @@ class VantageRenderer extends HTMLElement {
     const width = texture.source.data.videoWidth ?? texture.source.data.width
     const height = texture.source.data.videoHeight ?? texture.source.data.height
 
+    const index = Array.prototype.indexOf.call(this.children, element)
+    Object.values(this.projections).forEach(projection => {
+      if (projection.index >= index) projection.index++
+    })
+
     const projection = new Projection({
       id,
+      index,
       attributes,
       renderer: this.renderer,
       scene: this.scene,
@@ -175,8 +179,14 @@ class VantageRenderer extends HTMLElement {
   }
 
   removeProjection ({ id }) {
+    const index = this.projections[id].index
+
     this.projections[id].destroy()
     delete this.projections[id]
+
+    Object.values(this.projections).forEach(projection => {
+      if (projection.index > index) projection.index--
+    })
   }
 }