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

Fix touching color check for background color

Browse Source
This commit is contained in:
adroitwhiz
2019-08-02 03:12:55 -04:00
parent 77ccf97886
commit 99ff2ba11e
4 changed files with 88 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/RenderWebGL.js
View File

@@ -182,9 +182,23 @@ class RenderWebGL extends EventEmitter {
/** @type {function} */
this._exitRegion = null;
/** @type {object} */
this._backgroundDrawRegionId = {
enter: () => this._enterDrawBackground(),
exit: () => this._exitDrawBackground()
};
/** @type {Array.<snapshotCallback>} */
this._snapshotCallbacks = [];
/** @type {Array<number>}
* @readonly */
this._backgroundColor4f = [0, 0, 0, 0];
/** @type {Uint8ClampedArray}
* @readonly */
this._backgroundColor3b = new Uint8ClampedArray(3);
this._createGeometry();
this.on(RenderConstants.Events.NativeSizeChanged, this.onNativeSizeChanged);
@@ -244,7 +258,12 @@ class RenderWebGL extends EventEmitter {
* @param {number} blue The blue component for the background.
*/
setBackgroundColor (red, green, blue) {
this._backgroundColor = [red, green, blue, 1];
this._backgroundColor4f = [red, green, blue, 1];
this._backgroundColor3b[0] = red * 255;
this._backgroundColor3b[1] = green * 255;
this._backgroundColor3b[2] = blue * 255;
}
/**
@@ -623,7 +642,7 @@ class RenderWebGL extends EventEmitter {
twgl.bindFramebufferInfo(gl, null);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor.apply(gl, this._backgroundColor);
gl.clearColor.apply(gl, this._backgroundColor4f);
gl.clear(gl.COLOR_BUFFER_BIT);
this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, this._projection);
@@ -739,11 +758,19 @@ class RenderWebGL extends EventEmitter {
*/
isTouchingColor (drawableID, color3b, mask3b) {
const candidates = this._candidatesTouching(drawableID, this._visibleDrawList);
if (candidates.length === 0) {
return false;
}
const bounds = this._candidatesBounds(candidates);
let bounds;
if (colorMatches(color3b, this._backgroundColor3b, 0)) {
// If the color we're checking for is the background color, don't confine the check to
// candidate drawables' bounds--since the background spans the entire stage, we must check
// everything that lies inside the drawable.
bounds = this._touchingBounds(drawableID);
} else if (candidates.length === 0) {
// If not checking for the background color, we can return early if there are no candidate drawables.
return false;
} else {
bounds = this._candidatesBounds(candidates);
}
const maxPixelsForCPU = this._getMaxPixelsForCPU();
@@ -805,6 +832,19 @@ class RenderWebGL extends EventEmitter {
}
}
_enterDrawBackground () {
const gl = this.gl;
const currentShader = this._shaderManager.getShader(ShaderManager.DRAW_MODE.background, 0);
gl.disable(gl.BLEND);
gl.useProgram(currentShader.program);
twgl.setBuffersAndAttributes(gl, currentShader, this._bufferInfo);
}
_exitDrawBackground () {
const gl = this.gl;
gl.enable(gl.BLEND);
}
_isTouchingColorGpuStart (drawableID, candidateIDs, bounds, color3b, mask3b) {
this._doExitDrawRegion();
@@ -816,15 +856,8 @@ class RenderWebGL extends EventEmitter {
gl.viewport(0, 0, bounds.width, bounds.height);
const projection = twgl.m4.ortho(bounds.left, bounds.right, bounds.top, bounds.bottom, -1, 1);
let fillBackgroundColor = this._backgroundColor;
// When using masking such that the background fill color will showing through, ensure we don't
// fill using the same color that we are trying to detect!
if (color3b[0] > 196 && color3b[1] > 196 && color3b[2] > 196) {
fillBackgroundColor = [0, 0, 0, 255];
}
gl.clearColor.apply(gl, fillBackgroundColor);
// Clear the query buffer to fully transparent. This will be the color of pixels that fail the stencil test.
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
let extraUniforms;
@@ -836,6 +869,9 @@ class RenderWebGL extends EventEmitter {
}
try {
// Using the stencil buffer, mask out the drawing to either the drawable's bounds
// or pixels of the drawable which match the mask color, depending on whether a mask color is given.
// Masked-out pixels will not be checked.
gl.enable(gl.STENCIL_TEST);
gl.stencilFunc(gl.ALWAYS, 1, 1);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
@@ -856,12 +892,25 @@ class RenderWebGL extends EventEmitter {
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
gl.colorMask(true, true, true, true);
// Draw the background as a quad. Drawing a background with gl.clear will not mask to the stenciled area.
this.enterDrawRegion(this._backgroundDrawRegionId);
const uniforms = {
u_backgroundColor: this._backgroundColor4f
};
const currentShader = this._shaderManager.getShader(ShaderManager.DRAW_MODE.background, 0);
twgl.setUniforms(currentShader, uniforms);
twgl.drawBufferInfo(gl, this._bufferInfo, gl.TRIANGLES);
// Draw the candidate drawables on top of the background.
this._drawThese(candidateIDs, ShaderManager.DRAW_MODE.default, projection,
{idFilterFunc: testID => testID !== drawableID}
);
} finally {
gl.colorMask(true, true, true, true);
gl.disable(gl.STENCIL_TEST);
this._doExitDrawRegion();
}
}
@@ -880,7 +929,8 @@ class RenderWebGL extends EventEmitter {
}
for (let pixelBase = 0; pixelBase < pixels.length; pixelBase += 4) {
if (colorMatches(color3b, pixels, pixelBase)) {
// Transparent pixels are masked (either by the drawable's bounds or color mask).
if (pixels[pixelBase + 3] !== 0 && colorMatches(color3b, pixels, pixelBase)) {
return true;
}
}
@@ -1204,7 +1254,7 @@ class RenderWebGL extends EventEmitter {
gl.viewport(0, 0, bounds.width, bounds.height);
const projection = twgl.m4.ortho(bounds.left, bounds.right, bounds.top, bounds.bottom, -1, 1);
gl.clearColor.apply(gl, this._backgroundColor);
gl.clearColor.apply(gl, this._backgroundColor4f);
gl.clear(gl.COLOR_BUFFER_BIT);
this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, projection);

7
src/ShaderManager.js
View File

@@ -176,7 +176,12 @@ ShaderManager.DRAW_MODE = {
/**
* Draw a line with caps.
*/
line: 'line'
line: 'line',
/**
* Draw the background in a certain color. Must sometimes be used instead of gl.clear.
*/
background: 'background'
};
module.exports = ShaderManager;

14
src/shaders/sprite.frag
View File

@@ -40,6 +40,10 @@ uniform float u_lineLength;
uniform vec4 u_penPoints;
#endif // DRAW_MODE_line
#ifdef DRAW_MODE_background
uniform vec4 u_backgroundColor;
#endif // DRAW_MODE_background
uniform sampler2D u_skin;
varying vec2 v_texCoord;
@@ -110,7 +114,7 @@ const vec2 kCenter = vec2(0.5, 0.5);
void main()
{
#ifndef DRAW_MODE_line
#if !(defined(DRAW_MODE_line) || defined(DRAW_MODE_background))
vec2 texcoord0 = v_texCoord;
#ifdef ENABLE_mosaic
@@ -216,7 +220,9 @@ void main()
gl_FragColor.rgb /= gl_FragColor.a + epsilon;
#endif
#else // DRAW_MODE_line
#endif // !(defined(DRAW_MODE_line) || defined(DRAW_MODE_background))
#ifdef DRAW_MODE_line
// Maaaaagic antialiased-line-with-round-caps shader.
// "along-the-lineness". This increases parallel to the line.
@@ -235,4 +241,8 @@ void main()
// the closer we are to the line, invert it.
gl_FragColor = u_lineColor * clamp(1.0 - line, 0.0, 1.0);
#endif // DRAW_MODE_line
#ifdef DRAW_MODE_background
gl_FragColor = u_backgroundColor;
#endif
}

3
src/shaders/sprite.vert
View File

@@ -60,6 +60,9 @@ void main() {
// Apply view transform
position *= 2.0 / u_stageSize;
gl_Position = vec4(position, 0, 1);
#elif defined(DRAW_MODE_background)
gl_Position = vec4(a_position * 2.0, 0, 1);
v_texCoord = a_texCoord;
#else
gl_Position = u_projectionMatrix * u_modelMatrix * vec4(a_position, 0, 1);
v_texCoord = a_texCoord;