eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-20 23:09:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Rewrite loadTexture, for now, to use GPUQueue::writeTexture (from data supplied by a CanvasContext2D) instead of GPUQueue::copyExternalToTexture (from createImageBitmap).

Browse Source
This commit is contained in:
Rezmason
2021-12-04 15:40:33 -08:00
parent 743ba87e86
commit d19f78319b
1 changed files with 31 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
js/webgpu/utils.js
View File

@@ -3,26 +3,46 @@ const getCanvasSize = (canvas) => {
return [canvas.clientWidth * devicePixelRatio, canvas.clientHeight * devicePixelRatio]; return [canvas.clientWidth * devicePixelRatio, canvas.clientHeight * devicePixelRatio];
}; };
/*
const loadTexture = async (device, url) => { const loadTexture = async (device, url) => {
const response = await fetch(url); const response = await fetch(url);
const data = await response.blob(); const data = await response.blob();
const imageBitmap = await createImageBitmap(data); const source = await createImageBitmap(data);
const size = [source.width, source.height, 1];
const texture = device.createTexture({ const texture = device.createTexture({
size: [imageBitmap.width, imageBitmap.height, 1], size,
format: "rgba8unorm", format: "rgba8unorm",
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT, usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
}); });
device.queue.copyExternalImageToTexture( device.queue.copyExternalImageToTexture({ source }, { texture }, size);
{
source: imageBitmap, return texture;
}, };
{ */
texture: texture,
}, const loadTexture = async (device, url) => {
[imageBitmap.width, imageBitmap.height] const image = new Image();
); image.src = url;
await image.decode();
const { width, height } = image;
const size = [width, height, 1];
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
const source = ctx.getImageData(0, 0, width, height).data;
const texture = device.createTexture({
size,
format: "rgba8unorm",
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
});
device.queue.writeTexture({ texture }, source, { bytesPerRow: 4 * width }, size);
return texture; return texture;
}; };