pouët.net

So we all know Iq's ShaderToy. Early this year I looked at the code and tried to reduce it to the basics so I could have my own sandbox for shaders. While working on it I wanted to have the effect fullscreen and then I tried having the code on top of it. Turned out to be an interesting interface. Some months ago I saw Iq's new editor that also used this style, I liked the fact that he could compile with shortcuts (not so much the sci-fi effects :P). So two days ago I tried to make the code on my sandbox editable and also tried to see what would happen if I compiled the shader for every keystroke. This is the result:

http://mrdoob.com/projects/glsl_sandbox/

On top of that, I was thinking that would be a nice idea if people could easily share their effects, so far the approach is by URLencoding the whole code and adding it as a hashtag. Seems to be working well enough so far, albeit some urlshorteners are having issues. TinyURL seems to work fine though.

These are some effects people have been doing:

http://tinyurl.com/c97g8ok by @inear
http://tinyurl.com/75uj77l by @neave
http://bit.ly/vJSq0Y by @Flexi23
http://tinyurl.com/c5rh9n3 by @DanielPettersso

Oh! And if you want to use it for yourself or add more features. It's on github:

https://github.com/mrdoob/glsl-sandbox

Any chance to get those black, transparent planes underneath the code as well? (the ones under and around "hide code") When things get bright it gets really hard to see what you're doing. :)

You can always have as the last line in your code while developing ;)

How about That way you can easily put the mouse on the page to get a black background, and toss it away to better see your shader in action.

Or just...


Updated!

Thanks! It looks great!

Nice!

Nice work! If your compiling the code all the time just make sure not to accidentally end up writing code like "for(;;) { }". I manage to do that every now and then in my own real time compiling editor especially when experimenting with distance fields.

I'd be really surprised if for(;;){} is allowed in GLSL. The syntax for loops is really strict.

I played around with it a bit, and added in CodeMirror2 to get som syntax highlighting. Pretty neat. Anyway, the changed code is here, and it's hacky and incomplete... https://github.com/kusma/glsl-sandbox

Great stuff, very useful tool for prototyping shaders! I think I will use this a lot in the future.

Here's an online-version of my syntax-highlighting enabled version.

That's neat :)

Never messed with CodeMirror2 myself. Seems like it uses spaces for auto indentation? I guess it's configurable? Scroll seems to be lost, I guess that can be hacked too... But what the most important one is the colors used by the syntax, maybe I could try copying the ones SublimeText2 uses...

Yeah, the colors aren't the best. CodeMirror2 comes with multiple themes, I just picked the default one and hacked it slightly to be readable in your design.

I think the scrolling is just me messing up the CSS; I'm no good at these things ;)

p01: Any form of loop will do that doesn't have an exit condition since it hangs the graphics card. Some drivers handles it better than others.

kusma: I'll merge carefully :) First I need to understand how CodeMirror works :P

You say compiled with errors, but what does it mean? It'd be nice to see the error log if you hover over the "compiled with errors" text or something.

Rollover the button for a bit... or check the browser console.

Simple raymarching sandbox with camera http://tinyurl.com/bvd6ux5

A twist on Simple raymarching sandbox with camera. http://tinyurl.com/c2wh6ed

Awesome stuff Paulo! :O

You almost have Lights raymarched ;)

This is such a lovely neat thingio, well done.

KISS