|
| 1 | +// examples/internal/pixi-texture-rb-test/main.ts |
| 2 | +var PNG_BASE64 = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGUlEQVR4nGM4UaHxnxLMMGrAqAGjBgwXAwBav2cfkp7y4AAAAABJRU5ErkJggg=="; |
| 3 | +var SOURCE_COLOR = [200, 120, 40, 255]; |
| 4 | +function base64ToArrayBuffer(b64) { |
| 5 | + const table = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; |
| 6 | + const lookup = new Uint8Array(256); |
| 7 | + for (let i = 0;i < table.length; i++) |
| 8 | + lookup[table.charCodeAt(i)] = i; |
| 9 | + const clean = b64.replace(/=+$/, ""); |
| 10 | + const outLen = clean.length * 3 >> 2; |
| 11 | + const bytes = new Uint8Array(outLen); |
| 12 | + let o = 0; |
| 13 | + for (let i = 0;i < clean.length; i += 4) { |
| 14 | + const a = lookup[clean.charCodeAt(i)]; |
| 15 | + const b = lookup[clean.charCodeAt(i + 1)]; |
| 16 | + const c = lookup[clean.charCodeAt(i + 2)]; |
| 17 | + const d = lookup[clean.charCodeAt(i + 3)]; |
| 18 | + bytes[o++] = a << 2 | b >> 4; |
| 19 | + if (i + 2 < clean.length) |
| 20 | + bytes[o++] = (b & 15) << 4 | c >> 2; |
| 21 | + if (i + 3 < clean.length) |
| 22 | + bytes[o++] = (c & 3) << 6 | d; |
| 23 | + } |
| 24 | + return bytes.buffer; |
| 25 | +} |
| 26 | +function approxEquals(a, b, tol = 2) { |
| 27 | + return Math.abs(a - b) <= tol; |
| 28 | +} |
| 29 | +var SAMPLE_SHADER = ` |
| 30 | +struct VSOut { |
| 31 | + @builtin(position) pos: vec4f, |
| 32 | + @location(0) uv: vec2f, |
| 33 | +}; |
| 34 | +
|
| 35 | +@vertex |
| 36 | +fn vs(@builtin(vertex_index) vid: u32) -> VSOut { |
| 37 | + // Fullscreen triangle. |
| 38 | + var p = array<vec2f, 3>(vec2f(-1.0, -1.0), vec2f(3.0, -1.0), vec2f(-1.0, 3.0)); |
| 39 | + var out: VSOut; |
| 40 | + out.pos = vec4f(p[vid], 0.0, 1.0); |
| 41 | + out.uv = p[vid] * vec2f(0.5, 0.5) + vec2f(0.5, 0.5); |
| 42 | + return out; |
| 43 | +} |
| 44 | +
|
| 45 | +@group(0) @binding(0) var src: texture_2d<f32>; |
| 46 | +@group(0) @binding(1) var samp: sampler; |
| 47 | +
|
| 48 | +@fragment |
| 49 | +fn fs(in: VSOut) -> @location(0) vec4f { |
| 50 | + return textureSampleLevel(src, samp, in.uv, 0.0); |
| 51 | +} |
| 52 | +`; |
| 53 | +async function sampleUploadedColor(device, bitmap, format) { |
| 54 | + const w = bitmap.width; |
| 55 | + const h = bitmap.height; |
| 56 | + const srcTexture = device.createTexture({ |
| 57 | + size: [w, h, 1], |
| 58 | + format, |
| 59 | + usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT |
| 60 | + }); |
| 61 | + device.queue.copyExternalImageToTexture({ source: bitmap, flipY: false }, { texture: srcTexture, premultipliedAlpha: true }, [w, h, 1]); |
| 62 | + const TARGET = 4; |
| 63 | + const target = device.createTexture({ |
| 64 | + size: [TARGET, TARGET, 1], |
| 65 | + format: "rgba8unorm", |
| 66 | + usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC |
| 67 | + }); |
| 68 | + const module = device.createShaderModule({ code: SAMPLE_SHADER }); |
| 69 | + const pipeline = device.createRenderPipeline({ |
| 70 | + layout: "auto", |
| 71 | + vertex: { module, entryPoint: "vs" }, |
| 72 | + fragment: { module, entryPoint: "fs", targets: [{ format: "rgba8unorm" }] }, |
| 73 | + primitive: { topology: "triangle-list" } |
| 74 | + }); |
| 75 | + const sampler = device.createSampler({ magFilter: "nearest", minFilter: "nearest" }); |
| 76 | + const bindGroup = device.createBindGroup({ |
| 77 | + layout: pipeline.getBindGroupLayout(0), |
| 78 | + entries: [ |
| 79 | + { binding: 0, resource: srcTexture.createView() }, |
| 80 | + { binding: 1, resource: sampler } |
| 81 | + ] |
| 82 | + }); |
| 83 | + const encoder = device.createCommandEncoder(); |
| 84 | + const pass = encoder.beginRenderPass({ |
| 85 | + colorAttachments: [ |
| 86 | + { view: target.createView(), clearValue: { r: 0, g: 0, b: 0, a: 1 }, loadOp: "clear", storeOp: "store" } |
| 87 | + ] |
| 88 | + }); |
| 89 | + pass.setPipeline(pipeline); |
| 90 | + pass.setBindGroup(0, bindGroup); |
| 91 | + pass.draw(3); |
| 92 | + pass.end(); |
| 93 | + const bytesPerRow = Math.ceil(TARGET * 4 / 256) * 256; |
| 94 | + const readBuffer = device.createBuffer({ |
| 95 | + size: bytesPerRow * TARGET, |
| 96 | + usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ |
| 97 | + }); |
| 98 | + encoder.copyTextureToBuffer({ texture: target }, { buffer: readBuffer, bytesPerRow, rowsPerImage: TARGET }, [TARGET, TARGET, 1]); |
| 99 | + device.queue.submit([encoder.finish()]); |
| 100 | + await readBuffer.mapAsync(GPUMapMode.READ); |
| 101 | + const data = new Uint8Array(readBuffer.getMappedRange()); |
| 102 | + const pixel = [data[0], data[1], data[2], data[3]]; |
| 103 | + readBuffer.unmap(); |
| 104 | + return pixel; |
| 105 | +} |
| 106 | +async function main() { |
| 107 | + console.log("[pixi-texture-rb-test] starting"); |
| 108 | + if (!navigator.gpu) { |
| 109 | + console.error("[pixi-texture-rb-test] FAIL: WebGPU unavailable"); |
| 110 | + return; |
| 111 | + } |
| 112 | + const adapter = await navigator.gpu.requestAdapter(); |
| 113 | + if (!adapter) { |
| 114 | + console.error("[pixi-texture-rb-test] FAIL: no adapter"); |
| 115 | + return; |
| 116 | + } |
| 117 | + const device = await adapter.requestDevice(); |
| 118 | + const bitmap = await createImageBitmap(base64ToArrayBuffer(PNG_BASE64)); |
| 119 | + console.log("[pixi-texture-rb-test] decoded:", bitmap.width, "x", bitmap.height); |
| 120 | + const bgraPixel = await sampleUploadedColor(device, bitmap, "bgra8unorm"); |
| 121 | + const rgbaPixel = await sampleUploadedColor(device, bitmap, "rgba8unorm"); |
| 122 | + console.log(`[pixi-texture-rb-test] bgra8unorm sampled (${bgraPixel.join(",")}), expected (${SOURCE_COLOR.join(",")})`); |
| 123 | + console.log(`[pixi-texture-rb-test] rgba8unorm sampled (${rgbaPixel.join(",")}), expected (${SOURCE_COLOR.join(",")})`); |
| 124 | + const bgraOk = SOURCE_COLOR.every((v, i) => approxEquals(v, bgraPixel[i])); |
| 125 | + const rgbaOk = SOURCE_COLOR.every((v, i) => approxEquals(v, rgbaPixel[i])); |
| 126 | + if (bgraOk && rgbaOk) { |
| 127 | + console.log("[pixi-texture-rb-test] PASS"); |
| 128 | + } else { |
| 129 | + console.error(`[pixi-texture-rb-test] FAIL — bgra8unorm ${bgraOk ? "ok" : "WRONG (R/B swapped?)"}, rgba8unorm ${rgbaOk ? "ok" : "WRONG"}`); |
| 130 | + } |
| 131 | + const canvasEl = document.createElement("canvas"); |
| 132 | + canvasEl.width = 64; |
| 133 | + canvasEl.height = 64; |
| 134 | + document.body.appendChild(canvasEl); |
| 135 | + const ctx = canvasEl.getContext("webgpu"); |
| 136 | + if (ctx) { |
| 137 | + ctx.configure({ device, format: navigator.gpu.getPreferredCanvasFormat(), alphaMode: "opaque" }); |
| 138 | + const view = ctx.getCurrentTexture().createView(); |
| 139 | + const enc = device.createCommandEncoder(); |
| 140 | + const pass = enc.beginRenderPass({ |
| 141 | + colorAttachments: [ |
| 142 | + { |
| 143 | + view, |
| 144 | + clearValue: bgraOk && rgbaOk ? { r: 0, g: 1, b: 0, a: 1 } : { r: 1, g: 0, b: 0, a: 1 }, |
| 145 | + loadOp: "clear", |
| 146 | + storeOp: "store" |
| 147 | + } |
| 148 | + ] |
| 149 | + }); |
| 150 | + pass.end(); |
| 151 | + device.queue.submit([enc.finish()]); |
| 152 | + } |
| 153 | +} |
| 154 | +main().catch((err) => { |
| 155 | + console.error("[pixi-texture-rb-test] error:", err); |
| 156 | +}); |
0 commit comments