pouët.net

Go to bottom

GLSL Sandbox

category: code [glöplog]
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
added on the 2011-11-10 13:03:39 by mrdoob mrdoob
Oh! And if you want to use it for yourself or add more features. It's on github:

https://github.com/mrdoob/glsl-sandbox
added on the 2011-11-10 13:28:07 by mrdoob mrdoob
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. :)
added on the 2011-11-10 13:36:42 by gloom gloom
You can always have
Code:gl_FragColor *= 0.25;
as the last line in your code while developing ;)
added on the 2011-11-10 13:40:28 by mrdoob mrdoob
How about
Code:body:hover #code{background-color:rgba(0,0,0,.5);}
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.
added on the 2011-11-10 14:19:38 by p01 p01
Or just...

Code:#code:hover { background-color:rgba(0,0,0,.5); }

Updated!
added on the 2011-11-10 14:33:13 by mrdoob mrdoob
Thanks! It looks great!
added on the 2011-11-10 15:09:17 by LLB LLB
Nice!
added on the 2011-11-10 15:54:18 by raer raer
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.
added on the 2011-11-10 20:23:24 by Xetick Xetick
I'd be really surprised if for(;;){} is allowed in GLSL. The syntax for loops is really strict.
added on the 2011-11-10 20:57:50 by p01 p01
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
added on the 2011-11-10 21:39:57 by kusma kusma
Great stuff, very useful tool for prototyping shaders! I think I will use this a lot in the future.
added on the 2011-11-10 21:59:13 by visy visy
Here's an online-version of my syntax-highlighting enabled version.
added on the 2011-11-10 22:35:00 by kusma kusma
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...
added on the 2011-11-10 22:58:21 by mrdoob mrdoob
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 ;)
added on the 2011-11-10 23:17:42 by kusma kusma
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.
added on the 2011-11-11 00:09:28 by Xetick Xetick
kusma: I'll merge carefully :) First I need to understand how CodeMirror works :P
added on the 2011-11-11 00:26:51 by mrdoob mrdoob
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.
added on the 2011-11-11 00:32:22 by xpansive xpansive
Rollover the button for a bit... or check the browser console.
added on the 2011-11-11 00:51:49 by mrdoob mrdoob
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
added on the 2011-11-11 05:17:37 by mrdoob mrdoob
You almost have Lights raymarched ;)
added on the 2011-11-11 05:30:17 by mrdoob mrdoob
This is such a lovely neat thingio, well done.
added on the 2011-11-11 09:41:49 by Zplex Zplex
KISS
added on the 2011-11-11 09:45:49 by p01 p01

login

Go to top