48 lines
4.4 KiB
TypeScript
48 lines
4.4 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
|
|
test("decodes, uploads and renders a validated 8K texture in Chromium", async ({ page }) => {
|
|
test.setTimeout(60_000);
|
|
await page.goto("/");
|
|
const result = await page.evaluate(async () => {
|
|
const { createGPUTextureAsset } = await import("/src/render/RenderAssets.ts");
|
|
const { GPUTextureStore } = await import("/src/three-adapter/texture-assets.ts");
|
|
const { Mesh, MeshBasicMaterial, OrthographicCamera, PlaneGeometry, Scene, WebGLRenderer } = await import("/src/vendor/three/three.module.js");
|
|
const target = document.createElement("canvas"); target.width = 64; target.height = 64; document.body.append(target);
|
|
const renderer = new WebGLRenderer({ canvas: target, preserveDrawingBuffer: true }); renderer.setSize(64, 64, false);
|
|
const gl = renderer.getContext(); const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE) as number;
|
|
if (maxTextureSize < 8192) { renderer.dispose(); target.remove(); return { supported: false, maxTextureSize, byteLength: 0, colored: 0, elapsedMs: 0, status: { loaded: 0, rejected: 0, bytes: 0 } }; }
|
|
const source = document.createElement("canvas"); source.width = 8192; source.height = 8192;
|
|
const context = source.getContext("2d", { alpha: false });
|
|
if (!context) throw new Error("2D texture fixture context is unavailable");
|
|
context.fillStyle = "#2266dd"; context.fillRect(0, 0, 4096, 8192);
|
|
context.fillStyle = "#ddcc22"; context.fillRect(4096, 0, 4096, 8192);
|
|
const blob = await new Promise<Blob>((resolve, reject) => source.toBlob((value) => value ? resolve(value) : reject(new Error("8K PNG encoding failed")), "image/png"));
|
|
const data = await blob.arrayBuffer();
|
|
const asset = await createGPUTextureAsset({ assetId: "asset:8k", imageId: "image:8k", mimeType: "image/png", width: 8192, height: 8192, usage: "BASE_COLOR", colorSpace: "SRGB" }, data);
|
|
const started = performance.now(); const store = new GPUTextureStore(); const status = await store.upload([asset]);
|
|
const scene = new Scene(); const camera = new OrthographicCamera(-1, 1, 1, -1, 0.1, 10); camera.position.z = 1;
|
|
const material = new MeshBasicMaterial({ map: store.get("image:8k", "BASE_COLOR") }); const geometry = new PlaneGeometry(2, 2); scene.add(new Mesh(geometry, material)); renderer.render(scene, camera);
|
|
const pixels = new Uint8Array(64 * 64 * 4); gl.readPixels(0, 0, 64, 64, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
|
|
let colored = 0; for (let index = 0; index < pixels.length; index += 4) if (pixels[index] > 60 || pixels[index + 1] > 60 || pixels[index + 2] > 60) colored += 1;
|
|
const elapsedMs = Math.round(performance.now() - started);
|
|
material.dispose(); geometry.dispose(); renderer.dispose(); store.dispose(); target.remove();
|
|
const released = store.get("image:8k", "BASE_COLOR") === undefined;
|
|
const recoveryCanvas = document.createElement("canvas"); recoveryCanvas.width = 16; recoveryCanvas.height = 16; document.body.append(recoveryCanvas);
|
|
const recoveryRenderer = new WebGLRenderer({ canvas: recoveryCanvas, preserveDrawingBuffer: true }); recoveryRenderer.setSize(16, 16, false);
|
|
const recoveryScene = new Scene(); const recoveryMaterial = new MeshBasicMaterial({ color: 0x3366cc }); const recoveryGeometry = new PlaneGeometry(2, 2);
|
|
recoveryScene.add(new Mesh(recoveryGeometry, recoveryMaterial)); recoveryRenderer.render(recoveryScene, camera);
|
|
const recoveryPixels = new Uint8Array(16 * 16 * 4); recoveryRenderer.getContext().readPixels(0, 0, 16, 16, recoveryRenderer.getContext().RGBA, recoveryRenderer.getContext().UNSIGNED_BYTE, recoveryPixels);
|
|
const recoveryVisible = recoveryPixels.some((value, index) => index % 4 !== 3 && value > 40);
|
|
recoveryMaterial.dispose(); recoveryGeometry.dispose(); recoveryRenderer.dispose(); recoveryCanvas.remove();
|
|
return { supported: true, maxTextureSize, width: 8192, height: 8192, status, byteLength: data.byteLength, estimatedPeakGpuBytes: 8192 * 8192 * 4, released, recoveryVisible, colored, elapsedMs };
|
|
});
|
|
console.log("texture-8k-performance", JSON.stringify(result));
|
|
expect(result.supported, `WebGL MAX_TEXTURE_SIZE=${result.maxTextureSize}`).toBe(true);
|
|
expect(result.status).toMatchObject({ loaded: 1, rejected: 0, bytes: result.byteLength });
|
|
expect(result.byteLength).toBeGreaterThan(0);
|
|
expect(result.colored).toBeGreaterThan(3_000);
|
|
expect(result.elapsedMs).toBeLessThan(45_000);
|
|
expect(result.released).toBe(true);
|
|
expect(result.recoveryVisible).toBe(true);
|
|
});
|