eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-18 14:19:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Rebuilt on top of REGL.

Browse Source
This commit is contained in:
Rezmason
2020-01-19 16:03:53 -08:00
parent 09677e5aa4
commit a760d6854a
22 changed files with 10869 additions and 49444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
js/renderer.js Normal file
View File

@@ -0,0 +1,300 @@
import { makePassFBO } from "./utils.js";
export default (regl, config) => {
const state = Array(2)
.fill()
.map(() =>
regl.framebuffer({
color: regl.texture({
radius: config.numColumns,
wrapT: "clamp",
type: "half float"
}),
depthStencil: false
})
);
const fbo = makePassFBO(regl);
const update = regl({
frag: `
precision highp float;
#define PI 3.14159265359
#define SQRT_2 1.4142135623730951
#define SQRT_5 2.23606797749979
uniform float numColumns;
uniform sampler2D lastState;
uniform bool hasSun;
uniform bool hasThunder;
uniform bool showComputationTexture;
uniform float brightnessChangeBias;
uniform float brightnessMultiplier;
uniform float brightnessOffset;
uniform float cursorEffectThreshold;
uniform float time;
uniform float animationSpeed;
uniform float cycleSpeed;
uniform float fallSpeed;
uniform float raindropLength;
uniform float glyphHeightToWidth;
uniform float glyphSequenceLength;
uniform float numFontColumns;
uniform int cycleStyle;
uniform float rippleScale;
uniform float rippleSpeed;
uniform float rippleThickness;
uniform int rippleType;
float max2(vec2 v) {
return max(v.x, v.y);
}
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);
}
vec2 rand2(vec2 p) {
return fract(vec2(sin(p.x * 591.32 + p.y * 154.077), cos(p.x * 391.32 + p.y * 49.077)));
}
highp float blast( const in float x, const in float power ) {
return pow(pow(pow(x, power), power), power);
}
float ripple(vec2 uv, float simTime) {
if (rippleType == -1) {
return 0.;
}
float rippleTime = (simTime * 0.5 + 0.2 * sin(simTime)) * rippleSpeed + 1.;
vec2 offset = rand2(vec2(floor(rippleTime), 0.)) - 0.5;
vec2 ripplePos = uv + offset;
float rippleDistance;
if (rippleType == 0) {
rippleDistance = max2(abs(ripplePos) * vec2(1.0, glyphHeightToWidth));
} else if (rippleType == 1) {
rippleDistance = length(ripplePos);
}
float rippleValue = fract(rippleTime) * rippleScale - rippleDistance;
if (rippleValue > 0. && rippleValue < rippleThickness) {
return 0.75;
} else {
return 0.;
}
}
void main() {
vec2 uv = gl_FragCoord.xy / numColumns;
float columnTimeOffset = rand(vec2(gl_FragCoord.x, 0.0));
float columnSpeedOffset = rand(vec2(gl_FragCoord.x + 0.1, 0.0));
vec4 data = texture2D( lastState, uv );
bool isInitializing = length(data) == 0.;
if (isInitializing) {
data = vec4(
rand(uv),
showComputationTexture ? 0.5 : rand(uv),
0.,
0.
);
}
float brightness = data.r;
float glyphCycle = data.g;
float simTime = time * animationSpeed;
float columnTime = (columnTimeOffset * 1000.0 + simTime * 0.5 * fallSpeed) * (0.5 + columnSpeedOffset * 0.5) + (sin(simTime * fallSpeed * columnSpeedOffset) * 0.2);
float glyphTime = (gl_FragCoord.y * 0.01 + columnTime) / raindropLength;
float value = 1.0 - fract((glyphTime + 0.3 * sin(SQRT_2 * glyphTime) + 0.2 * sin(SQRT_5 * glyphTime)));
float newBrightness = 3.0 * log(value * 1.25);
if (hasSun) {
newBrightness = pow(fract(newBrightness * 0.5), 3.0) * uv.y * 2.0;
}
if (hasThunder) {
vec2 distVec = (gl_FragCoord.xy / numColumns - vec2(0.5, 1.0)) * vec2(1.0, 2.0);
float thunder = (blast(sin(SQRT_5 * simTime), 10.0) + blast(sin(SQRT_2 * simTime), 10.0));
thunder *= 30.0 * (1.0 - 1.0 * length(distVec));
newBrightness *= max(0.0, thunder) * 1.0 + 0.7;
if (newBrightness > brightness) {
brightness = newBrightness;
} else {
brightness = mix(brightness, newBrightness, brightnessChangeBias * 0.1);
}
} else if (isInitializing) {
brightness = newBrightness;
} else {
brightness = mix(brightness, newBrightness, brightnessChangeBias);
}
float glyphCycleSpeed = 0.0;
if (cycleStyle == 1) {
glyphCycleSpeed = fract((glyphTime + 0.7 * sin(SQRT_2 * glyphTime) + 1.1 * sin(SQRT_5 * glyphTime))) * 0.75;
} else if (cycleStyle == 0) {
if (brightness > 0.0) glyphCycleSpeed = pow(1.0 - brightness, 4.0);
}
glyphCycle = fract(glyphCycle + 0.005 * animationSpeed * cycleSpeed * glyphCycleSpeed);
float symbol = floor(glyphSequenceLength * glyphCycle);
float symbolX = mod(symbol, numFontColumns);
float symbolY = ((numFontColumns - 1.0) - (symbol - symbolX) / numFontColumns);
float effect = 0.;
effect += ripple(gl_FragCoord.xy / numColumns * 2.0 - 1.0, simTime);
if (brightness >= cursorEffectThreshold) {
effect = 1.0;
}
if (brightness > -1.) {
brightness = brightness * brightnessMultiplier + brightnessOffset;
}
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
gl_FragColor.r = brightness;
gl_FragColor.g = glyphCycle;
if (showComputationTexture) {
// Better use of the blue channel, for show and tell
gl_FragColor.b = min(1.0, glyphCycleSpeed);
gl_FragColor.a = 1.0;
} else {
gl_FragColor.b = symbolY * numFontColumns + symbolX;
gl_FragColor.a = effect;
}
}
`,
uniforms: {
lastState: ({ tick }) => state[tick % 2]
},
framebuffer: ({ tick }) => state[(tick + 1) % 2]
});
const render = regl({
vert: `
attribute vec2 aPosition;
uniform float width;
uniform float height;
varying vec2 vUV;
void main() {
vUV = aPosition / 2.0 + 0.5;
vec2 size = width > height ? vec2(width / height, 1.) : vec2(1., height / width);
gl_Position = vec4( size * aPosition, 0.0, 1.0 );
}
`,
frag: `
#define PI 3.14159265359
#ifdef GL_OES_standard_derivatives
#extension GL_OES_standard_derivatives: enable
#endif
precision lowp float;
uniform sampler2D msdfTex;
uniform sampler2D lastState;
uniform float numColumns;
uniform float numFontColumns;
uniform vec2 slantVec;
uniform float slantScale;
uniform float glyphHeightToWidth;
uniform float glyphEdgeCrop;
uniform bool isPolar;
uniform bool showComputationTexture;
varying vec2 vUV;
float median3(vec3 i) {
return max(min(i.r, i.g), min(max(i.r, i.g), i.b));
}
void main() {
vec2 uv = vUV;
if (isPolar) {
uv -= 0.5;
uv *= 0.5;
uv.y -= 0.5;
float radius = length(uv);
float angle = atan(uv.y, uv.x) / (2. * PI) + 0.5;
uv = vec2(angle * 4. - 0.5, 1.25 - radius * 1.5);
} else {
uv = vec2(
(uv.x - 0.5) * slantVec.x + (uv.y - 0.5) * slantVec.y,
(uv.y - 0.5) * slantVec.x - (uv.x - 0.5) * slantVec.y
) * slantScale + 0.5;
}
uv.y /= glyphHeightToWidth;
vec4 glyph = texture2D(lastState, uv);
if (showComputationTexture) {
gl_FragColor = glyph;
return;
}
// Unpack the values from the font texture
float brightness = glyph.r;
float effect = glyph.a;
brightness = max(effect, brightness);
float symbolIndex = glyph.b;
vec2 symbolUV = vec2(mod(symbolIndex, numFontColumns), floor(symbolIndex / numFontColumns));
vec2 glyphUV = fract(uv * numColumns);
glyphUV -= 0.5;
glyphUV *= clamp(1.0 - glyphEdgeCrop, 0.0, 1.0);
glyphUV += 0.5;
vec3 dist = texture2D(msdfTex, (glyphUV + symbolUV) / numFontColumns).rgb;
// The rest is straight up MSDF
float sigDist = median3(dist) - 0.5;
float alpha = clamp(sigDist/fwidth(sigDist) + 0.5, 0.0, 1.0);
gl_FragColor = vec4(vec3(brightness * alpha), 1.0);
}
`,
uniforms: {
msdfTex: regl.prop("msdfTex"),
height: regl.context("viewportWidth"),
width: regl.context("viewportHeight"),
lastState: ({ tick }) => state[tick % 2]
},
framebuffer: fbo
});
return {
resize: fbo.resize,
fbo,
update,
render
};
};