# jagenjo/webglstudio.js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jagenjo-webglstudio-js).**

5,325 stars · 622 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/jagenjo/webglstudio.js
- awesome-repositories: https://awesome-repositories.com/repository/jagenjo-webglstudio-js.md

## Topics

`3d` `editor` `graph-editor` `rendering` `scene-graph` `shaders` `webapp` `webgl` `webtool`

## Description

WebGLStudio.js is a browser-based IDE and graphics editor for creating 3D scenes, textures, and animations using WebGL. It functions as a spatial design environment where users can arrange 3D meshes and assets directly within the browser to build interactive visual experiences.

The project features a visual shader graph editor that allows for the development of custom rendering effects and post-processing shaders through a node-based interface. It also includes a virtual file system for organizing 3D models, audio, and textures, and uses URL-state serialization to share entire project configurations via a single link.

The editor supports custom object behaviors through a component-based entity system and provides an integrated scripting interface for modifying the render pipeline and executing code in-browser. Users can manage project assets, author custom shaders, and export scenes for website embedding or local distribution.

## Tags

### Development Tools & Productivity

- [3D Graphics IDEs](https://awesome-repositories.com/f/development-tools-productivity/development-environment-management/development-environments/cloud-remote-workspaces/browser-based-ides/3d-graphics-ides.md) — Functions as a browser-based IDE combining a coding pad and spatial editor for 3D development.
- [In-Page Script Execution](https://awesome-repositories.com/f/development-tools-productivity/in-page-script-execution.md) — Executes user-defined scripts and shader logic directly in the browser to modify scene behavior in real-time.
- [Project Resource Managers](https://awesome-repositories.com/f/development-tools-productivity/project-resource-managers.md) — Includes a centralized resource manager for importing and organizing 3D models, audio, and textures. ([source](https://github.com/jagenjo/webglstudio.js/tree/master/guides))
- [Project State Sharing Links](https://awesome-repositories.com/f/development-tools-productivity/project-state-sharing-links.md) — Enables exporting work as a single URL for others to view or access the project instantly. ([source](https://github.com/jagenjo/webglstudio.js#readme))
- [Rapid Prototyping Environments](https://awesome-repositories.com/f/development-tools-productivity/rapid-prototyping-environments.md) — Provides an integrated workspace with a code editor and virtual file system for rapid 3D scene iteration.

### Graphics & Multimedia

- [Node-Based Shader Editors](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/materials-shading/node-based-shader-editors.md) — Features a node-based visual graph editor that generates executable GLSL shader code for 3D materials.
- [Scene Composition Tools](https://awesome-repositories.com/f/graphics-multimedia/3d-scene-abstractions/scene-composition-tools.md) — Provides a spatial design environment for arranging 3D meshes, textures, and animations to build interactive scenes. ([source](https://github.com/jagenjo/webglstudio.js#readme))
- [Custom Shader Programming](https://awesome-repositories.com/f/graphics-multimedia/custom-shader-programming.md) — Supports authoring vertex and fragment shader code directly within the editor to control rendering. ([source](https://github.com/jagenjo/webglstudio.js/tree/master/guides))
- [Scene Authoring Tools](https://awesome-repositories.com/f/graphics-multimedia/embedded-3d-viewers/interactive-3d-viewers/scene-authoring-tools.md) — Provides a spatial design environment for arranging 3D meshes and defining custom object behaviors.
- [Customizable Render Pass Pipelines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/post-processing-pipelines/multi-pass-rendering-pipelines/customizable-render-pass-pipelines.md) — Provides a customizable render pipeline allowing users to rewrite low-level draw calls and post-processing passes via scripting.
- [Custom Rendering Logic](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/custom-shape-rendering/custom-renderable-interfaces/custom-rendering-logic.md) — Provides the ability to modify the underlying rendering process by rewriting pipeline logic via scripting. ([source](https://github.com/jagenjo/webglstudio.js/tree/master/guides))
- [Browser-Based 3D Visualizations](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/scene-management-systems/3d-rendering-engines/browser-based-3d-visualizations.md) — Functions as a browser-based 3D design environment for creating interactive WebGL visualizations.
- [WebGL Graphics Editors](https://awesome-repositories.com/f/graphics-multimedia/webgl-graphics-editors.md) — Provides a complete browser-based design environment for creating WebGL-powered 3D scenes and animations.
- [Visual Effect Shaders](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/visual-effects/visual-effect-shaders.md) — Allows users to create custom GLSL shaders for real-time graphical effects like blur and glow. ([source](https://github.com/jagenjo/webglstudio.js/blob/master/README.md))

### Part of an Awesome List

- [File Manager Drag-and-Drop](https://awesome-repositories.com/f/awesome-lists/devtools/drag-and-drop/file-manager-drag-and-drop.md) — Provides a web-based file manager for organizing project assets via drag-and-drop interactions. ([source](https://github.com/jagenjo/webglstudio.js#readme))
- [Diagram Sharing Links](https://awesome-repositories.com/f/awesome-lists/productivity/session-link-sharing/diagram-sharing-links.md) — Distributes completed 3D projects to others through unique, shareable URLs. ([source](https://github.com/jagenjo/webglstudio.js/blob/master/README.md))

### Data & Databases

- [Virtual File Systems](https://awesome-repositories.com/f/data-databases/virtual-file-systems.md) — Simulates a hierarchical in-memory file system to organize 3D models, textures, and audio assets.

### Game Development

- [3D Scene Editors](https://awesome-repositories.com/f/game-development/3d-scene-editors.md) — Provides a spatial editor for arranging 3D meshes and assets directly within the browser.
- [Component-Based Entity Definitions](https://awesome-repositories.com/f/game-development/simulation-engines/simulation-worlds/component-based-entity-definitions.md) — Implements a component-based system for defining the behavior and properties of 3D objects.

### Software Engineering & Architecture

- [Behavioral Logic Injection](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/object-oriented-foundations/game-logic-models/game-logic-controllers/behavioral-logic-injection.md) — Allows the definition of 3D object behaviors using a mix of visual graphs and custom scripting. ([source](https://github.com/jagenjo/webglstudio.js/tree/master/guides))
- [Entity Behavior Hooks](https://awesome-repositories.com/f/software-engineering-architecture/component-functional-extensions/rendering-and-data-extensions/component-behavior-overrides/entity-behavior-hooks.md) — Implements custom logic and rendering controls using a component system and interaction event hooks. ([source](https://github.com/jagenjo/webglstudio.js/blob/master/README.md))
- [URL State Serialization](https://awesome-repositories.com/f/software-engineering-architecture/shared-state-management/url-state-serialization.md) — Encodes entire project configurations into the URL to enable instant sharing and restoration via links.

### Web Development

- [Virtual File Systems](https://awesome-repositories.com/f/web-development/web-based-file-managers/virtual-file-systems.md) — Implements a virtual file system to organize 3D models, audio, and textures within the browser.