From 44d2fdeba82551fba8b3cd6a2a84d94ec6bf05d2 Mon Sep 17 00:00:00 2001 From: peabrainiac <43812953+peabrainiac@users.noreply.github.com> Date: Wed, 27 Feb 2019 08:48:45 +0100 Subject: [PATCH 01/12] Update PenSkin.js --- src/PenSkin.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/PenSkin.js b/src/PenSkin.js index fb0b0d9..d9f6b98 100644 --- a/src/PenSkin.js +++ b/src/PenSkin.js @@ -181,8 +181,9 @@ class PenSkin extends Skin { clear () { const gl = this._renderer.gl; twgl.bindFramebufferInfo(gl, this._framebuffer); - - gl.clearColor(1, 1, 1, 0); + + /* Reset framebuffer to transparent black */ + gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); const ctx = this._canvas.getContext('2d'); From 9f7bd971c97a44eef78e808380042988b25c409a Mon Sep 17 00:00:00 2001 From: peabrainiac <43812953+peabrainiac@users.noreply.github.com> Date: Sat, 2 Mar 2019 00:29:21 +0100 Subject: [PATCH 02/12] Update PenSkin.js changed clearColor on `_setCanvasSize` --- src/PenSkin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/PenSkin.js b/src/PenSkin.js index d9f6b98..84f19e8 100644 --- a/src/PenSkin.js +++ b/src/PenSkin.js @@ -599,7 +599,7 @@ class PenSkin extends Skin { this._silhouetteBuffer = twgl.createFramebufferInfo(gl, [{format: gl.RGBA}], width, height); } - gl.clearColor(1, 1, 1, 0); + gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); this._silhouetteDirty = true; From 7628c1e7f9348e24a62edcba529a9783bcfbf3cf Mon Sep 17 00:00:00 2001 From: peabrainiac <43812953+peabrainiac@users.noreply.github.com> Date: Sat, 2 Mar 2019 20:59:00 +0100 Subject: [PATCH 03/12] Update RenderWebGL.js Modified blend function in `_drawThese` to blend skins with premultiplied alpha correctly --- src/RenderWebGL.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/RenderWebGL.js b/src/RenderWebGL.js index 05b35e2..641d1b6 100644 --- a/src/RenderWebGL.js +++ b/src/RenderWebGL.js @@ -1620,7 +1620,9 @@ class RenderWebGL extends EventEmitter { } twgl.setUniforms(currentShader, uniforms); - + + gl.blendFuncSeparate(gl.ONE,gl.ONE_MINUS_SRC_ALPHA,gl.ONE,gl.ONE_MINUS_SRC_ALPHA); + twgl.drawBufferInfo(gl, this._bufferInfo, gl.TRIANGLES); } From 61bf4c84c330d640c0afb4cf66c74b344cc9f5b1 Mon Sep 17 00:00:00 2001 From: peabrainiac <43812953+peabrainiac@users.noreply.github.com> Date: Sat, 2 Mar 2019 22:35:42 +0100 Subject: [PATCH 04/12] Update RenderWebGL.js --- src/RenderWebGL.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/RenderWebGL.js b/src/RenderWebGL.js index 641d1b6..1ca9cad 100644 --- a/src/RenderWebGL.js +++ b/src/RenderWebGL.js @@ -1621,7 +1621,8 @@ class RenderWebGL extends EventEmitter { twgl.setUniforms(currentShader, uniforms); - gl.blendFuncSeparate(gl.ONE,gl.ONE_MINUS_SRC_ALPHA,gl.ONE,gl.ONE_MINUS_SRC_ALPHA); + /* set blend function to work with premultiplied alpha */ + gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA); twgl.drawBufferInfo(gl, this._bufferInfo, gl.TRIANGLES); } From 996a1d6cf775702414b05667fde37024c313d7ce Mon Sep 17 00:00:00 2001 From: peabrainiac <43812953+peabrainiac@users.noreply.github.com> Date: Sun, 3 Mar 2019 17:55:55 +0100 Subject: [PATCH 05/12] Update sprite.frag --- src/shaders/sprite.frag | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/shaders/sprite.frag b/src/shaders/sprite.frag index 055e9a2..a781baf 100644 --- a/src/shaders/sprite.frag +++ b/src/shaders/sprite.frag @@ -194,12 +194,6 @@ void main() discard; } #endif // DRAW_MODE_colorMask - - // WebGL defaults to premultiplied alpha - #ifndef DRAW_MODE_stamp - gl_FragColor.rgb *= gl_FragColor.a; - #endif // DRAW_MODE_stamp - #endif // DRAW_MODE_silhouette #else // DRAW_MODE_lineSample From f2a7085492894bcb0a113339a48658f009f38be1 Mon Sep 17 00:00:00 2001 From: peabrainiac <43812953+peabrainiac@users.noreply.github.com> Date: Sun, 3 Mar 2019 17:58:12 +0100 Subject: [PATCH 06/12] Update RenderWebGL.js --- src/RenderWebGL.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/RenderWebGL.js b/src/RenderWebGL.js index 1ca9cad..07dc013 100644 --- a/src/RenderWebGL.js +++ b/src/RenderWebGL.js @@ -1622,7 +1622,7 @@ class RenderWebGL extends EventEmitter { twgl.setUniforms(currentShader, uniforms); /* set blend function to work with premultiplied alpha */ - gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA); + gl.blendFuncSeparate(gl.ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA); twgl.drawBufferInfo(gl, this._bufferInfo, gl.TRIANGLES); } From 147b79d31925c85895c230d610f127662808e349 Mon Sep 17 00:00:00 2001 From: peabrainiac <43812953+peabrainiac@users.noreply.github.com> Date: Sun, 3 Mar 2019 18:12:13 +0100 Subject: [PATCH 07/12] Update RenderWebGL.js --- src/RenderWebGL.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/RenderWebGL.js b/src/RenderWebGL.js index 07dc013..56586ac 100644 --- a/src/RenderWebGL.js +++ b/src/RenderWebGL.js @@ -1621,8 +1621,8 @@ class RenderWebGL extends EventEmitter { twgl.setUniforms(currentShader, uniforms); - /* set blend function to work with premultiplied alpha */ - gl.blendFuncSeparate(gl.ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA); + /* set blend function to not use premultiplied alpha anymore */ + gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA); twgl.drawBufferInfo(gl, this._bufferInfo, gl.TRIANGLES); } From 152cf028cc699c2efcdfb10f47a0cf66ae59d1f7 Mon Sep 17 00:00:00 2001 From: peabrainiac <43812953+peabrainiac@users.noreply.github.com> Date: Sun, 3 Mar 2019 18:39:40 +0100 Subject: [PATCH 08/12] Update Skin.js --- src/Skin.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/Skin.js b/src/Skin.js index d5fcbb3..e0e7413 100644 --- a/src/Skin.js +++ b/src/Skin.js @@ -76,6 +76,13 @@ class Skin extends EventEmitter { return false; } + /** + * @returns {boolean} true if alpha is premultiplied, false otherwise + */ + get hasPremultipliedAlpha () { + return false; + } + /** * @return {int} the unique ID for this Skin. */ From 3d373571f8433b31d5b1007f2b8df3dc820f0d41 Mon Sep 17 00:00:00 2001 From: peabrainiac <43812953+peabrainiac@users.noreply.github.com> Date: Sun, 3 Mar 2019 18:40:09 +0100 Subject: [PATCH 09/12] Update PenSkin.js --- src/PenSkin.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/PenSkin.js b/src/PenSkin.js index 84f19e8..1e500ba 100644 --- a/src/PenSkin.js +++ b/src/PenSkin.js @@ -154,6 +154,13 @@ class PenSkin extends Skin { return true; } + /** + * @returns {boolean} true if alpha is premultiplied, false otherwise + */ + get hasPremultipliedAlpha () { + return true; + } + /** * @return {Array} the "native" size, in texels, of this skin. [width, height] */ From 5fb93460368a35e3868d22438e066a2960cba15f Mon Sep 17 00:00:00 2001 From: peabrainiac <43812953+peabrainiac@users.noreply.github.com> Date: Sun, 3 Mar 2019 18:42:10 +0100 Subject: [PATCH 10/12] Update RenderWebGL.js --- src/RenderWebGL.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/RenderWebGL.js b/src/RenderWebGL.js index 56586ac..9a09bc5 100644 --- a/src/RenderWebGL.js +++ b/src/RenderWebGL.js @@ -1621,8 +1621,12 @@ class RenderWebGL extends EventEmitter { twgl.setUniforms(currentShader, uniforms); - /* set blend function to not use premultiplied alpha anymore */ - gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA); + /* 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); } From fe01fea9d06576bee2267a58aeac30c17f204e30 Mon Sep 17 00:00:00 2001 From: peabrainiac <43812953+peabrainiac@users.noreply.github.com> Date: Sun, 3 Mar 2019 18:49:04 +0100 Subject: [PATCH 11/12] Update RenderWebGL.js --- src/RenderWebGL.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/RenderWebGL.js b/src/RenderWebGL.js index 9a09bc5..f16b02d 100644 --- a/src/RenderWebGL.js +++ b/src/RenderWebGL.js @@ -1624,7 +1624,7 @@ class RenderWebGL extends EventEmitter { /* 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 { + } else { gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA); } From 8f007c0986e8e75251b4d5db9d388af2ae81db24 Mon Sep 17 00:00:00 2001 From: Katie Broida Date: Mon, 18 Mar 2019 15:21:34 -0400 Subject: [PATCH 12/12] Only check local position against mosaic effect transform if it falls within the drawable's space --- src/Drawable.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Drawable.js b/src/Drawable.js index d8f6589..1d90a29 100644 --- a/src/Drawable.js +++ b/src/Drawable.js @@ -36,8 +36,10 @@ const getLocalPosition = (drawable, vec) => { // localPosition matches that transformation. localPosition[0] = 0.5 - (((v0 * m[0]) + (v1 * m[4]) + m[12]) / d); localPosition[1] = (((v0 * m[1]) + (v1 * m[5]) + m[13]) / d) + 0.5; - // Apply texture effect transform. - EffectTransform.transformPoint(drawable, localPosition, localPosition); + // Apply texture effect transform if the localPosition is within the drawable's space. + if ((localPosition[0] >= 0 && localPosition[0] < 1) && (localPosition[1] >= 0 && localPosition[1] < 1)) { + EffectTransform.transformPoint(drawable, localPosition, localPosition); + } return localPosition; };