mirror of
https://github.com/scratchfoundation/scratch-render.git
synced 2025-08-28 22:30:04 -04:00
Merge branch 'develop' into revert-559-revert-438-pen-shader
This commit is contained in:
commit
4a521509da
4 changed files with 29 additions and 16 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue