178 lines
8.4 KiB
JavaScript
178 lines
8.4 KiB
JavaScript
'use strict';
|
|
|
|
// Decode file bytes without the Canvas 2D premultiply/unpremultiply round trip.
|
|
// In low-alpha PMA pixels that round trip destroys RGB precision before blending.
|
|
const preparedTextures = new WeakMap();
|
|
async function prepareTexture(image, blob) {
|
|
if (typeof createImageBitmap !== 'function') return;
|
|
const options = { colorSpaceConversion: 'none' };
|
|
const [pma, straight] = await Promise.all([
|
|
createImageBitmap(blob, { ...options, premultiplyAlpha: 'none' }),
|
|
createImageBitmap(blob, { ...options, premultiplyAlpha: 'premultiply' })
|
|
]);
|
|
preparedTextures.set(image, { pma, straight });
|
|
}
|
|
|
|
// Rasterize adjacent mesh triangles together, with GPU edge ownership rules.
|
|
// Canvas clip()+drawImage() anti-aliases each triangle separately and exposes
|
|
// the background along shared edges, which looks like a wireframe overlay.
|
|
function createRasterizer(context) {
|
|
const document = context.canvas && context.canvas.ownerDocument;
|
|
if (!document || typeof context.getTransform !== 'function') return null;
|
|
const canvas = document.createElement('canvas');
|
|
const gl = canvas.getContext('webgl', {
|
|
alpha: true, premultipliedAlpha: true, antialias: true,
|
|
preserveDrawingBuffer: true, depth: false, stencil: false
|
|
});
|
|
if (!gl) return null;
|
|
function shader(type, source) {
|
|
const shader = gl.createShader(type);
|
|
gl.shaderSource(shader, source); gl.compileShader(shader);
|
|
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader));
|
|
return shader;
|
|
}
|
|
const vertex = shader(gl.VERTEX_SHADER, `
|
|
attribute vec2 position;
|
|
attribute vec2 uv;
|
|
attribute vec4 light;
|
|
attribute vec4 dark;
|
|
uniform vec2 resolution;
|
|
varying vec2 textureUV;
|
|
varying vec4 lightColor;
|
|
varying vec4 darkColor;
|
|
void main() {
|
|
vec2 p = position / resolution * 2.0 - 1.0;
|
|
gl_Position = vec4(p.x, -p.y, 0.0, 1.0);
|
|
textureUV = uv;
|
|
lightColor = light; darkColor = dark;
|
|
}`);
|
|
const fragment = shader(gl.FRAGMENT_SHADER, `
|
|
precision mediump float;
|
|
uniform sampler2D image;
|
|
varying vec2 textureUV;
|
|
varying vec4 lightColor;
|
|
varying vec4 darkColor;
|
|
void main() {
|
|
vec4 color = texture2D(image, textureUV);
|
|
float alpha = color.a * lightColor.a;
|
|
// Textures are PMA in GPU memory. Light/dark colors arrive straight.
|
|
vec3 rgb = (color.rgb * lightColor.rgb + (color.a - color.rgb) * darkColor.rgb) * lightColor.a;
|
|
gl_FragColor = vec4(rgb, alpha);
|
|
}`);
|
|
const program = gl.createProgram(); gl.attachShader(program, vertex); gl.attachShader(program, fragment); gl.linkProgram(program);
|
|
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program));
|
|
gl.deleteShader(vertex); gl.deleteShader(fragment);
|
|
const buffer = gl.createBuffer();
|
|
const position = gl.getAttribLocation(program, 'position'), uv = gl.getAttribLocation(program, 'uv');
|
|
const resolution = gl.getUniformLocation(program, 'resolution');
|
|
const light = gl.getAttribLocation(program, 'light'), dark = gl.getAttribLocation(program, 'dark');
|
|
const textures = new Map();
|
|
let coordinates = [], currentImage = null, currentAlpha = 1, currentMode = 'source-over', transform;
|
|
let disposed = false, lost = false;
|
|
let premultipliedAlpha = false;
|
|
canvas.addEventListener('webglcontextlost', event => { event.preventDefault(); lost = true; });
|
|
function texture(image) {
|
|
const pma = image !== context.canvas && premultipliedAlpha;
|
|
let pair = textures.get(image);
|
|
if (!pair) { pair = {}; textures.set(image, pair); }
|
|
const key = pma ? 'pma' : 'straight';
|
|
if (pair[key] && image !== context.canvas) return pair[key];
|
|
const t = pair[key] || gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t);
|
|
// Premultiply before interpolation so translucent edges do not darken.
|
|
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, !pma);
|
|
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
const prepared = preparedTextures.get(image);
|
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, prepared ? prepared[key] : image);
|
|
pair[key] = t; return t;
|
|
}
|
|
function flush() {
|
|
if (!coordinates.length) return;
|
|
gl.bindTexture(gl.TEXTURE_2D, texture(currentImage));
|
|
// Premultiplied RGB factors; keep source-over alpha independently.
|
|
const factors = currentMode === 'lighter' ? [gl.ONE, gl.ONE]
|
|
: currentMode === 'multiply' ? [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]
|
|
: currentMode === 'screen' ? [gl.ONE, gl.ONE_MINUS_SRC_COLOR]
|
|
: [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
|
|
gl.blendFuncSeparate(factors[0], factors[1], gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coordinates), gl.STREAM_DRAW);
|
|
gl.drawArrays(gl.TRIANGLES, 0, coordinates.length / 12);
|
|
coordinates.length = 0;
|
|
}
|
|
return {
|
|
begin(pma = false) {
|
|
if (disposed || lost || gl.isContextLost()) return false;
|
|
premultipliedAlpha = pma;
|
|
const target = context.canvas;
|
|
if (canvas.width !== target.width) canvas.width = target.width;
|
|
if (canvas.height !== target.height) canvas.height = target.height;
|
|
transform = context.getTransform(); coordinates.length = 0; currentImage = null;
|
|
gl.viewport(0, 0, canvas.width, canvas.height);
|
|
gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT);
|
|
gl.useProgram(program); gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
|
|
gl.enableVertexAttribArray(position); gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 48, 0);
|
|
gl.enableVertexAttribArray(uv); gl.vertexAttribPointer(uv, 2, gl.FLOAT, false, 48, 8);
|
|
gl.enableVertexAttribArray(light); gl.vertexAttribPointer(light, 4, gl.FLOAT, false, 48, 16);
|
|
gl.enableVertexAttribArray(dark); gl.vertexAttribPointer(dark, 4, gl.FLOAT, false, 48, 32);
|
|
gl.uniform2f(resolution, canvas.width, canvas.height);
|
|
gl.activeTexture(gl.TEXTURE0); gl.uniform1i(gl.getUniformLocation(program, 'image'), 0);
|
|
gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
|
|
// Seed the same framebuffer with the actual Canvas pixels (solid or
|
|
// checkerboard background). CSS backgrounds cannot participate in blending.
|
|
currentImage = target; currentAlpha = 1; currentMode = 'source-over';
|
|
const w = canvas.width, h = canvas.height;
|
|
for (const vertex of [[0,0,0,0],[w,0,1,0],[w,h,1,1],[0,0,0,0],[w,h,1,1],[0,h,0,1]])
|
|
coordinates.push(...vertex, 1,1,1,1, 0,0,0,0);
|
|
flush(); currentImage = null;
|
|
return true;
|
|
},
|
|
triangle(image, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2, colors, darkColors) {
|
|
const alpha = context.globalAlpha;
|
|
const mode = context.globalCompositeOperation || 'source-over';
|
|
if (image !== currentImage || alpha !== currentAlpha || mode !== currentMode) { flush(); currentImage = image; currentAlpha = alpha; currentMode = mode; }
|
|
const t = transform;
|
|
const points = [[x0,y0,u0,v0],[x1,y1,u1,v1],[x2,y2,u2,v2]];
|
|
for (let i=0; i<3; i++) {
|
|
const [x,y,u,v] = points[i], j=i*4;
|
|
coordinates.push(t.a*x+t.c*y+t.e, t.b*x+t.d*y+t.f, u,v,
|
|
...(colors ? colors.slice(j,j+4) : [1,1,1,alpha]),
|
|
...(darkColors ? darkColors.slice(j,j+4) : [0,0,0,0]));
|
|
}
|
|
},
|
|
end() {
|
|
flush();
|
|
context.save();
|
|
try { context.setTransform(1, 0, 0, 1, 0, 0); context.globalAlpha = 1; context.globalCompositeOperation = 'copy'; context.drawImage(canvas, 0, 0); }
|
|
finally { context.restore(); }
|
|
},
|
|
dispose() {
|
|
if (disposed) return; disposed = true;
|
|
for (const pair of textures.values()) for (const value of Object.values(pair)) gl.deleteTexture(value);
|
|
textures.clear(); gl.deleteBuffer(buffer); gl.deleteProgram(program);
|
|
const extension = gl.getExtension('WEBGL_lose_context'); if (extension) extension.loseContext();
|
|
}
|
|
};
|
|
}
|
|
|
|
function attach(renderer, context) {
|
|
let rasterizer;
|
|
try { rasterizer = createRasterizer(context); } catch (e) { return renderer; }
|
|
if (!rasterizer) return renderer;
|
|
const draw = renderer.draw.bind(renderer), triangle = renderer.drawTriangle.bind(renderer);
|
|
renderer.draw = skeleton => {
|
|
if (!rasterizer.begin(!!renderer.premultipliedAlpha)) return draw(skeleton);
|
|
renderer.gpuDrawing = true;
|
|
renderer.drawTriangle = rasterizer.triangle;
|
|
try { draw(skeleton); rasterizer.end(); }
|
|
finally { renderer.drawTriangle = triangle; renderer.gpuDrawing = false; }
|
|
};
|
|
renderer.dispose = rasterizer.dispose;
|
|
renderer.rasterization = 'webgl';
|
|
return renderer;
|
|
}
|
|
|
|
module.exports = { createRasterizer, attach, prepareTexture };
|