scratchfoundation/scratch-render
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-render.git synced 2025-08-28 22:30:04 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Premultiplied alpha, take 2

Browse source
This commit is contained in:
adroitwhiz 2019-12-10 16:56:51 -05:00
parent fed02ca582
commit 10a6d87eb6
11 changed files with 164 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/BitmapSkin.js
View file

@ -18,9 +18,6 @@ class BitmapSkin extends Skin {
/** @type {!RenderWebGL} */
this._renderer = renderer;
/** @type {WebGLTexture} */
this._texture = null;
/** @type {Array<int>} */
this._textureSize = [0, 0];
}
@ -95,22 +92,17 @@ class BitmapSkin extends Skin {
textureData = context.getImageData(0, 0, bitmapData.width, bitmapData.height);
}
if (this._texture) {
gl.bindTexture(gl.TEXTURE_2D, this._texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
this._silhouette.update(textureData);
} else {
// TODO: mipmaps?
if (this._texture === null) {
const textureOptions = {
auto: true,
wrap: gl.CLAMP_TO_EDGE,
src: textureData
auto: false,
wrap: gl.CLAMP_TO_EDGE
};
this._texture = twgl.createTexture(gl, textureOptions);
this._silhouette.update(textureData);
}
this._setTexture(textureData);
// Do these last in case any of the above throws an exception
this._costumeResolution = costumeResolution || 2;
this._textureSize = BitmapSkin._getBitmapSize(bitmapData);

3
src/Drawable.js
View file

@ -685,6 +685,9 @@ class Drawable {
const localPosition = getLocalPosition(drawable, vec);
if (localPosition[0] < 0 || localPosition[1] < 0 ||
localPosition[0] > 1 || localPosition[1] > 1) {
dst[0] = 0;
dst[1] = 0;
dst[2] = 0;
dst[3] = 0;
return dst;
}

30
src/EffectTransform.js
View file

@ -130,15 +130,21 @@ class EffectTransform {
const effects = drawable.enabledEffects;
const uniforms = drawable.getUniforms();
if ((effects & ShaderManager.EFFECT_INFO.ghost.mask) !== 0) {
// gl_FragColor.a *= u_ghost
inOutColor[3] *= uniforms.u_ghost;
}
const enableColor = (effects & ShaderManager.EFFECT_INFO.color.mask) !== 0;
const enableBrightness = (effects & ShaderManager.EFFECT_INFO.brightness.mask) !== 0;
if (enableColor || enableBrightness) {
// gl_FragColor.rgb /= gl_FragColor.a + epsilon;
// Here, we're dividing by the (previously pre-multiplied) alpha to ensure HSV is properly calculated
// for partially transparent pixels.
// epsilon is present in the shader because dividing by 0 (fully transparent pixels) messes up calculations.
// We're doing this with a Uint8ClampedArray here, so dividing by 0 just gives 255. We're later multiplying
// by 0 again, so it won't affect results.
const alpha = inOutColor[3] / 255;
inOutColor[0] /= alpha;
inOutColor[1] /= alpha;
inOutColor[2] /= alpha;
// vec3 hsl = convertRGB2HSL(gl_FragColor.xyz);
const hsl = rgbToHsl(inOutColor);
@ -171,6 +177,20 @@ class EffectTransform {
}
// gl_FragColor.rgb = convertHSL2RGB(hsl);
inOutColor.set(hslToRgb(hsl));
// gl_FragColor.rgb *= gl_FragColor.a + epsilon;
// Now we're doing the reverse, premultiplying by the alpha once again.
inOutColor[0] *= alpha;
inOutColor[1] *= alpha;
inOutColor[2] *= alpha;
}
if ((effects & ShaderManager.EFFECT_INFO.ghost.mask) !== 0) {
// gl_FragColor *= u_ghost
inOutColor[0] *= uniforms.u_ghost;
inOutColor[1] *= uniforms.u_ghost;
inOutColor[2] *= uniforms.u_ghost;
inOutColor[3] *= uniforms.u_ghost;
}
return inOutColor;

21
src/PenSkin.js
View file

@ -79,6 +79,9 @@ class PenSkin extends Skin {
constructor (id, renderer) {
super(id);
// This silhouette will be updated with data from `gl.readPixels`, which is premultiplied.
this._silhouette.premultiplied = true;
/**
* @private
* @type {RenderWebGL}
@ -88,9 +91,6 @@ class PenSkin extends Skin {
/** @type {HTMLCanvasElement} */
this._canvas = document.createElement('canvas');
/** @type {WebGLTexture} */
this._texture = null;
/** @type {WebGLTexture} */
this._exportTexture = null;
@ -123,7 +123,7 @@ class PenSkin extends Skin {
const NO_EFFECTS = 0;
/** @type {twgl.ProgramInfo} */
this._stampShader = this._renderer._shaderManager.getShader(ShaderManager.DRAW_MODE.stamp, NO_EFFECTS);
this._stampShader = this._renderer._shaderManager.getShader(ShaderManager.DRAW_MODE.default, NO_EFFECTS);
/** @type {twgl.ProgramInfo} */
this._lineShader = this._renderer._shaderManager.getShader(ShaderManager.DRAW_MODE.lineSample, NO_EFFECTS);
@ -317,13 +317,6 @@ class PenSkin extends Skin {
twgl.bindFramebufferInfo(gl, this._framebuffer);
// Needs a blend function that blends a destination that starts with
// no alpha.
gl.blendFuncSeparate(
gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA,
gl.ONE, gl.ONE_MINUS_SRC_ALPHA
);
gl.viewport(0, 0, bounds.width, bounds.height);
gl.useProgram(currentShader.program);
@ -344,8 +337,6 @@ class PenSkin extends Skin {
_exitDrawLineOnBuffer () {
const gl = this._renderer.gl;
gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ZERO, gl.ONE);
twgl.bindFramebufferInfo(gl, null);
}
@ -490,8 +481,6 @@ class PenSkin extends Skin {
twgl.bindFramebufferInfo(gl, this._framebuffer);
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
this._drawRectangleRegionEnter(this._stampShader, this._bounds);
}
@ -501,8 +490,6 @@ class PenSkin extends Skin {
_exitDrawToBuffer () {
const gl = this._renderer.gl;
gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ZERO, gl.ONE);
twgl.bindFramebufferInfo(gl, null);
}

25
src/RenderWebGL.js
View file

@ -196,7 +196,7 @@ class RenderWebGL extends EventEmitter {
gl.disable(gl.DEPTH_TEST);
/** @todo disable when no partial transparency? */
gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ZERO, gl.ONE);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
}
/**
@ -834,7 +834,8 @@ class RenderWebGL extends EventEmitter {
projection,
{
extraUniforms,
ignoreVisibility: true // Touching color ignores sprite visibility
ignoreVisibility: true, // Touching color ignores sprite visibility,
effectMask: ~ShaderManager.EFFECT_INFO.ghost.mask
});
gl.stencilFunc(gl.EQUAL, 1, 1);
@ -1554,7 +1555,7 @@ class RenderWebGL extends EventEmitter {
const projection = twgl.m4.ortho(bounds.left, bounds.right, bounds.top, bounds.bottom, -1, 1);
// Draw the stamped sprite onto the PenSkin's framebuffer.
this._drawThese([stampID], ShaderManager.DRAW_MODE.stamp, projection, {ignoreVisibility: true});
this._drawThese([stampID], ShaderManager.DRAW_MODE.default, projection, {ignoreVisibility: true});
skin._silhouetteDirty = true;
}
@ -1744,14 +1745,6 @@ class RenderWebGL extends EventEmitter {
}
twgl.setUniforms(currentShader, uniforms);
/* 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);
}
@ -1903,12 +1896,10 @@ class RenderWebGL extends EventEmitter {
*/
Drawable.sampleColor4b(vec, drawables[index].drawable, __blendColor);
// if we are fully transparent, go to the next one "down"
const sampleAlpha = __blendColor[3] / 255;
// premultiply alpha
dst[0] += __blendColor[0] * blendAlpha * sampleAlpha;
dst[1] += __blendColor[1] * blendAlpha * sampleAlpha;
dst[2] += __blendColor[2] * blendAlpha * sampleAlpha;
blendAlpha *= (1 - sampleAlpha);
dst[0] += __blendColor[0] * blendAlpha;
dst[1] += __blendColor[1] * blendAlpha;
dst[2] += __blendColor[2] * blendAlpha;
blendAlpha *= (1 - (__blendColor[3] / 255));
}
// Backdrop could be transparent, so we need to go to the "clear color" of the
// draw scene (white) as a fallback if everything was alpha

3
src/SVGSkin.js
View file

@ -90,7 +90,8 @@ class SVGSkin extends Skin {
const textureOptions = {
auto: false,
wrap: this._renderer.gl.CLAMP_TO_EDGE,
src: textureData
src: textureData,
premultiplyAlpha: true
};
const mip = twgl.createTexture(this._renderer.gl, textureOptions);

7
src/ShaderManager.js
View file

@ -171,12 +171,7 @@ ShaderManager.DRAW_MODE = {
/**
* Sample a "texture" to draw a line with caps.
*/
lineSample: 'lineSample',
/**
* Draw normally except for pre-multiplied alpha
*/
stamp: 'stamp'
lineSample: 'lineSample'
};
module.exports = ShaderManager;

71
src/Silhouette.js
View file

@ -39,6 +39,7 @@ const __cornerWork = [
/**
* Get the color from a given silhouette at an x/y local texture position.
* Multiply color values by alpha for proper blending.
* @param {Silhouette} The silhouette to sample.
* @param {number} x X position of texture (0-1).
* @param {number} y Y position of texture (0-1).
@ -46,6 +47,30 @@ const __cornerWork = [
* @return {Uint8ClampedArray} The dst vector.
*/
const getColor4b = ({_width: width, _height: height, _colorData: data}, x, y, dst) => {
// 0 if outside bouds, otherwise read from data.
if (x >= width || y >= height || x < 0 || y < 0) {
return dst.fill(0);
}
const offset = ((y * width) + x) * 4;
// premultiply alpha
const alpha = data[offset + 3] / 255;
dst[0] = data[offset] * alpha;
dst[1] = data[offset + 1] * alpha;
dst[2] = data[offset + 2] * alpha;
dst[3] = data[offset + 3];
return dst;
};
/**
* Get the color from a given silhouette at an x/y local texture position.
* Do not multiply color values by alpha, as it has already been done.
* @param {Silhouette} The silhouette to sample.
* @param {number} x X position of texture (0-1).
* @param {number} y Y position of texture (0-1).
* @param {Uint8ClampedArray} dst A color 4b space.
* @return {Uint8ClampedArray} The dst vector.
*/
const getPremultipliedColor4b = ({_width: width, _height: height, _colorData: data}, x, y, dst) => {
// 0 if outside bouds, otherwise read from data.
if (x >= width || y >= height || x < 0 || y < 0) {
return dst.fill(0);
@ -78,9 +103,45 @@ class Silhouette {
*/
this._colorData = null;
/**
* Whether or not the color data is premultiplied with its alpha channel.
* If it isn't, it will be multiplied here.
* @type {boolean}
*/
this._isPremultiplied = false;
// By default, silhouettes are assumed not to contain premultiplied image data,
// so when we get a color, we want to multiply it by its alpha channel.
// Point `_getColor` to the version of the function that multiplies.
this._getColor = getColor4b;
this.colorAtNearest = this.colorAtLinear = (_, dst) => dst.fill(0);
}
/**
* @returns {boolean} true if the silhouette color data is premultiplied, false if not.
*/
get premultiplied () {
return this._isPremultiplied;
}
/**
* Set the alpha premultiplication state of this silhouette, to ensure proper color values are returned.
* If set to true, the silhouette will assume it is being set with premultiplied color data,
* and will not multiply color values by alpha.
* If set to false, it will multiply color values by alpha.
* @param {boolean} isPremultiplied Whether this silhouette will be populated with premultiplied color data.
*/
set premultiplied (isPremultiplied) {
this._isPremultiplied = isPremultiplied;
if (isPremultiplied) {
this._getColor = getPremultipliedColor4b;
} else {
this._getColor = getColor4b;
}
}
/**
* Update this silhouette with the bitmapData for a skin.
* @param {*} bitmapData An image, canvas or other element that the skin
@ -124,7 +185,7 @@ class Silhouette {
* @returns {Uint8ClampedArray} dst
*/
colorAtNearest (vec, dst) {
return getColor4b(
return this._getColor(
this,
Math.floor(vec[0] * (this._width - 1)),
Math.floor(vec[1] * (this._height - 1)),
@ -151,10 +212,10 @@ class Silhouette {
const xFloor = Math.floor(x);
const yFloor = Math.floor(y);
const x0y0 = getColor4b(this, xFloor, yFloor, __cornerWork[0]);
const x1y0 = getColor4b(this, xFloor + 1, yFloor, __cornerWork[1]);
const x0y1 = getColor4b(this, xFloor, yFloor + 1, __cornerWork[2]);
const x1y1 = getColor4b(this, xFloor + 1, yFloor + 1, __cornerWork[3]);
const x0y0 = this._getColor(this, xFloor, yFloor, __cornerWork[0]);
const x1y0 = this._getColor(this, xFloor + 1, yFloor, __cornerWork[1]);
const x0y1 = this._getColor(this, xFloor, yFloor + 1, __cornerWork[2]);
const x1y1 = this._getColor(this, xFloor + 1, yFloor + 1, __cornerWork[3]);
dst[0] = (x0y0[0] * x0D * y0D) + (x0y1[0] * x0D * y1D) + (x1y0[0] * x1D * y0D) + (x1y1[0] * x1D * y1D);
dst[1] = (x0y0[1] * x0D * y0D) + (x0y1[1] * x0D * y1D) + (x1y0[1] * x1D * y0D) + (x1y1[1] * x1D * y1D);

20
src/Skin.js
View file

@ -33,6 +33,9 @@ class Skin extends EventEmitter {
/** @type {Vec3} */
this._rotationCenter = twgl.v3.create(0, 0);
/** @type {WebGLTexture} */
this._texture = null;
/**
* The uniforms to be used by the vertex and pixel shaders.
* Some of these are used by other parts of the renderer as well.
@ -171,6 +174,23 @@ class Skin extends EventEmitter {
*/
updateSilhouette () {}
/**
* Set this skin's texture to the given image.
* @param {ImageData|HTMLCanvasElement} textureData - The canvas or image data to set the texture to.
*/
_setTexture (textureData) {
const gl = this._renderer.gl;
gl.bindTexture(gl.TEXTURE_2D, this._texture);
// Premultiplied alpha is necessary for proper blending.
// See http://www.realtimerendering.com/blog/gpus-prefer-premultiplication/
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
this._silhouette.update(textureData);
}
/**
* Set the contents of this skin to an empty skin.
* @fires Skin.event:WasAltered

7
src/TextBubbleSkin.js
View file

@ -42,9 +42,6 @@ class TextBubbleSkin extends Skin {
/** @type {HTMLCanvasElement} */
this._canvas = document.createElement('canvas');
/** @type {WebGLTexture} */
this._texture = null;
/** @type {Array<number>} */
this._size = [0, 0];
@ -272,9 +269,7 @@ class TextBubbleSkin extends Skin {
this._texture = twgl.createTexture(gl, textureOptions);
}
gl.bindTexture(gl.TEXTURE_2D, this._texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
this._silhouette.update(textureData);
this._setTexture(textureData);
}
return this._texture;

43
src/shaders/sprite.frag
View file

@ -153,16 +153,12 @@ void main()
gl_FragColor = texture2D(u_skin, texcoord0);
#ifdef ENABLE_ghost
gl_FragColor.a *= u_ghost;
#endif // ENABLE_ghost
#if defined(ENABLE_color) || defined(ENABLE_brightness)
// Divide premultiplied alpha values for proper color processing
// Add epsilon to avoid dividing by 0 for fully transparent pixels
gl_FragColor.rgb /= gl_FragColor.a + epsilon;
#ifdef DRAW_MODE_silhouette
// switch to u_silhouetteColor only AFTER the alpha test
gl_FragColor = u_silhouetteColor;
#else // DRAW_MODE_silhouette
#if defined(ENABLE_color)
#ifdef ENABLE_color
{
vec3 hsv = convertRGB2HSV(gl_FragColor.xyz);
@ -178,11 +174,29 @@ void main()
gl_FragColor.rgb = convertHSV2RGB(hsv);
}
#endif // defined(ENABLE_color)
#endif // ENABLE_color
#if defined(ENABLE_brightness)
#ifdef ENABLE_brightness
gl_FragColor.rgb = clamp(gl_FragColor.rgb + vec3(u_brightness), vec3(0), vec3(1));
#endif // defined(ENABLE_brightness)
#endif // ENABLE_brightness
// Re-multiply color values
gl_FragColor.rgb *= gl_FragColor.a + epsilon;
#endif // defined(ENABLE_color) || defined(ENABLE_brightness)
#ifdef ENABLE_ghost
gl_FragColor *= u_ghost;
#endif // ENABLE_ghost
#ifdef DRAW_MODE_silhouette
// Discard fully transparent pixels for stencil test
if (gl_FragColor.a == 0.0) {
discard;
}
// switch to u_silhouetteColor only AFTER the alpha test
gl_FragColor = u_silhouetteColor;
#else // DRAW_MODE_silhouette
#ifdef DRAW_MODE_colorMask
vec3 maskDistance = abs(gl_FragColor.rgb - u_colorMask);
@ -195,8 +209,9 @@ void main()
#endif // DRAW_MODE_silhouette
#else // DRAW_MODE_lineSample
gl_FragColor = u_lineColor;
gl_FragColor.a *= clamp(
// Pen skins use premultiplied alpha, but u_lineColor is not premultiplied, so multiply it here
vec4 premulColor = vec4(u_lineColor.rgb * u_lineColor.a, u_lineColor.a);
gl_FragColor = premulColor * clamp(
// Scale the capScale a little to have an aliased region.
(u_capScale + u_aliasAmount -
u_capScale * 2.0 * distance(v_texCoord, vec2(0.5, 0.5))