Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Show HN: textshader.com (textshader.com)
260 points by ladberg on Nov 7, 2022 | hide | past | favorite | 21 comments
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!



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)


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.


asciicker is absolutely stunning :o


I love the look, I wish I knew what I was actually doing :D


Ooh, Q and W rotate the view, neat.


Reminds me of https://play.ertdfgcvb.xyz by user @ertdfgcvb on Twitter.


This is awesome! It also made me think of https://play.ertdfgcvb.xyz/

How do I learn the basics of creating these kinds of shaders?


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.


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 :)


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.


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!


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


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.


That's a fun idea that I've never considered. Good job creating it!


Well, Firefox absolutely hates the SSL cert and detects this website as dangerous. Was it compromised?


I just ran it in FF Mobile. No complaints


No issue on firefox macos


That's really cool. Played around a bit, love it!

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


That's cool!


Fun and cool!


Awesome!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: