refactor(GeometryLayer): reference to material properties from Layer …

…properties.

src/Converter/Feature2Mesh.js

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import Earcut from 'earcut';
 import { FEATURE_TYPES } from 'Core/Feature';
+import ReferLayerProperties from 'Layer/ReferencingLayerProperties';
 import { deprecatedFeature2MeshOptions } from 'Core/Deprecated/Undeprecator';
 
 const _color = new THREE.Color();
@@ -115,7 +116,6 @@ function addExtrudedPolygonSideFaces(indices, length, offset, count, isClockWise
     }
 }
 
-const pointMaterial = new THREE.PointsMaterial();
 function featureToPoint(feature, options) {
     const ptsIn = feature.vertices;
     const normals = feature.normals;
@@ -152,12 +152,11 @@ function featureToPoint(feature, options) {
     geom.setAttribute('color', new THREE.BufferAttribute(colors, 3, true));
     if (batchIds) { geom.setAttribute('batchId', new THREE.BufferAttribute(batchIds, 1)); }
 
-    pointMaterial.size = feature.style.point.radius;
+    options.pointMaterial.size = feature.style.point.radius;
 
-    return new THREE.Points(geom, pointMaterial);
+    return new THREE.Points(geom, options.pointMaterial);
 }
 
-var lineMaterial = new THREE.LineBasicMaterial();
 function featureToLine(feature, options) {
     const ptsIn = feature.vertices;
     const normals = feature.normals;
@@ -181,7 +180,7 @@ function featureToLine(feature, options) {
     let lines;
 
     // TODO CREATE material for each feature
-    lineMaterial.linewidth = feature.style.stroke.width;
+    options.lineMaterial.linewidth = feature.style.stroke.width;
     const globals = { stroke: true };
     if (feature.geometries.length > 1) {
         const countIndices = (count - feature.geometries.length) * 2;
@@ -218,7 +217,7 @@ function featureToLine(feature, options) {
         geom.setAttribute('color', new THREE.BufferAttribute(colors, 3, true));
         if (batchIds) { geom.setAttribute('batchId', new THREE.BufferAttribute(batchIds, 1)); }
         geom.setIndex(new THREE.BufferAttribute(indices, 1));
-        lines = new THREE.LineSegments(geom, lineMaterial);
+        lines = new THREE.LineSegments(geom, options.lineMaterial);
     } else {
         const context = { globals, properties: () => feature.geometries[0].properties };
         const style = feature.style.drawingStylefromContext(context);
@@ -230,12 +229,11 @@ function featureToLine(feature, options) {
             fillBatchIdArray(id, batchIds, 0, count);
             geom.setAttribute('batchId', new THREE.BufferAttribute(batchIds, 1));
         }
-        lines = new THREE.Line(geom, lineMaterial);
+        lines = new THREE.Line(geom, options.lineMaterial);
     }
     return lines;
 }
 
-const material = new THREE.MeshBasicMaterial();
 function featureToPolygon(feature, options) {
     const ptsIn = feature.vertices;
     const normals = feature.normals;
@@ -297,7 +295,7 @@ function featureToPolygon(feature, options) {
 
     geom.setIndex(new THREE.BufferAttribute(getIntArrayFromSize(indices, vertices.length / 3), 1));
 
-    return new THREE.Mesh(geom, material);
+    return new THREE.Mesh(geom, options.polygonMaterial);
 }
 
 function area(contour, offset, count) {
@@ -397,8 +395,7 @@ function featureToExtrudedPolygon(feature, options) {
 
     geom.setIndex(new THREE.BufferAttribute(getIntArrayFromSize(indices, vertices.length / 3), 1));
 
-    const mesh = new THREE.Mesh(geom, material);
-    return mesh;
+    return new THREE.Mesh(geom, options.polygonMaterial);
 }
 
 /**
@@ -438,6 +435,11 @@ function featureToMesh(feature, options) {
     mesh.feature = feature;
     mesh.position.z = feature.altitude.min - options.GlobalZTrans;
 
+    if (options.layer) {
+        mesh.layer = options.layer;
+        mesh.layers.set(options.layer.threejsLayer);
+    }
+
     return mesh;
 }
 
@@ -450,7 +452,9 @@ export default {
      * a THREE.Group.
      *
      * @param {Object} options - options controlling the conversion
-     * @param {function} [options.batchId] - optional function to create batchId attribute. It is passed the feature property and the feature index. As the batchId is using an unsigned int structure on 32 bits, the batchId could be between 0 and 4,294,967,295.
+     * @param {function} [options.batchId] - optional function to create batchId attribute.
+     * It is passed the feature property and the feature index. As the batchId is using an unsigned int structure on 32 bits,
+     * the batchId could be between 0 and 4,294,967,295.
      * @return {function}
      * @example <caption>Example usage of batchId with featureId.</caption>
      * view.addLayer({
@@ -481,13 +485,24 @@ export default {
         return function _convert(collection) {
             if (!collection) { return; }
 
+            if (!options.pointMaterial) {
+                // Opacity and wireframe refered with layer properties
+                // TODO :next step is move these properties to Style
+                options.pointMaterial = ReferLayerProperties(new THREE.PointsMaterial(), this);
+                options.lineMaterial = ReferLayerProperties(new THREE.LineBasicMaterial(), this);
+                options.polygonMaterial = ReferLayerProperties(new THREE.MeshBasicMaterial(), this);
+                options.layer = this;
+            }
+
             const features = collection.features;
 
             if (!features || features.length == 0) { return; }
 
             const group = new THREE.Group();
             options.GlobalZTrans = collection.center.z;
 
+            group.layer = options.layer;
+
             features.forEach(feature => group.add(featureToMesh(feature, options)));
 
             group.quaternion.copy(collection.quaternion);

src/Converter/convertToTile.js

@@ -7,20 +7,17 @@ import * as THREE from 'three';
 import TileMesh from 'Core/TileMesh';
 import LayeredMaterial from 'Renderer/LayeredMaterial';
 import newTileGeometry from 'Core/Prefab/TileBuilder';
+import ReferLayerProperties from 'Layer/ReferencingLayerProperties';
 
 const dimensions = new THREE.Vector2();
 
 function setTileFromTiledLayer(tile, tileLayer) {
-    tile.material.transparent = tileLayer.opacity < 1.0;
-    tile.material.opacity = tileLayer.opacity;
-
     if (tileLayer.diffuse) {
         tile.material.diffuse = tileLayer.diffuse;
     }
 
     if (__DEBUG__) {
         tile.material.showOutline = tileLayer.showOutline || false;
-        tile.material.wireframe = tileLayer.wireframe || false;
     }
 
     if (tileLayer.isGlobeLayer) {
@@ -56,6 +53,8 @@ export default {
             result.geometry._count++;
             const crsCount = layer.tileMatrixSets.length;
             const material = new LayeredMaterial(layer.materialOptions, crsCount);
+            ReferLayerProperties(material, layer);
+
             const tile = new TileMesh(result.geometry, material, layer, extent, level);
 
             // Commented because layer.threejsLayer is undefined;

src/Layer/GeometryLayer.js

@@ -100,31 +100,8 @@ class GeometryLayer extends Layer {
             configurable: true,
         });
 
-        this.defineLayerProperty('opacity', 1.0, () => {
-            const root = this.parent ? this.parent.object3d : this.object3d;
-            root.traverse((object) => {
-                if (object.layer == this) {
-                    this.changeOpacity(object);
-                } else if (object.content && object.content.layer == this) {
-                    object.content.traverse(this.changeOpacity);
-                }
-            });
-        });
-
-        this.defineLayerProperty('wireframe', false, () => {
-            const root = this.parent ? this.parent.object3d : this.object3d;
-            root.traverse((object) => {
-                if (object.layer == this && object.material) {
-                    object.material.wireframe = this.wireframe;
-                } else if (object.content && object.content.layer == this) {
-                    object.content.traverse((o) => {
-                        if (o.material && o.layer == this) {
-                            o.material.wireframe = this.wireframe;
-                        }
-                    });
-                }
-            });
-        });
+        this.opacity = 1.0;
+        this.wireframe = false;
 
         this.attachedLayers = [];
         this.visible = config.visible == undefined ? true : config.visible;
@@ -233,27 +210,6 @@ class GeometryLayer extends Layer {
         const object3d = this.parent ? this.parent.object3d : this.object3d;
         return Picking.pickObjectsAt(view, coordinates, radius, object3d, target, this.threejsLayer);
     }
-
-    /**
-     * Change the opacity of an object, according to the value of the `opacity`
-     * property of this layer.
-     *
-     * @param {Object} object - The object to change the opacity from. It is
-     * usually a `THREE.Object3d` or an implementation of it.
-     */
-    changeOpacity(object) {
-        if (object.material) {
-            // != undefined: we want the test to pass if opacity is 0
-            if (object.material.opacity != undefined) {
-                object.material.transparent = this.opacity < 1.0;
-                object.material.opacity = this.opacity;
-            }
-            if (object.material.uniforms && object.material.uniforms.opacity != undefined) {
-                object.material.transparent = this.opacity < 1.0;
-                object.material.uniforms.opacity.value = this.opacity;
-            }
-        }
-    }
 }
 
 export default GeometryLayer;

src/Layer/ReferencingLayerProperties.js

@@ -0,0 +1,37 @@
+
+// next step is move these properties to Style class
+// and hide transparent mechanism
+
+function ReferLayerProperties(material, layer) {
+    if (layer && layer.isGeometryLayer) {
+        let transparent = material.transparent;
+        material.layer = layer;
+
+        if (material.uniforms && material.uniforms.opacity != undefined) {
+            Object.defineProperty(material.uniforms.opacity, 'value', {
+                get: () => material.layer.opacity,
+            });
+        } else if (material.opacity != undefined) {
+            Object.defineProperty(material, 'opacity', {
+                get: () => material.layer.opacity,
+            });
+        }
+
+        Object.defineProperty(material, 'wireframe', {
+            get: () => material.layer.wireframe,
+        });
+        Object.defineProperty(material, 'transparent', {
+            get: () => {
+                if (transparent != material.layer.opacity < 1.0) {
+                    material.needsUpdate = true;
+                    transparent = material.layer.opacity < 1.0;
+                }
+                return transparent;
+            },
+        });
+    }
+
+    return material;
+}
+
+export default ReferLayerProperties;

src/Parser/B3dmParser.js

@@ -6,6 +6,7 @@ import LegacyGLTFLoader from 'Parser/deprecated/LegacyGLTFLoader';
 import shaderUtils from 'Renderer/Shader/ShaderUtils';
 import utf8Decoder from 'Utils/Utf8Decoder';
 import C3DTBatchTable from 'Core/3DTiles/C3DTBatchTable';
+import ReferLayerProperties from 'Layer/ReferencingLayerProperties';
 
 const matrixChangeUpVectorZtoY = (new THREE.Matrix4()).makeRotationX(Math.PI / 2);
 // For gltf rotation
@@ -201,8 +202,7 @@ export default {
                                 shaderUtils.patchMaterialForLogDepthSupport(mesh.material);
                                 console.warn('b3dm shader has been patched to add log depth buffer support');
                             }
-                            mesh.material.transparent = options.opacity < 1.0;
-                            mesh.material.opacity = options.opacity;
+                            ReferLayerProperties(mesh.material, options.layer);
                         }
                     };
                     gltf.scene.traverse(init_mesh);

src/Process/FeatureProcessing.js

@@ -6,22 +6,6 @@ import Coordinates from 'Core/Geographic/Coordinates';
 
 const coord = new Coordinates('EPSG:4326', 0, 0, 0);
 
-function assignLayer(object, layer) {
-    if (object) {
-        object.layer = layer;
-        if (object.material) {
-            object.material.transparent = layer.opacity < 1.0;
-            object.material.opacity = layer.opacity;
-            object.material.wireframe = layer.wireframe;
-        }
-        object.layers.set(layer.threejsLayer);
-        for (const c of object.children) {
-            assignLayer(c, layer);
-        }
-        return object;
-    }
-}
-
 export default {
     update(context, layer, node) {
         if (!node.parent && node.children.length) {
@@ -74,7 +58,6 @@ export default {
             // if request return empty json, WFSProvider.getFeatures return undefined
             result = result[0];
             if (result) {
-                assignLayer(result, layer);
                 // call onMeshCreated callback if needed
                 if (layer.onMeshCreated) {
                     layer.onMeshCreated(result);

src/Provider/3dTilesProvider.js

@@ -13,6 +13,7 @@ function b3dmToMesh(data, layer, url) {
         doNotPatchMaterial: layer.doNotPatchMaterial,
         opacity: layer.opacity,
         registeredExtensions: layer.registeredExtensions,
+        layer,
     };
     return B3dmParser.parse(data, options).then((result) => {
         const batchTable = result.batchTable;
@@ -75,11 +76,6 @@ function executeCommand(command) {
         obj.layers.set(layer.threejsLayer);
         obj.userData.metadata = metadata;
         obj.layer = layer;
-        if (obj.material) {
-            obj.material.transparent = layer.opacity < 1.0;
-            obj.material.opacity = layer.opacity;
-            obj.material.wireframe = layer.wireframe;
-        }
     };
     if (path) {
         // Check if we have relative or absolute url (with tileset's lopocs for example)

src/Source/FileSource.js

@@ -80,7 +80,14 @@ import CRS from 'Core/Geographic/Crs';
  *     .then(function _(geojson) {
  *         return itowns.GeoJsonParser.parse(geojson, {
  *             in: { crs: 'EPSG:4326' },
- *             out: { crs: view.tileLayer.extent.crs },
+ *             out: { crs: view.tileLayer.extent.crs,
+ *                      style: new itowns.Style({
+ *                          fill: {
+ *                              color: new itowns.THREE.Color(0xffcc00),
+ *                              extrusion_height: () => 5000,
+ *                      }),
+ *                  },
+ *             },
  *         });
  *     }).then(function _(features) {
  *         ariege.source = new itowns.FileSource({

src/Source/WFSSource.js

@@ -80,10 +80,16 @@ import CRS from 'Core/Geographic/Crs';
  * });
  *
  * // Create the layer
- * const geometryLayer = new itowns.GeometryLayer('mesh_build', {
- *     update: itowns.FeatureProcessing.update,
- *     convert: itowns.Feature2Mesh.convert({ extrude: () => 50 }),
+ * const geometryLayer = new itowns.FeatureGeometryLayer('mesh_build', {
+ *     style: new itowns.Style({
+ *         fill: {
+ *             color: new itowns.THREE.Color(0xffcc00),
+ *             base_altitude: (p) => p.altitude,
+ *             extrusion_height: (p) => p.height,
+ *         }
+ *     },
  *     source: wfsSource,
+ *     zoom: { min: 14 },
  * });
  *
  * // Add the layer