eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-17 05:49: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
glyphTexURL: "assets/coptic_msdf.png",
glyphSequenceLength: 32,
glyphTextureColumns: 8,
glyphTextureGridSize: [8, 8],
},
gothic: {
// The script the Codex Argenteus was written in
glyphTexURL: "assets/gothic_msdf.png",
glyphSequenceLength: 27,
glyphTextureColumns: 8,
glyphTextureGridSize: [8, 8],
},
matrixcode: {
// The glyphs seen in the film trilogy
glyphTexURL: "assets/matrixcode_msdf.png",
glyphSequenceLength: 57,
glyphTextureColumns: 8,
glyphTextureGridSize: [8, 8],
},
huberfishA: {
glyphTexURL: "assets/huberfish_a_msdf.png",
glyphSequenceLength: 34,
glyphTextureColumns: 6,
glyphTextureGridSize: [6, 6],
},
huberfishD: {
glyphTexURL: "assets/huberfish_d_msdf.png",
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 commonUniforms = {
...extractEntries(config, ["animationSpeed", "glyphHeightToWidth", "glyphSequenceLength", "glyphTextureColumns", "resurrectingCodeRatio"]),
...extractEntries(config, ["animationSpeed", "glyphHeightToWidth", "glyphSequenceLength", "glyphTextureGridSize", "resurrectingCodeRatio"]),
numColumns,
numRows,
showComputationTexture,

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

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

8
shaders/wgsl/rainPass.wgsl
View File

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