A fully customizable WebGL shader sandbox to embed in your pages for interactive 3D graphics.
pocket.gl is an embeddable WebGL shader sandbox that allows developers to create, edit, and display interactive 3D graphics directly within web pages. It provides a live coding environment for shader development, enabling real-time manipulation of shader variables, 3D model loading, and animation. The tool solves the problem of integrating complex WebGL visualizations into web content without requiring external applications or extensive setup.
Frontend developers, graphics programmers, and creative coders who need to embed interactive 3D graphics or shader demos into websites, educational content, or portfolios.
Developers choose pocket.gl for its embeddability and customization—it offers a self-contained shader sandbox with real-time editing, GUI controls, and Shadertoy-like functionality, all without needing to build a custom WebGL environment from scratch.
A fully customizable webgl shader sandbox to embed in your pages
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Integrates Ace editor for real-time shader coding with syntax highlighting, allowing immediate visual feedback without page reloads, as shown in the screenshot examples.
Uses dat.GUI to create adjustable sliders and inputs for shader variables, simplifying tweaking during development, highlighted in the editable shader variables feature.
Supports fragment-only shaders similar to Shadertoy, enabling easy porting and experimentation with visual effects directly in web pages, as mentioned in the key features.
Leverages Three.js to load and render 3D meshes, functioning as a customizable model viewer without additional libraries, demonstrated in the 3D model loading examples.
Relies on multiple heavy libraries like Three.js, Ace, and RequireJS, which can bloat the bundle size and complicate setup, as listed in the dependencies section.
Requires WebGL support in browsers with no fallback, limiting accessibility on devices without it, which is inherent to its design as a WebGL sandbox.
Initial integration involves managing scripts via RequireJS and configuring dependencies, which might be challenging for developers unfamiliar with module loading systems.
The GNU GPL-3.0 license imposes copyleft terms, potentially restricting use in proprietary or closed-source commercial projects, as noted in the license information.
Pocket.gl is an open-source alternative to the following products: