Hello Babylon.js Team and Community,
First, thank you for your incredible work on Babylon.js. It’s a powerful and feature-rich engine that we greatly admire.
I’m writing to propose a feature that could potentially enhance interoperability and developer experience: support for importing or translating shaders written in Three.js’s Shader Language (TSL).
-
What is Three.js Shader Language (TSL)?
TSL (Three.js Shader Language) is a framework designed to simplify shader development within the Three.js ecosystem. It allows developers to construct shader code using JavaScript (or TypeScript) syntax, offering better maintainability and flexibility compared to writing raw GLSL/WGSL. A key strength of TSL is its node-based approach, which enables a more intuitive composition of shader functional modules while maintaining high performance. -
Potential Benefits for Babylon.js:
Lower Learning Curve & Smoother Onboarding: Developers and technical artists familiar with Three.js’s TSL could find it easier to explore or transition to Babylon.js if they could reuse or adapt their existing shader knowledge and code. This might lower the barrier to entry for a segment of the WebGL community.
Improved Interoperability & Code Reuse: It could facilitate the migration of projects or assets (especially those heavily reliant on custom shaders) from Three.js to Babylon.js, saving development time and effort.
Community Collaboration: Bridging the gap between two major WebGL communities (Three.js and Babylon.js) could foster knowledge sharing and potentially attract new contributors to Babylon.js. TSL’s node-based, code-oriented approach might also offer an interesting alternative shader authoring perspective for Babylon.js users.
Leveraging TSL’s Strengths: TSL is renderer-agnostic (can target WebGL and WebGPU) and benefits from IDE features like IntelliSense, which aligns with modern development practices.
- Proposed Implementation Ideas (High-Level):
Understanding this is a significant undertaking, possible approaches could include:
A TSL to Babylon.js ShaderCode/Babylon Node Material Converter: A library or tool (perhaps initially external) that parses TSL code and attempts to generate equivalent Babylon.js shader code or node graphs within the NodeMaterial system.
Runtime Translation Layer: A more ambitious project could involve a lightweight runtime interpreter/translator for a subset of TSL, converting it to Babylon’s underlying shader language on the fly.
Initial Focus on Core Patterns: Start by supporting the translation of common TSL patterns and functions (e.g., oneMinus, texture sampling, uv manipulations) to their Babylon.js counterparts.
- Challenges & Considerations:
I fully recognize the challenges:
Syntax and API Differences: TSL and Babylon.js shaders (GLSL/WGSL/NodeMaterial) have different architectures and APIs.
Feature Parity: Not all TSL features might have direct equivalents in Babylon.js, or vice versa.
Maintenance Overhead: Supporting another shader language layer requires ongoing effort.
Performance Implications: Any runtime translation must be efficient. Perhaps initially focus on an offline conversion tool.
The goal wouldn’t necessarily be perfect 1:1 feature parity, but rather providing a valuable pathway for code reuse and learning.
- Community Interest & Willingness to Help
I’m opening this discussion to gauge interest from the core team and the community. Would this be a valuable addition? I believe there might be others in the community who would find this useful.
While I may not have the deep expertise to implement this single-handedly, I am very willing to help with research, testing, providing use cases, and supporting efforts in any way I can.
Thank you for your time and consideration. I look forward to hearing the community’s thoughts.
Best regards,