Skip to content

[fix]: Vpc Layer and multisources -> too many request at once #2659

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ftoromanoff wants to merge 7 commits into
base: master
Choose a base branch
from
Draft

[fix]: Vpc Layer and multisources -> too many request at once #2659

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b515af1
examples(Potree2): add new exemples Potree2 3D with valid data //DO N…
ftoromanoff Nov 14, 2025
79f2447
refactor(PointCloudLayer): supp addInitializationStep()
ftoromanoff Jan 7, 2026
5d8d28a
fix(Vpc): add a loop to fetch metadata
ftoromanoff Dec 18, 2025
a2444d5
refactor(vpc): change loop to scheduler
ftoromanoff Dec 22, 2025
44fe572
refactor(PointCloudLayer): fix whenReady
ftoromanoff Jan 8, 2026
de51237
refactor(VpcSource): cleanup
ftoromanoff Jan 12, 2026
61e9b38
test(vpc): update
ftoromanoff Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 133 additions & 0 deletions examples/potree2_25d_map_Arene.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<html>
<head>
<title>Point Cloud Viewer</title>

<script type="importmap">
{
"imports": {
"itowns": "../dist/itowns.js",
"debug": "../dist/debug.js",
"LoadingScreen": "./jsm/GUI/LoadingScreen.js",
"itowns_widgets": "../dist/itowns_widgets.js",
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/",
"lil": "https://unpkg.com/[email protected]/dist/lil-gui.esm.min.js"
}
}
</script>

<style type="text/css">
#info {
color: #7ad7ff;
font-family: 'Open Sans', sans-serif;
position: absolute;
top: 0;
left: 0;
padding: 0.3rem;
background-color: #404040;
z-index: 1;
}
@media (max-width: 600px) {
#info,
.dg {
display: none;
}
}
</style>

<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="viewerDiv">
<div id="info"></div>
</div>

<script type="module">

import lil from 'lil';
import setupLoadingScreen from 'LoadingScreen';
import * as THREE from 'three';
import * as itowns from 'itowns';
import * as debug from 'debug';
import * as itowns_widgets from 'itowns_widgets';

// Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
itowns.CRS.defs('EPSG:2154', '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');

const viewerDiv = document.getElementById('viewerDiv');
viewerDiv.style.display = 'block';

const debugGui = new lil();

const view = new itowns.View('EPSG:2154', viewerDiv);
const controls = new itowns.PlanarControls(view);
setupLoadingScreen(viewerDiv, view);
view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);

// Configure Point Cloud layer
const source = new itowns.Potree2Source({
file: 'metadata.json',
url: 'https://media.githubusercontent.com/media/itowns/iTowns2-sample-data/potreeData/pointclouds/potree2.0/Arene-1_L93',
crs: 'EPSG:2154',
});

const name = source.url.split('/').pop();
const potreeLayer = new itowns.Potree2Layer(name, {
source,
});

// point selection on double-click
function dblClickHandler(event) {
var pick = view.pickObjectsAt(event, 5, potreeLayer);

for (const p of pick) {
console.info('Selected point #' + p.index + ' in position (' +
p.object.position.x + ', ' +
p.object.position.y + ', ' +
p.object.position.z +
') in Points ' + p.object.layer.id);
}
}
view.domElement.addEventListener('dblclick', dblClickHandler);

function onLayerReady() {
var lookAt = potreeLayer.root.center.toVector3();

var size = new THREE.Vector3();
potreeLayer.root.voxelOBB.box3D.getSize(size);
view.camera3D.far = 10.0 * size.length();

controls.groundLevel = potreeLayer.minElevationRange;
var corner = new THREE.Vector3(...potreeLayer.metadata.boundingBox.min);
var position = corner.clone().add(
size.multiply({ x: 0, y: 0, z: (size.x / size.z) })
);

view.camera3D.position.copy(position);
view.camera3D.lookAt(lookAt);
view.camera3D.updateProjectionMatrix();

view.notifyChange(view.camera3D);

// Add debug
debug.PointCloudDebug.initTools(view, potreeLayer, debugGui);

// update stats window
var info = document.getElementById('info');
view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.AFTER_RENDER, () => {
info.textContent = potreeLayer.displayedCount.toLocaleString() + ' points';
});
}

view.addLayer(potreeLayer).then(onLayerReady);
window.view = view;
window.itowns = itowns;
window.THREE = THREE;
</script>
</body>
</html>

123 changes: 123 additions & 0 deletions examples/potree2_3d_map_Arene.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<html>
<head>
<title>Potree2 Point Cloud on globe</title>

<script type="importmap">
{
"imports": {
"itowns": "../dist/itowns.js",
"debug": "../dist/debug.js",
"LoadingScreen": "./jsm/GUI/LoadingScreen.js",
"itowns_widgets": "../dist/itowns_widgets.js",
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/",
"lil": "https://unpkg.com/[email protected]/dist/lil-gui.esm.min.js"
}
}
</script>

<style type="text/css">
#info {
color: #7ad7ff;
font-family: 'Open Sans', sans-serif;
position: absolute;
top: 0;
left: 0;
padding: 0.3rem;
background-color: #404040;
z-index: 1;
}

@media (max-width: 600px) {
#info,
.dg {
display: none;
}
}
</style>

<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="viewerDiv"></div>
<div id="info"></div>

<script type="module">

import lil from 'lil';
import setupLoadingScreen from 'LoadingScreen';
import * as THREE from 'three';
import * as itowns from 'itowns';
import * as debug from 'debug';
import * as itowns_widgets from 'itowns_widgets';

// Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
itowns.CRS.defs('EPSG:2154', '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');

const viewerDiv = document.getElementById('viewerDiv');
viewerDiv.style.display = 'block';

const debugGui = new lil();


// view = new itowns.GlobeView(viewerDiv, placement, { handleCollision: false });
var view = new itowns.GlobeView(viewerDiv);
// setupLoadingScreen(viewerDiv, view);

itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(function _(config) {
config.source = new itowns.WMTSSource(config.source);
var layer = new itowns.ElevationLayer(config.id, config);
view.addLayer(layer);
});
itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
config.source = new itowns.WMTSSource(config.source);
var layer = new itowns.ColorLayer(config.id, config);
view.addLayer(layer);
});

view.controls.minDistance = 20;

// Arene
const source = new itowns.Potree2Source({
file: 'metadata.json',
url: 'https://media.githubusercontent.com/media/itowns/iTowns2-sample-data/potreeData/pointclouds/potree2.0/Arene-1_L93',
crs: 'EPSG:2154',
});

const name = source.url.split('/').pop();
const potreeLayer = new itowns.Potree2Layer(name, {
source,
});

function onLayerReady() {
var lookAt = potreeLayer.root.clampOBB.position;
var coordLookAt = new itowns.Coordinates(view.referenceCrs).setFromVector3(lookAt);

var size = new THREE.Vector3();
potreeLayer.root.voxelOBB.box3D.getSize(size);

view.controls.lookAtCoordinate({
coord: coordLookAt,
range: 2 * size.length(),
}, false);

// add GUI
debug.PointCloudDebug.initTools(view, potreeLayer, debugGui)

// update stats window
var info = document.getElementById('info');
view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.AFTER_RENDER, () => {
info.textContent = potreeLayer.displayedCount.toLocaleString() + ' points';
});
}

itowns.View.prototype.addLayer.call(view, potreeLayer).then(onLayerReady);

</script>
</body>
</html>

3 changes: 2 additions & 1 deletion packages/Main/src/Core/Potree2Node.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ class Potree2Node extends PotreeNodeBase {
const first = byteOffset;
const last = first + byteSize - 1n;

const regex = /^https:\/\/(raw|media)\.githubusercontent\.com/;
// When we specify 'multipart/byteranges' on headers request it triggers
// a preflight request. Currently github doesn't support it https://github.com/orgs/community/discussions/24659
// But if we omit header parameter, github seems to know it's a
Expand All @@ -95,7 +96,7 @@ class Potree2Node extends PotreeNodeBase {
...this.source.networkOptions,
headers: {
...this.source.networkOptions.headers,
...(this.url.startsWith('https://raw.githubusercontent.com') ? {} : { 'content-type': 'multipart/byteranges' }),
...(regex.test(this.url) ? {} : { 'content-type': 'multipart/byteranges' }),
Range: `bytes=${first}-${last}`,
},
};
Expand Down
2 changes: 1 addition & 1 deletion packages/Main/src/Core/Scheduler/Scheduler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ Scheduler.prototype.initDefaultProviders = function initDefaultProviders() {
};

Scheduler.prototype.runCommand = function runCommand(command, queue, executingCounterUpToDate) {
const provider = this.getProtocolProvider(command.layer.protocol);
const provider = command.callback || this.getProtocolProvider(command.layer.protocol);

if (!provider) {
throw new Error(`No known provider for layer ${command.layer.id}`);
Expand Down
7 changes: 4 additions & 3 deletions packages/Main/src/Layer/CopcLayer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,17 +37,18 @@ class CopcLayer extends PointCloudLayer {
this.isCopcLayer = true;
this.source = config.source;

const resolve = super.addInitializationStep();
this.whenReady = this.source.whenReady.then((source) => {
const loadOctree = this.source.whenReady.then((source) => {
this.setElevationRange();

const { rootHierarchyPage, cube } = source.info;
const { pageOffset, pageLength } = rootHierarchyPage;
this.root = new CopcNode(0, 0, 0, 0, pageOffset, pageLength, source, -1, this.crs);
this.root.setOBBes(cube.slice(0, 3), cube.slice(3, 6));

return this.root.loadOctree().then(resolve);
return this.root.loadOctree();
});

this._promises.push(loadOctree);
}
}

Expand Down
7 changes: 4 additions & 3 deletions packages/Main/src/Layer/EntwinePointTileLayer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,17 @@ class EntwinePointTileLayer extends PointCloudLayer<EntwinePointTileSource> {

this.isEntwinePointTileLayer = true;

const resolve = this.addInitializationStep();
this.whenReady = this.source.whenReady.then(() => {
const loadOctree = this.source.whenReady.then(() => {
this.setElevationRange();

this.root = new EntwinePointTileNode(0, 0, 0, 0, this.source, -1, this.crs);
const { bounds } = this.source;
this.root.setOBBes(bounds.slice(0, 3), bounds.slice(3, 6));

return this.root.loadOctree().then(resolve);
return this.root.loadOctree();
});

this._promises.push(loadOctree);
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/Main/src/Layer/Layer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,7 @@ class Layer extends THREE.EventDispatcher {
});
}

// TODO: check if this is really needed and for what ?
addInitializationStep() {
// Possibility to add rejection handler, if it's necessary.
let resolve;
Expand Down
7 changes: 4 additions & 3 deletions packages/Main/src/Layer/Potree2Layer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,7 @@ class Potree2Layer extends PointCloudLayer<Potree2Source> {

this.isPotree2Layer = true;

const resolve = this.addInitializationStep();
this.whenReady = this.source.whenReady.then((metadata) => {
const loadOctree = this.source.whenReady.then((metadata) => {
this.metadata = metadata;

const normal = Array.isArray(metadata.attributes) &&
Expand All @@ -105,8 +104,10 @@ class Potree2Layer extends PointCloudLayer<Potree2Source> {

this.root = root;

return this.root.loadOctree().then(resolve);
return this.root.loadOctree();
});

this._promises.push(loadOctree);
}
}

Expand Down
7 changes: 4 additions & 3 deletions packages/Main/src/Layer/PotreeLayer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,7 @@ class PotreeLayer extends PointCloudLayer<PotreeSource> {

this.isPotreeLayer = true;

const resolve = this.addInitializationStep();
this.whenReady = this.source.whenReady.then((cloud) => {
const loadOctree = this.source.whenReady.then((cloud) => {
const normal = Array.isArray(cloud.pointAttributes) &&
cloud.pointAttributes.find((elem: string) => elem.startsWith('NORMAL'));
if (normal) {
Expand All @@ -63,8 +62,10 @@ class PotreeLayer extends PointCloudLayer<PotreeSource> {
this.root.setOBBes([boundingBox.lx, boundingBox.ly, boundingBox.lz],
[boundingBox.ux, boundingBox.uy, boundingBox.uz]);

return this.root.loadOctree().then(resolve);
return this.root.loadOctree();
});

this._promises.push(loadOctree);
}
}

Expand Down
Loading
Loading