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 are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.
