jagenjo/webglstudio.js
Webglstudio.js
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.
Features
- 3D Graphics IDEs - Functions as a browser-based IDE combining a coding pad and spatial editor for 3D development.
- Node-Based Shader Editors - Features a node-based visual graph editor that generates executable GLSL shader code for 3D materials.
- File Manager Drag-and-Drop - Provides a web-based file manager for organizing project assets via drag-and-drop interactions.
- Virtual File Systems - Simulates a hierarchical in-memory file system to organize 3D models, textures, and audio assets.
- In-Page Script Execution - Executes user-defined scripts and shader logic directly in the browser to modify scene behavior in real-time.
- Project Resource Managers - Includes a centralized resource manager for importing and organizing 3D models, audio, and textures.
- 3D Scene Editors - Provides a spatial editor for arranging 3D meshes and assets directly within the browser.
- Scene Composition Tools - Provides a spatial design environment for arranging 3D meshes, textures, and animations to build interactive scenes.
- Custom Shader Programming - Supports authoring vertex and fragment shader code directly within the editor to control rendering.
- Scene Authoring Tools - Provides a spatial design environment for arranging 3D meshes and defining custom object behaviors.
- Customizable Render Pass Pipelines - Provides a customizable render pipeline allowing users to rewrite low-level draw calls and post-processing passes via scripting.
- Custom Rendering Logic - Provides the ability to modify the underlying rendering process by rewriting pipeline logic via scripting.
- Browser-Based 3D Visualizations - Functions as a browser-based 3D design environment for creating interactive WebGL visualizations.
- WebGL Graphics Editors - Provides a complete browser-based design environment for creating WebGL-powered 3D scenes and animations.
- Diagram Sharing Links - Distributes completed 3D projects to others through unique, shareable URLs.
- Project State Sharing Links - Enables exporting work as a single URL for others to view or access the project instantly.
- Rapid Prototyping Environments - Provides an integrated workspace with a code editor and virtual file system for rapid 3D scene iteration.
- Component-Based Entity Definitions - Implements a component-based system for defining the behavior and properties of 3D objects.
- Visual Effect Shaders - Allows users to create custom GLSL shaders for real-time graphical effects like blur and glow.
- Behavioral Logic Injection - Allows the definition of 3D object behaviors using a mix of visual graphs and custom scripting.
- Entity Behavior Hooks - Implements custom logic and rendering controls using a component system and interaction event hooks.
- URL State Serialization - Encodes entire project configurations into the URL to enable instant sharing and restoration via links.
- Virtual File Systems - Implements a virtual file system to organize 3D models, audio, and textures within the browser.
Star history
How this analysis was created: This summary and feature list were written by an AI model that read the project's README and public documentation pages. Each feature links to the documentation it came from; stars, license and language come straight from the GitHub API. The model does not read the source code, and the analysis is refreshed when the project is re-analysed. Learn more on our About page.
