Skip to content

Commit 7a74228

Browse files
AlaricBaraouAlaricBaraou
committed
Add prototype for MVT support
1 parent 9a566a9 commit 7a74228

22 files changed

Lines changed: 1655 additions & 4 deletions

‎example/data/14-8801-5371.vector.pbf‎

178 KB
Binary file not shown.

‎example/images/14-8801-5371.vector-expected.png‎

671 KB
Loading

‎example/three/mvt.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
5+
<meta charset="utf-8"/>
6+
<title>MVT Loader Debug</title>
7+
<style>
8+
body { margin: 0; background-color: #111; overflow: hidden; }
9+
#info { position: absolute; top: 10px; width: 100%; text-align: center; color: white; font-family: sans-serif; pointer-events: none; }
10+
</style>
11+
</head>
12+
<body>
13+
<div id="info">
14+
MVT Loader Debug<br/>
15+
Visualizing Raw Tile Coordinates
16+
</div>
17+
<script src="./mvt.js" type="module"></script>
18+
</body>
19+
</html>

‎example/three/mvt.js‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
import {
2+
Scene,
3+
WebGLRenderer,
4+
PerspectiveCamera,
5+
GridHelper,
6+
AxesHelper,
7+
TextureLoader,
8+
PlaneGeometry,
9+
MeshBasicMaterial,
10+
Mesh,
11+
SRGBColorSpace,
12+
FrontSide
13+
} from 'three';
14+
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
15+
import { MVTLoader } from '../../src/three/renderer/loaders/MVTLoader.js';
16+
import { MVTImageSource } from '../../src/three/plugins/images/sources/MVTImageSource.js';
17+
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
18+
19+
// --- Configuration & State ---
20+
const CONFIG = {
21+
TILE_SIZE: 4096,
22+
PBF_PATH: '../data/14-8801-5371.vector.pbf',
23+
EXPECTED_PNG_PATH: '/images/14-8801-5371.vector-expected.png'
24+
};
25+
26+
const state = {
27+
showExpected: true,
28+
showGeneratedTexture: false,
29+
showMeshScene: true,
30+
};
31+
32+
const layers = {
33+
expectedPlane: null,
34+
generatedPlane: null,
35+
meshGroup: null
36+
};
37+
38+
let scene, renderer, camera, controls, gui;
39+
40+
// --- Initialization ---
41+
init();
42+
setupGUI();
43+
loadData();
44+
render();
45+
46+
function init() {
47+
48+
renderer = new WebGLRenderer( { antialias: true } );
49+
renderer.setPixelRatio( window.devicePixelRatio );
50+
renderer.setSize( window.innerWidth, window.innerHeight );
51+
renderer.setClearColor( 0x111111 );
52+
document.body.appendChild( renderer.domElement );
53+
54+
scene = new Scene();
55+
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
56+
camera.position.set( 2048, 4000, 4000 );
57+
58+
const grid = new GridHelper( CONFIG.TILE_SIZE, 8, 0xff0000, 0x444444 );
59+
grid.position.set( 2048, 0, 2048 );
60+
scene.add( grid );
61+
62+
scene.add( new AxesHelper( 500 ) );
63+
64+
controls = new OrbitControls( camera, renderer.domElement );
65+
controls.target.set( 2048, 0, 2048 );
66+
controls.update();
67+
68+
window.addEventListener( 'resize', onWindowResize, false );
69+
70+
}
71+
72+
// --- Loading Logic ---
73+
async function loadData() {
74+
75+
const textureLoader = new TextureLoader();
76+
const mvtLoader = new MVTLoader();
77+
const imageSource = new MVTImageSource();
78+
79+
// 1. Load Expected PNG Reference
80+
textureLoader.load( CONFIG.EXPECTED_PNG_PATH, ( texture ) => {
81+
82+
texture.colorSpace = SRGBColorSpace;
83+
layers.expectedPlane = createDisplayPlane( texture, - 5 );
84+
layers.expectedPlane.visible = state.showExpected;
85+
scene.add( layers.expectedPlane );
86+
87+
} );
88+
89+
// 2. Load Generated Texture from PBF
90+
try {
91+
92+
const res = await imageSource.fetchData( CONFIG.PBF_PATH );
93+
const buffer = await res.arrayBuffer();
94+
const texture = await imageSource.processBufferToTexture( buffer );
95+
96+
layers.generatedPlane = createDisplayPlane( texture, - 2 );
97+
layers.generatedPlane.visible = state.showGeneratedTexture;
98+
scene.add( layers.generatedPlane );
99+
100+
} catch ( err ) {
101+
102+
console.error( 'Error generating texture:', err );
103+
104+
}
105+
106+
// 3. Load 3D Mesh Scene
107+
try {
108+
109+
const result = await mvtLoader.loadAsync( CONFIG.PBF_PATH );
110+
layers.meshGroup = result.scene;
111+
layers.meshGroup.rotation.x = - Math.PI / 2;
112+
layers.meshGroup.visible = state.showMeshScene;
113+
scene.add( layers.meshGroup );
114+
115+
} catch ( err ) {
116+
117+
console.error( 'Error loading MVT Mesh:', err );
118+
119+
}
120+
121+
}
122+
123+
/**
124+
* Helper to create a flat plane for textures
125+
*/
126+
function createDisplayPlane( texture, yOffset ) {
127+
128+
const geometry = new PlaneGeometry( CONFIG.TILE_SIZE, CONFIG.TILE_SIZE );
129+
const material = new MeshBasicMaterial( {
130+
map: texture,
131+
side: FrontSide,
132+
transparent: true,
133+
opacity: 0.7
134+
} );
135+
const plane = new Mesh( geometry, material );
136+
plane.rotation.x = - Math.PI / 2;
137+
plane.position.set( CONFIG.TILE_SIZE / 2, yOffset, CONFIG.TILE_SIZE / 2 );
138+
return plane;
139+
140+
}
141+
142+
// --- GUI Setup ---
143+
function setupGUI() {
144+
145+
gui = new GUI();
146+
147+
gui.add( state, 'showExpected' ).name( 'Expected PNG' ).onChange( v => {
148+
149+
if ( layers.expectedPlane ) layers.expectedPlane.visible = v;
150+
151+
} );
152+
153+
gui.add( state, 'showGeneratedTexture' ).name( 'Generated Texture' ).onChange( v => {
154+
155+
if ( layers.generatedPlane ) layers.generatedPlane.visible = v;
156+
157+
} );
158+
159+
gui.add( state, 'showMeshScene' ).name( 'MVT Mesh Scene' ).onChange( v => {
160+
161+
if ( layers.meshGroup ) layers.meshGroup.visible = v;
162+
163+
} );
164+
165+
}
166+
167+
// --- Standard Boilerplate ---
168+
function onWindowResize() {
169+
170+
camera.aspect = window.innerWidth / window.innerHeight;
171+
camera.updateProjectionMatrix();
172+
renderer.setSize( window.innerWidth, window.innerHeight );
173+
174+
}
175+
176+
function render() {
177+
178+
requestAnimationFrame( render );
179+
renderer.render( scene, camera );
180+
181+
}

‎example/three/mvt_globe.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
5+
<meta charset="utf-8"/>
6+
<title>MVT Globe Debug</title>
7+
<style>
8+
body { margin: 0; background-color: #111; overflow: hidden; }
9+
#info { position: absolute; top: 10px; width: 100%; text-align: center; color: white; font-family: sans-serif; pointer-events: none; }
10+
</style>
11+
</head>
12+
<body>
13+
<div id="info">
14+
MVT Globe Debug<br/>
15+
Switch between mesh or textured globe with MVT tiles.<br/>
16+
</div>
17+
<script src="./mvt_globe.js" type="module"></script>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)