Shaderoo    help  ---  new   browse   login   signup  

Shaderoo - created by Florian Berger - - []

Shaderoo is following the shining example of Shadertoy to provide a platform for:
  • sharing shaders (exchange with community)
  • VJ'ing (see OSC feature below)
  • generating geometry (.obj)
  • demonstrating rendering techniques of all kinds (teaching CG).
  • ...and more

Check the ChangeLog for new features and improvements.

My goal was to make something similar to Shadertoy but with some extra features. Having a fixed and simple set of functionality always helps in the creative process to focus on the goal itself rather than on the several methods available to achive the goal. Therefore i didn't want to overdo it with new functionalities and only implemented features i was missing most in shadertoy. Some basic main shadertoy functionality is there, but some features are missing.

Shaderoo is based exclusively on WebGL2, so WebGL1 is not enough (unlike shadertoy, which has some WebGL1 fallbacks). check for compatibility.

Shaderoo uses Ace as web-editor. See here for the keyboard shortcuts.

Futhermore KaTeX is used for displaying formulae in the editor.

Please also take a look at The Shaderoo Small Print for legal concerns.

uniforms (mostly adopted from shadertoy):

  • sampler2D iChannel0..7
  •   texure samplers (8 available for now)
  • int iFrame
  •   index of actually rendered frame
  • vec4 iMouse
  •   x,y: mouse position, z,w: last pressed mouse position
  • vec4 iMouseData
  •   x,y: mouse position, z: wheel, w: left/middle/right button or'ed together
  • float iTime
  •   time in seconds
  • float iTimeDelta
  •   time duration of last frame
  • vec4 iDate
  •   actual Date = vec4( year, month [0..11], day of month [1..31], second of day)
  • int iCaptureGeom
  •   set to 1 if the geometry is being captured (e.g. to disable frustum transformation)
  • vec3 iResolution
  •   resolution of the actually rendered buffer

additional features:

  • geometry
  • you have an array triangles, the vertices (and 3 attributes) of which you can define by their index in a mainGeom(out vertCoord, out vertAttrib[3], int vertIndex) function. for now its limited to 65536 triangles (or 196608 vertices)
  • export geometry
  • You can export your geometry as wavefront (.obj) files. A special uniform iCaptureGeom tells the shader that a frame is being captured. This way you can e.g. ignore frustum transforms in that frame.
  • unlimited number of buffers
  • shaderoo is not confined to 4 buffers like in shadertoy
  • includes
  • You can add an include, where you can put code that is used by multiple buffers. Simply include them by an "#include Include_A" statement in your code.
  • external textures
  • You can use external textures by typing the url into a texture field. this can be an image (.jpg,.png,...) or a movie (.mp4,.avi,...) or even a video stream (for now android IP-webcam works fine). the remote site has to allow this of course (needs to allow 'crossorigin' references).
    however, this feature might be restricted to draft shaders in future (as soon as obscenity or copyright issues occur).
  • OSC control
  • you can connect an osc device (UDP port 3333) to control your personal uniforms by osc-web ( you need to install osc-web and start a bridge (udp to websocket) as described in the of osc-web.
    shaderoo doesn't need the back communication supported in the script provided by osc-web. download a simplified osc-bridge here, which works better (needs less webpage-reloads than the original script). you need to place it in the same folder as the original bridge.js and start it just the same.
  • Code-inlined images
  • you can draw images into your sources to visually document your code (press "add inline image" below editor)
  • Code-inlined Formulae
  • you can write formulae in LaTeX style into the editor. simply start the line with "//$$" and append your LaTeX formula (uses KaTeX for rendering)
  • Timeline
  • in the timeline (checkbutton "TL" under the render-view) you can add animations to your scenes. click into the entry fiels of a parameter (under the editor) and then define the timeline. short instructions: press left button to got to certain time. use scroll wheel to zooms X-axis (when close to the left scale it zooms y-axis). hold middle button to move X-axis (when close to left scale Y-axis) hold Alt and middle mouse to draw tileline. hold Alt button and left mouse button to adjust value at nearest timestamp. Shift for selecting region.
    key commands:
    • Left/Right - move selection left/right
    • Up/Dn - move selection up/down
    • Shift+Up/Dn - scale selection up/down
    • +/- - stretch selection
    • 'f' - linear fadein in selection
    • 'F' - linear fadeout in selection
    • 's' - smooth fadein in selection
    • 'S' - smooth fadeout in selection
    • 'p' - add peak
    • 'n' - invert selection (multiply selection by -1)
    • 'i' - linear interpolate from left of selection to right
    • 'I' - smooth interpolate from left of selection to right
    • 'o' - add actual param slider value to actual cursor pos
    • 'O' - fill actual param slider value to actual selection

whats missing:

  • limited number of textures
  • I plan to only provide a very basic set of textures like random or webcam. there might be getting more to my mind as the project goes on.
  • no iChannelResolution[]
  • Those are obsolete in webgl2 anyway - can be replaced by textureSize(...)
  • no iChannelTime[]
  • I'm not going to provide any videos for now, so those are not needed.
  • no iSampleRate
  • No sound shaders are implemented in shaderoo for now, so this is not needed.
  • no VR-mode
  • Don't have any vr-device at hand, so no VR for now.

Shaderoo Legal Stuff:

Shaderoo is a public tool which offers high degree of freedom to its users. Therefore Shaderoo takes no responsibility of the user-submitted material or content. The user is fully responsible for the content he/she submits to Shaderoo.
Shaderoo uses WebGL. WebGL is a very powerful technology, that can cause heavy low-level demands your GPU, CPU and operating system. Therefore its use always bears a certain risk of a computer crash (in extreme cases even to hardware/software/os damages). Shaderoo takes no responsibility for possible hardware/software/os damage due to malvolent content stored in its database. However, the maintainers of Shaderoo will give their best to minimize such a risk and delete suspicious, malicious or in any way obscene content as soon as possible.

All shaders you submit to Shaderoo belong to you. If you don't specify a license in your source code, you thereby agree that the Creative-Commons-Attribution-NonCommercial-ShareAlike-3.0-Unported applies to your submitted shaders.

Shaderoo uses cookies to manage user login sessions. It won't work without cookies.

Shaderoo needs your email. Your email will only be used for security purposes at account registration, account recovery and shaderoo-information concerns, and will not be given away to third parties.

Shaderoo stores a unique username and password in its database to guarntee a unique identity. Its the users responsibility to protect the security of his/her login information. The password is written in encrypted form into the database. Thereby nobody (not even shaderoo stuff) can read or know your personal password.

Security hints:
* Use a unique password, that you don't use for anything else than Shaderoo
* Keep your password stored on a safe place