Merge branch 'develop' into revert-559-revert-438-pen-shader

This commit is contained in:
DD Liu 2020-04-02 14:28:08 -04:00 committed by GitHub
commit 4a521509da
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 16 deletions

View file

@ -104,6 +104,12 @@ class PenSkin extends Skin {
/** @type {boolean} */
this._silhouetteDirty = false;
/** @type {Uint8Array} */
this._silhouettePixels = null;
/** @type {ImageData} */
this._silhouetteImageData = null;
/** @type {object} */
this._lineOnBufferDrawRegionId = {
enter: () => this._enterDrawLineOnBuffer(),
@ -514,6 +520,9 @@ class PenSkin extends Skin {
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
this._silhouettePixels = new Uint8Array(Math.floor(width * height * 4));
this._silhouetteImageData = this._canvas.getContext('2d').createImageData(width, height);
this._silhouetteDirty = true;
}
@ -551,24 +560,17 @@ class PenSkin extends Skin {
// Render export texture to another framebuffer
const gl = this._renderer.gl;
const bounds = this._bounds;
this._renderer.enterDrawRegion(this._toBufferDrawRegionId);
// Sample the framebuffer's pixels into the silhouette instance
const skinPixels = new Uint8Array(Math.floor(this._canvas.width * this._canvas.height * 4));
gl.readPixels(0, 0, this._canvas.width, this._canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, skinPixels);
gl.readPixels(
0, 0,
this._canvas.width, this._canvas.height,
gl.RGBA, gl.UNSIGNED_BYTE, this._silhouettePixels
);
const skinCanvas = this._canvas;
skinCanvas.width = bounds.width;
skinCanvas.height = bounds.height;
const skinContext = skinCanvas.getContext('2d');
const skinImageData = skinContext.createImageData(bounds.width, bounds.height);
skinImageData.data.set(skinPixels);
skinContext.putImageData(skinImageData, 0, 0);
this._silhouette.update(this._canvas, true /* isPremultiplied */);
this._silhouetteImageData.data.set(this._silhouettePixels);
this._silhouette.update(this._silhouetteImageData, true /* isPremultiplied */);
this._silhouetteDirty = false;
}

View file

@ -1124,7 +1124,8 @@ class RenderWebGL extends EventEmitter {
gl.clear(gl.COLOR_BUFFER_BIT);
try {
gl.disable(gl.BLEND);
this._drawThese([drawableID], ShaderManager.DRAW_MODE.default, projection,
// ImageData objects store alpha un-premultiplied, so draw with the `straightAlpha` draw mode.
this._drawThese([drawableID], ShaderManager.DRAW_MODE.straightAlpha, projection,
{effectMask: ~ShaderManager.EFFECT_INFO.ghost.mask});
} finally {
gl.enable(gl.BLEND);

View file

@ -154,10 +154,15 @@ ShaderManager.EFFECTS = Object.keys(ShaderManager.EFFECT_INFO);
*/
ShaderManager.DRAW_MODE = {
/**
* Draw normally.
* Draw normally. Its output will use premultiplied alpha.
*/
default: 'default',
/**
* Draw with non-premultiplied alpha. Useful for reading pixels from GL into an ImageData object.
*/
straightAlpha: 'straightAlpha',
/**
* Draw a silhouette using a solid color.
*/

View file

@ -210,6 +210,11 @@ void main()
#endif // DRAW_MODE_colorMask
#endif // DRAW_MODE_silhouette
#ifdef DRAW_MODE_straightAlpha
// Un-premultiply alpha.
gl_FragColor.rgb /= gl_FragColor.a + epsilon;
#endif
#else // DRAW_MODE_line
// Maaaaagic antialiased-line-with-round-caps shader.
// Adapted from Inigo Quilez' 2D distance function cheat sheet