mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-14 12:29:30 -07:00
Organized the version parameters. Combined font data together.
This commit is contained in:
Rezmason
150
index.html
150
index.html
@@ -24,16 +24,39 @@
|
||||
|
||||
<script>
|
||||
|
||||
const fonts = {
|
||||
coptic: {
|
||||
textureURL: "./coptic_msdf.png",
|
||||
sequenceLength: 32
|
||||
},
|
||||
gothic: {
|
||||
textureURL: "./gothic_msdf.png",
|
||||
sequenceLength: 27
|
||||
},
|
||||
matrixcode: {
|
||||
textureURL: "./matrixcode_msdf.png",
|
||||
sequenceLength: 57
|
||||
},
|
||||
};
|
||||
|
||||
const versions = {
|
||||
paradise: {
|
||||
fontTexture: "./coptic_msdf.png",
|
||||
raindropLength: 0.5,
|
||||
glyphSequenceLength: 32,
|
||||
bloom: {
|
||||
strength: 4,
|
||||
radius: 1,
|
||||
strength: 4,
|
||||
threshold: 0
|
||||
},
|
||||
cycleSpeed: 0.05,
|
||||
cycleStyle: "cycleFasterWhenDimmed",
|
||||
fade: true,
|
||||
fallSpeed: 0.05,
|
||||
font: fonts.coptic,
|
||||
glyphEdgeCrop: 0.0,
|
||||
glyphHeightToWidth:1,
|
||||
hasSun: true,
|
||||
hasThunder: false,
|
||||
isPolar: true,
|
||||
numColumns: 50,
|
||||
palette: [
|
||||
{r: 0.00, g: 0.00, b: 0.00, at: 0.0},
|
||||
{r: 0.52, g: 0.17, b: 0.05, at: 0.4},
|
||||
@@ -41,27 +64,26 @@
|
||||
{r: 1.00, g: 0.74, b: 0.29, at: 0.9},
|
||||
{r: 1.00, g: 1.00, b: 1.00, at: 1.0},
|
||||
],
|
||||
fallSpeed: 0.05,
|
||||
cycleSpeed: 0.05,
|
||||
hasThunder: false,
|
||||
hasSun: true,
|
||||
raindropLength: 0.5,
|
||||
slant: 0,
|
||||
glyphEdgeCrop: 0.0,
|
||||
glyphHeightToWidth:1,
|
||||
isPolar: true,
|
||||
numColumns: 50,
|
||||
fade: true,
|
||||
cycleStyle: "cycleFasterWhenDimmed"
|
||||
},
|
||||
nightmare: {
|
||||
fontTexture: "./gothic_msdf.png",
|
||||
raindropLength: 0.6,
|
||||
glyphSequenceLength: 27,
|
||||
bloom: {
|
||||
strength: 2,
|
||||
radius: 0.8,
|
||||
strength: 2,
|
||||
threshold: 0.5
|
||||
},
|
||||
cycleSpeed: 0.02,
|
||||
cycleStyle: "cycleFasterWhenDimmed",
|
||||
fade: true,
|
||||
fallSpeed: 2.0,
|
||||
font: fonts.gothic,
|
||||
glyphEdgeCrop: 0.0,
|
||||
glyphHeightToWidth:1,
|
||||
hasSun: false,
|
||||
hasThunder: true,
|
||||
isPolar: false,
|
||||
numColumns: 60,
|
||||
palette: [
|
||||
{r: 0.00, g: 0.00, b: 0.00, at: 0.0},
|
||||
{r: 0.52, g: 0.00, b: 0.00, at: 0.2},
|
||||
@@ -69,27 +91,26 @@
|
||||
{r: 1.00, g: 0.60, b: 0.30, at: 0.8},
|
||||
{r: 1.00, g: 1.00, b: 0.90, at: 1.0},
|
||||
],
|
||||
fallSpeed: 2.0,
|
||||
cycleSpeed: 0.02,
|
||||
hasThunder: true,
|
||||
hasSun: false,
|
||||
raindropLength: 0.6,
|
||||
slant: 360 / 16,
|
||||
glyphEdgeCrop: 0.0,
|
||||
glyphHeightToWidth:1,
|
||||
isPolar: false,
|
||||
numColumns: 60,
|
||||
fade: true,
|
||||
cycleStyle: "cycleFasterWhenDimmed"
|
||||
},
|
||||
["1999"]: {
|
||||
fontTexture: "./matrixcode_msdf.png",
|
||||
raindropLength: 1,
|
||||
glyphSequenceLength: 57,
|
||||
bloom: {
|
||||
strength: 2,
|
||||
radius: 0.5,
|
||||
strength: 2,
|
||||
threshold: 0.3
|
||||
},
|
||||
cycleSpeed: 1,
|
||||
cycleStyle: "cycleFasterWhenDimmed",
|
||||
fade: true,
|
||||
fallSpeed: 1,
|
||||
font: fonts.matrixcode,
|
||||
glyphEdgeCrop: 0.0,
|
||||
glyphHeightToWidth:1,
|
||||
hasSun: false,
|
||||
hasThunder: false,
|
||||
isPolar: false,
|
||||
numColumns: 80,
|
||||
palette: [
|
||||
{r: 0/255, g: 0/255, b: 0/255, at: 0/16},
|
||||
{r: 6/255, g: 16/255, b: 8/255, at: 1/16},
|
||||
@@ -109,43 +130,33 @@
|
||||
{r: 129/255, g: 232/255, b: 148/255, at: 15/16},
|
||||
{r: 140/255, g: 235/255, b: 157/255, at: 16/16},
|
||||
],
|
||||
fallSpeed: 1,
|
||||
cycleSpeed: 1,
|
||||
hasThunder: false,
|
||||
hasSun: false,
|
||||
raindropLength: 1,
|
||||
slant: 0,
|
||||
glyphEdgeCrop: 0.0,
|
||||
glyphHeightToWidth:1,
|
||||
isPolar: false,
|
||||
numColumns: 80,
|
||||
fade: true,
|
||||
cycleStyle: "cycleFasterWhenDimmed"
|
||||
},
|
||||
throwback: {
|
||||
fontTexture: "./matrixcode_msdf.png",
|
||||
raindropLength: 1.5,
|
||||
glyphSequenceLength: 57,
|
||||
bloom: {
|
||||
strength: 1,
|
||||
radius: 0.4,
|
||||
strength: 1,
|
||||
threshold: 0.0
|
||||
},
|
||||
cycleSpeed: 0.4,
|
||||
cycleStyle: "cycleRandomly",
|
||||
fade: false,
|
||||
fallSpeed: 0.6,
|
||||
font: fonts.matrixcode,
|
||||
glyphEdgeCrop: 0.15,
|
||||
glyphHeightToWidth:1.5,
|
||||
hasSun: false,
|
||||
hasThunder: false,
|
||||
isPolar: false,
|
||||
numColumns: 90,
|
||||
palette: [
|
||||
{r: 0.00, g: 0.00, b: 0.00, at: 0.0},
|
||||
{r: 0.30, g: 0.90, b: 0.35, at: 0.5},
|
||||
{r: 0.90, g: 1.00, b: 0.90, at: 1.0},
|
||||
],
|
||||
fallSpeed: 0.6,
|
||||
cycleSpeed: 0.4,
|
||||
hasThunder: false,
|
||||
hasSun: false,
|
||||
raindropLength: 1.5,
|
||||
slant: 0,
|
||||
glyphEdgeCrop: 0.15,
|
||||
glyphHeightToWidth:1.5,
|
||||
isPolar: false,
|
||||
numColumns: 90,
|
||||
fade: false,
|
||||
cycleStyle: "cycleRandomly"
|
||||
}
|
||||
};
|
||||
|
||||
@@ -188,24 +199,25 @@
|
||||
element.appendChild(renderer.domElement);
|
||||
const composer = new THREE.EffectComposer( renderer );
|
||||
|
||||
const fontTexture = new THREE.TextureLoader().load( version.fontTexture );
|
||||
const fontTexture = new THREE.TextureLoader().load( version.font.textureURL );
|
||||
|
||||
const matrixRenderer = makeMatrixRenderer(renderer, fontTexture, {
|
||||
sharpness,
|
||||
numColumns,
|
||||
const matrixRenderer = makeMatrixRenderer(renderer, {
|
||||
animationSpeed, fallSpeed, cycleSpeed,
|
||||
glyphSequenceLength,
|
||||
numFontColumns,
|
||||
hasThunder: version.hasThunder,
|
||||
hasSun: version.hasSun,
|
||||
isPolar: version.isPolar,
|
||||
slant,
|
||||
cycleStyle: version.cycleStyle,
|
||||
fade,
|
||||
fontTexture,
|
||||
glyphSequenceLength: version.font.sequenceLength,
|
||||
glyphEdgeCrop,
|
||||
glyphHeightToWidth,
|
||||
fade,
|
||||
showComputationTexture: effect === "none",
|
||||
hasSun: version.hasSun,
|
||||
hasThunder: version.hasThunder,
|
||||
isPolar: version.isPolar,
|
||||
numColumns,
|
||||
numFontColumns,
|
||||
raindropLength,
|
||||
cycleStyle: version.cycleStyle
|
||||
sharpness,
|
||||
showComputationTexture: effect === "none",
|
||||
slant,
|
||||
});
|
||||
|
||||
matrixRenderer.pass.renderToScreen = false;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
const makeMatrixRenderer = (renderer, texture, {
|
||||
const makeMatrixRenderer = (renderer, {
|
||||
fontTexture,
|
||||
sharpness,
|
||||
numColumns,
|
||||
animationSpeed, fallSpeed, cycleSpeed,
|
||||
@@ -176,7 +177,7 @@ const glyphVariable = gpuCompute.addVariable(
|
||||
new THREE.RawShaderMaterial({
|
||||
uniforms: {
|
||||
glyphs: { type: "t", value: glyphRTT },
|
||||
msdf: { type: "t", value: texture },
|
||||
msdf: { type: "t", value: fontTexture },
|
||||
numColumns: {type: "f", value: numColumns},
|
||||
sharpness: { type: "f", value: sharpness },
|
||||
numFontColumns: {type: "f", value: numFontColumns},
|
||||
@@ -242,7 +243,7 @@ const glyphVariable = gpuCompute.addVariable(
|
||||
return;
|
||||
#endif
|
||||
|
||||
// Unpack the values from the glyph texture
|
||||
// Unpack the values from the font texture
|
||||
float brightness = glyph.r;
|
||||
#ifndef fade
|
||||
if (brightness < -1.0) { discard; return; }
|
||||
@@ -283,7 +284,6 @@ const glyphVariable = gpuCompute.addVariable(
|
||||
mesh.material.defines.isPolar = 1.0;
|
||||
}
|
||||
|
||||
console.log(fade);
|
||||
if (fade) {
|
||||
mesh.material.defines.fade = 1.0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user