backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2026-03-25 00:27:24 +01:00
Code Issues Projects Releases Packages Wiki Activity

feat: Optimize WebGL2LayerClass initialization and improve camera synchronization

Browse source
This commit is contained in:
Azgaar 2026-03-12 19:29:45 +01:00
parent 9e00d69843
commit 744dbb154c
1 changed files with 23 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/modules/webgl-layer.ts
View file

@ -19,26 +19,20 @@ export class WebGL2LayerClass {
private scene: Scene | null = null; private scene: Scene | null = null;
private layers: Map<string, RegisteredLayer> = new Map(); private layers: Map<string, RegisteredLayer> = new Map();
private pendingConfigs: WebGLLayerConfig[] = []; // queue for register() before init() private pendingConfigs: WebGLLayerConfig[] = []; // queue for register() before init()
private resizeObserver: ResizeObserver | null = null;
private rafId: number | null = null; private rafId: number | null = null;
init(): boolean { init(): boolean {
this.renderer = new WebGLRenderer({ this.renderer = new WebGLRenderer({
canvas: this.canvas, canvas: this.canvas,
antialias: true, antialias: false,
alpha: true, alpha: true,
}); });
this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setPixelRatio(window.devicePixelRatio || 1);
this.renderer.setSize(window.innerWidth, window.innerHeight, false); this.canvas.style.width = `${graphWidth}px`;
this.canvas.style.height = `${graphHeight}px`;
this.renderer.setSize(graphWidth, graphHeight, false);
this.scene = new Scene(); this.scene = new Scene();
this.camera = new OrthographicCamera( this.camera = new OrthographicCamera(0, graphWidth, 0, graphHeight, -1, 1);
0,
window.innerWidth,
0,
window.innerHeight,
-1,
1,
);
console.log("WebGL2Layer: initialized"); console.log("WebGL2Layer: initialized");
@ -52,7 +46,6 @@ export class WebGL2LayerClass {
this.layers.set(config.id, { config, group }); this.layers.set(config.id, { config, group });
} }
this.pendingConfigs = []; this.pendingConfigs = [];
// this.observeResize();
return true; return true;
} }
@ -108,27 +101,24 @@ export class WebGL2LayerClass {
} }
syncTransform(): void { syncTransform(): void {
if (!this.camera) return; console.log("WebGL2Layer: syncing transform", {
const width = window.innerWidth || 960; viewX,
const height = window.innerHeight || 540; viewY,
console.log("WebGL2Layer: syncTransform", { width, height }); scale,
this.camera.left = (0 - viewX) / scale; graphWidth,
this.camera.right = (width - viewX) / scale; graphHeight,
this.camera.top = (0 - viewY) / scale;
this.camera.bottom = (height - viewY) / scale;
this.camera.updateProjectionMatrix();
}
private observeResize(): void {
if (!this.renderer) return;
this.resizeObserver = new ResizeObserver((entries) => {
const { width, height } = entries[0].contentRect;
if (this.renderer && width > 0 && height > 0) {
this.renderer.setSize(width, height, false);
this.requestRender();
}
}); });
this.resizeObserver.observe(this.canvas); if (!this.camera) return;
const x = -viewX / scale;
const y = -viewY / scale;
const w = graphWidth / scale;
const h = graphHeight / scale;
this.camera.left = x;
this.camera.right = x + w;
this.camera.top = y;
this.camera.bottom = y + h;
this.camera.updateProjectionMatrix();
} }
private render(): void { private render(): void {