github/scratch-render
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #621 from adroitwhiz/stamp-pen-layer-scale

Browse Source 
Take render target dimensions into account when drawing
This commit is contained in:
DD Liu 2021-06-29 17:07:45 -04:00 committed by GitHub
commit 01a4057fe3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/RenderWebGL.js
View File

@ -653,7 +653,10 @@ class RenderWebGL extends EventEmitter {
gl.clearColor(...this._backgroundColor4f);
gl.clear(gl.COLOR_BUFFER_BIT);
this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, this._projection);
this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, this._projection, {
framebufferWidth: gl.canvas.width,
framebufferHeight: gl.canvas.height
});
if (this._snapshotCallbacks.length > 0) {
const snapshot = gl.canvas.toDataURL();
this._snapshotCallbacks.forEach(cb => cb(snapshot));
@ -1209,9 +1212,15 @@ class RenderWebGL extends EventEmitter {
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Don't apply the ghost effect. TODO: is this an intentional design decision?
this._drawThese([drawableID], ShaderManager.DRAW_MODE.straightAlpha, projection,
{effectMask: ~ShaderManager.EFFECT_INFO.ghost.mask});
{
// Don't apply the ghost effect. TODO: is this an intentional design decision?
effectMask: ~ShaderManager.EFFECT_INFO.ghost.mask,
// We're doing this in screen-space, so the framebuffer dimensions should be those of the canvas in
// screen-space. This is used to ensure SVG skins are rendered at the proper resolution.
framebufferWidth: canvas.width,
framebufferHeight: canvas.height
});
const data = new Uint8Array(Math.floor(clampedWidth * clampedHeight * 4));
gl.readPixels(0, 0, clampedWidth, clampedHeight, gl.RGBA, gl.UNSIGNED_BYTE, data);
@ -1713,18 +1722,6 @@ class RenderWebGL extends EventEmitter {
this._regionId = null;
}
/**
* Get the screen-space scale of a drawable, as percentages of the drawable's "normal" size.
* @param {Drawable} drawable The drawable whose screen-space scale we're fetching.
* @returns {Array<number>} The screen-space X and Y dimensions of the drawable's scale, as percentages.
*/
_getDrawableScreenSpaceScale (drawable) {
return [
drawable.scale[0] * this._gl.canvas.width / this._nativeSize[0],
drawable.scale[1] * this._gl.canvas.height / this._nativeSize[1]
];
}
/**
* Draw a set of Drawables, by drawable ID
* @param {Array<int>} drawables The Drawable IDs to draw, possibly this._drawList.
@ -1735,6 +1732,8 @@ class RenderWebGL extends EventEmitter {
* @param {object.<string,*>} opts.extraUniforms Extra uniforms for the shaders.
* @param {int} opts.effectMask Bitmask for effects to allow
* @param {boolean} opts.ignoreVisibility Draw all, despite visibility (e.g. stamping, touching color)
* @param {int} opts.framebufferWidth The width of the framebuffer being drawn onto. Defaults to "native" width
* @param {int} opts.framebufferHeight The height of the framebuffer being drawn onto. Defaults to "native" height
* @private
*/
_drawThese (drawables, drawMode, projection, opts = {}) {
@ -1742,6 +1741,11 @@ class RenderWebGL extends EventEmitter {
const gl = this._gl;
let currentShader = null;
const framebufferSpaceScaleDiffers = (
'framebufferWidth' in opts && 'framebufferHeight' in opts &&
opts.framebufferWidth !== this._nativeSize[0] && opts.framebufferHeight !== this._nativeSize[1]
);
const numDrawables = drawables.length;
for (let drawableIndex = 0; drawableIndex < numDrawables; ++drawableIndex) {
const drawableID = drawables[drawableIndex];
@ -1756,8 +1760,13 @@ class RenderWebGL extends EventEmitter {
// the ignoreVisibility flag is used (e.g. for stamping or touchingColor).
if (!drawable.getVisible() && !opts.ignoreVisibility) continue;
// Combine drawable scale with the native vs. backing pixel ratio
const drawableScale = this._getDrawableScreenSpaceScale(drawable);
// drawableScale is the "framebuffer-pixel-space" scale of the drawable, as percentages of the drawable's
// "native size" (so 100 = same as skin's "native size", 200 = twice "native size").
// If the framebuffer dimensions are the same as the stage's "native" size, there's no need to calculate it.
const drawableScale = framebufferSpaceScaleDiffers ? [
drawable.scale[0] * opts.framebufferWidth / this._nativeSize[0],
drawable.scale[1] * opts.framebufferHeight / this._nativeSize[1]
] : drawable.scale;
// If the skin or texture isn't ready yet, skip it.
if (!drawable.skin || !drawable.skin.getTexture(drawableScale)) continue;