Shadertoy + Web fonts + Three = Fonted.io

Showcase
1

Shadertoy + web fonts idea which was stuck in my head for a long, long time and finally thanks to sickness I found some time to build it. The first version
http://fonted.io

Uses opentype.js and Three to generate the geometry from a font and then allows exporting standalone pure webgl2 with webgl fallback in self-contained HTML. Complete exported file takes only around 9kb - 50kb+ when gzipped depending on font and shaders complexity.

Exactly 10 years ago I made fontsforweb.com + Wordpress plugin(0.5 million downloads) and Fonted project is using fonts browser recycled from the plugin.

Feel free to make accounts and add your shaders but data may be lost due to constant changes

2 Likes
2

This is great, thanks for sharing!

I guess the shaders you can copy from Shadertoy are limited? For example, how does it handle image or video input?

Your exported file has the most stripped down version of three.js I’ve ever seen, good job :rofl:

 THREE = {
    Vector3: function(x,y,z) {return {x,y,z};},
    Vector2: function(x,y) {return {x,y};}
  };
3 Likes
3

Thanks!
Currently only the presets with no additional channels are supported. Locally I have a Three ShaderMaterial which supports additional channels like textures, but hardcoded and not editable so I wanted to limit the feature creep and get something out for the people to see.

That stripped down version is because the original version is working inside ShaderMaterial and thanks to this little shim I was able to make the shader work in pure webgl without destroying compatiblity with Three.js. The goal is to have a system that allows these cool fonts to be easily embeddable in existing Three scenes(i.e. glowing fascia signs in 3d environments) and that’s how my initial prototype worked for the engine I’ve been building with my brother for a long time http://bad.city. Another major goal is to have a tiny self-contained HTML using pure WebGL, without dependencies. This can be easily pasted in websites or maybe even PowerPoint presentations(using HTML plugin) or in kiosk mode for cool effects in expos, shops or night clubs.