mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-14 12:29:30 -07:00
133 lines
4.8 KiB
HTML
133 lines
4.8 KiB
HTML
<html><body style="height: 100vh; margin: 0; overflow: hidden; position: fixed; padding: 0; width: 100vw;">
|
|
<script src="./lib/three.js"></script>
|
|
|
|
<script src="./js/CopyShader.js"></script>
|
|
|
|
<script src="./js/EffectComposer.js"></script>
|
|
<script src="./js/RenderPass.js"></script>
|
|
<script src="./js/ShaderPass.js"></script>
|
|
|
|
<script src="./js/ColorMapPass.js"></script>
|
|
<script src="./js/HorizontalColorationPass.js"></script>
|
|
<script src="./js/FilmGrainPass.js"></script>
|
|
<script src="./js/LuminosityHighPassShader.js"></script>
|
|
<script src="./js/UnrealBloomPass.js"></script>
|
|
|
|
<script src="./js/MatrixMaterial.js"></script>
|
|
<script src="./js/MatrixGeometry.js"></script>
|
|
|
|
<script>
|
|
|
|
const urlParams = new Map(window.location.href.replace(/^[^\?]+\?/, "").split("&").map(pair => pair.split("=")));
|
|
const getParam = (key, defaultValue) => urlParams.has(key) ? urlParams.get(key) : defaultValue;
|
|
|
|
const sharpness = parseFloat(getParam("sharpness", 0.5));
|
|
const animationSpeed = parseFloat(getParam("animationSpeed", 1));
|
|
const fallSpeed = parseFloat(getParam("fallSpeed", 1));
|
|
const cycleSpeed = parseFloat(getParam("cycleSpeed", 1));
|
|
const numColumns = parseInt(getParam("width", 80));
|
|
const numRows = numColumns;
|
|
const glyphSequenceLength = 57;
|
|
|
|
const a = parseFloat(getParam("a", 1.125));
|
|
const b = parseFloat(getParam("b", 1.125));
|
|
const c = parseFloat(getParam("c", 1.25));
|
|
|
|
document.ontouchmove = (e) => e.preventDefault();
|
|
const element = document.createElement("matrixcode");
|
|
document.body.appendChild(element);
|
|
const camera = new THREE.OrthographicCamera( -0.5, 0.5, 0.5, -0.5, 0.0001, 10000 );
|
|
const scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0, 0, 0);
|
|
scene.add(camera);
|
|
const renderer = new THREE.WebGLRenderer({ stencil: false, depth: false, precision: "lowp" });
|
|
renderer.sortObjects = true;
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
element.appendChild(renderer.domElement);
|
|
const composer = new THREE.EffectComposer( renderer );
|
|
|
|
const texture = new THREE.TextureLoader().load( './matrixcode_msdf.png' );
|
|
const material = makeMatrixMaterial(texture, sharpness);
|
|
const {geometry, update} = makeMatrixGeometry({
|
|
numRows, numColumns,
|
|
animationSpeed, fallSpeed, cycleSpeed,
|
|
a, b, c,
|
|
glyphSequenceLength,
|
|
});
|
|
|
|
// const stupidMaterial = new THREE.MeshBasicMaterial( { map: texture, flatShading: false, transparent:false } );
|
|
|
|
const mesh = new THREE.Mesh( geometry, material );
|
|
scene.add(mesh);
|
|
|
|
composer.addPass( new THREE.RenderPass( scene, camera ) );
|
|
|
|
const bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.15, 0.3 );
|
|
composer.addPass( bloomPass );
|
|
|
|
const colorMap = new THREE.ColorMapPass([
|
|
{color: new THREE.Vector3(0.00, 0.00, 0.00), at: 0.0},
|
|
{color: new THREE.Vector3(0.05, 0.52, 0.17), at: 0.4},
|
|
{color: new THREE.Vector3(0.12, 0.82, 0.37), at: 0.8},
|
|
{color: new THREE.Vector3(0.29, 1.00, 0.64), at: 1.0},
|
|
]);
|
|
composer.addPass( colorMap );
|
|
|
|
const horizontalColoration = new THREE.HorizontalColorationPass([
|
|
new THREE.Vector3(1, 0, 0),
|
|
new THREE.Vector3(1, 1, 0),
|
|
new THREE.Vector3(0, 1, 0),
|
|
new THREE.Vector3(0, 1, 1),
|
|
new THREE.Vector3(0, 0, 1),
|
|
new THREE.Vector3(1, 0, 1),
|
|
|
|
|
|
// new THREE.Vector3(1, 0, 0.5),
|
|
// new THREE.Vector3(1, 0, 0.5),
|
|
// new THREE.Vector3(0.5, 0, 1),
|
|
// new THREE.Vector3(0.5, 0, 1),
|
|
// new THREE.Vector3(0.25, 0.25, 1),
|
|
// new THREE.Vector3(0.25, 0.25, 1),
|
|
]);
|
|
// composer.addPass(horizontalColoration);
|
|
|
|
const blurMag = 0.0001;
|
|
const ditherMag = 0.075;
|
|
const filmGrainPass = new THREE.FilmGrainPass(blurMag, ditherMag);
|
|
composer.addPass(filmGrainPass);
|
|
|
|
const windowResize = () => {
|
|
const [width, height] = [window.innerWidth, window.innerHeight];
|
|
const ratio = height / width;
|
|
const frac = 0.5;
|
|
if (ratio < 1) {
|
|
camera.left = -frac;
|
|
camera.right = frac;
|
|
camera.bottom = (camera.left - camera.right) * ratio + frac;
|
|
camera.top = frac;
|
|
} else {
|
|
camera.bottom = -frac;
|
|
camera.top = frac;
|
|
camera.left = camera.bottom / ratio;
|
|
camera.right = camera.top / ratio;
|
|
}
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(width, height);
|
|
bloomPass.setSize( window.innerWidth, window.innerHeight );
|
|
}
|
|
window.addEventListener("resize", windowResize, false);
|
|
window.addEventListener("orientationchange", windowResize, false);
|
|
windowResize();
|
|
|
|
const render = () => {
|
|
requestAnimationFrame(render);
|
|
const now = Date.now();
|
|
update(now);
|
|
composer.render();
|
|
}
|
|
render();
|
|
|
|
</script>
|
|
</body></html>
|