Skip to content

Commit

Permalink
Simplified clip to div by using scissor rather than changing viewport…
Browse files Browse the repository at this point in the history 
…+camera.

In this way we can treat coordinates equally for cliped and not clipped widgets!
  • Loading branch information
@davidetan
davidetan committed Dec 13, 2024
1 parent 3189072 commit 0233ac6
Showing 1 changed file with 25 additions and 62 deletions.
87 changes: 25 additions & 62 deletions spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1311,47 +1311,21 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
this.renderer.context.gl.clear(this.renderer.context.gl.COLOR_BUFFER_BIT);
}

const clipToBoundStart = (divBounds: Rectangle) => {
// break current batch and start a new one
const startScissor = (divBounds: Rectangle) => {
this.renderer.end();

// set the new viewport to the div bound
const viewportWidth = this.screenToWorldLength(divBounds.width);
const viewporthHeight = this.screenToWorldLength(divBounds.height);
this.renderer.context.gl.viewport(
this.renderer.begin();
this.renderer.context.gl.enable(this.renderer.context.gl.SCISSOR_TEST);
this.renderer.context.gl.scissor(
this.screenToWorldLength(divBounds.x),
this.canvas.height - this.screenToWorldLength(divBounds.y + divBounds.height),
viewportWidth,
viewporthHeight
this.screenToWorldLength(divBounds.width),
this.screenToWorldLength(divBounds.height)
);
this.renderer.camera.setViewport(viewportWidth, viewporthHeight);
this.renderer.camera.update();

// start the new batch that will be filled with only this skeleton
this.renderer.begin();

// Debug viewport
// if (true) {
// this.renderer.circle(true, -viewportWidth / 2, -viewporthHeight / 2, 20, red);
// this.renderer.circle(true, viewportWidth / 2, -viewporthHeight / 2, 20, red);
// this.renderer.circle(true, -viewportWidth / 2, viewporthHeight / 2, 20, red);
// this.renderer.circle(true, viewportWidth / 2, viewporthHeight / 2, 20, red);
// this.renderer.circle(true, 0, 0, 10, red);

// this.renderer.rect(true, 0, 0, -viewportWidth, -viewporthHeight, transparentWhite);
// this.renderer.rect(true, 0, 0, viewportWidth, viewporthHeight, transparentWhite);
// }
}

const clipToBoundEnd = () => {
// end clip batch
const endScissor = () => {
this.renderer.end();

this.renderer.context.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
this.renderer.camera.setViewport(this.canvas.width, this.canvas.height);
this.renderer.camera.update();

// start new normal batch
this.renderer.context.gl.disable(this.renderer.context.gl.SCISSOR_TEST);
this.renderer.begin();
}

Expand Down Expand Up @@ -1380,33 +1354,27 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
const { padLeft, padRight, padTop, padBottom } = widget
const paddingShiftHorizontal = (padLeft - padRight) / 2;
const paddingShiftVertical = (padTop - padBottom) / 2;
let divOriginX = 0;
let divOriginY = 0;
if (clip) {
// in clip mode, the world origin is the div center (divBounds center)
clipToBoundStart(divBounds);
divOriginX = this.screenToWorldLength(divBounds.width * (xAxis + paddingShiftHorizontal));
divOriginY = this.screenToWorldLength(divBounds.height * (yAxis - paddingShiftVertical));
} else {
// get the desired point into the the div (center by default) in world coordinate
const divX = divBounds.x + divBounds.width * ((xAxis + .5) + paddingShiftHorizontal);
const divY = divBounds.y + divBounds.height * ((-yAxis + .5) + paddingShiftVertical) - 1;
this.screenToWorld(tempVector, divX, divY);
divOriginX = tempVector.x;
divOriginY = tempVector.y;
}

// get the desired point into the the div (center by default) in world coordinate
const divX = divBounds.x + divBounds.width * ((xAxis + .5) + paddingShiftHorizontal);
const divY = divBounds.y + divBounds.height * ((-yAxis + .5) + paddingShiftVertical) - 1;
this.screenToWorld(tempVector, divX, divY);
let divOriginX = tempVector.x;
let divOriginY = tempVector.y;

const paddingShrinkWidth = 1 - (padLeft + padRight);
const paddingShrinkHeight = 1 - (padTop + padBottom);
const divWidthWorld = this.screenToWorldLength(divBounds.width * paddingShrinkWidth);
const divHeightWorld = this.screenToWorldLength(divBounds.height * paddingShrinkHeight);

if (clip) startScissor(divBounds);

if (loading) {
if (loadingSpinner) {
if (!widget.loadingScreen) widget.loadingScreen = new LoadingScreen(renderer);
widget.loadingScreen!.drawInCoordinates(divOriginX, divOriginY);
}
if (clip) clipToBoundEnd();
if (clip) endScissor();
return;
}

Expand Down Expand Up @@ -1499,18 +1467,13 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
widget.dragBoundsRectangle.width = this.worldToScreenLength(aw * skeleton.scaleX);
widget.dragBoundsRectangle.height = this.worldToScreenLength(ah * skeleton.scaleY);

if (clip) {
widget.dragBoundsRectangle.x += divBounds.x;
widget.dragBoundsRectangle.y += divBounds.y;
}

if (debug && !widget.debugDragDiv.isConnected) {
document.body.appendChild(widget.debugDragDiv);
if (debug) {
widget.debugDragDiv.style.left = `${widget.dragBoundsRectangle.x - this.overflowLeftSize}px`;
widget.debugDragDiv.style.top = `${widget.dragBoundsRectangle.y - this.overflowTopSize}px`;
widget.debugDragDiv.style.width = `${widget.dragBoundsRectangle.width}px`;
widget.debugDragDiv.style.height = `${widget.dragBoundsRectangle.height}px`;
if (!widget.debugDragDiv.isConnected) document.body.appendChild(widget.debugDragDiv);
}
widget.debugDragDiv.style.left = `${widget.dragBoundsRectangle.x - this.overflowLeftSize}px`;
widget.debugDragDiv.style.top = `${widget.dragBoundsRectangle.y - this.overflowTopSize}px`;
widget.debugDragDiv.style.width = `${widget.dragBoundsRectangle.width}px`;
widget.debugDragDiv.style.height = `${widget.dragBoundsRectangle.height}px`;

if (!debug && widget.debugDragDiv.isConnected) widget.debugDragDiv.remove();
} else {
Expand Down Expand Up @@ -1549,7 +1512,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
if (elementRef === widget) widget.classList.remove("debug-background-color");
}

if (clip) clipToBoundEnd();
if (clip) endScissor();
}
});

Expand Down

0 comments on commit 0233ac6

Please sign in to comment.