Skip to content

Commit

Permalink
display(fixed): Issues with occasional tile preview display glitches …
Browse files Browse the repository at this point in the history 
…have been fixed.

Signed-off-by: Tim Deubler <[email protected]>
  • Loading branch information
@TerminalTim
TerminalTim committed Dec 7, 2023
1 parent a58bd79 commit c388ea2
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 14 deletions.
18 changes: 12 additions & 6 deletions packages/display/src/displays/webgl/Display.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,6 @@ export type TileBufferData = {
data: {
tile: ScreenTile;
preview?: [string, number, number, number, number, number, number, number, number];
previewTile?: GLTile;
stencils?;
};
};
Expand Down Expand Up @@ -332,7 +331,9 @@ class WebGlDisplay extends BasicDisplay {
zSorted: BufferData[],
buffers: (GeometryBuffer | CustomBufferData['b'])[],
layer: Layer,
absZOrder: { [intZ: string]: number },
absZOrder: {
[intZ: string]: number
},
data: CustomBufferData['data'] | TileBufferData['data'],
tiled: boolean
) {
Expand Down Expand Up @@ -364,7 +365,9 @@ class WebGlDisplay extends BasicDisplay {
private initLayerBuffers(layers: Layers) {
const {buckets} = this;
let tileBuffers: BufferData[] = [];
let previewTiles: { [qk: string]: number[][] };
let previewTiles: {
[qk: string]: number[][]
};
let absZOrder = {};

for (let layer of layers) {
Expand Down Expand Up @@ -434,7 +437,6 @@ class WebGlDisplay extends BasicDisplay {
{
tile: screenTile,
preview,
previewTile,
stencils: previewTiles[previewQuadkey]
},
true
Expand Down Expand Up @@ -507,7 +509,7 @@ class WebGlDisplay extends BasicDisplay {
while (b--) {
let data = tileBuffers[b];
if (data?.tiled) {
render.initBufferScissorBox((<TileBufferData>data).b, (<TileBufferData>data).data.tile, (<TileBufferData>data).data.preview);
// render.initBufferScissorBox((<TileBufferData>data).b, (<TileBufferData>data).data.tile, (<TileBufferData>data).data.preview);
render.draw(<TileBufferData>data, min3dZIndex);
}
}
Expand Down Expand Up @@ -565,7 +567,11 @@ class WebGlDisplay extends BasicDisplay {
this.factory.destroy();
}

getRenderedFeatureAt(x: number, y: number, layers): { id: number | string | null; z: number; layerIndex: number } {
getRenderedFeatureAt(x: number, y: number, layers): {
id: number | string | null;
z: number;
layerIndex: number
} {
const {tiles} = this;
// console.time('getRenderedFeatureAt');
this.rayCaster.init(x, y, this.w, this.h, this.s, 1 / this.groundResolution);
Expand Down
33 changes: 25 additions & 8 deletions packages/display/src/displays/webgl/GLRender.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,8 @@ export class GLRender implements BasicRender {
gl.disable(gl.SCISSOR_TEST);
gl.depthMask(true);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);

this.reservedStencils.clear();
}

init(canvas: HTMLCanvasElement, devicePixelRation: number): void {
Expand Down Expand Up @@ -719,21 +721,37 @@ export class GLRender implements BasicRender {
private stencilVal: number;
private stencilSize: number;
private tileStencils: number[][];
private reservedStencils = new Map<number, number>();

private initStencil(refValue: number, tileSize: number, subStencils: number[][] = FULL_TILE_STENCIL) {
this.stencilVal = refValue;
this.stencilSize = tileSize;
this.tileStencils = subStencils;
};

private drawStencil(x: number, y: number, zoom: number/* , snapGrid: boolean*/) {
private reserveStencilValue(id: number): number {
const {reservedStencils} = this;
let refVal = reservedStencils.get(id);
if (!refVal) {
refVal = reservedStencils.size + 1;
if (refVal > 255) {
refVal = 1;
reservedStencils.clear();
this.gl.clear(this.gl.STENCIL_BUFFER_BIT);
}
reservedStencils.set(id, refVal);
}
return refVal;
}

private drawStencil(x: number, y: number, scale: number/* , snapGrid: boolean*/) {
// return this.gl.stencilFunc(this.gl.ALWAYS, 0, 0);
const refVal = this.stencilVal;
const {gl, stencilTile, sharedUniforms} = this;
const program: Program = this.getProgram(stencilTile);

const tileSize = this.stencilSize;
const stencilSize = Math.min(tileSize, tileSize / zoom);
const stencilSize = Math.min(tileSize, tileSize / scale);
const tileStencilId = scale * 16777216 + this.stencilVal;
const refVal = this.reserveStencilValue(tileStencilId);

gl.stencilFunc(gl.ALWAYS, refVal, 0xff);
gl.stencilOp(gl.REPLACE, gl.REPLACE, gl.REPLACE);
Expand All @@ -757,6 +775,7 @@ export class GLRender implements BasicRender {

return refVal;
}

private initScissor(x: number, y: number, size: number, matrix: Float32Array) {
// return this.gl.scissor(0, 0, this.gl.canvas.width, this.gl.canvas.height);
const {gl} = this;
Expand Down Expand Up @@ -851,7 +870,6 @@ export class GLRender implements BasicRender {
if (preview) {
const [previewQuadkey, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight] = preview;
const scale = dWidth / sWidth;
const dZoom = Math.pow(2, dTile.quadkey.length - previewQuadkey.length);
const px = dx / scale - sx;
const py = dy / scale - sy;
const previewTransformMatrix = this.initPreviewMatrix(x, y, scale);
Expand All @@ -861,9 +879,8 @@ export class GLRender implements BasicRender {
// // this.initScissor(px, py, tileSize, previewTransformMatrix);
// }
this.initStencil(dTile.i, tileSize, bufferData.data.stencils);
this.drawBuffer(buffer, px, py, previewTransformMatrix, dZoom);
this.drawBuffer(buffer, px, py, previewTransformMatrix, scale);
} else {
// if (buffer.scissor) this.initScissor(x, y, tileSize, this.vPMat);
this.initStencil(dTile.i, tileSize);
this.drawBuffer(buffer, x, y);
}
Expand Down Expand Up @@ -932,7 +949,7 @@ export class GLRender implements BasicRender {
if (prog === undefined) {
const Program = this.programConfig[type].program;
if (Program) {
prog = this.createProgram(id, Program, Program.getMacros(buffer) );
prog = this.createProgram(id, Program, Program.getMacros(buffer));
}
}

Expand Down

0 comments on commit c388ea2

Please sign in to comment.