diff --git a/index.html b/index.html index 6fee23d..d46896b 100644 --- a/index.html +++ b/index.html @@ -174,7 +174,6 @@ const version = versions[getParam("version", "1999")] || versions["1999"]; - const sharpness = parseFloat(getParam("sharpness", 0.5)); const animationSpeed = parseFloat(getParam("animationSpeed", 1)); const fallSpeed = parseFloat(getParam("fallSpeed", 1)) * version.fallSpeed; const cycleSpeed = parseFloat(getParam("cycleSpeed", 1)) * version.cycleSpeed; @@ -215,7 +214,6 @@ numColumns, numFontColumns, raindropLength, - sharpness, showComputationTexture: effect === "none", slant, }); @@ -263,11 +261,11 @@ composer.passes[composer.passes.length - 1].renderToScreen = true; const windowResize = () => { - const [width, height] = [window.innerWidth, window.innerHeight]; + const [width, height, pixelRatio] = [window.innerWidth, window.innerHeight, window.devicePixelRatio]; matrixRenderer.resize(width, height); renderer.setSize(width, height); - composer.setSize(width, height); - bloomPass.setSize( window.innerWidth, window.innerHeight ); + composer.setSize(width * pixelRatio, height * pixelRatio); + bloomPass.setSize( window.innerWidth * pixelRatio, window.innerHeight * pixelRatio ); } window.addEventListener("resize", windowResize, false); window.addEventListener("orientationchange", windowResize, false); diff --git a/js/MatrixRenderer.js b/js/MatrixRenderer.js index ef15a50..5701d1e 100644 --- a/js/MatrixRenderer.js +++ b/js/MatrixRenderer.js @@ -1,6 +1,5 @@ const makeMatrixRenderer = (renderer, { fontTexture, - sharpness, numColumns, animationSpeed, fallSpeed, cycleSpeed, glyphSequenceLength, @@ -178,7 +177,6 @@ const glyphVariable = gpuCompute.addVariable( glyphs: { type: "t", value: glyphRTT }, msdf: { type: "t", value: fontTexture }, numColumns: {type: "f", value: numColumns}, - 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)) }, @@ -201,9 +199,7 @@ const glyphVariable = gpuCompute.addVariable( #extension GL_OES_standard_derivatives: enable #endif precision lowp float; - #define BIG_ENOUGH 0.001 - #define MODIFIED_ALPHATEST (0.02 * isBigEnough / BIG_ENOUGH) - uniform float sharpness; + uniform sampler2D msdf; uniform sampler2D glyphs; uniform float numColumns; @@ -262,16 +258,7 @@ const glyphVariable = gpuCompute.addVariable( // The rest is straight up MSDF float sigDist = median(sample.r, sample.g, sample.b) - 0.5; float alpha = clamp(sigDist/fwidth(sigDist) + 0.5, 0.0, 1.0); - float dscale = 0.353505 / sharpness; - vec2 duv = dscale * (dFdx(uv) + dFdy(uv)); - float isBigEnough = max(abs(duv.x), abs(duv.y)); - if (isBigEnough > BIG_ENOUGH) { - float ratio = BIG_ENOUGH / isBigEnough; - alpha = ratio * alpha + (1.0 - ratio) * (sigDist + 0.5); - } - if (isBigEnough <= BIG_ENOUGH && alpha < 0.5) { discard; return; } - if (alpha < 0.5 * MODIFIED_ALPHATEST) { discard; return; } gl_FragColor = vec4(vec3(brightness * alpha), 1.0); } `