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

Fixed SDF math; texture dimensions were accessed before they loaded in the REGL-based renderer

Browse Source
This commit is contained in:
Rezmason
2022-10-04 21:46:26 -07:00
parent b86b97fde9
commit 4f257b87f7
4 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
js/regl/rainPass.js
View File

@@ -190,8 +190,8 @@ export default ({ regl, config, lkg }) => {
glintTexture: glintTexture.texture, glintTexture: glintTexture.texture,
msdfPxRange: 4.0, msdfPxRange: 4.0,
glyphMSDFSize: [glyphMSDF.width(), glyphMSDF.height()], glyphMSDFSize: () => [glyphMSDF.width(), glyphMSDF.height()],
glintMSDFSize: [glintMSDF.width(), glintMSDF.height()], glintMSDFSize: () => [glintMSDF.width(), glintMSDF.height()],
camera: regl.prop("camera"), camera: regl.prop("camera"),
transform: regl.prop("transform"), transform: regl.prop("transform"),

14
js/regl/utils.js
View File

@@ -36,8 +36,18 @@ const loadImage = (regl, url) => {
} }
return texture; return texture;
}, },
width: () => (loaded ? texture.width : 1), width: () => {
height: () => (loaded ? texture.height : 1), if (!loaded && url != null) {
console.warn(`texture still loading: ${url}`);
}
return loaded ? texture.width : 1;
},
height: () => {
if (!loaded && url != null) {
console.warn(`texture still loading: ${url}`);
}
return loaded ? texture.height : 1;
},
loaded: (async () => { loaded: (async () => {
if (url != null) { if (url != null) {
const data = new Image(); const data = new Image();

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

@@ -117,7 +117,7 @@ vec2 getSymbol(vec2 uv, float index) {
// MSDF: calculate brightness of fragment based on distance to shape // MSDF: calculate brightness of fragment based on distance to shape
vec2 symbol; vec2 symbol;
{ {
vec2 unitRange = vec2(msdfPxRange) / (glyphMSDFSize * 1000.); // Not sure why this x1000 softening is necessary vec2 unitRange = vec2(msdfPxRange) / glyphMSDFSize;
vec2 screenTexSize = vec2(1.0) / fwidth(uv); vec2 screenTexSize = vec2(1.0) / fwidth(uv);
float screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0); float screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0);
@@ -127,7 +127,7 @@ vec2 getSymbol(vec2 uv, float index) {
} }
if (isolateGlint) { if (isolateGlint) {
vec2 unitRange = vec2(msdfPxRange) / (glintMSDFSize * 1000.); // Not sure why this x1000 softening is necessary vec2 unitRange = vec2(msdfPxRange) / glintMSDFSize;
vec2 screenTexSize = vec2(1.0) / fwidth(uv); vec2 screenTexSize = vec2(1.0) / fwidth(uv);
float screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0); float screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0);

7
shaders/wgsl/rainPass.wgsl
View File

@@ -499,15 +499,14 @@ fn getSymbol(cellUV : vec2<f32>, index : i32) -> vec2<f32> {
uv += 0.5; uv += 0.5;
uv = (uv + getSymbolUV(index)) / vec2<f32>(config.glyphTextureGridSize); uv = (uv + getSymbolUV(index)) / vec2<f32>(config.glyphTextureGridSize);
var symbol = vec2<f32>();
// MSDF: calculate brightness of fragment based on distance to shape // MSDF: calculate brightness of fragment based on distance to shape
var symbol = vec2<f32>();
{ {
// var dist = textureSample(glyphMSDFTexture, linearSampler, uv).rgb; // var dist = textureSample(glyphMSDFTexture, linearSampler, uv).rgb;
// var sigDist = median3(dist) - 0.5; // var sigDist = median3(dist) - 0.5;
// symbol.r = clamp(sigDist / fwidth(sigDist) + 0.5, 0.0, 1.0); // symbol.r = clamp(sigDist / fwidth(sigDist) + 0.5, 0.0, 1.0);
var unitRange = vec2<f32>(config.msdfPxRange) / (vec2<f32>(textureDimensions(glyphMSDFTexture)) * 1000.0); // Not sure why this x1000 softening is necessary var unitRange = vec2<f32>(config.msdfPxRange) / vec2<f32>(textureDimensions(glyphMSDFTexture));
var screenTexSize = vec2<f32>(1.0) / fwidth(uv); var screenTexSize = vec2<f32>(1.0) / fwidth(uv);
var screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0); var screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0);
@@ -521,7 +520,7 @@ fn getSymbol(cellUV : vec2<f32>, index : i32) -> vec2<f32> {
// var sigDist = median3(dist) - 0.5; // var sigDist = median3(dist) - 0.5;
// symbol.g = clamp(sigDist / fwidth(sigDist) + 0.5, 0.0, 1.0); // symbol.g = clamp(sigDist / fwidth(sigDist) + 0.5, 0.0, 1.0);
var unitRange = vec2<f32>(config.msdfPxRange) / (vec2<f32>(textureDimensions(glintMSDFTexture)) * 1000.0); // Not sure why this x1000 softening is necessary var unitRange = vec2<f32>(config.msdfPxRange) / vec2<f32>(textureDimensions(glintMSDFTexture));
var screenTexSize = vec2<f32>(1.0) / fwidth(uv); var screenTexSize = vec2<f32>(1.0) / fwidth(uv);
var screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0); var screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0);