scratchfoundation/scratch-render
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-render.git synced 2025-08-28 22:30:04 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into rm-update-fast-bounds

Browse source
This commit is contained in:
DD Liu 2019-10-01 15:53:19 -04:00 • committed by GitHub
commit 503c3f7b0b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 467 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/BitmapSkin.js
View file

@ -62,10 +62,11 @@ class BitmapSkin extends Skin {
/**
* Get the bounds of the drawable for determining its fenced position.
* @param {Array<number>} drawable - The Drawable instance this skin is using.
* @param {?Rectangle} result - Optional destination for bounds calculation.
* @return {!Rectangle} The drawable's bounds. For compatibility with Scratch 2, we always use getAABB for bitmaps.
*/
getFenceBounds (drawable) {
return drawable.getAABB();
getFenceBounds (drawable, result) {
return drawable.getAABB(result);
}
/**

164
src/Drawable.js
View file

@ -183,56 +183,99 @@ class Drawable {
return this._visible;
}
/**
* Update the position if it is different. Marks the transform as dirty.
* @param {Array.<number>} position A new position.
*/
updatePosition (position) {
if (this._position[0] !== position[0] ||
this._position[1] !== position[1]) {
this._position[0] = Math.round(position[0]);
this._position[1] = Math.round(position[1]);
this.setTransformDirty();
}
}
/**
* Update the direction if it is different. Marks the transform as dirty.
* @param {number} direction A new direction.
*/
updateDirection (direction) {
if (this._direction !== direction) {
this._direction = direction;
this._rotationTransformDirty = true;
this.setTransformDirty();
}
}
/**
* Update the scale if it is different. Marks the transform as dirty.
* @param {Array.<number>} scale A new scale.
*/
updateScale (scale) {
if (this._scale[0] !== scale[0] ||
this._scale[1] !== scale[1]) {
this._scale[0] = scale[0];
this._scale[1] = scale[1];
this._rotationCenterDirty = true;
this._skinScaleDirty = true;
this.setTransformDirty();
}
}
/**
* Update visibility if it is different. Marks the convex hull as dirty.
* @param {boolean} visible A new visibility state.
*/
updateVisible (visible) {
if (this._visible !== visible) {
this._visible = visible;
this.setConvexHullDirty();
}
}
/**
* Update an effect. Marks the convex hull as dirty if the effect changes shape.
* @param {string} effectName The name of the effect.
* @param {number} rawValue A new effect value.
*/
updateEffect (effectName, rawValue) {
const effectInfo = ShaderManager.EFFECT_INFO[effectName];
if (rawValue) {
this._effectBits |= effectInfo.mask;
} else {
this._effectBits &= ~effectInfo.mask;
}
const converter = effectInfo.converter;
this._uniforms[effectInfo.uniformName] = converter(rawValue);
if (effectInfo.shapeChanges) {
this.setConvexHullDirty();
}
}
/**
* Update the position, direction, scale, or effect properties of this Drawable.
* @deprecated Use specific update* methods instead.
* @param {object.<string,*>} properties The new property values to set.
*/
updateProperties (properties) {
let dirty = false;
if ('position' in properties && (
this._position[0] !== properties.position[0] ||
this._position[1] !== properties.position[1])) {
this._position[0] = Math.round(properties.position[0]);
this._position[1] = Math.round(properties.position[1]);
dirty = true;
if ('position' in properties) {
this.updatePosition(properties.position);
}
if ('direction' in properties && this._direction !== properties.direction) {
this._direction = properties.direction;
this._rotationTransformDirty = true;
dirty = true;
if ('direction' in properties) {
this.updateDirection(properties.direction);
}
if ('scale' in properties && (
this._scale[0] !== properties.scale[0] ||
this._scale[1] !== properties.scale[1])) {
this._scale[0] = properties.scale[0];
this._scale[1] = properties.scale[1];
this._rotationCenterDirty = true;
this._skinScaleDirty = true;
dirty = true;
if ('scale' in properties) {
this.updateScale(properties.scale);
}
if ('visible' in properties) {
this._visible = properties.visible;
this.setConvexHullDirty();
}
if (dirty) {
this.setTransformDirty();
this.updateVisible(properties.visible);
}
const numEffects = ShaderManager.EFFECTS.length;
for (let index = 0; index < numEffects; ++index) {
const effectName = ShaderManager.EFFECTS[index];
if (effectName in properties) {
const rawValue = properties[effectName];
const effectInfo = ShaderManager.EFFECT_INFO[effectName];
if (rawValue) {
this._effectBits |= effectInfo.mask;
} else {
this._effectBits &= ~effectInfo.mask;
}
const converter = effectInfo.converter;
this._uniforms[effectInfo.uniformName] = converter(rawValue);
if (effectInfo.shapeChanges) {
this.setConvexHullDirty();
}
this.updateEffect(effectName, properties[effectName]);
}
}
}
@ -433,6 +476,16 @@ class Drawable {
return true;
}
// If the effect bits for mosaic, pixelate, whirl, or fisheye are set, use linear
if ((this._effectBits & (
ShaderManager.EFFECT_INFO.fisheye.mask |
ShaderManager.EFFECT_INFO.whirl.mask |
ShaderManager.EFFECT_INFO.pixelate.mask |
ShaderManager.EFFECT_INFO.mosaic.mask
)) !== 0) {
return false;
}
// We can't use nearest neighbor unless we are a multiple of 90 rotation
if (this._direction % 90 !== 0) {
return false;
@ -451,9 +504,10 @@ class Drawable {
* This function applies the transform matrix to the known convex hull,
* and then finds the minimum box along the axes.
* Before calling this, ensure the renderer has updated convex hull points.
* @param {?Rectangle} result optional destination for bounds calculation
* @return {!Rectangle} Bounds for a tight box around the Drawable.
*/
getBounds () {
getBounds (result) {
if (this.needsConvexHullPoints()) {
throw new Error('Needs updated convex hull points before bounds calculation.');
}
@ -462,18 +516,19 @@ class Drawable {
}
const transformedHullPoints = this._getTransformedHullPoints();
// Search through transformed points to generate box on axes.
const bounds = new Rectangle();
bounds.initFromPointsAABB(transformedHullPoints);
return bounds;
result = result || new Rectangle();
result.initFromPointsAABB(transformedHullPoints);
return result;
}
/**
* Get the precise bounds for the upper 8px slice of the Drawable.
* Used for calculating where to position a text bubble.
* Before calling this, ensure the renderer has updated convex hull points.
* @param {?Rectangle} result optional destination for bounds calculation
* @return {!Rectangle} Bounds for a tight box around a slice of the Drawable.
*/
getBoundsForBubble () {
getBoundsForBubble (result) {
if (this.needsConvexHullPoints()) {
throw new Error('Needs updated convex hull points before bubble bounds calculation.');
}
@ -485,9 +540,9 @@ class Drawable {
const maxY = Math.max.apply(null, transformedHullPoints.map(p => p[1]));
const filteredHullPoints = transformedHullPoints.filter(p => p[1] > maxY - slice);
// Search through filtered points to generate box on axes.
const bounds = new Rectangle();
bounds.initFromPointsAABB(filteredHullPoints);
return bounds;
result = result || new Rectangle();
result.initFromPointsAABB(filteredHullPoints);
return result;
}
/**
@ -497,34 +552,31 @@ class Drawable {
* which is tightly snapped to account for a Drawable's transparent regions.
* `getAABB` returns a much less accurate bounding box, but will be much
* faster to calculate so may be desired for quick checks/optimizations.
* @param {?Rectangle} result optional destination for bounds calculation
* @return {!Rectangle} Rough axis-aligned bounding box for Drawable.
*/
getAABB () {
getAABB (result) {
if (this._transformDirty) {
this._calculateTransform();
}
const tm = this._uniforms.u_modelMatrix;
const bounds = new Rectangle();
bounds.initFromPointsAABB([
twgl.m4.transformPoint(tm, [-0.5, -0.5, 0]),
twgl.m4.transformPoint(tm, [0.5, -0.5, 0]),
twgl.m4.transformPoint(tm, [-0.5, 0.5, 0]),
twgl.m4.transformPoint(tm, [0.5, 0.5, 0])
]);
return bounds;
result = result || new Rectangle();
result.initFromModelMatrix(tm);
return result;
}
/**
* Return the best Drawable bounds possible without performing graphics queries.
* I.e., returns the tight bounding box when the convex hull points are already
* known, but otherwise return the rough AABB of the Drawable.
* @param {?Rectangle} result optional destination for bounds calculation
* @return {!Rectangle} Bounds for the Drawable.
*/
getFastBounds () {
getFastBounds (result) {
if (!this.needsConvexHullPoints()) {
return this.getBounds();
return this.getBounds(result);
}
return this.getAABB();
return this.getAABB(result);
}
/**

35
src/Rectangle.js
View file

@ -54,6 +54,31 @@ class Rectangle {
}
}
/**
* Initialize a Rectangle to a 1 unit square centered at 0 x 0 transformed
* by a model matrix.
* @param {Array.<number>} 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
@ -98,11 +123,11 @@ class Rectangle {
this.right = Math.min(this.right, right);
this.bottom = Math.max(this.bottom, bottom);
this.top = Math.min(this.top, top);
// Ensure rectangle coordinates in order.
this.left = Math.min(this.left, this.right);
this.right = Math.max(this.right, this.left);
this.bottom = Math.min(this.bottom, this.top);
this.top = Math.max(this.top, this.bottom);
this.left = Math.min(this.left, right);
this.right = Math.max(this.right, left);
this.bottom = Math.min(this.bottom, top);
this.top = Math.max(this.top, bottom);
}
/**

136
src/RenderWebGL.js
View file

@ -16,6 +16,7 @@ const log = require('./util/log');
const __isTouchingDrawablesPoint = twgl.v3.create();
const __candidatesBounds = new Rectangle();
const __fenceBounds = new Rectangle();
const __touchingColor = new Uint8ClampedArray(4);
const __blendColor = new Uint8ClampedArray(4);
@ -104,7 +105,7 @@ class RenderWebGL extends EventEmitter {
* @private
*/
static _getContext (canvas) {
return twgl.getWebGLContext(canvas, {alpha: false, stencil: true});
return twgl.getWebGLContext(canvas, {alpha: false, stencil: true, antialias: false});
}
/**
@ -1313,9 +1314,122 @@ class RenderWebGL extends EventEmitter {
}, null);
}
/**
* Update a drawable's skin.
* @param {number} drawableID The drawable's id.
* @param {number} skinId The skin to update to.
*/
updateDrawableSkinId (drawableID, skinId) {
const drawable = this._allDrawables[drawableID];
// TODO: https://github.com/LLK/scratch-vm/issues/2288
if (!drawable) return;
drawable.skin = this._allSkins[skinId];
}
/**
* Update a drawable's skin rotation center.
* @param {number} drawableID The drawable's id.
* @param {Array.<number>} rotationCenter The rotation center for the skin.
*/
updateDrawableRotationCenter (drawableID, rotationCenter) {
const drawable = this._allDrawables[drawableID];
// TODO: https://github.com/LLK/scratch-vm/issues/2288
if (!drawable) return;
drawable.skin.setRotationCenter(rotationCenter[0], rotationCenter[1]);
}
/**
* Update a drawable's skin and rotation center together.
* @param {number} drawableID The drawable's id.
* @param {number} skinId The skin to update to.
* @param {Array.<number>} rotationCenter The rotation center for the skin.
*/
updateDrawableSkinIdRotationCenter (drawableID, skinId, rotationCenter) {
const drawable = this._allDrawables[drawableID];
// TODO: https://github.com/LLK/scratch-vm/issues/2288
if (!drawable) return;
drawable.skin = this._allSkins[skinId];
drawable.skin.setRotationCenter(rotationCenter[0], rotationCenter[1]);
}
/**
* Update a drawable's position.
* @param {number} drawableID The drawable's id.
* @param {Array.<number>} position The new position.
*/
updateDrawablePosition (drawableID, position) {
const drawable = this._allDrawables[drawableID];
// TODO: https://github.com/LLK/scratch-vm/issues/2288
if (!drawable) return;
drawable.updatePosition(position);
}
/**
* Update a drawable's direction.
* @param {number} drawableID The drawable's id.
* @param {number} direction A new direction.
*/
updateDrawableDirection (drawableID, direction) {
const drawable = this._allDrawables[drawableID];
// TODO: https://github.com/LLK/scratch-vm/issues/2288
if (!drawable) return;
drawable.updateDirection(direction);
}
/**
* Update a drawable's scale.
* @param {number} drawableID The drawable's id.
* @param {Array.<number>} scale A new scale.
*/
updateDrawableScale (drawableID, scale) {
const drawable = this._allDrawables[drawableID];
// TODO: https://github.com/LLK/scratch-vm/issues/2288
if (!drawable) return;
drawable.updateScale(scale);
}
/**
* Update a drawable's direction and scale together.
* @param {number} drawableID The drawable's id.
* @param {number} direction A new direction.
* @param {Array.<number>} scale A new scale.
*/
updateDrawableDirectionScale (drawableID, direction, scale) {
const drawable = this._allDrawables[drawableID];
// TODO: https://github.com/LLK/scratch-vm/issues/2288
if (!drawable) return;
drawable.updateDirection(direction);
drawable.updateScale(scale);
}
/**
* Update a drawable's visibility.
* @param {number} drawableID The drawable's id.
* @param {boolean} visible Will the drawable be visible?
*/
updateDrawableVisible (drawableID, visible) {
const drawable = this._allDrawables[drawableID];
// TODO: https://github.com/LLK/scratch-vm/issues/2288
if (!drawable) return;
drawable.updateVisible(visible);
}
/**
* Update a drawable's visual effect.
* @param {number} drawableID The drawable's id.
* @param {string} effectName The effect to change.
* @param {number} value A new effect value.
*/
updateDrawableEffect (drawableID, effectName, value) {
const drawable = this._allDrawables[drawableID];
// TODO: https://github.com/LLK/scratch-vm/issues/2288
if (!drawable) return;
drawable.updateEffect(effectName, value);
}
/**
* Update the position, direction, scale, or effect properties of this Drawable.
* @deprecated Use specific updateDrawable* methods instead.
* @param {int} drawableID The ID of the Drawable to update.
* @param {object.<string,*>} properties The new property values to set.
*/
@ -1323,17 +1437,16 @@ class RenderWebGL extends EventEmitter {
const drawable = this._allDrawables[drawableID];
if (!drawable) {
/**
* @todo fix whatever's wrong in the VM which causes this, then add a warning or throw here.
* @todo(https://github.com/LLK/scratch-vm/issues/2288) fix whatever's wrong in the VM which causes this, then add a warning or throw here.
* Right now this happens so much on some projects that a warning or exception here can hang the browser.
*/
return;
}
if ('skinId' in properties) {
drawable.skin = this._allSkins[properties.skinId];
this.updateDrawableSkinId(drawableID, properties.skinId);
}
if ('rotationCenter' in properties) {
const newRotationCenter = properties.rotationCenter;
drawable.skin.setRotationCenter(newRotationCenter[0], newRotationCenter[1]);
this.updateDrawableRotationCenter(drawableID, properties.rotationCenter);
}
drawable.updateProperties(properties);
}
@ -1350,14 +1463,14 @@ class RenderWebGL extends EventEmitter {
const drawable = this._allDrawables[drawableID];
if (!drawable) {
// TODO: fix whatever's wrong in the VM which causes this, then add a warning or throw here.
// @todo(https://github.com/LLK/scratch-vm/issues/2288) fix whatever's wrong in the VM which causes this, then add a warning or throw here.
// Right now this happens so much on some projects that a warning or exception here can hang the browser.
return [x, y];
}
const dx = x - drawable._position[0];
const dy = y - drawable._position[1];
const aabb = drawable._skin.getFenceBounds(drawable);
const aabb = drawable._skin.getFenceBounds(drawable, __fenceBounds);
const inset = Math.floor(Math.min(aabb.width, aabb.height) / 2);
const sx = this._xRight - Math.min(FENCE_WIDTH, inset);
@ -1416,8 +1529,6 @@ class RenderWebGL extends EventEmitter {
* @param {int} stampID - the unique ID of the Drawable to use as the stamp.
*/
penStamp (penSkinID, stampID) {
this._doExitDrawRegion();
const stampDrawable = this._allDrawables[stampID];
if (!stampDrawable) {
return;
@ -1428,6 +1539,8 @@ class RenderWebGL extends EventEmitter {
return;
}
this._doExitDrawRegion();
const skin = /** @type {PenSkin} */ this._allSkins[penSkinID];
const gl = this._gl;
@ -1548,6 +1661,7 @@ class RenderWebGL extends EventEmitter {
this._exitRegion();
}
this._exitRegion = null;
this._regionId = null;
}
/**
@ -1627,14 +1741,14 @@ class RenderWebGL extends EventEmitter {
}
twgl.setUniforms(currentShader, uniforms);
/* adjust blend function for this skin */
if (drawable.skin.hasPremultipliedAlpha){
gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
} else {
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
}
twgl.drawBufferInfo(gl, this._bufferInfo, gl.TRIANGLES);
}

5
src/Skin.js
View file

@ -146,10 +146,11 @@ class Skin extends EventEmitter {
/**
* Get the bounds of the drawable for determining its fenced position.
* @param {Array<number>} drawable - The Drawable instance this skin is using.
* @param {?Rectangle} result - Optional destination for bounds calculation.
* @return {!Rectangle} The drawable's bounds.
*/
getFenceBounds (drawable) {
return drawable.getFastBounds();
getFenceBounds (drawable, result) {
return drawable.getFastBounds(result);
}
/**