'use strict'; // 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; uniform vec2 resolution; varying vec2 textureUV; void main() { vec2 p = position / resolution * 2.0 - 1.0; gl_Position = vec4(p.x, -p.y, 0.0, 1.0); textureUV = uv; }`); const fragment = shader(gl.FRAGMENT_SHADER, ` precision mediump float; uniform sampler2D image; uniform float opacity; varying vec2 textureUV; void main() { vec4 color = texture2D(image, textureUV); float alpha = color.a * opacity; gl_FragColor = vec4(color.rgb * opacity, 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'), opacity = gl.getUniformLocation(program, 'opacity'); const textures = new Map(); let coordinates = [], currentImage = null, currentAlpha = 1, currentMode = 'source-over', transform; let disposed = false, lost = false; canvas.addEventListener('webglcontextlost', event => { event.preventDefault(); lost = true; }); function texture(image) { if (textures.has(image) && image !== context.canvas) return textures.get(image); const t = textures.get(image) || gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t); // Premultiply before interpolation so translucent edges do not darken. gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); 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); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); textures.set(image, t); return t; } function flush() { if (!coordinates.length) return; gl.bindTexture(gl.TEXTURE_2D, texture(currentImage)); gl.uniform1f(opacity, currentAlpha); // 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 / 4); coordinates.length = 0; } return { begin() { if (disposed || lost || gl.isContextLost()) return false; 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, 16, 0); gl.enableVertexAttribArray(uv); gl.vertexAttribPointer(uv, 2, gl.FLOAT, false, 16, 8); 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; coordinates.push(0,0,0,0, w,0,1,0, w,h,1,1, 0,0,0,0, w,h,1,1, 0,h,0,1); flush(); currentImage = null; return true; }, triangle(image, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2) { 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; coordinates.push( t.a * x0 + t.c * y0 + t.e, t.b * x0 + t.d * y0 + t.f, u0, v0, t.a * x1 + t.c * y1 + t.e, t.b * x1 + t.d * y1 + t.f, u1, v1, t.a * x2 + t.c * y2 + t.e, t.b * x2 + t.d * y2 + t.f, u2, v2); }, 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 value of textures.values()) 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()) return draw(skeleton); renderer.drawTriangle = rasterizer.triangle; try { draw(skeleton); rasterizer.end(); } finally { renderer.drawTriangle = triangle; } }; renderer.dispose = rasterizer.dispose; renderer.rasterization = 'webgl'; return renderer; } module.exports = { createRasterizer, attach };