Files
SpineViewer/tests/webgl-rasterizer.html
T
2026-09-10 13:53:43 +08:00

37 lines
1.7 KiB
HTML

<!doctype html>
<meta charset="utf-8">
<title>Spine mesh seam regression</title>
<pre id="result">Running</pre>
<script>var module = { exports: {} };</script>
<script src="../js/spine-webgl-rasterizer.js"></script>
<script>
// Open locally in Chromium. A translucent quad must have neither cracks nor
// double-blended pixels along its shared diagonal, including after scaling.
try {
for (const scale of [1, 1.25]) {
const target = document.createElement('canvas');
target.width = target.height = 96;
const ctx = target.getContext('2d');
ctx.translate(2, 3); ctx.scale(scale, scale);
const image = document.createElement('canvas');
image.width = image.height = 8;
const paint = image.getContext('2d');
paint.fillStyle = '#80c040'; paint.fillRect(0, 0, 8, 8);
const rasterizer = module.exports.createRasterizer(ctx);
if (!rasterizer || !rasterizer.begin()) throw new Error('WebGL unavailable');
ctx.globalAlpha = 0.5;
rasterizer.triangle(image, 8,8,0,0, 56,8,1,0, 56,56,1,1);
rasterizer.triangle(image, 8,8,0,0, 56,56,1,1, 8,56,0,1);
rasterizer.end();
const pixels = ctx.getImageData(0,0,96,96).data;
for (let y = 15; y < 50; y++) for (let x = 15; x < 50; x++) {
const offset = (y * 96 + x) * 4;
if (Math.abs(pixels[offset+3]-128)>1 || Math.abs(pixels[offset]-128)>2)
throw new Error(`Seam/overlap at ${x},${y}, scale ${scale}: ${pixels.slice(offset,offset+4)}`);
}
rasterizer.dispose();
}
document.getElementById('result').textContent = 'PASS: shared edges, opacity, transformed geometry';
} catch (error) { document.getElementById('result').textContent = 'FAIL: ' + error.stack; }
</script>