Merge pull request #18 from MetacityTools/dev

vojtatom · web-flow · commit df3a8417e57c · 2022-11-29T18:37:53.000+01:00
Removed skipping, bugfix styling
diff --git a/example/App.tsx b/example/App.tsx
@@ -1,63 +1,45 @@
 import React from 'react'
 import './App.css'
-import { MetacityGL, Extensions } from '../metacitygl/metacitygl';
+import { MetacityGL, Utils, Extensions } from '../metacitygl/metacitygl';
 
 function App() {
     return (
         <MetacityGL
-            //background={0x151d29}
-            background={0x151515}
-            target={[-742921, -1043242, 0]}
-            antialias
-            bloom
-            bloomRadius={0.1}
-            bloomStrength={1}>
-            <Extensions.MetacityTreeLayer
-                api="https://data.metacity.cc/pragueLampsDetailTree"
-                instance="/lamp.glb"
-                size={2}
-                pickable
-                swapDistance={4000}
-                color={[1.5, 1.0, 0.8]}
-                tree={{
-                    zOffset: 10,
-                    visualizeTree: false
-                }}
-            />
-            <Extensions.MetacityTreeLayer
-                api="https://data.metacity.cc/pragueBuildingTree"
-                pickable
-                color={0x444444}
-                tree={{
-                    //visualizeTree: false
-                }}
-            />
-             <Extensions.MetacityTreeLayer
-                api="https://data.metacity.cc/pragueTreesTree"
-                instance="/tree.glb"
-                size={1}
-                swapDistance={4000}
-                color={0x333333}
-                tree={{
-                    visualizeTree: false
-                }}
-            />
-            <Extensions.MetacityTreeLayer
-                api="https://data.metacity.cc/pragueTerrainTree"
-                color={0x222222}
-                tree={{
-                    zOffset: -1
-                }}
-            />
-            <Extensions.MetacityTreeLayer
-                api="https://data.metacity.cc/pragueBridgesTree"
-                color={0x333333}
-                tree={{
-                    //zOffset: -1
-                    visualizeTree: false
-                }}
-            />
-        </MetacityGL>
+        //background={0x151d29}
+        background={0x151515}
+        target={[-742921, -1043242, 0]}
+        antialias>
+        <Extensions.MetacityTreeLayer
+            api="https://data.metacity.cc/pragueBuildingTree"
+            pickable
+            enableUI
+            colorPlaceholder={0x202c3d}
+            styles={[
+                new Utils.Styles.Style().add(
+                    new Utils.Styles.StyleAttributeRangeExt({
+                        attribute: 'height',
+                        min: 20,
+                        max: 50
+                    })
+                ).useColor([0x04d3ff, 0xFF00ea])
+            ]}
+            tree={{
+                zOffset: 5,
+                visualizeTree: false
+            }}
+        >
+        <div id="legend">
+            <h2>Prague: Building Heights</h2>
+            <div id="map">
+                <div id="colormap"></div>
+                <div id="labels">
+                    <div>20 m and below</div>
+                    <div>50 m and up</div>
+                </div>
+            </div>
+        </div>
+        </Extensions.MetacityTreeLayer>
+    </MetacityGL>
     )
 }
 
diff --git a/metacitygl/extensions/metacity/loader/style.ts b/metacitygl/extensions/metacity/loader/style.ts
@@ -28,10 +28,11 @@ function computeColorBuffer(ids: Uint8Array, colorBuffer: Uint8Array, colorTable
     for (let offset = 0; offset < ids.length; offset += 3) {
         id = idToNumber(offset);
         color = colorTable.get(id);
+
         if (color) {
-            colorBuffer[offset] = color[0];
-            colorBuffer[offset + 1] = color[1];
-            colorBuffer[offset + 2] = color[2];
+            colorBuffer[offset] = color[0] * 255;
+            colorBuffer[offset + 1] = color[1] * 255;
+            colorBuffer[offset + 2] = color[2] * 255;
         }
     }
     return colorBuffer;
diff --git a/metacitygl/extensions/metacity/loader/worker.ts b/metacitygl/extensions/metacity/loader/worker.ts
@@ -22,15 +22,14 @@ async function loadModel(message: any) {
         const useMetadata = styles !== undefined && styles.length > 0;
         const meshASM = new Utils.Assemblers.MeshAssembler(idOffset, useMetadata);
         
-        let layerID = 0;
         for (let i = 0; i < groups.meshes.length; i++) {
             const mesh = groups.meshes[i];
             if (!mesh.meta)
                 mesh.meta = {};
             mesh.meta["url"] = url;
-            mesh.meta["layerID"] = layerID++;
-
-            if (!skipObjects.includes(mesh.meta["layerID"]))
+            //TODO resolve skipping based on metadata
+            //mesh.meta["layerID"] = layerID++;
+            //if (!skipObjects.includes(mesh.meta["layerID"]))
                 meshASM.addMesh(mesh.positions, color, mesh.meta);
         }
 
@@ -40,9 +39,8 @@ async function loadModel(message: any) {
             if (!points.meta)
                 points.meta = {};
             points.meta["url"] = url;
-            points.meta["layerID"] = layerID++;
-
-            if (!skipObjects.includes(points.meta["layerID"]))
+            //points.meta["layerID"] = layerID++;
+            //if (!skipObjects.includes(points.meta["layerID"]))
                 pointsASM.addPoints(points.positions, points.meta);
         }
 
diff --git a/metacitygl/utils/assemblers/line.ts b/metacitygl/utils/assemblers/line.ts
@@ -1,5 +1,5 @@
 import { vec3 } from "../types";
-import { colorHexToArr } from "../utils/color";
+import { colorHexToArr255 } from "../utils/color";
 
 
 //can be used to construst both lines and double-lines
@@ -18,7 +18,7 @@ export class LineAssembler {
         //TODO does it have to be byte?
         this.colors.push(rgb[0] * 255, rgb[1] * 255, rgb[2] * 255);
         if (this.useMetadata) {
-            const idcolor = colorHexToArr(this.id);
+            const idcolor = colorHexToArr255(this.id);
             this.ids.push(idcolor[0], idcolor[1], idcolor[2]);
             this.metadata[this.id++] = metadata;
         }
diff --git a/metacitygl/utils/assemblers/mesh.ts b/metacitygl/utils/assemblers/mesh.ts
@@ -1,5 +1,5 @@
 import { computeBBox } from "../utils/bbox";
-import { colorHexToArr } from "../utils/color";
+import { colorHexToArr255 } from "../utils/color";
 import { computeDots } from "../utils/normals";
 
 
@@ -26,7 +26,7 @@ export class MeshAssembler {
         }
 
         if (this.useMetadata) {
-            const idcolor = colorHexToArr(this.id);
+            const idcolor = colorHexToArr255(this.id);
             for (let i = 0; i < vertexCount; i++) {
                 this.ids.push(idcolor[0], idcolor[1], idcolor[2]);
             }
diff --git a/metacitygl/utils/assemblers/points.ts b/metacitygl/utils/assemblers/points.ts
@@ -1,5 +1,5 @@
 import { computeBBox } from "../utils/bbox";
-import { colorHexToArr } from "../utils/color";
+import { colorHexToArr255 } from "../utils/color";
 
 
 export class PointsAssembler {
@@ -22,7 +22,7 @@ export class PointsAssembler {
 
         if (this.useMetadata) {
             const vertexCount = vertices.length / 3;
-            const idcolor = colorHexToArr(this.id);
+            const idcolor = colorHexToArr255(this.id);
             for (let i = 0; i < vertexCount; i++) {
                 this.ids.push(idcolor[0], idcolor[1], idcolor[2]);
             }
diff --git a/metacitygl/utils/utils/color.ts b/metacitygl/utils/utils/color.ts
@@ -27,6 +27,13 @@ export function sampleColor(color: Types.Color | Types.Color[], indicator: numbe
     return color as Types.Color;
 }
 
+export function colorHexToArr255(hex: number): [number, number, number] {
+    const r = ( hex >> 16 & 255 );
+    const g = ( hex >> 8 & 255 );
+    const b = ( hex & 255 );
+    return [r, g, b];
+}
+
 export function colorHexToArr(hex: number): [number, number, number] {
     const r = ( hex >> 16 & 255 ) / 255;
     const g = ( hex >> 8 & 255 ) / 255;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "metacitygl",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "repository": {
     "type": "git",

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`import { computeBBox } from "../utils/bbox";`
`2`		`-import { colorHexToArr } from "../utils/color";`
	`2`	`+import { colorHexToArr255 } from "../utils/color";`
`3`	`3`	`import { computeDots } from "../utils/normals";`
`4`	`4`
`5`	`5`
`@@ -26,7 +26,7 @@ export class MeshAssembler {`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`if (this.useMetadata) {`
`29`		`- const idcolor = colorHexToArr(this.id);`
	`29`	`+ const idcolor = colorHexToArr255(this.id);`
`30`	`30`	`for (let i = 0; i < vertexCount; i++) {`
`31`	`31`	`this.ids.push(idcolor[0], idcolor[1], idcolor[2]);`
`32`	`32`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "metacitygl",`
`3`		`- "version": "0.2.0",`
	`3`	`+ "version": "0.2.1",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`