jagenjo/webglstudio.js
Webglstudio.js
WebGLStudio.js es un IDE basado en navegador y editor de gráficos para crear escenas 3D, texturas y animaciones utilizando WebGL. Funciona como un entorno de diseño espacial donde los usuarios pueden organizar mallas y activos 3D directamente dentro del navegador para construir experiencias visuales interactivas.
El proyecto cuenta con un editor visual de grafos de shaders que permite el desarrollo de efectos de renderizado personalizados y shaders de post-procesamiento a través de una interfaz basada en nodos. También incluye un sistema de archivos virtual para organizar modelos 3D, audio y texturas, y utiliza la serialización del estado de la URL para compartir configuraciones completas de proyectos mediante un solo enlace.
El editor admite comportamientos de objetos personalizados a través de un sistema de entidades basado en componentes y proporciona una interfaz de scripting integrada para modificar el pipeline de renderizado y ejecutar código en el navegador. Los usuarios pueden gestionar activos del proyecto, crear shaders personalizados y exportar escenas para incrustarlas en sitios web o para distribución local.
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.
