Show HN: Shader Lab, like Photoshop but for shaders

Posted by ragojose 4 days ago

Counter156Comment46OpenOriginal

Comments

Comment by elliottcarlson 1 day ago

Nice interface -- I made something similar but for a specific game (Binding of Isaac) because it has a specific way of implementing shaders for mods. https://sublimnl.github.io/IsaacShaderStudio/

Comment by onion2k 1 day ago

A while ago (8 years in fact) I wanted to make something like this. I made a slightly half-assed React library that used twgl to overlay a shader on an element on a page (or a canvas for some effects). One thing I had was measuring where an element was on the page and then using absolute positioning to put a canvas over it so effects could expand beyond the confines of the element. I still think that has potential for some fun things but browsers aren't really fast enough to keep it in the right place with scrolling so it never works properly. https://react-neon.ooer.com/ + https://github.com/onion2k/react-neon

These new libraries are much better than anything I came up with.

Comment by llbbdd 1 day ago

Can you elaborate on the scrolling issue?

Comment by greggman65 1 day ago

It’s a WebGL issue, fixed in WebGPU.

Browsers generally only allow a fixed number of WebGL contexts per page. So a generic element effect library has the issue that too many elements some will start losing contexts. The workaround is to just make one large screen size canvas and then figure out where the elements are you need to draw an effect for. now you only have one context drawing all the elements. But, you can’t know where to draw until the browser scrolls and renders so you’re always one frame behind.

https://webgl2fundamentals.org/webgl/lessons/webgl-multiple-...

WebGPU doesn’t have this issue. You can use the same device with multiple canvases

https://webgpufundamentals.org/webgpu/lessons/webgpu-multipl...

Comment by onion2k 1 day ago

It's been a while so I might be a little off, but the problem was that the effect would lag behind slightly (one frame?) because I used an observer to match where the element moved to because the overlay element was logged to the viewport. I think I did that to avoid having a canvas that was the size of the entire page. Where a canvas could just be abs positioned it was ok but for reasons I can't remember that didn't work for everything.

Comment by sph 1 day ago

Doesn't seem to load for me except the side windows. Firefox/Linux. HN hug of death?

The design language screams vibe coded to me.

Comment by allan_s 1 day ago

As a ESL, what is unnatural in the language used ?

Comment by saintfire 1 day ago

Design language, meaning the feel and how the user interacts with a product.

They're saying it follows the patterns that AI biases towards regarding feel and UI.

Comment by esafak 1 day ago

It works on MacOS Chrome.

Comment by roxana_haidiner 1 hour ago

the UI looks really nice! keep it up!

Comment by felixthehat 1 day ago

looks like a slopfork of the fairly new https://shaders.com - frustrating for them!

Comment by marchantweb 1 day ago

I'm the Founder at https://shaders.com. Not frustrating at all, and Basement is an excellent team. Shader Lab looks like a solid tool for exploration and and creating effects, nothing slop about it (although I love the word "slopfork", that's new).

Our platform goes above and beyond that with a large collection of Pro presets and a unique capability in our component-based approach with reactive props, and of course broader framework support. All that, and our new MCP workflow for having your agent prompt effects, and we feel confident in our place in the market.

Would recommend checking out both Shader Lab AND shaders.com to anyone interested in creative shader effects for the web.

Comment by felixthehat 1 day ago

Ah nice! I enjoyed trying out your product when it was launched which called this app to mind. Commendable attitude!

Comment by gavinray 1 day ago

I'm not your target audience, but why do you gate your playground?

Went to try it and then gave up after it asked me to sign up/log in

Comment by marchantweb 1 day ago

Mostly due to account-tied permissions, such as asset uploads (images, video, etc) and for auto-saving/versioning.

It's entirely free to try, build, etc with an account - you only need a paid license when you're ready to export/deploy

Comment by ragojose 1 day ago

[dead]

Comment by virtualritz 1 day ago

There are dozens of DCCs where you have a UI where you stack things (over-compositing, bottom to top).

And when you select one of these things you can change the parameters.

If this is a 'slopfork' of shaders.com then the latter is a 'slopfork' of <insert any DCC that had this pattern and existed before and has whatever anyone may consider 'less sloppy'>.

OTTOMH: AfterEffects, Cavalry, Substance Designer's Layer panel, Tixl's layered textures, ...

Comment by upmostly 1 day ago

Honest question: If my web browser struggles to even render the preview, why in god's name would I put any of these presets on a production webpage?

Comment by imcritic 1 day ago

Please, don't. I don't want the same starting to happen on different sites...

Comment by KingOfCoders 1 day ago

They look nothing alike except they are both about shaders.

Could you explain why you think this is a slopfork?

Comment by felixthehat 1 day ago

Did you try the shader.com shader editor where you stack shaders and effects in layers? V similar approach!

Comment by frabia 1 day ago

so does Photoshop and thousand other visual editing tools. Hardly a reason to claim it to be a copy. Also "slopfork" seems harsh considering it seems limited, but well designed imo.

Comment by felixthehat 1 day ago

Maybe a little harsh yes. But compare these screenshots of the two products/features

https://imgur.com/a/41BybD1

Comment by cududa 1 day ago

I see a deep tree and a shallow tree in the two screenshots, representative of entirely different approaches.

Comment by albedoa 1 day ago

What would it take for you to ever admit that you are wrong.

Comment by skrebbel 1 day ago

"slopfork" nice

Comment by felixthehat 1 day ago

I heard the term used on the shoptalk podcast about cloudflare slopforking wordpress!

https://shoptalkshow.com/709/

Comment by philipallstar 1 day ago

Cloudflare really doesn't seem to have made slop or a fork.

Comment by felixthehat 1 day ago

I think it’s a jokey term for when you use ai to copy an existing project

Comment by VerifiedReports 1 day ago

No matter what, it's better than "vibecoding." Ugh.

Comment by doingitwell 1 day ago

Welcome to the world of zero cost software we were promised

Comment by nipponese 1 day ago

Indeed we prefer the world where only deep-pocketed entrenched monopolies can do this.

Comment by glhast 1 day ago

I started https://unicorn.studio (first of its kind for layer based shader composition) back in 2020! Thankful that I did because I actually had to learn GLSL the hard way. Not sure that I would have bothered if building it today.

Comment by hugodan 1 day ago

Amazing work, I am a fan of unicorn studio, it was the first real try I saw at these no code design tools that have shaders as their output.

I wonder what makes you unsure that you would have not bothered in building it today? or what would you do different with todays knowledge?

Comment by glhast 19 hours ago

Thanks!

I still would have built it today, what I was unsure of was whether I would have learned GLSL.

The models have been sub-par at writing shaders until recently. Without the friction of needing to learn the language itself to build it, I don't know if I would have.

The most fun I have today is trying to innovate new interesting techniques, which I wouldn't be able to do with the models alone.

Comment by natdempk 1 day ago

Is this lacking FPS caps or is something very unoptimized? Everything is smooth, but this website makes my computer run super hot and laptop fans spin up like nothing else does, even other shaders. (recent Chrome, recent MBP)

Comment by hmmokidk 1 day ago

Bookmarking for later. Really curious to explore this when the brain cells are back online in the AM.

Comment by mawadev 1 day ago

That is so laggy, but the UI looks really cool!

Comment by sva_ 1 day ago

When I clicked Add Layer and then tried to select an image source, it managed to crash Firefox pretty consistently.

Submitted a bug report.

Comment by bobbies-treats 1 day ago

Tough for anyone to want to play around with until performance is improved. It's neat though.

Comment by ragojose 1 day ago

we're working on perf optimizations!

Comment by 4 days ago

Comment by realbigscrem 1 day ago

Not to be mistaken for Unity Shaderlab: https://docs.unity.cn/Documentation/Manual/SL-Reference.html

Comment by jameshart 1 day ago

Maybe a unity3d.com URL would be more authoritative here.

https://docs.unity3d.com/560/Documentation/Manual/SL-Shader....

Comment by ohyoutravel 1 day ago

Doesn’t work for me. Seems vibe coded.

Comment by ragojose 1 day ago

can you give me more context so we can fix it? this is not vibe-coded :)

Comment by bauenblockchain 20 hours ago

looking good

Comment by aguacaterojo 1 day ago

V cool. Works in ff on mac for me. Maybe vibe coded but it's a spectrum. Probably in need of a bit of polish and a better performing example & maybe resolution switching. Basement Studio is legit I have bought their fonts in the past.

Floating windows are a little pointless but aesthetic choice or a one shot ui. FPS would be nice, also distinction between canvas and void. Video export works great.