mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-17 05:49:30 -07:00
164 lines
5.3 KiB
HTML
164 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<body style="height: 100vh; margin: 0; overflow: hidden; position: fixed; padding: 0; width: 100vw;">
|
|
<script src="./lib/three.js"></script>
|
|
<script src="./js/GPUComputationRenderer.js"></script>
|
|
<script>
|
|
const camera = new THREE.OrthographicCamera( -0.5, 0.5, 0.5, -0.5, 0.0001, 10000 );
|
|
const scene = new THREE.Scene();
|
|
const renderer = new THREE.WebGLRenderer();
|
|
renderer.setClearColor(new THREE.Color(1, 1, 1), 1);
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
document.body.appendChild( renderer.domElement );
|
|
|
|
|
|
|
|
const NUM_ROWS = 80;
|
|
|
|
// Creates the gpu computation class and sets it up
|
|
const gpuCompute = new GPUComputationRenderer( NUM_ROWS, NUM_ROWS, renderer );
|
|
const glyphValue = gpuCompute.createTexture();
|
|
// This is how one might initialize data
|
|
|
|
const pixels = glyphValue.image.data;
|
|
for (let i = 0; i < NUM_ROWS * NUM_ROWS; i++) {
|
|
pixels[i * 4 + 0] = Math.random();
|
|
pixels[i * 4 + 1] = Math.random();
|
|
pixels[i * 4 + 2] = 0;
|
|
pixels[i * 4 + 3] = 0;
|
|
}
|
|
|
|
const glyphVariable = gpuCompute.addVariable(
|
|
"glyph",
|
|
`
|
|
// #include <common>
|
|
#define PI 3.14159265359
|
|
#define SQRT_2 1.4142135623730951
|
|
#define SQRT_5 2.23606797749979
|
|
uniform float now;
|
|
uniform float delta;
|
|
uniform float animationSpeed;
|
|
uniform float fallSpeed;
|
|
uniform float cycleSpeed;
|
|
uniform float a;
|
|
uniform float b;
|
|
uniform float c;
|
|
uniform float brightnessChangeBias;
|
|
uniform float glyphSequenceLength;
|
|
uniform float numGlyphRows;
|
|
|
|
highp float rand( const in vec2 uv ) {
|
|
const highp float a = 12.9898, b = 78.233, c = 43758.5453;
|
|
highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
|
|
return fract(sin(sn) * c);
|
|
}
|
|
|
|
void main() {
|
|
|
|
vec2 cellSize = 1.0 / resolution.xy;
|
|
vec2 uv = (gl_FragCoord.xy) * cellSize;
|
|
|
|
float columnTimeOffset = rand(vec2(gl_FragCoord.x, 0.0));
|
|
float columnSpeedOffset = rand(vec2(gl_FragCoord.x + 0.1, 0.0));
|
|
|
|
vec4 data = texture2D( glyph, uv );
|
|
|
|
float brightness = data.r;
|
|
float cycle = data.g;
|
|
|
|
float simTime = now * 0.0005 * animationSpeed * fallSpeed;
|
|
float columnTime = (columnTimeOffset * 1000.0 + simTime) * (0.5 + columnSpeedOffset * 0.5) + (sin(simTime * 2.0 * columnSpeedOffset) * 0.2);
|
|
float glyphTime = gl_FragCoord.y * 0.01 + columnTime;
|
|
|
|
float value = 1.0 - fract((glyphTime + 0.3 * sin(SQRT_2 * glyphTime) + 0.2 * sin(SQRT_5 * glyphTime)));
|
|
|
|
float newBrightness = clamp(a + b * log(c * (value - 0.5)), 0.0, 1.0);
|
|
|
|
brightness = mix(brightness, newBrightness, brightnessChangeBias);
|
|
|
|
|
|
float glyphCycleSpeed = delta * cycleSpeed * 0.2 * pow(1.0 - brightness, 4.0);
|
|
cycle = fract(cycle + glyphCycleSpeed);
|
|
float symbol = floor(glyphSequenceLength * cycle);
|
|
float symbolX = mod(symbol, numGlyphRows);
|
|
float symbolY = (numGlyphRows - 1.0 - (symbol - symbolX) / numGlyphRows);
|
|
|
|
gl_FragColor = vec4(0.5);
|
|
gl_FragColor.r = brightness;
|
|
gl_FragColor.g = cycle;
|
|
gl_FragColor.b = symbolX / numGlyphRows;
|
|
gl_FragColor.a = symbolY / numGlyphRows;
|
|
}
|
|
`
|
|
,
|
|
glyphValue
|
|
);
|
|
gpuCompute.setVariableDependencies( glyphVariable, [ glyphVariable ] );
|
|
const animationSpeed = 1;
|
|
const brightnessChangeBias = animationSpeed == 0 ? 1 : Math.min(1, Math.abs(animationSpeed));
|
|
const glyphSequenceLength = 57;
|
|
Object.assign(glyphVariable.material.uniforms, {
|
|
now: { type: "f", value: 0 },
|
|
delta: { type: "f", value: 0.01 },
|
|
animationSpeed: { type: "f", value: animationSpeed },
|
|
fallSpeed: { type: "f", value: 1 },
|
|
cycleSpeed: {type: "f", value: 1 },
|
|
glyphSequenceLength: { type: "f", value: glyphSequenceLength },
|
|
numGlyphRows: {type: "f", value: 8},
|
|
|
|
a: { type: "f", value: 1.125 },
|
|
b: { type: "f", value: 1.125 },
|
|
c: { type: "f", value: 1.25 },
|
|
brightnessChangeBias: { type: "f", value: brightnessChangeBias },
|
|
});
|
|
// This is how one might initialize a const
|
|
/*
|
|
Object.assign(glyphVariable.material.defines, {
|
|
BOUNDS: BOUNDS.toFixed( 1 ),
|
|
});
|
|
*/
|
|
|
|
const error = gpuCompute.init();
|
|
if ( error !== null ) {
|
|
console.error( error );
|
|
}
|
|
|
|
const plane = new THREE.Mesh(
|
|
new THREE.PlaneBufferGeometry(),
|
|
new THREE.MeshBasicMaterial({
|
|
map: gpuCompute.getCurrentRenderTarget( glyphVariable ).texture
|
|
// map: new THREE.TextureLoader().load( './matrixcode_msdf.png' )
|
|
})
|
|
);
|
|
plane.geometry.computeVertexNormals();
|
|
scene.add( plane );
|
|
|
|
const start = Date.now();
|
|
let last = 0;
|
|
|
|
const animate = () => {
|
|
requestAnimationFrame( animate );
|
|
|
|
const now = Date.now() - start;
|
|
|
|
if (now - last > 50) {
|
|
last = now;
|
|
return;
|
|
}
|
|
|
|
const delta = ((now - last > 1000) ? 0 : now - last) / 1000 * animationSpeed;
|
|
last = now;
|
|
|
|
glyphVariable.material.uniforms.now.value = now;
|
|
glyphVariable.material.uniforms.delta.value = delta;
|
|
|
|
gpuCompute.compute(); // Do the gpu computation
|
|
renderer.render( scene, camera );
|
|
}
|
|
|
|
animate();
|
|
</script>
|
|
</body>
|
|
</html>
|