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

Adding glyphHeightToWidth, glyphEdgeCrop, fade and cycleStyle parameters.

Browse Source
This commit is contained in:
Rezmason
2019-02-18 17:26:02 -08:00
parent d03cd685e1
commit 5528592754
2 changed files with 77 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@@ -26,7 +26,7 @@
const versions = {
paradise: {
fontTexture: './coptic_msdf.png',
fontTexture: "./coptic_msdf.png",
raindropLength: 0.5,
glyphSequenceLength: 32,
bloom: {
@@ -46,11 +46,15 @@
hasThunder: false,
hasSun: true,
slant: 0,
glyphEdgeCrop: 0.0,
glyphHeightToWidth:1,
isPolar: true,
numColumns: 50
numColumns: 50,
fade: true,
cycleStyle: "cycleFasterWhenDimmed"
},
nightmare: {
fontTexture: './gothic_msdf.png',
fontTexture: "./gothic_msdf.png",
raindropLength: 0.6,
glyphSequenceLength: 27,
bloom: {
@@ -70,11 +74,15 @@
hasThunder: true,
hasSun: false,
slant: 360 / 16,
glyphEdgeCrop: 0.0,
glyphHeightToWidth:1,
isPolar: false,
numColumns: 60
numColumns: 60,
fade: true,
cycleStyle: "cycleFasterWhenDimmed"
},
["1999"]: {
fontTexture: './matrixcode_msdf.png',
fontTexture: "./matrixcode_msdf.png",
raindropLength: 1,
glyphSequenceLength: 57,
bloom: {
@@ -111,8 +119,12 @@
hasThunder: false,
hasSun: false,
slant: 0,
glyphEdgeCrop: 0.0,
glyphHeightToWidth:1,
isPolar: false,
numColumns: 80
numColumns: 80,
fade: true,
cycleStyle: "cycleFasterWhenDimmed"
}
};
@@ -139,6 +151,9 @@
const numFontColumns = 8;
const glyphSequenceLength = version.glyphSequenceLength;
const slant = parseFloat(getParam(["slant", "angle"], version.slant)) * Math.PI / 180;
const glyphEdgeCrop = parseFloat(getParam("encroach", version.glyphEdgeCrop));
const glyphHeightToWidth = parseFloat(getParam("stretch", version.glyphHeightToWidth));
const fade = getParam("fade", version.fade).toString() == "true";
const effect = getParam("effect", "plain");
@@ -164,8 +179,12 @@
hasSun: version.hasSun,
isPolar: version.isPolar,
slant,
glyphEdgeCrop,
glyphHeightToWidth,
fade,
showComputationTexture: effect === "none",
raindropLength
raindropLength,
cycleStyle: version.cycleStyle
});
matrixRenderer.pass.renderToScreen = false;

57
js/MatrixRenderer.js
View File

@@ -8,8 +8,12 @@ const makeMatrixRenderer = (renderer, texture, {
hasSun,
isPolar,
slant,
glyphHeightToWidth,
glyphEdgeCrop,
fade,
showComputationTexture,
raindropLength
raindropLength,
cycleStyle
}) => {
const matrixRenderer = {};
const camera = new THREE.OrthographicCamera( -0.5, 0.5, 0.5, -0.5, 0.0001, 10000 );
@@ -22,7 +26,7 @@ const makeMatrixRenderer = (renderer, texture, {
for (let i = 0; i < numColumns * numColumns; i++) {
pixels[i * 4 + 0] = 0;
pixels[i * 4 + 1] = showComputationTexture ? 0 : scramble(i);
pixels[i * 4 + 1] = scramble(i);
pixels[i * 4 + 2] = 0;
pixels[i * 4 + 3] = 0;
}
@@ -95,7 +99,13 @@ const glyphVariable = gpuCompute.addVariable(
brightness = mix(brightness, newBrightness, brightnessChangeBias);
#endif
float glyphCycleSpeed = (brightness <= 0.0) ? 0.0 : pow(1.0 - brightness, 4.0);
float glyphCycleSpeed = 0.0;
#ifdef cycleFasterWhenDimmed
if (brightness > 0.0) glyphCycleSpeed = pow(1.0 - brightness, 4.0);
#endif
#ifdef cycleRandomly
glyphCycleSpeed = 1.0; // TODO: should be similar to brightness
#endif
glyphCycle = fract(glyphCycle + deltaTime * cycleSpeed * 0.2 * glyphCycleSpeed);
float symbol = floor(glyphSequenceLength * glyphCycle);
float symbolX = mod(symbol, numFontColumns);
@@ -120,7 +130,8 @@ const glyphVariable = gpuCompute.addVariable(
);
gpuCompute.setVariableDependencies( glyphVariable, [ glyphVariable ] );
const brightnessChangeBias = (animationSpeed * fallSpeed) == 0 ? 1 : Math.min(1, Math.abs(animationSpeed * fallSpeed));
// const brightnessChangeBias = (animationSpeed * fallSpeed) == 0 ? 1 : Math.min(1, Math.abs(animationSpeed * fallSpeed));
const brightnessChangeBias = 1;
Object.assign(glyphVariable.material.uniforms, {
time: { type: "f", value: 0 },
deltaTime: { type: "f", value: 0.01 },
@@ -142,6 +153,17 @@ const glyphVariable = gpuCompute.addVariable(
glyphVariable.material.defines.showComputationTexture = 1.0;
}
switch (cycleStyle) {
case "cycleFasterWhenDimmed":
glyphVariable.material.defines.cycleFasterWhenDimmed = 1.0;
break;
case "cycleRandomly":
default:
glyphVariable.material.defines.cycleRandomly = 1.0;
break;
}
const error = gpuCompute.init();
if ( error !== null ) {
console.error( error );
@@ -159,7 +181,9 @@ const glyphVariable = gpuCompute.addVariable(
sharpness: { type: "f", value: sharpness },
numFontColumns: {type: "f", value: numFontColumns},
resolution: {type: "v2", value: new THREE.Vector2() },
slant: {type: "v2", value: new THREE.Vector2(Math.cos(slant), Math.sin(slant)) }
slant: {type: "v2", value: new THREE.Vector2(Math.cos(slant), Math.sin(slant)) },
glyphHeightToWidth: {type: "f", value: glyphHeightToWidth},
glyphEdgeCrop: {type: "f", value: glyphEdgeCrop},
},
vertexShader: `
attribute vec2 uv;
@@ -185,6 +209,8 @@ const glyphVariable = gpuCompute.addVariable(
uniform float numColumns;
uniform float numFontColumns;
uniform vec2 slant;
uniform float glyphHeightToWidth;
uniform float glyphEdgeCrop;
varying vec2 vUV;
float median(float r, float g, float b) {
@@ -207,6 +233,8 @@ const glyphVariable = gpuCompute.addVariable(
uv = vec2(angle / PI, 1.0 - pow(radius * 0.75, 0.6));
#endif
uv.y /= glyphHeightToWidth;
vec4 glyph = texture2D(glyphs, uv);
#ifdef showComputationTexture
@@ -216,8 +244,20 @@ const glyphVariable = gpuCompute.addVariable(
// Unpack the values from the glyph texture
float brightness = glyph.r;
#ifndef fade
if (brightness < -1.0) { discard; return; }
if (brightness > 0.55) {
brightness *= 2.0;
} else {
brightness = 0.25;
}
#endif
vec2 symbolUV = glyph.ba;
vec4 sample = texture2D(msdf, fract(uv * numColumns) / numFontColumns + symbolUV);
vec2 glyphUV = fract(uv * numColumns);
glyphUV -= 0.5;
glyphUV *= clamp(1.0 - glyphEdgeCrop, 0.0, 1.0);
glyphUV += 0.5;
vec4 sample = texture2D(msdf, glyphUV / numFontColumns + symbolUV);
// The rest is straight up MSDF
float sigDist = median(sample.r, sample.g, sample.b) - 0.5;
@@ -243,6 +283,11 @@ const glyphVariable = gpuCompute.addVariable(
mesh.material.defines.isPolar = 1.0;
}
console.log(fade);
if (fade) {
mesh.material.defines.fade = 1.0;
}
if (showComputationTexture) {
mesh.material.defines.showComputationTexture = 1.0;
}