新增3.4版本支持

2026-09-10 13:53:43 +08:00
1 parent 4c5033d2f9
commit 9635428f78
@@ -0,0 +1,129 @@
+'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, transform;
+	let disposed = false, lost = false;
+	canvas.addEventListener('webglcontextlost', event => { event.preventDefault(); lost = true; });
+	function texture(image) {
+		if (textures.has(image)) return textures.get(image);
+		const t = 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);
+		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);
+			return true;
+		},
+		triangle(image, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2) {
+			const alpha = context.globalAlpha;
+			if (image !== currentImage || alpha !== currentAlpha) { flush(); currentImage = image; currentAlpha = alpha; }
+			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.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 };