ShaderLab: Embedding Shaders In A Web Page

As you can read in the online Backsun FAQ, we are currently working on a tool called the “ShaderLab”. This tools provides a visual programming environment to create, debug and test shaders in a user-friendly way:

The ShaderLab is a Flex web application. It’s really easy to use and anyone can start playing. The only requirement is to know shader basics and 3D maths. The tool is actually so powerful that you can build an entire hardware accelerated particles engine without a single line of AS3 (you can look at the first screenshot if you don’t believe me). But I won’t speak about that today.

Today I want to introduce a very cool feature based on the fact that we are working on 3D for the web. To me, the web component is something that must be used to provide new features. And being able to program the GPU and create shaders with a web Flex application is one of those features. And another one is the possibility to share and embed those very shaders on a web page.

Indeed, the ShaderLab will provide a “Share” button “à la Youtube”. It will provide an HTML code – an iframe really – to embed your creations on your blog/website. Here the embedding code in action:



This shader is exactly the same as the one introduced in my previous post about cel shading. But it was created in the ShaderLab and embed with the “share” feature. So everything – from the shader to the embed application and the iframe hosting it – was created without a single line of code. None. Nothing.

If you want to see what the shader looks like in the ShaderLab, here it is:

It’s really just like Youtube, but for shaders. Here are other examples:

Those are just shaders created with the ShaderLab and embed with the “share” feature: everything is done on the GPU. The workflow is actually pretty simple:

  • Create your shader in the ShaderLab.
  • Save it on your online cloud storage provided with your Aerys ID account (it’s free).
  • Go to the “Share” panel to copy the HTML embed code.
  • Paste the code in any web page.

The UI looks like this:

Again: just like Youtube! You’ll also be able to store your shaders on your own online storage and share them just as easily. I think the ShaderLab will help people both working with shaders and share their work on the web. The shader viewer future improvements include:

  • a direct link to the ShaderLab to fork the shader
  • mention of the name of the author
  • the number of views

If you have questions or suggestions, please post them in the comments or on Aerys Answers. The ShaderLab itself will be available very soon…