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

The glyph textures can now be rectangular, I think.

Browse Source
This commit is contained in:
Rezmason
2021-12-06 22:44:18 -08:00
parent 577e94c7d1
commit 508c941fcd
4 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
js/config.js
View File

@@ -3,29 +3,29 @@ const fonts = {
// The script the Gnostic codices were written in // The script the Gnostic codices were written in
glyphTexURL: "assets/coptic_msdf.png", glyphTexURL: "assets/coptic_msdf.png",
glyphSequenceLength: 32, glyphSequenceLength: 32,
glyphTextureColumns: 8, glyphTextureGridSize: [8, 8],
}, },
gothic: { gothic: {
// The script the Codex Argenteus was written in // The script the Codex Argenteus was written in
glyphTexURL: "assets/gothic_msdf.png", glyphTexURL: "assets/gothic_msdf.png",
glyphSequenceLength: 27, glyphSequenceLength: 27,
glyphTextureColumns: 8, glyphTextureGridSize: [8, 8],
}, },
matrixcode: { matrixcode: {
// The glyphs seen in the film trilogy // The glyphs seen in the film trilogy
glyphTexURL: "assets/matrixcode_msdf.png", glyphTexURL: "assets/matrixcode_msdf.png",
glyphSequenceLength: 57, glyphSequenceLength: 57,
glyphTextureColumns: 8, glyphTextureGridSize: [8, 8],
}, },
huberfishA: { huberfishA: {
glyphTexURL: "assets/huberfish_a_msdf.png", glyphTexURL: "assets/huberfish_a_msdf.png",
glyphSequenceLength: 34, glyphSequenceLength: 34,
glyphTextureColumns: 6, glyphTextureGridSize: [6, 6],
}, },
huberfishD: { huberfishD: {
glyphTexURL: "assets/huberfish_d_msdf.png", glyphTexURL: "assets/huberfish_d_msdf.png",
glyphSequenceLength: 34, glyphSequenceLength: 34,
glyphTextureColumns: 6, glyphTextureGridSize: [6, 6],
}, },
}; };

2
js/regl/rainPass.js
View File

@@ -40,7 +40,7 @@ export default ({ regl, config }) => {
const showComputationTexture = config.effect === "none"; const showComputationTexture = config.effect === "none";
const commonUniforms = { const commonUniforms = {
...extractEntries(config, ["animationSpeed", "glyphHeightToWidth", "glyphSequenceLength", "glyphTextureColumns", "resurrectingCodeRatio"]), ...extractEntries(config, ["animationSpeed", "glyphHeightToWidth", "glyphSequenceLength", "glyphTextureGridSize", "resurrectingCodeRatio"]),
numColumns, numColumns,
numRows, numRows,
showComputationTexture, showComputationTexture,

9
shaders/glsl/rainPass.frag.glsl
View File

@@ -7,7 +7,8 @@ precision lowp float;
uniform sampler2D state; uniform sampler2D state;
uniform float numColumns, numRows; uniform float numColumns, numRows;
uniform sampler2D glyphTex; uniform sampler2D glyphTex;
uniform float glyphHeightToWidth, glyphSequenceLength, glyphTextureColumns, glyphEdgeCrop; uniform float glyphHeightToWidth, glyphSequenceLength, glyphEdgeCrop;
uniform vec2 glyphTextureGridSize;
uniform vec2 slantVec; uniform vec2 slantVec;
uniform float slantScale; uniform float slantScale;
uniform bool isPolar; uniform bool isPolar;
@@ -24,8 +25,8 @@ float median3(vec3 i) {
vec2 getSymbolUV(float glyphCycle) { vec2 getSymbolUV(float glyphCycle) {
float symbol = floor(glyphSequenceLength * glyphCycle); float symbol = floor(glyphSequenceLength * glyphCycle);
float symbolX = mod(symbol, glyphTextureColumns); float symbolX = mod(symbol, glyphTextureGridSize.x);
float symbolY = glyphTextureColumns - floor(symbol / glyphTextureColumns); float symbolY = floor(symbol / glyphTextureGridSize.y);
return vec2(symbolX, symbolY); return vec2(symbolX, symbolY);
} }
@@ -71,7 +72,7 @@ void main() {
glyphUV -= 0.5; glyphUV -= 0.5;
glyphUV *= clamp(1.0 - glyphEdgeCrop, 0.0, 1.0); glyphUV *= clamp(1.0 - glyphEdgeCrop, 0.0, 1.0);
glyphUV += 0.5; glyphUV += 0.5;
vec2 msdfUV = (glyphUV + symbolUV) / glyphTextureColumns; vec2 msdfUV = (glyphUV + symbolUV) / glyphTextureGridSize;
// MSDF: calculate brightness of fragment based on distance to shape // MSDF: calculate brightness of fragment based on distance to shape
vec3 dist = texture2D(glyphTex, msdfUV).rgb; vec3 dist = texture2D(glyphTex, msdfUV).rgb;

8
shaders/wgsl/rainPass.wgsl
View File

@@ -5,7 +5,7 @@
// common properties used for compute and rendering // common properties used for compute and rendering
animationSpeed : f32; animationSpeed : f32;
glyphSequenceLength : i32; glyphSequenceLength : i32;
glyphTextureColumns : i32; glyphTextureGridSize : vec2<i32>;
glyphHeightToWidth : f32; glyphHeightToWidth : f32;
resurrectingCodeRatio : f32; resurrectingCodeRatio : f32;
gridSize : vec2<f32>; gridSize : vec2<f32>;
@@ -361,8 +361,8 @@ fn median3(i : vec3<f32>) -> f32 {
fn getSymbolUV(glyphCycle : f32) -> vec2<f32> { fn getSymbolUV(glyphCycle : f32) -> vec2<f32> {
var symbol = i32(f32(config.glyphSequenceLength) * glyphCycle); var symbol = i32(f32(config.glyphSequenceLength) * glyphCycle);
var symbolX = symbol % config.glyphTextureColumns; var symbolX = symbol % config.glyphTextureGridSize.x;
var symbolY = symbol / config.glyphTextureColumns; var symbolY = symbol / config.glyphTextureGridSize.y;
return vec2<f32>(f32(symbolX), f32(symbolY)); return vec2<f32>(f32(symbolX), f32(symbolY));
} }
@@ -420,7 +420,7 @@ fn getSymbolUV(glyphCycle : f32) -> vec2<f32> {
glyphUV = glyphUV - 0.5; glyphUV = glyphUV - 0.5;
glyphUV = glyphUV * clamp(1.0 - config.glyphEdgeCrop, 0.0, 1.0); glyphUV = glyphUV * clamp(1.0 - config.glyphEdgeCrop, 0.0, 1.0);
glyphUV = glyphUV + 0.5; glyphUV = glyphUV + 0.5;
var msdfUV = (glyphUV + symbolUV) / f32(config.glyphTextureColumns); var msdfUV = (glyphUV + symbolUV) / vec2<f32>(config.glyphTextureGridSize);
// MSDF : calculate brightness of fragment based on distance to shape // MSDF : calculate brightness of fragment based on distance to shape
var dist = textureSample(msdfTexture, linearSampler, msdfUV).rgb; var dist = textureSample(msdfTexture, linearSampler, msdfUV).rgb;