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

Commit cd13137

Browse files
vojtatomvojtatom
authored
Merge pull request #16 from MetacityTools/dev
Antialias + Bug fixes
2 parents 4ce63f5 + ac4b492 commit cd13137

File tree

10 files changed

+161
-196
lines changed

10 files changed

+161
-196
lines changed

‎example/App.tsx‎

Lines changed: 74 additions & 138 deletions
Large diffs are not rendered by default.

‎metacitygl/components/metacitygl.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Utils } from "../metacitygl";
88

99
interface MetacityGLProps {
1010
background?: number;
11+
antialias?: boolean;
1112
children?: React.ReactNode | React.ReactNode[];
1213
target?: [number, number, number];
1314
position?: [number, number, number];
@@ -40,6 +41,7 @@ export function MetacityGL(props: MetacityGLProps) {
4041
background: props.background ?? 0x000000,
4142
target: props.target ?? [0, 0, 0],
4243
position: props.position,
44+
antialias: props.antialias,
4345
});
4446
setContext(context);
4547
context.updateSize();
@@ -171,7 +173,7 @@ export function MetacityGL(props: MetacityGLProps) {
171173
</div>
172174
{ enableTimeline && <Timeline context={context}/> }
173175
</div>
174-
<div className="MetacityGLSidebar" style={{
176+
<div className={"MetacityGLSidebar" + (props.invertColors ? " invert" : "")} style={{
175177
display: enableUI ? "block" : "none",
176178
}}>
177179
{children.map((child, index) => {

‎metacitygl/components/style.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525

2626
.MetacityGLSidebar {
2727
min-width: 20rem;
28-
background: rgba(0, 0, 0, 0.95);
28+
background: rgba(0, 0, 0, 0.5);
2929
border-radius: 3px;
3030
font-size: 1em;
3131
color: #fff;
@@ -35,9 +35,16 @@
3535
scrollbar-width: 0.5rem;
3636
bottom: 1rem;
3737
right: 1rem;
38+
backdrop-filter: blur(10px);
39+
-webkit-backdrop-filter: blur(10px);
3840
z-index: 100;
3941
}
4042

43+
.MetacityGLSidebar.invert {
44+
background: rgba(255, 255, 255, 0.5);
45+
color: #000;
46+
}
47+
4148
.MetacityGLSidebar::-webkit-scrollbar {
4249
width: 0.5rem;
4350
}
@@ -50,6 +57,7 @@
5057
background-color: #555;
5158
}
5259

60+
5361
/* timeline */
5462
.timelineControls {
5563
display: flex;
@@ -142,6 +150,7 @@ select.speed {
142150
padding: 0.5rem;
143151
font-size: 0.8em;
144152
z-index: 10;
153+
user-select: none;
145154
}
146155

147156
pre {
@@ -159,6 +168,10 @@ pre {
159168
color: #EEE;
160169
}
161170

171+
.invert .metacityLabel a {
172+
color: #888;
173+
}
174+
162175
.play {
163176
color: #FFF;
164177
margin: 0 0.5rem;

‎metacitygl/extensions/metacity/layers/tree.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ export class TreeLayer extends Layer {
3232
}
3333
};
3434

35-
console.log("TreeLayer setup");
3635
this.treeWorker.postMessage({
3736
api: this.api,
3837
color: this.color,

‎metacitygl/extensions/metacity/loader/worker.ts‎

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { load } from '@loaders.gl/core';
1+
import { load } from '@loaders.gl/core';
22
import { GLTFLoader } from '@loaders.gl/gltf';
33
import { groupBuffersByType } from './group';
44
import { applyStyle } from './style';
@@ -15,37 +15,44 @@ self.onmessage = (message: MessageEvent) => {
1515

1616
async function loadModel(message: any) {
1717
const { url, idOffset, color, styles } = message.data as MetacityWorkerInput;
18-
1918
const colorArr = Utils.Color.colorHexToArr(color);
20-
const gltf = await load(url, GLTFLoader);
21-
const groups = groupBuffersByType(gltf);
22-
const useMetadata = styles !== undefined && styles.length > 0;
23-
const meshASM = new Utils.Assemblers.MeshAssembler(idOffset, useMetadata);
24-
for(let i = 0; i < groups.meshes.length; i++) {
25-
const mesh = groups.meshes[i];
26-
meshASM.addMesh(mesh.positions, colorArr, mesh.meta);
27-
}
28-
29-
const pointsASM = new Utils.Assemblers.PointsAssembler(meshASM.idCounter);
30-
for(let i = 0; i < groups.points.length; i++) {
31-
const points = groups.points[i];
32-
pointsASM.addPoints(points.positions, points.meta);
33-
}
34-
35-
const pointBuffers = pointsASM.toBuffers();
36-
const meshBuffers = meshASM.toBuffers();
37-
38-
if (styles.length > 0 && meshBuffers) {
39-
applyStyle(styles, color, meshBuffers.ids!, meshBuffers.colors, meshBuffers.metadata!);
40-
}
4119

42-
const transferables = meshASM.pickTransferables(meshBuffers);
43-
transferables.push(...pointsASM.pickTransferables(pointBuffers));
4420

45-
self.postMessage({
46-
mesh: meshBuffers,
47-
points: pointBuffers
48-
}, transferables);
21+
try {
22+
const gltf = await load(url, GLTFLoader);
23+
const groups = groupBuffersByType(gltf);
24+
const useMetadata = styles !== undefined && styles.length > 0;
25+
const meshASM = new Utils.Assemblers.MeshAssembler(idOffset, useMetadata);
26+
for (let i = 0; i < groups.meshes.length; i++) {
27+
const mesh = groups.meshes[i];
28+
mesh.meta["url"] = url;
29+
meshASM.addMesh(mesh.positions, colorArr, mesh.meta);
30+
}
31+
32+
const pointsASM = new Utils.Assemblers.PointsAssembler(meshASM.idCounter);
33+
for (let i = 0; i < groups.points.length; i++) {
34+
const points = groups.points[i];
35+
points.meta["url"] = url;
36+
pointsASM.addPoints(points.positions, points.meta);
37+
}
38+
39+
const pointBuffers = pointsASM.toBuffers();
40+
const meshBuffers = meshASM.toBuffers();
41+
42+
if (styles.length > 0 && meshBuffers) {
43+
applyStyle(styles, color, meshBuffers.ids!, meshBuffers.colors, meshBuffers.metadata!);
44+
}
45+
46+
const transferables = meshASM.pickTransferables(meshBuffers);
47+
transferables.push(...pointsASM.pickTransferables(pointBuffers));
48+
49+
self.postMessage({
50+
mesh: meshBuffers,
51+
points: pointBuffers
52+
}, transferables);
53+
} catch (e) {
54+
console.error(e);
55+
}
4956

5057
}
5158

‎metacitygl/extensions/metacity/tree/tree.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,8 @@ export class QuadTree {
7676
this.metadata["height"] = this.dimensions.z;
7777

7878
this.applyStyles(styles);
79-
this.initChildren(props, data, depth);
79+
//if (depth < 8)
80+
this.initChildren(props, data, depth);
8081
this.cachcedSpaceRequired = this.spaceRequired();
8182
}
8283

‎metacitygl/extensions/metacity/tree/worker.ts‎

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,14 @@ async function loadModel(message: any) {
2222

2323
if (data.api) {
2424
await initWorker(data.api, data.color, data.styles, data.treeConfig);
25-
}
26-
25+
}
26+
2727
if (data.position) {
28-
if (!tree)
28+
if (!tree){
29+
self.postMessage({tilesToLoad: []});
2930
return;
30-
31+
}
32+
3133
const geometry = constructModel(data.position);
3234
const transferable = geometry.array ? [geometry.array.buffer] : [];
3335
self.postMessage(geometry, transferable);
@@ -36,26 +38,30 @@ async function loadModel(message: any) {
3638

3739
async function initWorker(api: string, color: number, styles: string[], config: TreeConfig) {
3840
const meta = api + '/meta.json';
39-
const treedata = await axios.get(meta);
40-
const { data } = treedata;
41-
const arrColor = Utils.Color.colorHexToArr(color);
42-
const stylesCls = [];
43-
for (let i = 0; i < styles.length; i++)
44-
stylesCls.push(Utils.Styles.Style.deserialize(styles[i]));
45-
46-
settings.update(config);
47-
tree = new QuadTree({
48-
data,
49-
bmin: data.border.min,
50-
bmax: data.border.max,
51-
color: arrColor,
52-
styles: stylesCls,
53-
});
54-
console.log(tree);
55-
console.log(`Tree requires MAX ${tree.spaceRequired() / 1024 / 1024} MB`);
41+
42+
try {
43+
const treedata = await axios.get(meta);
44+
const { data } = treedata;
45+
const arrColor = Utils.Color.colorHexToArr(color);
46+
const stylesCls = [];
47+
for (let i = 0; i < styles.length; i++)
48+
stylesCls.push(Utils.Styles.Style.deserialize(styles[i]));
49+
50+
settings.update(config);
51+
tree = new QuadTree({
52+
data,
53+
bmin: data.border.min,
54+
bmax: data.border.max,
55+
color: arrColor,
56+
styles: stylesCls,
57+
});
58+
console.log(`Tree requires MAX ${tree.spaceRequired() / 1024 / 1024} MB`);
59+
} catch (e) {
60+
console.error(e);
61+
}
5662
}
5763

58-
function constructModel(position: {x: number, y: number, z: number}) {
64+
function constructModel(position: { x: number, y: number, z: number }) {
5965
const geometry = {
6066
array: settings.visualizeTree ? new Float32Array(tree.spaceRequired()) : undefined,
6167
filled: 0,

‎metacitygl/graphics/core/renderer.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import * as THREE from "three";
44
export interface RendererProps {
55
canvas: HTMLCanvasElement;
66
background?: number;
7+
antialias?: boolean;
78
}
89

910

@@ -13,7 +14,7 @@ export class Renderer {
1314
constructor(props: RendererProps, container: HTMLElement) {
1415
this.renderer = new THREE.WebGLRenderer({
1516
canvas: props.canvas,
16-
antialias: false,
17+
antialias: props.antialias ?? false,
1718
powerPreference: 'high-performance'
1819
});
1920
this.renderer.setClearColor(props.background ?? 0x000000, 1);

‎metacitygl/graphics/materials/treeMaterial.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ void main(){
1313
fscolor = color / 255.0;
1414
fsdot = dot;
1515
vec3 transformed = position;
16-
transformed = transformed * dimensions + center;
16+
transformed = transformed * dimensions * 0.9f + center;
1717
gl_Position = projectionMatrix * (modelViewMatrix * vec4(transformed, 1.0));
1818
}`;
1919

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "metacitygl",
3-
"version": "0.1.4",
3+
"version": "0.1.5",
44
"type": "module",
55
"repository": {
66
"type": "git",

0 commit comments

Comments
 (0)