HN Explorer

Show HN: textshader.com (textshader.com)

260 points by ladberg ↗ HN
TLDR: Click the link to see some cool visualizations, refresh a few times for random examples, and try editing some of the code yourself.

This is a small weekend project of mine inspired by shadertoy.com

It's a static single-page site hosted on GitHub pages so the website design is pretty barebones. I'm not a web developer so I mainly wanted to create a Cool Thing with my free time and not have to learn tons of front-end to do it.

I'd love to hear what people think about it and please post or send me any shaders you make! You can use the link button in the bottom right to share.

I hope that this gets more people interested in shaders because GPU programming is a pretty different paradigm and learning it has made me a better software engineer even though my current job doesn't touch it. That said, textshader only runs normal Javascript on the CPU so think of it like a simplified sandbox and not the real thing. I'd highly recommend checking out shadertoy to level up to the real deal too!

21 comments

[ 5.2 ms ] story [ 58.3 ms ] thread
delusional
That's a fun idea that I've never considered. Good job creating it!
freeCandy
Love it. I've recently gotten very interested in textmode graphics and trying to learn more. Especially how ascii could be used to render 3d graphics.

My favorite example is asciicker by @MrGumix on twitter: http://asciicker.com/y6 (press q & e)

arnley
asciicker is absolutely stunning :o
smcameron
Ooh, Q and W rotate the view, neat.
ladberg
Thanks! That's a very cool game, definitely a good example of the multiple orders-of-magnitude speedup you can get by using wasm+webgl+canvas instead of my current method of eval()ing JS and writing text in the DOM.
smcl
I love the look, I wish I knew what I was actually doing :D
heystefan
That's really cool. Played around a bit, love it!

Full screen also looks great, I can imagine it being a screen saver.

wayvey
Great project! The effect making the text look like an oldschool terminal is brilliant. Love how simple it actually is but achieves a great aesthetic. I'm making a retro game for browsers and might use something like that. Nice!
RugnirViking
very interesting. I'd love a tutorial or blogpost about some of the stuff behind this too, I got into shaders a little while back but never more than pushing pixels, no idea how you would do fonts/text
ladberg
Thanks! Maybe I'll write up a blog post when I have the time.

This is actually much simpler than "pushing pixels" because the shader outputs a value that is just directly mapped to a char to display on screen, which means I'm just using the browser's native text rendering to render the image.

nzoschke
Love it! Some feedback...

I'm getting an "Error" when clicking the share button.

The full screen option looks amazing, but I missed it on my first few sessions of paying. Adding the text to the buttons might be more instructive than hiding it behind a tool tip.

Is the source available? Would be interesting to see under the hood too.

ladberg
Thanks for the feedback!

It looks like I got rate limited by pastebin for storing shaders so I'll have to go hunt down a non-free solution or host a backend myself to get it to work.

The source is just the single page, feel free to inspect and download it but ignore any bad coding standards you may see :)

nzoschke
Of course, view source! Might be another “feature” to advertise on the page somehow.

I have a mini side project with some user generated content to save.

I ended up with good old S3. It’s not free, and it might require a server to facilitate stuff with the secret access key to write data. But it could be pennys with Lambda and S3 and AWSs metered billing and free tier.

mrozbarry
Well, Firefox absolutely hates the SSL cert and detects this website as dangerous. Was it compromised?
mcluck
I just ran it in FF Mobile. No complaints