4 ms·

If anyone wants to try this, work through the artithmetic, it’s incredibly easy (and a fun Saturday morning exercise if you’re into this kind of thing) to code

by dahart 2y ago

If anyone wants to try this, work through the artithmetic, it’s incredibly easy (and a fun Saturday morning exercise if you’re into this kind of thing) to code up on ShaderToy. From scratch is fun, but if you need a hint to get started I just made one https://www.shadertoy.com/view/Mc3cW2 https://www.shadertoy.com/view/Mc3cW2 and there are a bunch of super clever text hacks other people have done like this Matrix in less than 300 characters https://www.shadertoy.com/view/llXSzj https://www.shadertoy.com/view/llXSzj or green CRT display effect https://www.shadertoy.com/view/XtfSD8 https://www.shadertoy.com/view/XtfSD8. Loads of other examples abound if you look around.

0x1ceb00da 2y ago
I've never been able to make text look good at small sizes whenever I've tried immediate mode text rendering. Even in the first shadertoy, in vec2(30, -30), if you change 30 to 300, you'll see some artifacts. Is there a trick to getting that right? For me, multisampling the texture inside fragment shader appears to work the best, although it still isn't as good as the state of the art.
- dahart 2y ago
  Yeah for that you want to do something better than the nearest neighbor sampling I did there. Multisampling can help but there are definitely some other alternatives. This is where the texture/atlas method the author avoided comes in very handy, because it typically comes with mip-mapping which will help small text look good. There are also analytic stroke drawing methods, though even that isn’t perfect (it always depends on your choice of filter and what actual display you use, and what your goals are, etc.) ShaderToy comes with a texture atlas built in. I have one or two examples of that, for example https://www.shadertoy.com/view/ltBfDD https://www.shadertoy.com/view/ltBfDD In addition to mipmap textures, there are other pseudo antialiasing methods people use on ShaderToy, for example when doing 2d stuff you can use the pixel derivative to make 1 pixel wide blending functions, and use it to antialias hard edges. Example https://www.shadertoy.com/view/MtyyRc https://www.shadertoy.com/view/MtyyRc
hnisoss 2y ago
offtopic but interesting, matrix effect in HTML/CSS/JS, 1024 bytes, ``` <head><style>{margin:0;padding:0;line-height:1;overflow:hidden;}div{width:1em;position:absolute;}</style><script> w=window;n=w.innerWidth;m=w.innerHeight;d=document;q="px";function z(a,b){return Math.floor(Math.random()(b-a)+a)}f=" 0123456789";for(i=0;i<45;i++)f+=String.fromCharCode(i+65393);function g(){for(i=0;i<90;i++){r=d.createElement("div");for(j=z(20,50);j;j--){x=d.createElement("pre");y=d.createTextNode(f[z(0,56)]);x.appendChild(y);x.style.opacity=0;r.appendChild(x)}r.id="r"+i;r.t=z(-99,0);with(r.style){left=z(0,n)+q;top=z(-m,0)+q;fontSize=z(10,25)+q}d.body.appendChild(r);setInterval("u("+i+")",z(60,120))}}function u(j){e=d.getElementById("r"+j);c=e.childNodes;t=e.t+1;if((v=t-c.length-50)>0){if((e.style.opacity=1-v/32)==0){for(f in c)if(c[f].style)c[f].style.opacity=0;with(e.style){left=z(0,n)+q;top=z(-m/2,m/2)+q;opacity=1}t=-50}}e.t=t;if(t<0||t>c.length+12)return;for(f=t;f&&f>t-12;f--){s=1-(t-f)/16;if(f<c.length&&c[f].style){c[f].style.opacity=s;}}} </script><body text=#0f0 bgcolor=#000 onload=g()> ``` https://codegolf.stackexchange.com/a/17414 https://codegolf.stackexchange.com/a/17414
animal531 2y ago
I work in game dev in Unity and oh boy are they all backwards. Some years ago they bought the best font rendering tool that a guy had written and incorporated it natively. Of course after that all work on it pretty much stopped and it killed the competitive font rendering market. The other day I wanted to try and make an app that looks as if its using a native console font and I had to fiddle for 2+ hours to just get it to about 90% of the way there.

by dahart 2y ago

0x1ceb00da 2y ago

I've never been able to make text look good at small sizes whenever I've tried immediate mode text rendering. Even in the first shadertoy, in vec2(30, -30), if you change 30 to 300, you'll see some artifacts. Is there a trick to getting that right? For me, multisampling the texture inside fragment shader appears to work the best, although it still isn't as good as the state of the art.

dahart 2y ago
Yeah for that you want to do something better than the nearest neighbor sampling I did there. Multisampling can help but there are definitely some other alternatives. This is where the texture/atlas method the author avoided comes in very handy, because it typically comes with mip-mapping which will help small text look good. There are also analytic stroke drawing methods, though even that isn’t perfect (it always depends on your choice of filter and what actual display you use, and what your goals are, etc.) ShaderToy comes with a texture atlas built in. I have one or two examples of that, for example https://www.shadertoy.com/view/ltBfDD https://www.shadertoy.com/view/ltBfDD In addition to mipmap textures, there are other pseudo antialiasing methods people use on ShaderToy, for example when doing 2d stuff you can use the pixel derivative to make 1 pixel wide blending functions, and use it to antialias hard edges. Example https://www.shadertoy.com/view/MtyyRc https://www.shadertoy.com/view/MtyyRc

hnisoss 2y ago

offtopic but interesting, matrix effect in HTML/CSS/JS, 1024 bytes, ``` <head><style>{margin:0;padding:0;line-height:1;overflow:hidden;}div{width:1em;position:absolute;}</style><script> w=window;n=w.innerWidth;m=w.innerHeight;d=document;q="px";function z(a,b){return Math.floor(Math.random()(b-a)+a)}f=" 0123456789";for(i=0;i<45;i++)f+=String.fromCharCode(i+65393);function g(){for(i=0;i<90;i++){r=d.createElement("div");for(j=z(20,50);j;j--){x=d.createElement("pre");y=d.createTextNode(f[z(0,56)]);x.appendChild(y);x.style.opacity=0;r.appendChild(x)}r.id="r"+i;r.t=z(-99,0);with(r.style){left=z(0,n)+q;top=z(-m,0)+q;fontSize=z(10,25)+q}d.body.appendChild(r);setInterval("u("+i+")",z(60,120))}}function u(j){e=d.getElementById("r"+j);c=e.childNodes;t=e.t+1;if((v=t-c.length-50)>0){if((e.style.opacity=1-v/32)==0){for(f in c)if(c[f].style)c[f].style.opacity=0;with(e.style){left=z(0,n)+q;top=z(-m/2,m/2)+q;opacity=1}t=-50}}e.t=t;if(t<0||t>c.length+12)return;for(f=t;f&&f>t-12;f--){s=1-(t-f)/16;if(f<c.length&&c[f].style){c[f].style.opacity=s;}}} </script><body text=#0f0 bgcolor=#000 onload=g()> ``` https://codegolf.stackexchange.com/a/17414 https://codegolf.stackexchange.com/a/17414

animal531 2y ago

I work in game dev in Unity and oh boy are they all backwards. Some years ago they bought the best font rendering tool that a guy had written and incorporated it natively. Of course after that all work on it pretty much stopped and it killed the competitive font rendering market. The other day I wanted to try and make an app that looks as if its using a native console font and I had to fiddle for 2+ hours to just get it to about 90% of the way there.