Uncategorized

pocket.gl: a webgl shader sandbox to embed in your pages

I have just released an open source project called pocket.gl, a fully customizable webgl shader sandbox embeddable in a web page. The idea for this project came to me while writing some new articles on this blog. In these articles I was talking about shaders and I thought it would be nice to show some live webgl examples in the page along with the shader code.

pocket.gl

My first idea was to create a shader in shadertoy and embed it into my WordPress article. Unfortunately, shadertoy allows only the creation of fragment shaders, without the use of any external resources such as textures and meshes. While this strong limitation fits very well with the shadertoy community, where a lot of talented users are creating genuine masterpieces by combining the art of coding and the visual arts; the lack of a vertex shader, meshes and textures, makes shadertoy unfit to be used as a general purpose shader sandbox.

Thus I decided to create pocket.gl, a compact, embeddable and fully customizable webgl shader sandbox. This sandbox is made of three views that you can switch through three tabs: render, vertex shader and fragment shader. The render view shows a shader applied to a mesh; it is possible to orbit the camera and zoom using the mouse; it contains also a customizable GUI to select a mesh and edit some shader parameters. The vertex and fragment shader views allow the in place editing of the shader code.

Visit pocket.gl for the full documentation, examples and tutorials. If you want to contribute to the project, you can find the source code on GitHub.

Examples

1. Load meshes and define editable shader variables

2. Animate your shaders, add skyboxes and multiple textures

3. Make a fragment-only Shadertoy-like shader

4. Or just use it as a 3D model viewer

5 thoughts on “pocket.gl: a webgl shader sandbox to embed in your pages

  1. Giuseppe Portelli

    Thanks Lukasz. As long as you can write your fragment shader without using extra buffers, you provide the needed textures, and you can remap shadertoy inputs to pocket.gl inputs, there’s no problem in porting a shader from shadertoy to pocket.gl. At this moment there is no support for mouse input, but i plan to add it soon.

    Reply
  2. Matthew Durant

    Are you planning on making it mobile friendly ? Currently there is. I zoom possibility on smarthphone and tablets.

    Reply

Leave a Reply to Giuseppe Portelli Cancel reply

Your email address will not be published. Required fields are marked *