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

Added paradise version. Added Coptic text texture. Added polar coordinate and "sun" support to the renderer.

Browse Source
This commit is contained in:
Rezmason
2018-09-09 16:42:22 -07:00
parent a8dcc52c8e
commit e61f96e614
8 changed files with 252 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
js/ColorMapPass.js
View File

@@ -11,21 +11,23 @@ const easeInOutQuad = input => {
return 1 - 2 * input * input;
}
const ARRAY_SIZE = 2048;
THREE.ColorMapPass = function (entries, ditherMagnitude = 1) {
const colors = Array(256).fill().map(_ => new THREE.Vector3());
const colors = Array(ARRAY_SIZE).fill().map(_ => new THREE.Vector3(0, 0, 0));
const sortedEntries = entries.slice().sort((e1, e2) => e1.at - e2.at).map(entry => ({
color: entry.color,
at255: Math.floor(Math.max(Math.min(1, entry.at), 0) * (colors.length - 1))
arrayIndex: Math.floor(Math.max(Math.min(1, entry.at), 0) * (ARRAY_SIZE - 1))
}));
sortedEntries.unshift({color:sortedEntries[0].color, at255:0});
sortedEntries.push({color:sortedEntries[sortedEntries.length - 1].color, at255:255});
sortedEntries.unshift({color:sortedEntries[0].color, arrayIndex:0});
sortedEntries.push({color:sortedEntries[sortedEntries.length - 1].color, arrayIndex:ARRAY_SIZE - 1});
sortedEntries.forEach((entry, index) => {
colors[entry.at255].copy(entry.color);
colors[entry.arrayIndex].copy(entry.color);
if (index + 1 < sortedEntries.length) {
const nextEntry = sortedEntries[index + 1];
const diff = nextEntry.at255 - entry.at255;
const diff = nextEntry.arrayIndex - entry.arrayIndex;
for (let i = 0; i < diff; i++) {
colors[entry.at255 + i].lerpVectors(entry.color, nextEntry.color, i / diff);
colors[entry.arrayIndex + i].lerpVectors(entry.color, nextEntry.color, i / diff);
}
}
});

51
js/MatrixRenderer.js
View File

@@ -4,7 +4,9 @@ const makeMatrixRenderer = (renderer, texture, {
animationSpeed, fallSpeed, cycleSpeed,
glyphSequenceLength,
numGlyphColumns,
hasThunder
hasThunder,
hasSun,
isPolar
}) => {
const matrixRenderer = {};
const camera = new THREE.OrthographicCamera( -0.5, 0.5, 0.5, -0.5, 0.0001, 10000 );
@@ -41,6 +43,10 @@ const glyphVariable = gpuCompute.addVariable(
return fract(sin(sn) * c);
}
highp float blast( const in float x, const in float power ) {
return pow(pow(pow(x, power), power), power);
}
void main() {
vec2 cellSize = 1.0 / resolution.xy;
@@ -62,17 +68,22 @@ const glyphVariable = gpuCompute.addVariable(
float newBrightness = 3.0 * log(value * 1.25);
#ifdef hasThunder
float thunder = 10.0 * (pow(pow(sin(SQRT_5 * simTime), 10.0), 10.0) + pow(pow(sin(SQRT_2 * simTime), 10.0), 10.0)) + 0.6;
#ifdef hasSun
newBrightness = pow(fract(newBrightness * 0.5), 3.0) * uv.y * 2.0;
#endif
newBrightness *= thunder;
#ifdef hasThunder
vec2 distVec = (gl_FragCoord.xy / resolution.xy - vec2(0.5, 1.0)) * vec2(1.0, 2.0);
float thunder = (blast(sin(SQRT_5 * simTime * 2.0), 10.0) + blast(sin(SQRT_2 * simTime * 2.0), 10.0));
thunder *= 20.0 * (1.0 - 1.5 * length(distVec));
newBrightness *= max(0.0, thunder) * 0.4 + 0.6;
if (newBrightness > brightness) {
brightness = newBrightness;
} else {
brightness = mix(brightness, newBrightness, brightnessChangeBias * 0.1);
}
brightness = min(1.0, brightness);
#else
brightness = mix(brightness, newBrightness, brightnessChangeBias);
#endif
@@ -84,7 +95,7 @@ const glyphVariable = gpuCompute.addVariable(
float symbolX = mod(symbol, numGlyphColumns);
float symbolY = ((numGlyphColumns - 1.0) - (symbol - symbolX) / numGlyphColumns);
gl_FragColor = vec4(1.0);
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
gl_FragColor.r = brightness;
gl_FragColor.g = cycle;
gl_FragColor.b = symbolX / numGlyphColumns;
@@ -96,7 +107,7 @@ const glyphVariable = gpuCompute.addVariable(
);
gpuCompute.setVariableDependencies( glyphVariable, [ glyphVariable ] );
const brightnessChangeBias = animationSpeed == 0 ? 1 : Math.min(1, Math.abs(animationSpeed));
const brightnessChangeBias = (animationSpeed * fallSpeed) == 0 ? 1 : Math.min(1, Math.abs(animationSpeed * fallSpeed));
Object.assign(glyphVariable.material.uniforms, {
now: { type: "f", value: 0 },
delta: { type: "f", value: 0.01 },
@@ -110,6 +121,9 @@ const glyphVariable = gpuCompute.addVariable(
if (hasThunder) {
glyphVariable.material.defines.hasThunder = 1.0;
}
if (hasSun) {
glyphVariable.material.defines.hasSun = 1.0;
}
const error = gpuCompute.init();
if ( error !== null ) {
@@ -140,6 +154,7 @@ const glyphVariable = gpuCompute.addVariable(
}
`,
fragmentShader: `
#define PI 3.14159265359
#ifdef GL_OES_standard_derivatives
#extension GL_OES_standard_derivatives: enable
#endif
@@ -159,17 +174,26 @@ const glyphVariable = gpuCompute.addVariable(
void main() {
#ifdef isPolar
vec2 diff = vUV - vec2(0.5, 1.25);
float radius = length(diff);
float angle = atan(diff.y, diff.x) + PI;
vec2 uv = vec2(angle / PI, 1.0 - pow(radius * 0.75, 0.6));
#else
vec2 uv = vUV;
#endif
// Unpack the values from the glyph texture
vec4 glyph = texture2D(glyphs, vUV);
vec4 glyph = texture2D(glyphs, uv);
float brightness = glyph.r;
vec2 symbolUV = glyph.ba;
vec4 sample = texture2D(msdf, fract(vUV * numColumns) / numGlyphColumns + symbolUV);
vec4 sample = texture2D(msdf, fract(uv * numColumns) / numGlyphColumns + symbolUV);
// The rest is straight up MSDF
float sigDist = median(sample.r, sample.g, sample.b) - 0.5;
float alpha = clamp(sigDist/fwidth(sigDist) + 0.5, 0.0, 1.0);
float dscale = 0.353505 / sharpness;
vec2 duv = dscale * (dFdx(vUV) + dFdy(vUV));
vec2 duv = dscale * (dFdx(uv) + dFdy(uv));
float isBigEnough = max(abs(duv.x), abs(duv.y));
if (isBigEnough > BIG_ENOUGH) {
float ratio = BIG_ENOUGH / isBigEnough;
@@ -183,6 +207,13 @@ const glyphVariable = gpuCompute.addVariable(
`
})
);
if (isPolar) {
mesh.material.defines.isPolar = 1.0;
}
// mesh.material = new THREE.MeshBasicMaterial({map: glyphRTT});
scene.add( mesh );
let start = NaN;