Skip to content

fix: use provided xhrRequest when loading Potree2 hierarchy and octree #177

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

Closed
Jordan-Lane wants to merge 2 commits into from
Closed

fix: use provided xhrRequest when loading Potree2 hierarchy and octree #177

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21a3ee5
fix: use provided xhrRequest when loading Potree2 hierarchy and octree
Jordan-Lane Dec 19, 2024
bfa8ca5
fix: cacheable potree2 octree url
Jordan-Lane Feb 19, 2025
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
21 changes: 12 additions & 9 deletions src/loading2/octree-loader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export class NodeLoader {
gltfColorsPath = '';
gltfPositionsPath = '';

constructor(public getUrl: GetUrlFn, public url: string, public workerPool: WorkerPool, public metadata: Metadata) {
constructor(public getUrl: GetUrlFn, public url: string, public workerPool: WorkerPool, public metadata: Metadata, public xhrRequest: XhrRequest) {
}

async load(node: OctreeGeometryNode) {
Expand Down Expand Up @@ -63,15 +63,15 @@ export class NodeLoader {
const lastPositions = byteOffset * 4n * 3n + byteSize * 4n * 3n - 1n;

const headersPositions = { Range: `bytes=${firstPositions}-${lastPositions}` };
const responsePositions = await fetch(urlPositions, { headers: headersPositions });
const responsePositions = await this.xhrRequest(urlPositions, { headers: headersPositions });

const bufferPositions = await responsePositions.arrayBuffer();

const firstColors = byteOffset * 4n;
const lastColors = byteOffset * 4n + byteSize * 4n - 1n;

const headersColors = { Range: `bytes=${firstColors}-${lastColors}` };
const responseColors = await fetch(urlColors, { headers: headersColors });
const responseColors = await this.xhrRequest(urlColors, { headers: headersColors });
const bufferColors = await responseColors.arrayBuffer();

buffer = appendBuffer(bufferPositions, bufferColors);
Expand All @@ -87,8 +87,11 @@ export class NodeLoader {
buffer = new ArrayBuffer(0);
console.warn(`loaded node with 0 bytes: ${node.name}`);
} else {
const headers = { Range: `bytes=${first}-${last}` };
const response = await fetch(urlOctree, { headers });
// Add byte range as query param to enforce unique cacheable URI
const urlOctreeCacheable = `${urlOctree}?range=${first}to${last}`;

const headers = { Range: `bytes=${first}-${last}`, 'content-type': 'multipart/byteranges' };
const response = await this.xhrRequest(urlOctreeCacheable, { headers });
Copy link
Contributor Author

@Jordan-Lane Jordan-Lane Feb 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change is to fix Potree2 requests not being cached by the browser. To fix this, we explicitly add the byteRange as a query param to the request, creating a unique URI, and allowing Potree2 octree requests to be cached.

I would prefer merging this change as a seperate PR, however it builds off the xhrRequest changes that were a part of this PR. Please let me know if you would prefer this as a separate PR (or if you can think of a better way to make the request cacheable) and I will make that change. Thanks!


buffer = await response.arrayBuffer();
}
Expand Down Expand Up @@ -257,7 +260,7 @@ export class NodeLoader {
const last = first + hierarchyByteSize - BigInt(1);

const headers = { Range: `bytes=${first}-${last}` };
const response = await fetch(hierarchyUrl, { headers });
const response = await this.xhrRequest(hierarchyUrl, { headers });

const buffer = await response.arrayBuffer();

Expand Down Expand Up @@ -452,7 +455,7 @@ export class OctreeLoader {

this.applyCustomBufferURI(metadata.encoding, attributes);

const loader = this.createLoader(url, metadata, attributes);
const loader = this.createLoader(url, metadata, attributes, xhrRequest);

const boundingBox = this.createBoundingBox(metadata);
const offset = this.getOffset(boundingBox);
Expand All @@ -479,8 +482,8 @@ export class OctreeLoader {
}
}

private createLoader(url: string, metadata: Metadata, attributes: any): NodeLoader {
const loader = new NodeLoader(this.getUrl, url, this.workerPool, metadata);
private createLoader(url: string, metadata: Metadata, attributes: any, xhrRequest: XhrRequest): NodeLoader {
const loader = new NodeLoader(this.getUrl, url, this.workerPool, metadata, xhrRequest);
loader.attributes = attributes;
loader.scale = metadata.scale;
loader.offset = metadata.offset;
Expand Down