diff --git a/docs/Rectangle-AABB-Matrix.md b/docs/Rectangle-AABB-Matrix.md
deleted file mode 100644
index e0c33b4a8..000000000
--- a/docs/Rectangle-AABB-Matrix.md
+++ /dev/null
@@ -1,192 +0,0 @@
-# Rectangle AABB Matrix
-
-Initialize a Rectangle to a 1 unit square centered at 0 x 0 transformed by a model matrix.
-
------
-
-Every drawable is a 1 x 1 unit square that is rotated by its direction, scaled by its skin size and scale, and offset by its rotation center and position. The square representation is made up of 4 points that are transformed by the drawable properties. Often we want a shape that simplifies those 4 points into a non-rotated shape, a axis aligned bounding box.
-
-One approach is to compare the x and y components of each transformed vector and find the minimum and maximum x component and the minimum and maximum y component.
-
-We can start from this approach and determine an alternative one that prodcues the same output with less work.
-
-Starting with transforming one point, here is a 3D point, `v`, transformation by a matrix, `m`.
-
-```js
-const v0 = v[0];
-const v1 = v[1];
-const v2 = v[2];
-
-const d = v0 * m[(0 * 4) + 3] + v1 * m[(1 * 4) + 3] + v2 * m[(2 * 4) + 3] + m[(3 * 4) + 3];
-dst[0] = (v0 * m[(0 * 4) + 0] + v1 * m[(1 * 4) + 0] + v2 * m[(2 * 4) + 0] + m[(3 * 4) + 0]) / d;
-dst[1] = (v0 * m[(0 * 4) + 1] + v1 * m[(1 * 4) + 1] + v2 * m[(2 * 4) + 1] + m[(3 * 4) + 1]) / d;
-dst[2] = (v0 * m[(0 * 4) + 2] + v1 * m[(1 * 4) + 2] + v2 * m[(2 * 4) + 2] + m[(3 * 4) + 2]) / d;
-```
-
-As this is a 2D rectangle we can cancel out the third dimension, and the determinant, 'd'.
-
-```js
-const v0 = v[0];
-const v1 = v[1];
-
-dst = [
- v0 * m[(0 * 4) + 0] + v1 * m[(1 * 4) + 0] + m[(3 * 4) + 0,
- v0 * m[(0 * 4) + 1] + v1 * m[(1 * 4) + 1] + m[(3 * 4) + 1
-];
-```
-
-Let's set the matrix points to shorter names for convenience.
-
-```js
-const m00 = m[(0 * 4) + 0];
-const m01 = m[(0 * 4) + 1];
-const m10 = m[(1 * 4) + 0];
-const m11 = m[(1 * 4) + 1];
-const m30 = m[(3 * 4) + 0];
-const m31 = m[(3 * 4) + 1];
-```
-
-We need 4 points with positive and negative 0.5 values so the square has sides of length 1.
-
-```js
-let p = [0.5, 0.5];
-let q = [-0.5, 0.5];
-let r = [-0.5, -0.5];
-let s = [0.5, -0.5];
-```
-
-Transform the points by the matrix.
-
-```js
-p = [
- 0.5 * m00 + 0.5 * m10 + m30,
- 0.5 * m01 + 0.5 * m11 + m31
-];
-q = [
- -0.5 * m00 + -0.5 * m10 + m30,
- 0.5 * m01 + 0.5 * m11 + m31
-];
-r = [
- -0.5 * m00 + -0.5 * m10 + m30,
- -0.5 * m01 + -0.5 * m11 + m31
-];
-s = [
- 0.5 * m00 + 0.5 * m10 + m30,
- -0.5 * m01 + -0.5 * m11 + m31
-];
-```
-
-With 4 transformed points we can build the left, right, top, and bottom values for the Rectangle. Each will use the minimum or the maximum of one of the components of all points.
-
-```js
-const left = Math.min(p[0], q[0], r[0], s[0]);
-const right = Math.max(p[0], q[0], r[0], s[0]);
-const top = Math.max(p[1], q[1], r[1], s[1]);
-const bottom = Math.min(p[1], q[1], r[1], s[1]);
-```
-
-Fill those calls with the vector expressions.
-
-```js
-const left = Math.min(
- 0.5 * m00 + 0.5 * m10 + m30,
- -0.5 * m00 + 0.5 * m10 + m30,
- -0.5 * m00 + -0.5 * m10 + m30,
- 0.5 * m00 + -0.5 * m10 + m30
-);
-const right = Math.max(
- 0.5 * m00 + 0.5 * m10 + m30,
- -0.5 * m00 + 0.5 * m10 + m30,
- -0.5 * m00 + -0.5 * m10 + m30,
- 0.5 * m00 + -0.5 * m10 + m30
-);
-const top = Math.max(
- 0.5 * m01 + 0.5 * m11 + m31,
- -0.5 * m01 + 0.5 * m11 + m31,
- -0.5 * m01 + -0.5 * m11 + m31,
- 0.5 * m01 + -0.5 * m11 + m31
-);
-const bottom = Math.min(
- 0.5 * m01 + 0.5 * m11 + m31,
- -0.5 * m01 + 0.5 * m11 + m31,
- -0.5 * m01 + -0.5 * m11 + m31,
- 0.5 * m01 + -0.5 * m11 + m31
-);
-```
-
-Pull out the `0.5 * m??` patterns.
-
-```js
-const x0 = 0.5 * m00;
-const x1 = 0.5 * m10;
-const y0 = 0.5 * m01;
-const y1 = 0.5 * m11;
-
-const left = Math.min(x0 + x1 + m30, -x0 + x1 + m30, -x0 + -x1 + m30, x0 + -x1 + m30);
-const right = Math.max(x0 + x1 + m30, -x0 + x1 + m30, -x0 + -x1 + m30, x0 + -x1 + m30);
-const top = Math.max(y0 + y1 + m31, -y0 + y1 + m31, -y0 + -y1 + m31, y0 + -y1 + m31);
-const bottom = Math.min(y0 + y1 + m31, -y0 + y1 + m31, -y0 + -y1 + m31, y0 + -y1 + m31);
-```
-
-Now each argument for the min and max calls take an expression like `(a * x0 + b * x1 + m3?)`. As each expression has the x0, x1, and m3? variables we can split the min and max calls on the addition operators. Each new call has all the coefficients of that variable.
-
-```js
-const left = Math.min(x0, -x0) + Math.min(x1, -x1) + Math.min(m30, m30);
-const right = Math.max(x0, -x0) + Math.max(x1, -x1) + Math.max(m30, m30);
-const top = Math.max(y0, -y0) + Math.max(y1, -y1) + Math.max(m31, m31);
-const bottom = Math.min(y0, -y0) + Math.min(y1, -y1) + Math.min(m31, m31);
-```
-
-The min or max of two copies of the same value will just be that value.
-
-```js
-const left = Math.min(x0, -x0) + Math.min(x1, -x1) + m30;
-const right = Math.max(x0, -x0) + Math.max(x1, -x1) + m30;
-const top = Math.max(y0, -y0) + Math.max(y1, -y1) + m31;
-const bottom = Math.min(y0, -y0) + Math.min(y1, -y1) + m31;
-```
-
-The max of a negative and positive variable will be the absolute value of that variable. The min of a negative and positive variable will the negated absolute value of that variable.
-
-```js
-const left = -Math.abs(x0) + -Math.abs(x1) + m30;
-const right = Math.abs(x0) + Math.abs(x1) + m30;
-const top = Math.abs(y0) + Math.abs(y1) + m31;
-const bottom = -Math.abs(y0) + -Math.abs(y1) + m31;
-```
-
-Pulling out the negations of the absolute values, left and right as well as top and bottom are the positive or negative sum of the absolute value of the saled and rotated unit value.
-
-```js
-const left = -(Math.abs(x0) + Math.abs(x1)) + m30;
-const right = Math.abs(x0) + Math.abs(x1) + m30;
-const top = Math.abs(y0) + Math.abs(y1) + m31;
-const bottom = -(Math.abs(y0) + Math.abs(y1)) + m31;
-```
-
-We call pull out those sums and use them twice.
-
-```js
-const x = Math.abs(x0) + Math.abs(x1);
-const y = Math.abs(y0) + Math.abs(y1);
-
-const left = -x + m30;
-const right = x + m30;
-const top = y + m31;
-const bottom = -y + m31;
-```
-
-This lets us arrive at our goal. Inlining some of our variables we get this block that will initialize a Rectangle to a unit square transformed by a matrix.
-
-```js
-const m30 = m[(3 * 4) + 0];
-const m31 = m[(3 * 4) + 1];
-
-const x = Math.abs(0.5 * m[(0 * 4) + 0]) + Math.abs(0.5 * m[(1 * 4) + 0]);
-const y = Math.abs(0.5 * m[(0 * 4) + 1]) + Math.abs(0.5 * m[(1 * 4) + 1]);
-
-const left = -x + m30;
-const right = x + m30;
-const top = y + m31;
-const bottom = -y + m31;
-```
diff --git a/docs/Rectangle-AABB-Transform.md b/docs/Rectangle-AABB-Transform.md
new file mode 100644
index 000000000..4eca75a01
--- /dev/null
+++ b/docs/Rectangle-AABB-Transform.md
@@ -0,0 +1,215 @@
+## Rectangle AABB from Transform
+
+Calculating the axis-aligned bounding box of a rectangle that has been rotated, scaled, and translated
+
+-----
+
+Every drawable is a 1 x 1 unit square that is rotated by its direction, scaled by its skin size and scale, and offset by its rotation center and position. The square representation is made up of 4 points that are transformed by the drawable properties. Often we want a shape that simplifies those 4 corner points into a non-rotated shape, an axis-aligned bounding box.
+
+One approach is to compare the x and y components of each transformed corner and find the minimum and maximum x component and the minimum and maximum y component.
+
+We can start from this approach and determine an alternative one that produces the same output with less work.
+
+To start with, we'll scale and rotate the unit square around its midpoint, as opposed to the skin's rotation center. This allows for some useful simplifications down the line.
+
+First we scale, to obtain the edges/corners' positions relative to the rectangle's midpoint:
+```js
+const origRight = nativeSizeX * 0.5 * scaleX;
+const origTop = nativeSizeY * 0.5 * scaleY;
+const origLeft = -nativeSizeX * 0.5 * scaleX;
+const origBottom = -nativeSizeY * 0.5 * scaleY;
+```
+
+Then we rotate.
+
+Given the sine and cosine of an angle, the formula for rotating a point `(x, y)` is `(x * cosine - y * sine, x * sine + y * cosine)`.
+
+We can calculate the rotated x and y values once each, moving the signs into the precalculated versions, then use those to create the rotated corners:
+
+```js
+const leftCos = origLeft * cos;
+const rightCos = origRight * cos;
+
+const leftSin = origLeft * sin;
+const rightSin = origRight * sin;
+
+const topCos = origTop * cos;
+const bottomCos = origBottom * cos;
+
+const topSin = -origTop * sin;
+const bottomSin = -origBottom * sin;
+
+const topLeft = [leftCos + topSin, leftSin + topCos];
+const topRight = [rightCos + topSin, rightSin + topCos];
+const bottomLeft = [leftCos + topSin, leftSin + topCos];
+const bottomRight = [rightCos + topSin, rightSin + topCos];
+```
+
+Then we can calculate the bounds of the rotated rectangle:
+```js
+const bottomEdge = Math.min(topLeft[1], topRight[1], bottomLeft[1], bottomRight[1]);
+const topEdge = Math.max(topLeft[1], topRight[1], bottomLeft[1], bottomRight[1]);
+const leftEdge = Math.min(topLeft[0], bottomLeft[0], topRight[0], bottomRight[0]);
+const rightEdge = Math.max(topLeft[0], bottomLeft[0], topRight[0], bottomRight[0]);
+```
+
+To begin optimizing this, we start by inlining the `topLeft`/`topRight`/`bottomLeft`/`bottomRight` values:
+```js
+const bottomEdge = Math.min(leftSin + topCos, rightSin + topCos, leftSin + topCos, rightSin + topCos);
+const topEdge = Math.max(leftSin + topCos, rightSin + topCos, leftSin + topCos, rightSin + topCos);
+const leftEdge = Math.min(leftCos + topSin, leftCos + topSin, rightCos + topSin, rightCos + topSin);
+const rightEdge = Math.max(leftCos + topSin, leftCos + topSin, rightCos + topSin, rightCos + topSin);
+```
+
+Then remove redundant values:
+```js
+const bottomEdge = Math.min(leftSin + topCos, rightSin + topCos);
+const topEdge = Math.max(leftSin + topCos, rightSin + topCos);
+const leftEdge = Math.min(leftCos + topSin, rightCos + topSin);
+const rightEdge = Math.max(leftCos + topSin, rightCos + topSin);
+```
+
+We can rearrange this by moving the additions outside of the `Math.min`/`Math.max` calls:
+```js
+const bottomEdge = Math.min(leftSin, rightSin) + Math.min(bottomCos, topCos);
+const topEdge = Math.max(leftSin, rightSin) + Math.max(bottomCos, topCos);
+const leftEdge = Math.min(leftCos, rightCos) + Math.min(bottomSin, topSin);
+const rightEdge = Math.max(leftCos, rightCos) + Math.max(bottomSin, topSin);
+```
+
+To get our complete rotated-bounding-box code:
+```js
+const origRight = nativeSizeX * 0.5 * scaleX;
+const origTop = nativeSizeY * 0.5 * scaleY;
+const origLeft = -nativeSizeX * 0.5 * scaleX;
+const origBottom = -nativeSizeY * 0.5 * scaleY;
+
+const leftCos = origLeft * cos;
+const rightCos = origRight * cos;
+
+const leftSin = origLeft * sin;
+const rightSin = origRight * sin;
+
+const topCos = origTop * cos;
+const bottomCos = origBottom * cos;
+
+const topSin = -origTop * sin;
+const bottomSin = -origBottom * sin;
+
+const bottomEdge = Math.min(leftSin, rightSin) + Math.min(bottomCos, topCos);
+const topEdge = Math.max(leftSin, rightSin) + Math.max(bottomCos, topCos);
+const leftEdge = Math.min(leftCos, rightCos) + Math.min(bottomSin, topSin);
+const rightEdge = Math.max(leftCos, rightCos) + Math.max(bottomSin, topSin);
+```
+
+Unfortunately, this is still a lot of code. We have to store and perform calculations on 8 different values (`leftCos`, `rightCos`, `leftSin`, `rightSin`, `topCos`, `bottomCos`, `topSin`, and `bottomSin`). This is where the "useful simplifications" mentioned earlier come in.
+
+Returning to the initial right/top/left/bottom edge calculation:
+```js
+const origRight = nativeSizeX * 0.5 * scaleX;
+const origTop = nativeSizeY * 0.5 * scaleY;
+const origLeft = -nativeSizeX * 0.5 * scaleX;
+const origBottom = -nativeSizeY * 0.5 * scaleY;
+```
+
+Because we're rotating around the rectangle's midpoint, not the skin's rotation center, we can take advantage of symmetry.
+
+To start with, `origLeft` is just `-origRight`, and `origBottom` is just `-origTop`. Let's substitute those in:
+```js
+const origRight = nativeSizeX * 0.5 * scaleX;
+const origTop = nativeSizeY * 0.5 * scaleY;
+
+const leftCos = -origRight * cos;
+const rightCos = origRight * cos;
+
+const leftSin = -origRight * sin;
+const rightSin = origRight * sin;
+
+const topCos = origTop * cos;
+const bottomCos = -origTop * cos;
+
+const topSin = -origTop * sin;
+const bottomSin = origTop * sin;
+
+const bottomEdge = Math.min(leftSin, rightSin) + Math.min(bottomCos, topCos);
+const topEdge = Math.max(leftSin, rightSin) + Math.max(bottomCos, topCos);
+const leftEdge = Math.min(leftCos, rightCos) + Math.min(bottomSin, topSin);
+const rightEdge = Math.max(leftCos, rightCos) + Math.max(bottomSin, topSin);
+```
+
+Now we can see that `leftCos` is just `-rightCos`, `leftSin` is just `-rightSin`, `bottomCos` is just `-topCos`, and `bottomSin` is just `-topSin`. Further substituting those, we get:
+```js
+const origRight = nativeSizeX * 0.5 * scaleX;
+const origTop = nativeSizeY * 0.5 * scaleY;
+
+const rightCos = origRight * cos;
+const rightSin = origRight * sin;
+const topCos = origTop * cos;
+const topSin = -origTop * sin;
+
+const bottomEdge = Math.min(-rightSin, rightSin) + Math.min(-topCos, topCos);
+const topEdge = Math.max(-rightSin, rightSin) + Math.max(-topCos, topCos);
+const leftEdge = Math.min(-rightCos, rightCos) + Math.min(-topSin, topSin);
+const rightEdge = Math.max(-rightCos, rightCos) + Math.max(-topSin, topSin);
+```
+
+The maximum of a value and its negative is its absolute value, and the minimum is its absolute value's negative:
+```js
+const bottomEdge = -Math.abs(rightSin) - Math.abs(topCos);
+const topEdge = Math.abs(rightSin) + Math.abs(topCos);
+const leftEdge = -Math.abs(rightCos) - Math.abs(topSin);
+const rightEdge = Math.abs(rightCos) + Math.abs(topSin);
+```
+
+`bottomEdge` is just `-topEdge`, and `leftEdge` is just `-rightEdge`, so we can remove them:
+```js
+const topEdge = Math.abs(rightSin) + Math.abs(topCos);
+const rightEdge = Math.abs(rightCos) + Math.abs(topSin);
+```
+
+Now, inlining `rightSin`, `rightCos`, `topSin`, and `topCos`, we have the drawable's scaled bounds rotated around their midpoint:
+```js
+const origRight = nativeSizeX * 0.5 * scaleX;
+const origTop = nativeSizeY * 0.5 * scaleY;
+
+const topEdge = Math.abs(origRight * sin) + Math.abs(origTop * cos);
+const rightEdge = Math.abs(origRight * cos) + Math.abs(origTop * sin);
+```
+
+However, we want to rotate the bounds around the skin's rotation center. To do this, we rotate the skin's rotation center around the rectangle's midpoint, then translate the bounding box by that offset:
+
+
+First, we subtract the rectangle's midpoint from the rotation center so it's rotating about the origin:
+```js
+const [centerX, centerY] = this.skin.nativeRotationCenter;
+const adjustedX = origRight - (centerX * scaleX);
+const adjustedY = origTop - (centerY * scaleY);
+```
+
+Then, using the same point rotation formula:
+```js
+const offsetX = -(sin * adjustedY) - (cos * adjustedX) - centerX;
+const offsetY = (cos * adjustedY) - (sin * adjustedX) - centerY;
+```
+
+Then we add in the translation. Drawables are translated by both their own position and their skin's rotation center:
+```js
+const translationX = offsetX + this._position[0] + centerX;
+const translationY = offsetY + this._position[1] + centerY;
+```
+
+Note that we're subtracting `centerX`/`centerY` from the offset and adding it back in here. We can combine the translation/offset steps and cancel those out:
+```js
+const offsetX = -(sin * adjustedY) - (cos * adjustedX) + this._position[0];
+const offsetY = (cos * adjustedY) - (sin * adjustedX) + this._position[1];
+```
+
+And calculate the final translated bounds:
+```js
+this._aabb.initFromBounds(
+ -rightEdge + offsetX,
+ rightEdge + offsetX,
+ -topEdge + offsetY,
+ topEdge + offsetY
+);
+```
diff --git a/docs/bounds-center-translation.svg b/docs/bounds-center-translation.svg
new file mode 100644
index 000000000..20739d608
--- /dev/null
+++ b/docs/bounds-center-translation.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/BitmapSkin.js b/src/BitmapSkin.js
index e48ce43a2..e6fc45fcb 100644
--- a/src/BitmapSkin.js
+++ b/src/BitmapSkin.js
@@ -18,8 +18,18 @@ class BitmapSkin extends Skin {
/** @type {!RenderWebGL} */
this._renderer = renderer;
- /** @type {Array} */
- this._textureSize = [0, 0];
+ /**
+ * The "native" size, in terms of "stage pixels", of this skin.
+ * @type {Array}
+ */
+ this.nativeSize = [0, 0];
+
+ /**
+ * The size of this skin's actual texture, aka the dimensions of the actual rendered
+ * quadrilateral at 1x scale, in "stage pixels".
+ * @type {Array}
+ */
+ this.quadSize = this.nativeSize;
}
/**
@@ -33,13 +43,6 @@ class BitmapSkin extends Skin {
super.dispose();
}
- /**
- * @return {Array} the "native" size, in texels, of this skin.
- */
- get size () {
- return [this._textureSize[0] / this._costumeResolution, this._textureSize[1] / this._costumeResolution];
- }
-
/**
* @param {Array} scale - The scaling factors to be used.
* @return {WebGLTexture} The GL texture representation of this skin when drawing at the given scale.
@@ -88,11 +91,15 @@ class BitmapSkin extends Skin {
// Do these last in case any of the above throws an exception
this._costumeResolution = costumeResolution || 2;
- this._textureSize = BitmapSkin._getBitmapSize(bitmapData);
-
- if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
- this._rotationCenter[0] = rotationCenter[0];
- this._rotationCenter[1] = rotationCenter[1];
+ const [width, height] = BitmapSkin._getBitmapSize(bitmapData);
+ // Because we assigned this.quadSize to this.nativeSize, set this.nativeSize's items instead of reassigning the
+ // reference
+ this.nativeSize[0] = width / this._costumeResolution;
+ this.nativeSize[1] = height / this._costumeResolution;
+
+ if (typeof rotationCenter === 'undefined') rotationCenter = this._calculateRotationCenter();
+ this._nativeRotationCenter[0] = rotationCenter[0];
+ this._nativeRotationCenter[1] = rotationCenter[1];
this.emit(Skin.Events.WasAltered);
}
diff --git a/src/Drawable.js b/src/Drawable.js
index 7a2813d88..5a97e374b 100644
--- a/src/Drawable.js
+++ b/src/Drawable.js
@@ -43,14 +43,6 @@ const getLocalPosition = (drawable, vec) => {
// TODO: Check if this can be removed after render pull 479 is merged
if (Math.abs(localPosition[0]) < FLOATING_POINT_ERROR_ALLOWANCE) localPosition[0] = 0;
if (Math.abs(localPosition[1]) < FLOATING_POINT_ERROR_ALLOWANCE) localPosition[1] = 0;
- // Apply texture effect transform if the localPosition is within the drawable's space,
- // and any effects are currently active.
- if (drawable.enabledEffects !== 0 &&
- (localPosition[0] >= 0 && localPosition[0] < 1) &&
- (localPosition[1] >= 0 && localPosition[1] < 1)) {
-
- EffectTransform.transformPoint(drawable, localPosition, localPosition);
- }
return localPosition;
};
@@ -108,6 +100,9 @@ class Drawable {
this._inverseTransformDirty = true;
this._visible = true;
+ this._aabbDirty = true;
+ this._aabb = new Rectangle();
+
/** A bitmask identifying which effects are currently in use.
* @readonly
* @type {int} */
@@ -144,6 +139,7 @@ class Drawable {
this._transformDirty = true;
this._inverseTransformDirty = true;
this._transformedHullDirty = true;
+ this._aabbDirty = true;
}
/**
@@ -339,8 +335,8 @@ class Drawable {
if (this._rotationCenterDirty && this.skin !== null) {
// twgl version of the following in function work.
// let rotationAdjusted = twgl.v3.subtract(
- // this.skin.rotationCenter,
- // twgl.v3.divScalar(this.skin.size, 2, this._rotationAdjusted),
+ // this.skin.quadRotationCenter,
+ // twgl.v3.divScalar(this.skin.quadSize, 2, this._rotationAdjusted),
// this._rotationAdjusted
// );
// rotationAdjusted = twgl.v3.multiply(
@@ -355,8 +351,8 @@ class Drawable {
// Locally assign rotationCenter and skinSize to keep from having
// the Skin getter properties called twice while locally assigning
// their components for readability.
- const rotationCenter = this.skin.rotationCenter;
- const skinSize = this.skin.size;
+ const rotationCenter = this.skin.quadRotationCenter;
+ const skinSize = this.skin.quadSize;
const center0 = rotationCenter[0];
const center1 = rotationCenter[1];
const skinSize0 = skinSize[0];
@@ -375,7 +371,7 @@ class Drawable {
if (this._skinScaleDirty && this.skin !== null) {
// twgl version of the following in function work.
// const scaledSize = twgl.v3.divScalar(
- // twgl.v3.multiply(this.skin.size, this._scale),
+ // twgl.v3.multiply(this.skin.quadSize, this._scale),
// 100
// );
// // was NaN because the vectors have only 2 components.
@@ -383,7 +379,7 @@ class Drawable {
// Locally assign skinSize to keep from having the Skin getter
// properties called twice.
- const skinSize = this.skin.size;
+ const skinSize = this.skin.quadSize;
const scaledSize = this._skinScale;
scaledSize[0] = skinSize[0] * this._scale[0] / 100;
scaledSize[1] = skinSize[1] * this._scale[1] / 100;
@@ -497,11 +493,17 @@ class Drawable {
}
_isTouchingNearest (vec) {
- return this.skin.isTouchingNearest(getLocalPosition(this, vec));
+ const localPosition = getLocalPosition(this, vec);
+ if (!this._skin.pointInsideLogicalBounds(localPosition)) return false;
+ if (this.enabledEffects !== 0) EffectTransform.transformPoint(this, localPosition, localPosition);
+ return this._skin._silhouette.isTouchingNearest(localPosition);
}
_isTouchingLinear (vec) {
- return this.skin.isTouchingLinear(getLocalPosition(this, vec));
+ const localPosition = getLocalPosition(this, vec);
+ if (!this._skin.pointInsideLogicalBounds(localPosition)) return false;
+ if (this.enabledEffects !== 0) EffectTransform.transformPoint(this, localPosition, localPosition);
+ return this._skin._silhouette.isTouchingLinear(localPosition);
}
/**
@@ -552,7 +554,7 @@ class Drawable {
/**
* Get the rough axis-aligned bounding box for the Drawable.
- * Calculated by transforming the skin's bounds.
+ * Calculated by transforming the skin's "native" bounds.
* Note that this is less precise than the box returned by `getBounds`,
* which is tightly snapped to account for a Drawable's transparent regions.
* `getAABB` returns a much less accurate bounding box, but will be much
@@ -561,12 +563,66 @@ class Drawable {
* @return {!Rectangle} Rough axis-aligned bounding box for Drawable.
*/
getAABB (result) {
- if (this._transformDirty) {
- this._calculateTransform();
+ if (this._aabbDirty) {
+ if (this._transformDirty) {
+ this._calculateTransform();
+ }
+
+ if (this.skin) {
+ // This drawable's transform matrix is calculated to use the rotation center and dimensions of the
+ // rendered quadrilateral, which sometimes includes extra "slack space" pixels around the edges.
+ // We don't want to include that slack space here, so we cannot calculate the AABB from the matrix,
+ // and must use the "native" skin size and rotation center.
+
+ // Pull out rotation sine/cosine from matrix
+ const [cos, sin] = this._rotationMatrix;
+
+ const [nativeSizeX, nativeSizeY] = this.skin.nativeSize;
+ const scaleX = this._scale[0] / 100;
+ const scaleY = this._scale[1] / 100;
+ // Unrotated top right corner of the bounding box, relative to its midpoint
+ // (not the skin's rotation center!)
+ const origRight = nativeSizeX * 0.5 * scaleX;
+ const origTop = nativeSizeY * 0.5 * scaleY;
+
+ // Rotate the top right corner around the bounding box's midpoint, and use this to obtain the top and
+ // right edges.
+ const topEdge = Math.abs(origRight * sin) + Math.abs(origTop * cos);
+ const rightEdge = Math.abs(origRight * cos) + Math.abs(origTop * sin);
+
+ // Calculate the offset from the bounding box's midpoint to the skin's rotation center.
+ const [centerX, centerY] = this.skin.nativeRotationCenter;
+ const adjustedX = origRight - (centerX * scaleX);
+ const adjustedY = origTop - (centerY * scaleY);
+
+ // Use that offset to rotate the bounding box's midpoint about the skin's rotation center, then add that
+ // to the drawable's position to obtain the final translation.
+ const offsetX = -(sin * adjustedY) - (cos * adjustedX) + this._position[0];
+ const offsetY = (cos * adjustedY) - (sin * adjustedX) + this._position[1];
+
+ this._aabb.initFromBounds(
+ -rightEdge + offsetX,
+ rightEdge + offsetX,
+ -topEdge + offsetY,
+ topEdge + offsetY
+ );
+ } else {
+ // TODO: we should probably return null in this case, but most (all?) Rectangle-returning methods always
+ // return Rectangles, even when it may not make sense to do so (e.g. when the skin is missing). Let's
+ // match the other methods for now, and do what they do.
+ this._aabb.initFromBounds(0, 0, 0, 0);
+ }
+
+ this._aabbDirty = false;
}
- const tm = this._uniforms.u_modelMatrix;
+
result = result || new Rectangle();
- result.initFromModelMatrix(tm);
+ result.initFromBounds(
+ this._aabb.left,
+ this._aabb.right,
+ this._aabb.bottom,
+ this._aabb.top
+ );
return result;
}
@@ -597,7 +653,7 @@ class Drawable {
}
const projection = twgl.m4.ortho(-1, 1, -1, 1, -1, 1);
- const skinSize = this.skin.size;
+ const skinSize = this.skin.quadSize;
const halfXPixel = 1 / skinSize[0] / 2;
const halfYPixel = 1 / skinSize[1] / 2;
const tm = twgl.m4.multiply(this._uniforms.u_modelMatrix, projection);
@@ -711,8 +767,7 @@ class Drawable {
*/
static sampleColor4b (vec, drawable, dst, effectMask) {
const localPosition = getLocalPosition(drawable, vec);
- if (localPosition[0] < 0 || localPosition[1] < 0 ||
- localPosition[0] > 1 || localPosition[1] > 1) {
+ if (!drawable._skin.pointInsideLogicalBounds(localPosition)) {
dst[0] = 0;
dst[1] = 0;
dst[2] = 0;
@@ -720,11 +775,14 @@ class Drawable {
return dst;
}
+ // Apply texture effect transform if any effects are currently active.
+ if (drawable.enabledEffects !== 0) EffectTransform.transformPoint(drawable, localPosition, localPosition);
+
const textColor =
// commenting out to only use nearest for now
- // drawable.skin.useNearest(drawable._scale, drawable) ?
- drawable.skin._silhouette.colorAtNearest(localPosition, dst);
- // : drawable.skin._silhouette.colorAtLinear(localPosition, dst);
+ // drawable._skin.useNearest(drawable._scale, drawable) ?
+ drawable._skin._silhouette.colorAtNearest(localPosition, dst);
+ // : drawable._skin._silhouette.colorAtLinear(localPosition, dst);
if (drawable.enabledEffects === 0) return textColor;
return EffectTransform.transformColor(drawable, textColor, effectMask);
diff --git a/src/EffectTransform.js b/src/EffectTransform.js
index 7ffae18ab..725f9f3c5 100644
--- a/src/EffectTransform.js
+++ b/src/EffectTransform.js
@@ -130,13 +130,20 @@ class EffectTransform {
const effects = drawable.enabledEffects;
const uniforms = drawable.getUniforms();
+ const skinUniforms = drawable.skin.getUniforms();
+
+ // v_logicalCoord = (a_texCoord - u_logicalBounds.xy) / (u_logicalBounds.zw - u_logicalBounds.xy);
+ dst[0] = (dst[0] - skinUniforms.u_logicalBounds[0]) /
+ (skinUniforms.u_logicalBounds[2] - skinUniforms.u_logicalBounds[0]);
+ dst[1] = (dst[1] - skinUniforms.u_logicalBounds[1]) /
+ (skinUniforms.u_logicalBounds[3] - skinUniforms.u_logicalBounds[1]);
+
if ((effects & ShaderManager.EFFECT_INFO.mosaic.mask) !== 0) {
// texcoord0 = fract(u_mosaic * texcoord0);
dst[0] = uniforms.u_mosaic * dst[0] % 1;
dst[1] = uniforms.u_mosaic * dst[1] % 1;
}
if ((effects & ShaderManager.EFFECT_INFO.pixelate.mask) !== 0) {
- const skinUniforms = drawable.skin.getUniforms();
// vec2 pixelTexelSize = u_skinSize / u_pixelate;
const texelX = skinUniforms.u_skinSize[0] / uniforms.u_pixelate;
const texelY = skinUniforms.u_skinSize[1] / uniforms.u_pixelate;
@@ -190,6 +197,13 @@ class EffectTransform {
dst[1] = CENTER_Y + (r * unitY * CENTER_Y);
}
+ // After doing all distortions in "logical texture space", convert back to actual texture space
+ // texcoord0 = (texcoord0 * (u_logicalBounds.zw - u_logicalBounds.xy)) + u_logicalBounds.xy;
+ dst[0] = (dst[0] * (skinUniforms.u_logicalBounds[2] - skinUniforms.u_logicalBounds[0])) +
+ skinUniforms.u_logicalBounds[0];
+ dst[1] = (dst[1] * (skinUniforms.u_logicalBounds[3] - skinUniforms.u_logicalBounds[1])) +
+ skinUniforms.u_logicalBounds[1];
+
return dst;
}
}
diff --git a/src/PenSkin.js b/src/PenSkin.js
index 8248b1f8d..9d9f5081b 100644
--- a/src/PenSkin.js
+++ b/src/PenSkin.js
@@ -47,8 +47,18 @@ class PenSkin extends Skin {
*/
this._renderer = renderer;
- /** @type {Array} */
- this._size = null;
+ /**
+ * The "native" size, in terms of "stage pixels", of this skin.
+ * @type {Array}
+ */
+ this.nativeSize = [0, 0];
+
+ /**
+ * The size of this skin's actual texture, aka the dimensions of the actual rendered
+ * quadrilateral at 1x scale, in "stage pixels".
+ * @type {Array}
+ */
+ this.quadSize = this.nativeSize;
/** @type {WebGLFramebuffer} */
this._framebuffer = null;
@@ -109,13 +119,6 @@ class PenSkin extends Skin {
super.dispose();
}
- /**
- * @return {Array} the "native" size, in texels, of this skin. [width, height]
- */
- get size () {
- return this._size;
- }
-
useNearest (scale) {
// Use nearest-neighbor interpolation when scaling up the pen skin-- this matches Scratch 2.0.
// When scaling it down, use linear interpolation to avoid giving pen lines a "dashed" appearance.
@@ -186,7 +189,7 @@ class PenSkin extends Skin {
twgl.bindFramebufferInfo(gl, this._framebuffer);
- gl.viewport(0, 0, this._size[0], this._size[1]);
+ gl.viewport(0, 0, this.nativeSize[0], this.nativeSize[1]);
const currentShader = this._lineShader;
gl.useProgram(currentShader.program);
@@ -194,7 +197,7 @@ class PenSkin extends Skin {
const uniforms = {
u_skin: this._texture,
- u_stageSize: this._size
+ u_stageSize: this.nativeSize
};
twgl.setUniforms(currentShader, uniforms);
@@ -286,9 +289,13 @@ class PenSkin extends Skin {
_setCanvasSize (canvasSize) {
const [width, height] = canvasSize;
- this._size = canvasSize;
- this._rotationCenter[0] = width / 2;
- this._rotationCenter[1] = height / 2;
+ // Because we assigned this.quadSize to this.nativeSize, set this.nativeSize's items instead of reassigning the
+ // reference
+ this.nativeSize[0] = width;
+ this.nativeSize[1] = height;
+
+ this._nativeRotationCenter[0] = width / 2;
+ this._nativeRotationCenter[1] = height / 2;
const gl = this._renderer.gl;
@@ -335,7 +342,7 @@ class PenSkin extends Skin {
const gl = this._renderer.gl;
gl.readPixels(
0, 0,
- this._size[0], this._size[1],
+ this.nativeSize[0], this.nativeSize[1],
gl.RGBA, gl.UNSIGNED_BYTE, this._silhouettePixels
);
diff --git a/src/Rectangle.js b/src/Rectangle.js
index c998651b0..edce2df94 100644
--- a/src/Rectangle.js
+++ b/src/Rectangle.js
@@ -54,31 +54,6 @@ class Rectangle {
}
}
- /**
- * Initialize a Rectangle to a 1 unit square centered at 0 x 0 transformed
- * by a model matrix.
- * @param {Array.} m A 4x4 matrix to transform the rectangle by.
- * @tutorial Rectangle-AABB-Matrix
- */
- initFromModelMatrix (m) {
- // In 2D space, we will soon use the 2x2 "top left" scale and rotation
- // submatrix, while we store and the 1x2 "top right" that position
- // vector.
- const m30 = m[(3 * 4) + 0];
- const m31 = m[(3 * 4) + 1];
-
- // "Transform" a (0.5, 0.5) vector by the scale and rotation matrix but
- // sum the absolute of each component instead of use the signed values.
- const x = Math.abs(0.5 * m[(0 * 4) + 0]) + Math.abs(0.5 * m[(1 * 4) + 0]);
- const y = Math.abs(0.5 * m[(0 * 4) + 1]) + Math.abs(0.5 * m[(1 * 4) + 1]);
-
- // And adding them to the position components initializes our Rectangle.
- this.left = -x + m30;
- this.right = x + m30;
- this.top = y + m31;
- this.bottom = -y + m31;
- }
-
/**
* Determine if this Rectangle intersects some other.
* Note that this is a comparison assuming the Rectangle was
@@ -123,7 +98,7 @@ class Rectangle {
this.right = Math.min(this.right, right);
this.bottom = Math.max(this.bottom, bottom);
this.top = Math.min(this.top, top);
-
+
this.left = Math.min(this.left, right);
this.right = Math.max(this.right, left);
this.bottom = Math.min(this.bottom, top);
diff --git a/src/RenderWebGL.js b/src/RenderWebGL.js
index c65e67470..0d228d82f 100644
--- a/src/RenderWebGL.js
+++ b/src/RenderWebGL.js
@@ -751,7 +751,7 @@ class RenderWebGL extends EventEmitter {
*/
getSkinSize (skinID) {
const skin = this._allSkins[skinID];
- return skin.size;
+ return skin.nativeSize;
}
/**
@@ -761,7 +761,7 @@ class RenderWebGL extends EventEmitter {
*/
getSkinRotationCenter (skinID) {
const skin = this._allSkins[skinID];
- return skin.calculateRotationCenter();
+ return skin.nativeRotationCenter;
}
/**
@@ -1829,7 +1829,7 @@ class RenderWebGL extends EventEmitter {
_getConvexHullPointsForDrawable (drawableID) {
const drawable = this._allDrawables[drawableID];
- const [width, height] = drawable.skin.size;
+ const [width, height] = drawable.skin.quadSize;
// No points in the hull if invisible or size is 0.
if (!drawable.getVisible() || width === 0 || height === 0) {
return [];
@@ -1885,7 +1885,7 @@ class RenderWebGL extends EventEmitter {
for (; x < width; x++) {
_pixelPos[0] = x / width;
EffectTransform.transformPoint(drawable, _pixelPos, _effectPos);
- if (drawable.skin.isTouchingLinear(_effectPos)) {
+ if (drawable.skin.pointInsideLogicalBounds(_pixelPos) && drawable.skin.isTouchingLinear(_effectPos)) {
currentPoint = [x, y];
break;
}
@@ -1922,7 +1922,7 @@ class RenderWebGL extends EventEmitter {
for (x = width - 1; x >= 0; x--) {
_pixelPos[0] = x / width;
EffectTransform.transformPoint(drawable, _pixelPos, _effectPos);
- if (drawable.skin.isTouchingLinear(_effectPos)) {
+ if (drawable.skin.pointInsideLogicalBounds(_pixelPos) && drawable.skin.isTouchingLinear(_effectPos)) {
currentPoint = [x, y];
break;
}
diff --git a/src/SVGSkin.js b/src/SVGSkin.js
index f35a00466..fdc2a1575 100644
--- a/src/SVGSkin.js
+++ b/src/SVGSkin.js
@@ -8,11 +8,12 @@ const MAX_TEXTURE_DIMENSION = 2048;
/**
* All scaled renderings of the SVG are stored in an array. The 1.0 scale of
- * the SVG is stored at the 8th index. The smallest possible 1 / 256 scale
+ * the SVG is stored at the 3rd index. The smallest possible 1 / 8 scale
* rendering is stored at the 0th index.
* @const {number}
*/
-const INDEX_OFFSET = 8;
+const INDEX_OFFSET = 3;
+const MIN_TEXTURE_SCALE = 1 / (1 << INDEX_OFFSET);
class SVGSkin extends Skin {
/**
@@ -34,9 +35,6 @@ class SVGSkin extends Skin {
/** @type {boolean} */
this._svgImageLoaded = false;
- /** @type {Array} */
- this._size = [0, 0];
-
/** @type {HTMLCanvasElement} */
this._canvas = document.createElement('canvas');
@@ -46,6 +44,22 @@ class SVGSkin extends Skin {
/** @type {Array} */
this._scaledMIPs = [];
+ /**
+ * The "native" size, in terms of "stage pixels", of this skin.
+ * @type {Array}
+ */
+ this.nativeSize = [0, 0];
+
+ /**
+ * The size of this skin's actual texture, aka the dimensions of the actual rendered
+ * quadrilateral at 1x scale, in "stage pixels". To properly handle positioning of vector sprites' viewboxes,
+ * some "slack space" is added to this size, but not to the nativeSize.
+ * @type {Array} */
+ this.quadSize = [0, 0];
+
+ /** @type {Array} */
+ this._quadRotationCenter = [0, 0];
+
/** @type {number} */
this._largestMIPScale = 0;
@@ -64,11 +78,8 @@ class SVGSkin extends Skin {
super.dispose();
}
- /**
- * @return {Array} the natural size, in Scratch units, of this skin.
- */
- get size () {
- return [this._size[0], this._size[1]];
+ get quadRotationCenter () {
+ return this._quadRotationCenter;
}
useNearest (scale, drawable) {
@@ -106,19 +117,9 @@ class SVGSkin extends Skin {
* @return {SVGMIP} An object that handles creating and updating SVG textures.
*/
createMIP (scale) {
- const [width, height] = this._size;
+ const [width, height] = this.quadSize;
this._canvas.width = width * scale;
this._canvas.height = height * scale;
- if (
- this._canvas.width <= 0 ||
- this._canvas.height <= 0 ||
- // Even if the canvas at the current scale has a nonzero size, the image's dimensions are floored
- // pre-scaling; e.g. if an image has a width of 0.4 and is being rendered at 3x scale, the canvas will have
- // a width of 1, but the image's width will be rounded down to 0 on some browsers (Firefox) prior to being
- // drawn at that scale, resulting in an IndexSizeError if we attempt to draw it.
- this._svgImage.naturalWidth <= 0 ||
- this._svgImage.naturalHeight <= 0
- ) return super.getTexture();
this._context.clearRect(0, 0, this._canvas.width, this._canvas.height);
this._context.setTransform(scale, 0, 0, scale, 0, 0);
this._context.drawImage(this._svgImage, 0, 0);
@@ -184,6 +185,85 @@ class SVGSkin extends Skin {
this._largestMIPScale = 0;
}
+ /**
+ * Set the loaded SVG's viewBox and this renderer's viewOffset for proper subpixel positioning.
+ * @param {SVGSVGElement} svgTag The SVG element to adjust
+ */
+ _setSubpixelViewbox (svgTag) {
+ const {x, y, width, height} = svgTag.viewBox.baseVal;
+ const rotationCenter = this._nativeRotationCenter;
+
+ // The preserveAspectRatio attribute has all sorts of weird effects on the viewBox if enabled.
+ svgTag.setAttribute('preserveAspectRatio', 'none');
+
+ // Multiplied by the minimum drawing scale.
+ const center = [
+ (
+ rotationCenter[0]
+ // Compensate for viewbox offset.
+ // See https://github.com/LLK/scratch-render/pull/90.
+ // eslint-disable-next-line operator-linebreak
+ - x
+ ) * MIN_TEXTURE_SCALE,
+
+ (rotationCenter[1] - y) * MIN_TEXTURE_SCALE
+ ];
+
+ // Take the fractional part of the scaled rotation center.
+ // We will translate the viewbox by this amount later for proper subpixel positioning.
+ const centerFrac = [
+ (center[0] % 1),
+ (center[1] % 1)
+ ];
+
+ // Scale the viewbox dimensions by the minimum scale, add the offset, then take the ceiling
+ // to get the rendered size (scaled by MIN_TEXTURE_SCALE).
+ const scaledSize = [
+ Math.ceil((width * MIN_TEXTURE_SCALE) + (1 - centerFrac[0])),
+ Math.ceil((height * MIN_TEXTURE_SCALE) + (1 - centerFrac[1]))
+ ];
+
+ // Scale back up to the SVG size.
+ const adjustedSize = [
+ scaledSize[0] / MIN_TEXTURE_SCALE,
+ scaledSize[1] / MIN_TEXTURE_SCALE
+ ];
+
+ this.quadSize = adjustedSize;
+
+ const xOffset = ((1 - centerFrac[0]) / MIN_TEXTURE_SCALE);
+ const yOffset = ((1 - centerFrac[1]) / MIN_TEXTURE_SCALE);
+
+ this._quadRotationCenter = [
+ (center[0] / MIN_TEXTURE_SCALE) + xOffset,
+ (center[1] / MIN_TEXTURE_SCALE) + yOffset
+ ];
+
+ // Set "logical bounds" as fractions of the adjusted bounding box size
+ /** @see Skin.logicalBounds */
+ this._uniforms.u_logicalBounds[0] = xOffset / adjustedSize[0];
+ this._uniforms.u_logicalBounds[1] = yOffset / adjustedSize[1];
+ this._uniforms.u_logicalBounds[2] = (width + xOffset) / adjustedSize[0];
+ this._uniforms.u_logicalBounds[3] = (height + yOffset) / adjustedSize[1];
+
+ // Adjust the SVG tag's viewbox to match the texture dimensions and offset.
+ // This will ensure that the SVG is rendered at the proper sub-pixel position,
+ // and with integer dimensions at power-of-two sizes down to MIN_TEXTURE_SCALE.
+ svgTag.setAttribute('viewBox',
+ `${
+ x - xOffset
+ } ${
+ y - yOffset
+ } ${
+ adjustedSize[0]
+ } ${
+ adjustedSize[1]
+ }`);
+
+ svgTag.setAttribute('width', adjustedSize[0]);
+ svgTag.setAttribute('height', adjustedSize[1]);
+ }
+
/**
* Set the contents of this skin to a snapshot of the provided SVG data.
* @param {string} svgData - new SVG to use.
@@ -193,25 +273,34 @@ class SVGSkin extends Skin {
*/
setSVG (svgData, rotationCenter) {
const svgTag = loadSvgString(svgData);
- const svgText = serializeSvgToString(svgTag, true /* shouldInjectFonts */);
- this._svgImageLoaded = false;
- const {x, y, width, height} = svgTag.viewBox.baseVal;
+ // Handle zero-size skins. _setSubpixelViewbox will handle really really small skins whose dimensions would
+ // otherwise be rounded down to 0.
+ const {width, height} = svgTag.viewBox.baseVal;
+ if (width === 0 || height === 0) {
+ super.setEmptyImageData();
+ this._quadRotationCenter[0] = 0;
+ this._quadRotationCenter[1] = 0;
+ return;
+ }
+
// While we're setting the size before the image is loaded, this doesn't cause the skin to appear with the wrong
// size for a few frames while the new image is loading, because we don't emit the `WasAltered` event, telling
// drawables using this skin to update, until the image is loaded.
// We need to do this because the VM reads the skin's `size` directly after calling `setSVG`.
// TODO: return a Promise so that the VM can read the skin's `size` after the image is loaded.
- this._size[0] = width;
- this._size[1] = height;
+ this.nativeSize[0] = width;
+ this.nativeSize[1] = height;
+ if (typeof rotationCenter === 'undefined') rotationCenter = this._calculateRotationCenter();
+ this._nativeRotationCenter[0] = rotationCenter[0];
+ this._nativeRotationCenter[1] = rotationCenter[1];
+
+ this._setSubpixelViewbox(svgTag);
+ const svgText = serializeSvgToString(svgTag, true /* shouldInjectFonts */);
+ this._svgImageLoaded = false;
// If there is another load already in progress, replace the old onload to effectively cancel the old load
this._svgImage.onload = () => {
- if (width === 0 || height === 0) {
- super.setEmptyImageData();
- return;
- }
-
const maxDimension = Math.ceil(Math.max(width, height));
let testScale = 2;
for (testScale; maxDimension * testScale <= MAX_TEXTURE_DIMENSION; testScale *= 2) {
@@ -219,15 +308,10 @@ class SVGSkin extends Skin {
}
this.resetMIPs();
-
- if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
- // Compensate for viewbox offset.
- // See https://github.com/LLK/scratch-render/pull/90.
- this._rotationCenter[0] = rotationCenter[0] - x;
- this._rotationCenter[1] = rotationCenter[1] - y;
-
this._svgImageLoaded = true;
-
+ // While we're setting the size and rotation center before the image is loaded, this doesn't cause the skin
+ // to appear in the wrong place/with the wrong size for a few frames while the new image is loading, because
+ // we don't emit this event, telling drawables using this skin to update, until the image is loaded.
this.emit(Skin.Events.WasAltered);
};
diff --git a/src/Skin.js b/src/Skin.js
index ae98d50c9..ec1cfdc1d 100644
--- a/src/Skin.js
+++ b/src/Skin.js
@@ -18,7 +18,23 @@ class Skin extends EventEmitter {
this._id = id;
/** @type {Vec3} */
- this._rotationCenter = twgl.v3.create(0, 0);
+ this._nativeRotationCenter = twgl.v3.create(0, 0);
+
+ /**
+ * The "native" size, in terms of "stage pixels", of this skin.
+ * @member nativeSize
+ * @abstract
+ * @type {Array}
+ */
+
+ /**
+ * The size of this skin's actual texture, aka the dimensions of the actual rendered
+ * quadrilateral at 1x scale, in "stage pixels". To properly handle positioning of vector sprites' viewboxes,
+ * some "slack space" is added to this size, but not to the nativeSize.
+ * @member quadSize
+ * @abstract
+ * @type {Array}
+ */
/** @type {WebGLTexture} */
this._texture = null;
@@ -36,6 +52,17 @@ class Skin extends EventEmitter {
*/
u_skinSize: [0, 0],
+ /**
+ * The "native" bounds of this skin that will be used by distortion effects, as fractions of its
+ * "quadrilateral" bounds. This is important for ensuring that distortion effects appear consistent no
+ * matter how much "slack space" we add to our quadSize.
+ * These range from 0 to 1 to represent "all the way to the top/left of the quadrilateral bounds" to
+ * "all the way to the bottom/right of the quadrilateral bounds".
+ * X and Y components are top left corner, Z and W components are bottom right.
+ * @type {Array}
+ */
+ u_logicalBounds: [0, 0, 1, 1],
+
/**
* The actual WebGL texture object for the skin.
* @type {WebGLTexture}
@@ -67,18 +94,18 @@ class Skin extends EventEmitter {
}
/**
- * @returns {Vec3} the origin, in object space, about which this Skin should rotate.
+ * @returns {twgl.v3} the origin, in object space, about which this Skin's "native size" bounds should rotate.
*/
- get rotationCenter () {
- return this._rotationCenter;
+ get nativeRotationCenter () {
+ return this._nativeRotationCenter;
}
/**
- * @abstract
- * @return {Array} the "native" size, in texels, of this skin.
+ * @returns {twgl.v3} the origin, in object space, about which this Skin's "quadrilateral size" bounds should
+ * rotate. By default, this is the same as the native rotation center.
*/
- get size () {
- return [0, 0];
+ get quadRotationCenter () {
+ return this._nativeRotationCenter;
}
/**
@@ -98,8 +125,8 @@ class Skin extends EventEmitter {
* Get the center of the current bounding box
* @return {Array} the center of the current bounding box
*/
- calculateRotationCenter () {
- return [this.size[0] / 2, this.size[1] / 2];
+ _calculateRotationCenter () {
+ return [this.nativeSize[0] / 2, this.nativeSize[1] / 2];
}
/**
@@ -129,7 +156,7 @@ class Skin extends EventEmitter {
*/
getUniforms (scale) {
this._uniforms.u_skin = this.getTexture(scale);
- this._uniforms.u_skinSize = this.size;
+ this._uniforms.u_skinSize = this.nativeSize;
return this._uniforms;
}
@@ -185,13 +212,26 @@ class Skin extends EventEmitter {
this._emptyImageTexture = twgl.createTexture(gl, textureOptions);
}
- this._rotationCenter[0] = 0;
- this._rotationCenter[1] = 0;
+ this._nativeRotationCenter[0] = 0;
+ this._nativeRotationCenter[1] = 0;
this._silhouette.update(this._emptyImageData);
this.emit(Skin.Events.WasAltered);
}
+ /**
+ * Is this (texture-space, in the range [0, 1]) point inside the skin's "logical bounds"?
+ * @param {twgl.v3} vec A texture coordinate.
+ * @return {boolean} True if the point is inside the skin's "logical bounds"
+ */
+ pointInsideLogicalBounds (vec) {
+ const logicalBounds = this._uniforms.u_logicalBounds;
+ return vec[0] >= logicalBounds[0] &&
+ vec[0] <= logicalBounds[2] &&
+ vec[1] >= logicalBounds[1] &&
+ vec[1] <= logicalBounds[3];
+ }
+
/**
* Does this point touch an opaque or translucent point on this skin?
* Nearest Neighbor version
diff --git a/src/TextBubbleSkin.js b/src/TextBubbleSkin.js
index 0ce6ac1a2..f1fc99d81 100644
--- a/src/TextBubbleSkin.js
+++ b/src/TextBubbleSkin.js
@@ -42,8 +42,18 @@ class TextBubbleSkin extends Skin {
/** @type {HTMLCanvasElement} */
this._canvas = document.createElement('canvas');
- /** @type {Array} */
- this._size = [0, 0];
+ /**
+ * The "native" size, in terms of "stage pixels", of this skin.
+ * @type {Array}
+ */
+ this.nativeSize = [0, 0];
+
+ /**
+ * The size of this skin's actual texture, aka the dimensions of the actual rendered
+ * quadrilateral at 1x scale, in "stage pixels".
+ * @type {Array}
+ */
+ this.quadSize = this.nativeSize;
/** @type {number} */
this._renderedScale = 0;
@@ -60,9 +70,6 @@ class TextBubbleSkin extends Skin {
/** @type {boolean} */
this._pointsLeft = false;
- /** @type {boolean} */
- this._textDirty = true;
-
/** @type {boolean} */
this._textureDirty = true;
@@ -84,16 +91,6 @@ class TextBubbleSkin extends Skin {
super.dispose();
}
- /**
- * @return {Array} the dimensions, in Scratch units, of this skin.
- */
- get size () {
- if (this._textDirty) {
- this._reflowLines();
- }
- return this._size;
- }
-
/**
* Set parameters for this text bubble.
* @param {!string} type - either "say" or "think".
@@ -105,7 +102,7 @@ class TextBubbleSkin extends Skin {
this._bubbleType = type;
this._pointsLeft = pointsLeft;
- this._textDirty = true;
+ this._reflowLines();
this._textureDirty = true;
this.emit(Skin.Events.WasAltered);
}
@@ -136,10 +133,10 @@ class TextBubbleSkin extends Skin {
this._textAreaSize.width = paddedWidth;
this._textAreaSize.height = paddedHeight;
- this._size[0] = paddedWidth + BubbleStyle.STROKE_WIDTH;
- this._size[1] = paddedHeight + BubbleStyle.STROKE_WIDTH + BubbleStyle.TAIL_HEIGHT;
-
- this._textDirty = false;
+ // Because we assigned this.quadSize to this.nativeSize, set this.nativeSize's items instead of reassigning the
+ // reference
+ this.nativeSize[0] = paddedWidth + BubbleStyle.STROKE_WIDTH;
+ this.nativeSize[1] = paddedHeight + BubbleStyle.STROKE_WIDTH + BubbleStyle.TAIL_HEIGHT;
}
/**
@@ -149,17 +146,13 @@ class TextBubbleSkin extends Skin {
_renderTextBubble (scale) {
const ctx = this._canvas.getContext('2d');
- if (this._textDirty) {
- this._reflowLines();
- }
-
// Calculate the canvas-space sizes of the padded text area and full text bubble
const paddedWidth = this._textAreaSize.width;
const paddedHeight = this._textAreaSize.height;
// Resize the canvas to the correct screen-space size
- this._canvas.width = Math.ceil(this._size[0] * scale);
- this._canvas.height = Math.ceil(this._size[1] * scale);
+ this._canvas.width = Math.ceil(this.nativeSize[0] * scale);
+ this._canvas.height = Math.ceil(this.nativeSize[1] * scale);
this._restyleCanvas();
// Reset the transform before clearing to ensure 100% clearage
diff --git a/src/shaders/sprite.frag b/src/shaders/sprite.frag
index da286883d..e609dc81f 100644
--- a/src/shaders/sprite.frag
+++ b/src/shaders/sprite.frag
@@ -16,6 +16,10 @@ uniform vec3 u_colorMask;
uniform float u_colorMaskTolerance;
#endif // DRAW_MODE_colorMask
+#if defined(ENABLE_fisheye) || defined(ENABLE_whirl) || defined(ENABLE_pixelate) || defined(ENABLE_mosaic)
+#define DISTORTION_EFFECTS_ENABLED
+#endif
+
#ifdef ENABLE_fisheye
uniform float u_fisheye;
#endif // ENABLE_fisheye
@@ -37,18 +41,24 @@ uniform float u_ghost;
uniform vec4 u_lineColor;
uniform float u_lineThickness;
uniform float u_lineLength;
+varying vec2 v_texCoord;
#endif // DRAW_MODE_line
#ifdef DRAW_MODE_background
uniform vec4 u_backgroundColor;
#endif // DRAW_MODE_background
-uniform sampler2D u_skin;
+#if !(defined(DRAW_MODE_line) || defined(DRAW_MODE_background))
+
+#ifdef DISTORTION_EFFECTS_ENABLED
+uniform vec4 u_logicalBounds;
+#endif
-#ifndef DRAW_MODE_background
varying vec2 v_texCoord;
#endif
+uniform sampler2D u_skin;
+
// Add this to divisors to prevent division by 0, which results in NaNs propagating through calculations.
// Smaller values can cause problems on some mobile devices.
const float epsilon = 1e-3;
@@ -159,8 +169,25 @@ void main()
}
#endif // ENABLE_fisheye
+ #ifdef DISTORTION_EFFECTS_ENABLED
+ // If distortion effects are enabled, the vertex shader will convert texture coordinates to "logical bounds" space.
+ // (0, 0) will be the top left corner of the "logical bounds" and (1, 1) will be the bottom right corner.
+ // If so, convert back to actual texture space only after doing all distortions in "logical texture space".
+ texcoord0 = (texcoord0 * (u_logicalBounds.zw - u_logicalBounds.xy)) + u_logicalBounds.xy;
+ #endif
+
gl_FragColor = texture2D(u_skin, texcoord0);
+ #if defined(ENABLE_pixelate) || defined(ENABLE_mosaic)
+ // Ensure that the pixels don't extend outside the "logical bounds"
+ gl_FragColor *= float(
+ v_texCoord.x >= 0.0 &&
+ v_texCoord.y >= 0.0 &&
+ v_texCoord.x <= 1.0 &&
+ v_texCoord.y <= 1.0
+ );
+ #endif
+
#if defined(ENABLE_color) || defined(ENABLE_brightness)
// Divide premultiplied alpha values for proper color processing
// Add epsilon to avoid dividing by 0 for fully transparent pixels
diff --git a/src/shaders/sprite.vert b/src/shaders/sprite.vert
index 24437c3fc..6b15df685 100644
--- a/src/shaders/sprite.vert
+++ b/src/shaders/sprite.vert
@@ -14,12 +14,21 @@ uniform vec4 u_penPoints;
const float epsilon = 1e-3;
#endif
+#if defined(ENABLE_fisheye) || defined(ENABLE_whirl) || defined(ENABLE_pixelate) || defined(ENABLE_mosaic)
+#define DISTORTION_EFFECTS_ENABLED
+#endif
+
#if !(defined(DRAW_MODE_line) || defined(DRAW_MODE_background))
uniform mat4 u_projectionMatrix;
uniform mat4 u_modelMatrix;
-attribute vec2 a_texCoord;
+
+#ifdef DISTORTION_EFFECTS_ENABLED
+uniform vec4 u_logicalBounds;
#endif
+attribute vec2 a_texCoord;
+#endif // !(defined(DRAW_MODE_line) || defined(DRAW_MODE_background))
+
attribute vec2 a_position;
varying vec2 v_texCoord;
@@ -68,8 +77,18 @@ void main() {
gl_Position = vec4(position, 0, 1);
#elif defined(DRAW_MODE_background)
gl_Position = vec4(a_position * 2.0, 0, 1);
- #else
+ #else // drawing a sprite
gl_Position = u_projectionMatrix * u_modelMatrix * vec4(a_position, 0, 1);
+
+ #ifdef DISTORTION_EFFECTS_ENABLED
+ // To properly render subpixel-positioned SVG viewboxes, there's some "slack space" around the edges of the texture.
+ // The "logical coordinates" exclude this slack space, starting at the top left of the SVG's *content* and ending
+ // at the bottom right. Distortion effects are applied in this space so as to ensure their "center" is correct.
+ // After doing distortion effects, the fragment shader will undo this transformation before sampling the texture.
+ v_texCoord = (a_texCoord - u_logicalBounds.xy) / (u_logicalBounds.zw - u_logicalBounds.xy);
+ #else
v_texCoord = a_texCoord;
+ #endif // DISTORTION_EFFECTS_ENABLED
+
#endif
}
diff --git a/test/fixtures/MockSkin.js b/test/fixtures/MockSkin.js
index 08999d2e9..403924035 100644
--- a/test/fixtures/MockSkin.js
+++ b/test/fixtures/MockSkin.js
@@ -5,18 +5,26 @@ class MockSkin extends Skin {
this.dimensions = dimensions;
}
- get size () {
+ get nativeSize () {
+ return this.dimensions || [0, 0];
+ }
+
+ get quadSize () {
return this.dimensions || [0, 0];
}
set rotationCenter (center) {
- this._rotationCenter[0] = center[0];
- this._rotationCenter[1] = center[1];
+ this._nativeRotationCenter[0] = center[0];
+ this._nativeRotationCenter[1] = center[1];
this.emit(Skin.Events.WasAltered);
}
- get rotationCenter () {
- return this._rotationCenter;
+ get nativeRotationCenter () {
+ return this._nativeRotationCenter;
+ }
+
+ get quadRotationCenter () {
+ return this._nativeRotationCenter;
}
}