Skip to content

Commit 138cabe

Browse files
authored
Merge pull request #660 from adroitwhiz/revert-489
Revert "Merge pull request #489 from adroitwhiz/touching-white-fixes"
2 parents 6977471 + 116d147 commit 138cabe

File tree

5 files changed

+20
-98
lines changed

5 files changed

+20
-98
lines changed

src/RenderWebGL.js

Lines changed: 16 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -182,23 +182,9 @@ class RenderWebGL extends EventEmitter {
182182
/** @type {function} */
183183
this._exitRegion = null;
184184

185-
/** @type {object} */
186-
this._backgroundDrawRegionId = {
187-
enter: () => this._enterDrawBackground(),
188-
exit: () => this._exitDrawBackground()
189-
};
190-
191185
/** @type {Array.<snapshotCallback>} */
192186
this._snapshotCallbacks = [];
193187

194-
/** @type {Array<number>} */
195-
// Don't set this directly-- use setBackgroundColor so it stays in sync with _backgroundColor3b
196-
this._backgroundColor4f = [0, 0, 0, 1];
197-
198-
/** @type {Uint8ClampedArray} */
199-
// Don't set this directly-- use setBackgroundColor so it stays in sync with _backgroundColor4f
200-
this._backgroundColor3b = new Uint8ClampedArray(3);
201-
202188
this._createGeometry();
203189

204190
this.on(RenderConstants.Events.NativeSizeChanged, this.onNativeSizeChanged);
@@ -258,14 +244,7 @@ class RenderWebGL extends EventEmitter {
258244
* @param {number} blue The blue component for the background.
259245
*/
260246
setBackgroundColor (red, green, blue) {
261-
this._backgroundColor4f[0] = red;
262-
this._backgroundColor4f[1] = green;
263-
this._backgroundColor4f[2] = blue;
264-
265-
this._backgroundColor3b[0] = red * 255;
266-
this._backgroundColor3b[1] = green * 255;
267-
this._backgroundColor3b[2] = blue * 255;
268-
247+
this._backgroundColor = [red, green, blue, 1];
269248
}
270249

271250
/**
@@ -644,7 +623,7 @@ class RenderWebGL extends EventEmitter {
644623

645624
twgl.bindFramebufferInfo(gl, null);
646625
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
647-
gl.clearColor.apply(gl, this._backgroundColor4f);
626+
gl.clearColor.apply(gl, this._backgroundColor);
648627
gl.clear(gl.COLOR_BUFFER_BIT);
649628

650629
this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, this._projection);
@@ -760,20 +739,12 @@ class RenderWebGL extends EventEmitter {
760739
*/
761740
isTouchingColor (drawableID, color3b, mask3b) {
762741
const candidates = this._candidatesTouching(drawableID, this._visibleDrawList);
763-
764-
let bounds;
765-
if (colorMatches(color3b, this._backgroundColor3b, 0)) {
766-
// If the color we're checking for is the background color, don't confine the check to
767-
// candidate drawables' bounds--since the background spans the entire stage, we must check
768-
// everything that lies inside the drawable.
769-
bounds = this._touchingBounds(drawableID);
770-
} else if (candidates.length === 0) {
771-
// If not checking for the background color, we can return early if there are no candidate drawables.
742+
if (candidates.length === 0) {
772743
return false;
773-
} else {
774-
bounds = this._candidatesBounds(candidates);
775744
}
776745

746+
const bounds = this._candidatesBounds(candidates);
747+
777748
const maxPixelsForCPU = this._getMaxPixelsForCPU();
778749

779750
const debugCanvasContext = this._debugCanvas && this._debugCanvas.getContext('2d');
@@ -834,19 +805,6 @@ class RenderWebGL extends EventEmitter {
834805
}
835806
}
836807

837-
_enterDrawBackground () {
838-
const gl = this.gl;
839-
const currentShader = this._shaderManager.getShader(ShaderManager.DRAW_MODE.background, 0);
840-
gl.disable(gl.BLEND);
841-
gl.useProgram(currentShader.program);
842-
twgl.setBuffersAndAttributes(gl, currentShader, this._bufferInfo);
843-
}
844-
845-
_exitDrawBackground () {
846-
const gl = this.gl;
847-
gl.enable(gl.BLEND);
848-
}
849-
850808
_isTouchingColorGpuStart (drawableID, candidateIDs, bounds, color3b, mask3b) {
851809
this._doExitDrawRegion();
852810

@@ -858,8 +816,15 @@ class RenderWebGL extends EventEmitter {
858816
gl.viewport(0, 0, bounds.width, bounds.height);
859817
const projection = twgl.m4.ortho(bounds.left, bounds.right, bounds.top, bounds.bottom, -1, 1);
860818

861-
// Clear the query buffer to fully transparent. This will be the color of pixels that fail the stencil test.
862-
gl.clearColor(0, 0, 0, 0);
819+
let fillBackgroundColor = this._backgroundColor;
820+
821+
// When using masking such that the background fill color will showing through, ensure we don't
822+
// fill using the same color that we are trying to detect!
823+
if (color3b[0] > 196 && color3b[1] > 196 && color3b[2] > 196) {
824+
fillBackgroundColor = [0, 0, 0, 255];
825+
}
826+
827+
gl.clearColor.apply(gl, fillBackgroundColor);
863828
gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
864829

865830
let extraUniforms;
@@ -871,9 +836,6 @@ class RenderWebGL extends EventEmitter {
871836
}
872837

873838
try {
874-
// Using the stencil buffer, mask out the drawing to either the drawable's alpha channel
875-
// or pixels of the drawable which match the mask color, depending on whether a mask color is given.
876-
// Masked-out pixels will not be checked.
877839
gl.enable(gl.STENCIL_TEST);
878840
gl.stencilFunc(gl.ALWAYS, 1, 1);
879841
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
@@ -894,25 +856,12 @@ class RenderWebGL extends EventEmitter {
894856
gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
895857
gl.colorMask(true, true, true, true);
896858

897-
// Draw the background as a quad. Drawing a background with gl.clear will not mask to the stenciled area.
898-
this.enterDrawRegion(this._backgroundDrawRegionId);
899-
900-
const uniforms = {
901-
u_backgroundColor: this._backgroundColor4f
902-
};
903-
904-
const currentShader = this._shaderManager.getShader(ShaderManager.DRAW_MODE.background, 0);
905-
twgl.setUniforms(currentShader, uniforms);
906-
twgl.drawBufferInfo(gl, this._bufferInfo, gl.TRIANGLES);
907-
908-
// Draw the candidate drawables on top of the background.
909859
this._drawThese(candidateIDs, ShaderManager.DRAW_MODE.default, projection,
910860
{idFilterFunc: testID => testID !== drawableID}
911861
);
912862
} finally {
913863
gl.colorMask(true, true, true, true);
914864
gl.disable(gl.STENCIL_TEST);
915-
this._doExitDrawRegion();
916865
}
917866
}
918867

@@ -931,8 +880,7 @@ class RenderWebGL extends EventEmitter {
931880
}
932881

933882
for (let pixelBase = 0; pixelBase < pixels.length; pixelBase += 4) {
934-
// Transparent pixels are masked (either by the drawable's alpha channel or color mask).
935-
if (pixels[pixelBase + 3] !== 0 && colorMatches(color3b, pixels, pixelBase)) {
883+
if (colorMatches(color3b, pixels, pixelBase)) {
936884
return true;
937885
}
938886
}
@@ -1260,7 +1208,7 @@ class RenderWebGL extends EventEmitter {
12601208
gl.viewport(0, 0, bounds.width, bounds.height);
12611209
const projection = twgl.m4.ortho(bounds.left, bounds.right, bounds.top, bounds.bottom, -1, 1);
12621210

1263-
gl.clearColor.apply(gl, this._backgroundColor4f);
1211+
gl.clearColor.apply(gl, this._backgroundColor);
12641212
gl.clear(gl.COLOR_BUFFER_BIT);
12651213
this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, projection);
12661214

@@ -1348,13 +1296,6 @@ class RenderWebGL extends EventEmitter {
13481296
// Update the CPU position data
13491297
drawable.updateCPURenderAttributes();
13501298
const candidateBounds = drawable.getFastBounds();
1351-
1352-
// Push bounds out to integers. If a drawable extends out into half a pixel, that half-pixel still
1353-
// needs to be tested. Plus, in some areas we construct another rectangle from the union of these,
1354-
// and iterate over its pixels (width * height). Turns out that doesn't work so well when the
1355-
// width/height aren't integers.
1356-
candidateBounds.snapToInt();
1357-
13581299
if (bounds.intersects(candidateBounds)) {
13591300
result.push({
13601301
id,

src/ShaderManager.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -176,12 +176,7 @@ ShaderManager.DRAW_MODE = {
176176
/**
177177
* Draw a line with caps.
178178
*/
179-
line: 'line',
180-
181-
/**
182-
* Draw the background in a certain color. Must sometimes be used instead of gl.clear.
183-
*/
184-
background: 'background'
179+
line: 'line'
185180
};
186181

187182
module.exports = ShaderManager;

src/shaders/sprite.frag

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,9 @@ uniform float u_lineLength;
4040
uniform vec4 u_penPoints;
4141
#endif // DRAW_MODE_line
4242

43-
#ifdef DRAW_MODE_background
44-
uniform vec4 u_backgroundColor;
45-
#endif // DRAW_MODE_background
46-
4743
uniform sampler2D u_skin;
4844

49-
#ifndef DRAW_MODE_background
5045
varying vec2 v_texCoord;
51-
#endif
5246

5347
// Add this to divisors to prevent division by 0, which results in NaNs propagating through calculations.
5448
// Smaller values can cause problems on some mobile devices.
@@ -116,7 +110,7 @@ const vec2 kCenter = vec2(0.5, 0.5);
116110

117111
void main()
118112
{
119-
#if !(defined(DRAW_MODE_line) || defined(DRAW_MODE_background))
113+
#ifndef DRAW_MODE_line
120114
vec2 texcoord0 = v_texCoord;
121115

122116
#ifdef ENABLE_mosaic
@@ -222,9 +216,7 @@ void main()
222216
gl_FragColor.rgb /= gl_FragColor.a + epsilon;
223217
#endif
224218

225-
#endif // !(defined(DRAW_MODE_line) || defined(DRAW_MODE_background))
226-
227-
#ifdef DRAW_MODE_line
219+
#else // DRAW_MODE_line
228220
// Maaaaagic antialiased-line-with-round-caps shader.
229221

230222
// "along-the-lineness". This increases parallel to the line.
@@ -243,8 +235,4 @@ void main()
243235
// the closer we are to the line, invert it.
244236
gl_FragColor = u_lineColor * clamp(1.0 - line, 0.0, 1.0);
245237
#endif // DRAW_MODE_line
246-
247-
#ifdef DRAW_MODE_background
248-
gl_FragColor = u_backgroundColor;
249-
#endif
250238
}

src/shaders/sprite.vert

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ uniform vec4 u_penPoints;
1111
const float epsilon = 1e-3;
1212
#endif
1313

14-
#if !(defined(DRAW_MODE_line) || defined(DRAW_MODE_background))
14+
#ifndef DRAW_MODE_line
1515
uniform mat4 u_projectionMatrix;
1616
uniform mat4 u_modelMatrix;
1717
attribute vec2 a_texCoord;
@@ -60,8 +60,6 @@ void main() {
6060
// Apply view transform
6161
position *= 2.0 / u_stageSize;
6262
gl_Position = vec4(position, 0, 1);
63-
#elif defined(DRAW_MODE_background)
64-
gl_Position = vec4(a_position * 2.0, 0, 1);
6563
#else
6664
gl_Position = u_projectionMatrix * u_modelMatrix * vec4(a_position, 0, 1);
6765
v_texCoord = a_texCoord;
-54.6 KB
Binary file not shown.

0 commit comments

Comments
 (0)