mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-17 05:49:30 -07:00
Ran all the JS through prettier.
This commit is contained in:
Rezmason
307
js/renderer.js
307
js/renderer.js
@@ -1,187 +1,180 @@
|
||||
import {
|
||||
extractEntries,
|
||||
loadImage,
|
||||
loadText,
|
||||
makePassFBO,
|
||||
makeDoubleBuffer,
|
||||
makePass
|
||||
} from "./utils.js";
|
||||
import { extractEntries, loadImage, loadText, makePassFBO, makeDoubleBuffer, makePass } from "./utils.js";
|
||||
|
||||
const rippleTypes = {
|
||||
box: 0,
|
||||
circle: 1
|
||||
box: 0,
|
||||
circle: 1,
|
||||
};
|
||||
|
||||
const cycleStyles = {
|
||||
cycleFasterWhenDimmed: 0,
|
||||
cycleRandomly: 1
|
||||
cycleFasterWhenDimmed: 0,
|
||||
cycleRandomly: 1,
|
||||
};
|
||||
|
||||
const numVerticesPerQuad = 2 * 3;
|
||||
|
||||
export default (regl, config) => {
|
||||
const volumetric = config.volumetric;
|
||||
const density = volumetric && config.effect !== "none" ? config.density : 1;
|
||||
const [numRows, numColumns] = [config.numColumns, config.numColumns * density];
|
||||
const [numQuadRows, numQuadColumns] = volumetric ? [numRows, numColumns] : [1, 1];
|
||||
const numQuads = numQuadRows * numQuadColumns;
|
||||
const quadSize = [1 / numQuadColumns, 1 / numQuadRows];
|
||||
|
||||
const volumetric = config.volumetric;
|
||||
const density = volumetric && config.effect !== "none" ? config.density : 1;
|
||||
const [numRows, numColumns] = [config.numColumns, config.numColumns * density];
|
||||
const [numQuadRows, numQuadColumns] = volumetric ? [numRows, numColumns] : [1, 1];
|
||||
const numQuads = numQuadRows * numQuadColumns;
|
||||
const quadSize = [1 / numQuadColumns, 1 / numQuadRows];
|
||||
// These two framebuffers are used to compute the raining code.
|
||||
// they take turns being the source and destination of the "compute" shader.
|
||||
// The half float data type is crucial! It lets us store almost any real number,
|
||||
// whereas the default type limits us to integers between 0 and 255.
|
||||
|
||||
// These two framebuffers are used to compute the raining code.
|
||||
// they take turns being the source and destination of the "compute" shader.
|
||||
// The half float data type is crucial! It lets us store almost any real number,
|
||||
// whereas the default type limits us to integers between 0 and 255.
|
||||
// This double buffer is smaller than the screen, because its pixels correspond
|
||||
// with glyphs in the final image, and the glyphs are much larger than a pixel.
|
||||
const doubleBuffer = makeDoubleBuffer(regl, {
|
||||
width: numColumns,
|
||||
height: numRows,
|
||||
wrapT: "clamp",
|
||||
type: "half float",
|
||||
});
|
||||
|
||||
// This double buffer is smaller than the screen, because its pixels correspond
|
||||
// with glyphs in the final image, and the glyphs are much larger than a pixel.
|
||||
const doubleBuffer = makeDoubleBuffer(regl, {
|
||||
width: numColumns,
|
||||
height: numRows,
|
||||
wrapT: "clamp",
|
||||
type: "half float"
|
||||
});
|
||||
const output = makePassFBO(regl, config.useHalfFloat);
|
||||
|
||||
const uniforms = {
|
||||
...extractEntries(config, [
|
||||
// rain general
|
||||
"glyphHeightToWidth",
|
||||
"glyphTextureColumns",
|
||||
// rain update
|
||||
"animationSpeed",
|
||||
"brightnessMinimum",
|
||||
"brightnessMix",
|
||||
"brightnessMultiplier",
|
||||
"brightnessOffset",
|
||||
"cursorEffectThreshold",
|
||||
"cycleSpeed",
|
||||
"fallSpeed",
|
||||
"glyphSequenceLength",
|
||||
"hasSun",
|
||||
"hasThunder",
|
||||
"raindropLength",
|
||||
"rippleScale",
|
||||
"rippleSpeed",
|
||||
"rippleThickness",
|
||||
"resurrectingCodeRatio",
|
||||
// rain vertex
|
||||
"forwardSpeed",
|
||||
// rain render
|
||||
"glyphEdgeCrop",
|
||||
"isPolar",
|
||||
]),
|
||||
density,
|
||||
numRows,
|
||||
numColumns,
|
||||
numQuadRows,
|
||||
numQuadColumns,
|
||||
quadSize,
|
||||
volumetric,
|
||||
};
|
||||
|
||||
const output = makePassFBO(regl, config.useHalfFloat);
|
||||
uniforms.rippleType = config.rippleTypeName in rippleTypes ? rippleTypes[config.rippleTypeName] : -1;
|
||||
uniforms.cycleStyle = config.cycleStyleName in cycleStyles ? cycleStyles[config.cycleStyleName] : 0;
|
||||
uniforms.slantVec = [Math.cos(config.slant), Math.sin(config.slant)];
|
||||
uniforms.slantScale = 1 / (Math.abs(Math.sin(2 * config.slant)) * (Math.sqrt(2) - 1) + 1);
|
||||
uniforms.showComputationTexture = config.effect === "none";
|
||||
|
||||
const uniforms = {
|
||||
...extractEntries(config, [
|
||||
// rain general
|
||||
"glyphHeightToWidth",
|
||||
"glyphTextureColumns",
|
||||
// rain update
|
||||
"animationSpeed",
|
||||
"brightnessMinimum",
|
||||
"brightnessMix",
|
||||
"brightnessMultiplier",
|
||||
"brightnessOffset",
|
||||
"cursorEffectThreshold",
|
||||
"cycleSpeed",
|
||||
"fallSpeed",
|
||||
"glyphSequenceLength",
|
||||
"hasSun",
|
||||
"hasThunder",
|
||||
"raindropLength",
|
||||
"rippleScale",
|
||||
"rippleSpeed",
|
||||
"rippleThickness",
|
||||
"resurrectingCodeRatio",
|
||||
// rain vertex
|
||||
"forwardSpeed",
|
||||
// rain render
|
||||
"glyphEdgeCrop",
|
||||
"isPolar",
|
||||
]),
|
||||
density,
|
||||
numRows,
|
||||
numColumns,
|
||||
numQuadRows,
|
||||
numQuadColumns,
|
||||
quadSize,
|
||||
volumetric
|
||||
};
|
||||
const msdf = loadImage(regl, config.glyphTexURL);
|
||||
|
||||
uniforms.rippleType =
|
||||
config.rippleTypeName in rippleTypes
|
||||
? rippleTypes[config.rippleTypeName]
|
||||
: -1;
|
||||
uniforms.cycleStyle =
|
||||
config.cycleStyleName in cycleStyles
|
||||
? cycleStyles[config.cycleStyleName]
|
||||
: 0;
|
||||
uniforms.slantVec = [Math.cos(config.slant), Math.sin(config.slant)];
|
||||
uniforms.slantScale =
|
||||
1 / (Math.abs(Math.sin(2 * config.slant)) * (Math.sqrt(2) - 1) + 1);
|
||||
uniforms.showComputationTexture = config.effect === "none";
|
||||
const updateFrag = loadText("../shaders/update.frag");
|
||||
const update = regl({
|
||||
frag: regl.prop("frag"),
|
||||
uniforms: {
|
||||
...uniforms,
|
||||
lastState: doubleBuffer.back,
|
||||
},
|
||||
|
||||
const msdf = loadImage(regl, config.glyphTexURL);
|
||||
framebuffer: doubleBuffer.front,
|
||||
});
|
||||
|
||||
const updateFrag = loadText("../shaders/update.frag");
|
||||
const update = regl({
|
||||
frag: regl.prop("frag"),
|
||||
uniforms: {
|
||||
...uniforms,
|
||||
lastState: doubleBuffer.back
|
||||
},
|
||||
const quadPositions = Array(numQuadRows)
|
||||
.fill()
|
||||
.map((_, y) =>
|
||||
Array(numQuadColumns)
|
||||
.fill()
|
||||
.map((_, x) => Array(numVerticesPerQuad).fill([x, y]))
|
||||
);
|
||||
|
||||
framebuffer: doubleBuffer.front
|
||||
});
|
||||
const quadCorners = Array(numQuads).fill([
|
||||
[0, 0],
|
||||
[0, 1],
|
||||
[1, 1],
|
||||
[0, 0],
|
||||
[1, 1],
|
||||
[1, 0],
|
||||
]);
|
||||
|
||||
const quadPositions = Array(numQuadRows).fill().map((_, y) =>
|
||||
Array(numQuadColumns).fill().map((_, x) =>
|
||||
Array(numVerticesPerQuad).fill([x, y])
|
||||
)
|
||||
);
|
||||
// We render the code into an FBO using MSDFs: https://github.com/Chlumsky/msdfgen
|
||||
const renderVert = loadText("../shaders/render.vert");
|
||||
const renderFrag = loadText("../shaders/render.frag");
|
||||
const render = regl({
|
||||
blend: {
|
||||
enable: true,
|
||||
func: {
|
||||
srcRGB: "src alpha",
|
||||
srcAlpha: 1,
|
||||
dstRGB: "dst alpha",
|
||||
dstAlpha: 1,
|
||||
},
|
||||
},
|
||||
vert: regl.prop("vert"),
|
||||
frag: regl.prop("frag"),
|
||||
|
||||
const quadCorners = Array(numQuads).fill([[0, 0], [0, 1], [1, 1], [0, 0], [1, 1], [1, 0]]);
|
||||
uniforms: {
|
||||
...uniforms,
|
||||
|
||||
// We render the code into an FBO using MSDFs: https://github.com/Chlumsky/msdfgen
|
||||
const renderVert = loadText("../shaders/render.vert");
|
||||
const renderFrag = loadText("../shaders/render.frag");
|
||||
const render = regl({
|
||||
blend: {
|
||||
enable: true,
|
||||
func: {
|
||||
srcRGB: "src alpha",
|
||||
srcAlpha: 1,
|
||||
dstRGB: "dst alpha",
|
||||
dstAlpha: 1
|
||||
}
|
||||
},
|
||||
vert: regl.prop("vert"),
|
||||
frag: regl.prop("frag"),
|
||||
lastState: doubleBuffer.front,
|
||||
glyphTex: msdf.texture,
|
||||
|
||||
uniforms: {
|
||||
...uniforms,
|
||||
camera: regl.prop("camera"),
|
||||
transform: regl.prop("transform"),
|
||||
screenSize: regl.prop("screenSize"),
|
||||
},
|
||||
|
||||
lastState: doubleBuffer.front,
|
||||
glyphTex: msdf.texture,
|
||||
attributes: {
|
||||
aPosition: quadPositions,
|
||||
aCorner: quadCorners,
|
||||
},
|
||||
count: numQuads * numVerticesPerQuad,
|
||||
|
||||
camera: regl.prop("camera"),
|
||||
transform: regl.prop("transform"),
|
||||
screenSize: regl.prop("screenSize")
|
||||
},
|
||||
framebuffer: output,
|
||||
});
|
||||
|
||||
attributes: {
|
||||
aPosition: quadPositions,
|
||||
aCorner: quadCorners
|
||||
},
|
||||
count: numQuads * numVerticesPerQuad,
|
||||
const screenSize = [1, 1];
|
||||
const { mat4, vec3 } = glMatrix;
|
||||
const camera = mat4.create();
|
||||
const translation = vec3.set(vec3.create(), 0, 0.5 / numRows, -1);
|
||||
const scale = vec3.set(vec3.create(), 1, 1, 1);
|
||||
const transform = mat4.create();
|
||||
mat4.translate(transform, transform, translation);
|
||||
mat4.scale(transform, transform, scale);
|
||||
|
||||
framebuffer: output
|
||||
});
|
||||
return makePass(
|
||||
{
|
||||
primary: output,
|
||||
},
|
||||
() => {
|
||||
const time = Date.now();
|
||||
|
||||
const screenSize = [1, 1];
|
||||
const {mat4, vec3} = glMatrix;
|
||||
const camera = mat4.create();
|
||||
const translation = vec3.set(vec3.create(), 0, 0.5 / numRows, -1);
|
||||
const scale = vec3.set(vec3.create(), 1, 1, 1);
|
||||
const transform = mat4.create();
|
||||
mat4.translate(transform, transform, translation);
|
||||
mat4.scale(transform, transform, scale);
|
||||
|
||||
return makePass(
|
||||
{
|
||||
primary: output
|
||||
},
|
||||
() => {
|
||||
const time = Date.now();
|
||||
|
||||
update({frag: updateFrag.text()});
|
||||
regl.clear({
|
||||
depth: 1,
|
||||
color: [0, 0, 0, 1],
|
||||
framebuffer: output
|
||||
});
|
||||
render({camera, transform, screenSize, vert: renderVert.text(), frag: renderFrag.text()});
|
||||
},
|
||||
(w, h) => {
|
||||
output.resize(w, h);
|
||||
const aspectRatio = w / h;
|
||||
glMatrix.mat4.perspective(camera, (Math.PI / 180) * 90, aspectRatio, 0.0001, 1000);
|
||||
[screenSize[0], screenSize[1]] = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1];
|
||||
},
|
||||
[msdf.loaded, updateFrag.loaded, renderVert.loaded, renderFrag.loaded]
|
||||
);
|
||||
update({ frag: updateFrag.text() });
|
||||
regl.clear({
|
||||
depth: 1,
|
||||
color: [0, 0, 0, 1],
|
||||
framebuffer: output,
|
||||
});
|
||||
render({ camera, transform, screenSize, vert: renderVert.text(), frag: renderFrag.text() });
|
||||
},
|
||||
(w, h) => {
|
||||
output.resize(w, h);
|
||||
const aspectRatio = w / h;
|
||||
glMatrix.mat4.perspective(camera, (Math.PI / 180) * 90, aspectRatio, 0.0001, 1000);
|
||||
[screenSize[0], screenSize[1]] = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1];
|
||||
},
|
||||
[msdf.loaded, updateFrag.loaded, renderVert.loaded, renderFrag.loaded]
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user