mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-21 07:19:30 -07:00
Shaders can now be loaded in similar to textures
This commit is contained in:
72
js/utils.js
72
js/utils.js
@@ -45,29 +45,6 @@ const resizePyramid = (pyramid, vw, vh, scale) =>
|
|||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
const loadImages = async (regl, manifest) => {
|
|
||||||
const keys = Object.keys(manifest);
|
|
||||||
const urls = Object.values(manifest);
|
|
||||||
const images = await Promise.all(urls.map(url => loadImageOld(regl, url)));
|
|
||||||
return Object.fromEntries(images.map((image, index) => [keys[index], image]));
|
|
||||||
};
|
|
||||||
|
|
||||||
const loadImageOld = async (regl, url) => {
|
|
||||||
if (url == null) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const image = new Image();
|
|
||||||
image.crossOrigin = "anonymous";
|
|
||||||
image.src = url;
|
|
||||||
await image.decode();
|
|
||||||
return regl.texture({
|
|
||||||
data: image,
|
|
||||||
mag: "linear",
|
|
||||||
min: "linear",
|
|
||||||
flipY: true
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const loadImage = (regl, url) => {
|
const loadImage = (regl, url) => {
|
||||||
let texture = regl.texture([[0]]);
|
let texture = regl.texture([[0]]);
|
||||||
let loaded = false;
|
let loaded = false;
|
||||||
@@ -96,6 +73,53 @@ const loadImage = (regl, url) => {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const loadShader = (regl, url) => {
|
||||||
|
let texture = regl.texture([[0]]);
|
||||||
|
let loaded = false;
|
||||||
|
return {
|
||||||
|
texture: () => {
|
||||||
|
if (!loaded) {
|
||||||
|
console.warn(`texture still loading: ${url}`);
|
||||||
|
}
|
||||||
|
return texture;
|
||||||
|
},
|
||||||
|
loaded: (async () => {
|
||||||
|
if (url != null) {
|
||||||
|
const data = new Image();
|
||||||
|
data.crossOrigin = "anonymous";
|
||||||
|
data.src = url;
|
||||||
|
await data.decode();
|
||||||
|
loaded = true;
|
||||||
|
texture = regl.texture({
|
||||||
|
data,
|
||||||
|
mag: "linear",
|
||||||
|
min: "linear",
|
||||||
|
flipY: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadText = (url) => {
|
||||||
|
let text = "";
|
||||||
|
let loaded = false;
|
||||||
|
return {
|
||||||
|
text: () => {
|
||||||
|
if (!loaded) {
|
||||||
|
console.warn(`text still loading: ${url}`);
|
||||||
|
}
|
||||||
|
return text;
|
||||||
|
},
|
||||||
|
loaded: (async () => {
|
||||||
|
if (url != null) {
|
||||||
|
text = await (await fetch(url)).text();
|
||||||
|
loaded = true;
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
const makeFullScreenQuad = (regl, uniforms = {}, context = {}) =>
|
const makeFullScreenQuad = (regl, uniforms = {}, context = {}) =>
|
||||||
regl({
|
regl({
|
||||||
vert: `
|
vert: `
|
||||||
@@ -181,7 +205,7 @@ export {
|
|||||||
makePyramid,
|
makePyramid,
|
||||||
resizePyramid,
|
resizePyramid,
|
||||||
loadImage,
|
loadImage,
|
||||||
loadImages,
|
loadText,
|
||||||
makeFullScreenQuad,
|
makeFullScreenQuad,
|
||||||
make1DTexture,
|
make1DTexture,
|
||||||
makePass,
|
makePass,
|
||||||
|
|||||||
Reference in New Issue
Block a user