31 comments

[ 1.3 ms ] story [ 89.4 ms ] thread
This is a refreshing take on a shader-sharing platform. My first thought was "Here's another Shadertoy competitor", but this was quashed by two core features that I think are done really well:

- A cleaner / extensive code editor (that also supports JS, woop!)

- Conversion of shader output to GIFs... Even on a laptop with a dedicated GPU, Shadertoy pulls the rug from underneath my system resources

I would like to see a grid-view (unless this already exists and I missed it) of the feed, as I don't think scrolling through a feed of linear, huge one-by-one posts is good for discovery.

Thanks for the feedback, I like the grid idea!
No worries :) — Great to hear.

Just a question since you're here: I've poked around with WebGL / GLSL in the past and have started to get into Metal (mainly out of necessity for macOS development) — is there scope for Metal to be ported / rendered on the web, and if so would you be interested in adding that as a language?

There seems to be a fight between browser vendors for the next generation of 3D web standards - (https://news.ycombinator.com/item?id=16186043)

As soon as some browsers support an implementation, I'll try it. (However, it will be difficult if it's Safari only, since I use Linux)

Thank you for this information!

Agreed on the boxing-in of Safari :)

there's no fight. all the major players are working out the details. the last major detail is what format the shader language will be. Google and Mozilla are currently pushing for a subset of SPIR/V, Microsoft and Apple are pushing for a subset of HLSL. Both seem to have their merits
I don't think Microsoft has stated a position on this yet. It has mostly just been Apple pushing for WebHLSL as the shader ingestion format, with most everyone else in favor of SPIR-V with a restricted execution environment.
This is actually a very neat and useful website. Also respect for making the website fast and not adding any 3rd party scripts.
Yeah, it's terrible how things like Google analytics, web fonts, can slow things down. I tried to keep this app as light as possible. Of course, I will not get a lot of data for analysis, but as a user, I know what can be improved, I don't need to monitor every click, typed keys, mouse moves, ...
google analytics is the only 3rd party script I am okay with. Maybe you should add it sometime in the future to get a rough idea about your users, I was talking mainly about the more intrusive analytics and ads scripts that plagued the web. It's rare to see anybody who respect his users to that extent these days :D respect again!
GA is also cached for most users, so the downloading part is non-existent.
But there is overhead at every tracked event because you have an extra request to Google.
True true, although GA batches these pretty smartly from what I remember.
There's something to be said for having at least a small part of the Web hidden from the Google panopticon
You can do this with something like goaccess which builds reports using your webserver logs
For some info about the tech stack, I use:

- Ruby on Rails

- Vue

- CodeMirror

- gif.js

- avconv (FFMPEG) for video previews

- A $5/Month Linode server

The server handled being top 3 on HN with about 20 reqs/second with less than 15% CPU load.

The editor uses an architecture that allows me to quickly add a new language. Just create a class & reference it.

EDIT: Forgot to mention important parts:

- Bulma CSS

- feather SVG icons (https://feathericons.com/)

- zip.js

Impressive 20 req a second with just 15% cpu!
A server can do way more.
At 5 $ per month?
Yes. Ruby is not that slow, this is not quite the throughput that will require load-balancing or even caching.
The dark theme is beautiful — I really like everything about the font, styling and layout. Well done.
Neat! very nice idea, well implemented. +1
This is great. Hopefully I can use it in the future sometime.
thanks for sharing!
This may sound like an odd request but at a creative codejam in Berlin a while back I saw something like this but "multiplayer" - different people could log on to a room and edit live. In this example they couldn't edit each others code but all shared the same output window. It used Processing.

It ended up being kind of a shared creation/remix experience which was really cool. I figure adding live simultaneous edits is a fairly difficult ask but it's immediately what I looked for when I saw your page.

Regardless, looks really cool!

One feature I found myself missing from ShaderToy is that you can't have render targets of arbitrary size. You have Buffer A/B/C/D but they're all the same size as the canvas. I would love to see a way to specify a shader that generates a 64x64 texture for example, that would allow some nice effects like a simple low res fluid sim.
Currently, I support many passes, but also at the canvas size. I took a note in my github issues and I will try to implement it when I have time!

In the meantime, it is still possible to create 2D toy fluid sim: https://shadergif.com/search?search=fluid

The feed is cool, I would appreciate if it was subdivided with tags like Mandelbrot, fractal, etc.

10/10 would add to my daily RSS feeds!