Skip to content
This repository was archived by the owner on Jun 14, 2023. It is now read-only.

Commit 8268371

Browse files
vojtatomvojtatom
authored
Merge pull request #17 from MetacityTools/dev
Adding Bloom effect, introducing post-processing pipelines
2 parents cd13137 + 40a7da3 commit 8268371

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+481
-220
lines changed

‎example/App.tsx‎

Lines changed: 103 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,117 @@
11
import React from 'react'
22
import './App.css'
3-
import { MetacityGL, Utils, Extensions } from '../metacitygl/metacitygl';
3+
import { MetacityGL, Extensions } from '../metacitygl/metacitygl';
44

55
function App() {
6-
76
return (
87
<MetacityGL
9-
//background={0x151d29}
10-
background={0xFFFFFF}
11-
target={[-742921, -1043242, 0]}
12-
invertColors
13-
antialias
14-
>
15-
<Extensions.MetacityTreeLayer
16-
api="https://data.metacity.cc/pragueTreesFlatTree"
17-
instance="/tree.glb"
18-
size={20}
19-
swapDistance={4000}
20-
color={0x1ae310}
21-
tree={{
22-
visualizeTree: false
23-
}}
24-
/>
25-
<Extensions.MetacityTreeLayer
26-
api="https://data.metacity.cc/pragueBuildingFlatTree"
27-
color={0xFFFFFF}
28-
tree={{
29-
visualizeTree: false
30-
}}
31-
/>
32-
<Extensions.MetacityTreeLayer
33-
api="https://data.metacity.cc/pragueUtilizationTree"
34-
pickable
35-
enableUI
36-
color={0x888}
37-
styles={[
38-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 100})) .useColor(0xFFE5CC), //hospodářská půda
39-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 200})) .useColor(0x049F22), //les
40-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 300})) .useColor(0x0AD254), //"louky, zahrady"
41-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 400})) .useColor(0x5EFC1E), //zeleň v zástavbě
42-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 401})) .useColor(0x5EFC1E), //zeleň v zástavbě - veřejná zeleň
43-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 402})) .useColor(0x5EFC1E), //zeleň v zástavbě - ostatní zeleň
44-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 403})) .useColor(0x5EFC1E), //zeleň v zástavbě - vyhrazená
45-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 500})) .useColor(0x66CCFF), //vodní plochy
46-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 501})) .useColor(0x66CCFF), //"vodní plochy - řeka, potok"
47-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 502})) .useColor(0x66CCFF), //"vodní plochy - rybník, jezírko"
48-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 503})) .useColor(0x66CCFF), //"vodní plochy - vodní dílo, hráz"
49-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 504})) .useColor(0x66CCFF), //vodní plochy - přístav
50-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 600})) .useColor(0xEEEEEE), //zástavba
51-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 601})) .useColor(0xEEEEEE), //zástavba - budovy
52-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 602})) .useColor(0xEEEEEE), //zástavba - ostatní stavby
53-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 603})) .useColor(0xEEEEEE), //zástavba - dvory
54-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 604})) .useColor(0xEEEEEE), //zástavba - budovy z ortofotomap
55-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 700})) .useColor(0xFCFCFC), //komunikace
56-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 701})) .useColor(0x9fa6a7), //komunikace - silnice
57-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 702})) .useColor(0xFCFCFC), //komunikace - chodník nebo parková cesta
58-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 703})) .useColor(0xFCFCFC), //komunikace - cyklostezka
59-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 704})) .useColor(0x9fa6a7), //komunikace - parkoviště
60-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 705})) .useColor(0x9fa6a7), //komunikace - samostatné tramvajové těleso
61-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 800})) .useColor(0xFCFCFC), //letiště
62-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 900})) .useColor(0x5EFC1E), //rekreační plochy
63-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 901})) .useColor(0xFCFCFC), //rekreační plochy - sportoviště
64-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 902})) .useColor(0xFCFCFC), //rekreační plochy - ostatní
65-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 1000})) .useColor(0xDDDDDD), //ostatní plochy
66-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 1001})) .useColor(0xDDDDDD), //ostatní plochy - průmyslový areál
67-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 1002})) .useColor(0xDDDDDD), //ostatní plochy - ostatní
68-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 1003})) .useColor(0xFCFCFC), //"ostatní plochy - zpevněné plochy kolem zástavby, komunikací, vodních ploch"
69-
new Utils.Styles.Style().add(new Utils.Styles.StyleAttributeEqualTo({ attribute: "CTVUK_KOD", value: 1100})) .useColor(0xF2F2FF), //železnice
70-
]}
71-
tree={{
72-
//visualizeTree: false
73-
}}
74-
>
75-
<div id="legend">
76-
</div>
77-
</Extensions.MetacityTreeLayer>
78-
</MetacityGL>
8+
//background={0x151d29}
9+
background={0x151515}
10+
target={[-742921, -1043242, 0]}
11+
antialias
12+
bloom
13+
bloomRadius={0.1}
14+
bloomStrength={1}>
15+
<Extensions.MetacityTreeLayer
16+
api="https://data.metacity.cc/pragueLampsDetailTree"
17+
instance="/lamp.glb"
18+
size={2}
19+
pickable
20+
swapDistance={4000}
21+
color={[1.5, 1.0, 0.8]}
22+
tree={{
23+
zOffset: 10,
24+
visualizeTree: false
25+
}}
26+
/>
27+
<Extensions.MetacityTreeLayer
28+
api="https://data.metacity.cc/pragueBuildingTree"
29+
pickable
30+
color={0x444444}
31+
tree={{
32+
//visualizeTree: false
33+
}}
34+
/>
35+
<Extensions.MetacityTreeLayer
36+
api="https://data.metacity.cc/pragueTreesTree"
37+
instance="/tree.glb"
38+
size={1}
39+
swapDistance={4000}
40+
color={0x333333}
41+
tree={{
42+
visualizeTree: false
43+
}}
44+
/>
45+
<Extensions.MetacityTreeLayer
46+
api="https://data.metacity.cc/pragueTerrainTree"
47+
color={0x222222}
48+
tree={{
49+
zOffset: -1
50+
}}
51+
/>
52+
<Extensions.MetacityTreeLayer
53+
api="https://data.metacity.cc/pragueBridgesTree"
54+
color={0x333333}
55+
tree={{
56+
//zOffset: -1
57+
visualizeTree: false
58+
}}
59+
/>
60+
</MetacityGL>
7961
)
8062
}
8163

8264
export default App
8365

8466

67+
/*
68+
<Extensions.MetacityTreeLayer
69+
api="https://data.metacity.cc/pragueLampsDetailTree"
70+
instance="/lamp.glb"
71+
size={1}
72+
pickable
73+
swapDistance={4000}
74+
color={[1.8, 1.5, 1.5]}
75+
tree={{
76+
zOffset: 5,
77+
visualizeTree: false
78+
}}
79+
/>
80+
<Extensions.MetacityTreeLayer
81+
api="https://data.metacity.cc/pragueBuildingTree"
82+
pickable
83+
color={0x444444}
84+
tree={{
85+
zOffset: 5,
86+
}}
87+
/>
88+
<Extensions.MetacityTreeLayer
89+
api="https://data.metacity.cc/pragueTreesTree"
90+
instance="/tree.glb"
91+
size={1}
92+
swapDistance={4000}
93+
color={0x333333}
94+
tree={{
95+
visualizeTree: false
96+
}}
97+
/>
98+
<Extensions.MetacityTreeLayer
99+
api="https://data.metacity.cc/pragueTerrainTree"
100+
color={0x222222}
101+
tree={{
102+
//zOffset: -1
103+
}}
104+
/>
105+
<Extensions.MetacityTreeLayer
106+
api="https://data.metacity.cc/pragueBridgesTree"
107+
color={0x333333}
108+
tree={{
109+
//zOffset: -1
110+
visualizeTree: false
111+
}}
112+
/>
113+
114+
*/
115+
85116

86117

‎example/main.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import App from './App'
44

55

66
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
7-
<React.StrictMode>
7+
//<React.StrictMode>
88
<App />
9-
</React.StrictMode>
9+
//</React.StrictMode>
1010
)
1111

‎metacitygl/components/metacitygl.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import React from "react";
22
import "./style.css"
3-
import { GraphicsContext } from "../graphics/context";
3+
import { GraphicsContext, UserInputProps } from "../graphics/context";
44
import { Timeline } from "./timeline";
55
import { MetacityLabel } from "./label";
66
import { MetacityLayerProps } from "./layer";
77
import { Utils } from "../metacitygl";
88

9-
interface MetacityGLProps {
10-
background?: number;
11-
antialias?: boolean;
9+
interface MetacityGLProps extends UserInputProps {
1210
children?: React.ReactNode | React.ReactNode[];
13-
target?: [number, number, number];
14-
position?: [number, number, number];
1511
invertColors?: boolean;
1612
}
1713

@@ -22,6 +18,7 @@ export function MetacityGL(props: MetacityGLProps) {
2218
const LoaderRef = React.useRef<HTMLDivElement>(null);
2319
const [hoverId, setHoverId] = React.useState<number|null>(0);
2420
const [metadataHover, setMetadataHover] = React.useState<any>(0);
21+
const [tooltipOn, setTooltipOn] = React.useState<boolean>(false);
2522
const [hoverLocation, setHoverLocation] = React.useState<{ x: number, y: number }|null>(null);
2623
const children = React.Children.toArray(props.children);
2724
let layersLoaded = 0;
@@ -38,10 +35,7 @@ export function MetacityGL(props: MetacityGLProps) {
3835
const context = new GraphicsContext({
3936
canvas: canvas,
4037
container: container,
41-
background: props.background ?? 0x000000,
42-
target: props.target ?? [0, 0, 0],
43-
position: props.position,
44-
antialias: props.antialias,
38+
...props
4539
});
4640
setContext(context);
4741
context.updateSize();
@@ -69,7 +63,9 @@ export function MetacityGL(props: MetacityGLProps) {
6963

7064

7165
const onMove = (e: React.PointerEvent<HTMLCanvasElement>) => {
72-
//TODO implement hover
66+
if(!tooltipOn)
67+
return;
68+
7369
const x = e.clientX;
7470
const y = e.clientY;
7571
const rect = e.currentTarget.getBoundingClientRect();
@@ -115,7 +111,6 @@ export function MetacityGL(props: MetacityGLProps) {
115111

116112
const onLoaded = () => {
117113
layersLoaded += 1;
118-
console.log("loaded", layersLoaded);
119114

120115
if (LoaderRef.current) {
121116
const container = LoaderRef.current.children[0]
@@ -165,6 +160,7 @@ export function MetacityGL(props: MetacityGLProps) {
165160
left: hoverLocation?.x,
166161
top: hoverLocation?.y,
167162
pointerEvents: "none",
163+
display: tooltipOn ? "block" : "none",
168164
}}
169165
>
170166
<pre>{JSON.stringify(metadataHover, null, 2) }</pre>
@@ -181,6 +177,13 @@ export function MetacityGL(props: MetacityGLProps) {
181177
return React.cloneElement(child, { context: context, onLoaded });
182178
}
183179
})}
180+
<div className="settings">
181+
<h2>Settings</h2>
182+
<label htmlFor="tooltipToggle" className="checkInput">
183+
<input type="checkbox" id="tooltipToggle" checked={tooltipOn} onChange={(e) => setTooltipOn(e.target.checked)}/>
184+
Show metadata on hover
185+
</label>
186+
</div>
184187
<MetacityLabel context={context}/>
185188
</div>
186189
</div>

‎metacitygl/components/style.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,4 +273,23 @@ button.appButton:hover {
273273

274274
.invert #loadingName {
275275
color: rgba(0, 0, 0, 0.5);
276+
}
277+
278+
279+
.settings {
280+
margin: 1rem 1rem 0;
281+
font-size: 0.8em;
282+
}
283+
284+
.settings h2 {
285+
font-size: 1rem;
286+
}
287+
288+
289+
.checkInput {
290+
display: block;
291+
}
292+
293+
.checkInput input {
294+
margin-right: 0.5rem;
276295
}

0 commit comments

Comments
 (0)