eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-16 21:39:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fixing several embarrassing bugs.

Browse Source 
WebGPU and REGL projects now flipY again, and they properly flip the symbolY glyph coordinate in the rain pass's fragment shader.
Switching on some older code that was disabled for FF Nightly support— it makes more sense to wait for that support as implementations finalize.
Added mipmap to images loaded into REGL project.
This commit is contained in:
Rezmason
2022-10-11 09:25:24 -07:00
parent 3843dd90d1
commit e8be232e9b
10 changed files with 46 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/regl/mirrorPass.js
View File

@@ -1,4 +1,4 @@
import { loadImage, loadText, makePassFBO, makePass } from "./utils.js";
import { loadText, makePassFBO, makePass } from "./utils.js";
let start;
const numClicks = 5;

2
js/regl/quiltPass.js
View File

@@ -1,4 +1,4 @@
import { loadImage, loadText, makePassFBO, makePass } from "./utils.js";
import { loadText, makePassFBO, makePass } from "./utils.js";
// Multiplies the rendered rain and bloom by a loaded in image

4
js/regl/rainPass.js
View File

@@ -134,8 +134,8 @@ export default ({ regl, config, lkg }) => {
// We render the code into an FBO using MSDFs: https://github.com/Chlumsky/msdfgen
const glyphMSDF = loadImage(regl, config.glyphMSDFURL);
const glintMSDF = loadImage(regl, config.glintMSDFURL);
const baseTexture = loadImage(regl, config.baseTextureURL);
const glintTexture = loadImage(regl, config.glintTextureURL);
const baseTexture = loadImage(regl, config.baseTextureURL, true);
const glintTexture = loadImage(regl, config.glintTextureURL, true);
const rainPassVert = loadText("shaders/glsl/rainPass.vert.glsl");
const rainPassFrag = loadText("shaders/glsl/rainPass.frag.glsl");
const output = makePassFBO(regl, config.useHalfFloat);

18
js/regl/utils.js
View File

@@ -1,11 +1,10 @@
const makePassTexture = (regl, halfFloat, mipmap) =>
const makePassTexture = (regl, halfFloat) =>
regl.texture({
width: 1,
height: 1,
type: halfFloat ? "half float" : "uint8",
wrap: "clamp",
minFilter: "mipmap",
min: mipmap ? "mipmap" : "linear",
min: "linear",
mag: "linear",
});
@@ -26,7 +25,9 @@ const makeDoubleBuffer = (regl, props) => {
};
};
const loadImage = (regl, url) => {
const isPowerOfTwo = (x) => Math.log2(x) % 1 == 0;
const loadImage = (regl, url, mipmap) => {
let texture = regl.texture([[0]]);
let loaded = false;
return {
@@ -55,10 +56,17 @@ const loadImage = (regl, url) => {
data.src = url;
await data.decode();
loaded = true;
if (mipmap) {
if (!isPowerOfTwo(data.width) || !isPowerOfTwo(data.height)) {
console.warn(`Can't mipmap a non-power-of-two image: ${url}`);
}
mipmap = false;
}
texture = regl.texture({
data,
mag: "linear",
min: "linear",
min: mipmap ? "mipmap" : "linear",
flipY: true,
});
}
})(),

48
js/webgpu/utils.js
View File

@@ -1,7 +1,12 @@
/*
// TODO: switch back to this impl once it doesn't break on FF Nightly
const loadTexture = async (device, url) => {
if (url == null) {
return device.createTexture({
size: [1, 1, 1],
format: "rgba8unorm",
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
});
}
const response = await fetch(url);
const data = await response.blob();
const source = await createImageBitmap(data);
@@ -13,42 +18,7 @@ const loadTexture = async (device, url) => {
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
});
device.queue.copyExternalImageToTexture({ source }, { texture }, size);
return texture;
};
*/
const loadTexture = async (device, url) => {
if (url == null) {
return device.createTexture({
size: [1, 1, 1],
format: "rgba8unorm",
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
});
}
const image = new Image();
image.crossOrigin = "Anonymous";
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);
device.queue.copyExternalImageToTexture({ source, flipY: true }, { texture }, size);
return texture;
};