mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-14 12:29:30 -07:00
101 lines
2.8 KiB
HTML
101 lines
2.8 KiB
HTML
<html>
|
|
<head>
|
|
<title>Matrix digital rain</title>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
|
|
/>
|
|
<style>
|
|
body {
|
|
background: black;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
}
|
|
|
|
canvas {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script src="lib/regl.min.js"></script>
|
|
<script type="module">
|
|
import { loadImages, makeFullScreenQuad } from "./js/utils.js";
|
|
import makeConfig from "./js/config.js";
|
|
import makeMatrixRenderer from "./js/renderer.js";
|
|
import makeBloomPass from "./js/bloomPass.js";
|
|
import makeColorPass from "./js/colorPass.js";
|
|
|
|
const canvas = document.createElement("canvas");
|
|
document.body.appendChild(canvas);
|
|
document.addEventListener("touchmove", e => e.preventDefault(), {
|
|
passive: false
|
|
});
|
|
|
|
const regl = createREGL({
|
|
canvas,
|
|
extensions: ["OES_texture_half_float", "OES_texture_half_float_linear"],
|
|
optionalExtensions: [
|
|
"EXT_color_buffer_half_float",
|
|
"WEBGL_color_buffer_float",
|
|
"OES_standard_derivatives"
|
|
]
|
|
});
|
|
|
|
const [config, uniforms] = makeConfig(window.location.search, data =>
|
|
regl.texture({
|
|
data,
|
|
width: data.length / 3,
|
|
height: 1,
|
|
format: "rgb",
|
|
mag: "linear",
|
|
min: "linear"
|
|
})
|
|
);
|
|
|
|
const fullScreenQuad = makeFullScreenQuad(regl, uniforms);
|
|
const renderer = makeMatrixRenderer(regl, config);
|
|
const bloomPass = makeBloomPass(regl, config, renderer.fbo);
|
|
const colorPass = makeColorPass(regl, config, bloomPass.fbo);
|
|
const drawToScreen = regl({
|
|
uniforms: {
|
|
tex: colorPass.fbo
|
|
}
|
|
});
|
|
|
|
const resize = () => {
|
|
canvas.width = canvas.clientWidth;
|
|
canvas.height = canvas.clientHeight;
|
|
};
|
|
window.onresize = resize;
|
|
resize();
|
|
|
|
fullScreenQuad(renderer.update);
|
|
|
|
document.body.onload = async () => {
|
|
const resources = await loadImages(regl, {
|
|
msdfTex: config.glyphTexURL,
|
|
backgroundTex:
|
|
config.effect === "image" ? config.backgroundImage : null
|
|
});
|
|
|
|
const loop = regl.frame(({ viewportWidth, viewportHeight }) => {
|
|
renderer.resize(viewportWidth, viewportHeight);
|
|
bloomPass.resize(viewportWidth, viewportHeight);
|
|
colorPass.resize(viewportWidth, viewportHeight);
|
|
|
|
fullScreenQuad(() => {
|
|
renderer.update();
|
|
renderer.render(resources);
|
|
bloomPass.render();
|
|
colorPass.render(resources);
|
|
drawToScreen();
|
|
});
|
|
});
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|