Babylon has cyos for making glsl shaders, but its usefulness is limited by the fact that the inputs to the shader usually end up different than what CYOS provides. So while CYOS can be used as a starting off point for development of a shader, there comes a point when you need to integrate your shader into your project and use different attributes/uniforms, and after that you can’t really go back to CYOS. Also it’s beneficial to develop a shader on real scene geometry and not just a test mesh.
What would useful is to have a source editor as part of the debug inspector. So that you can click on a ShaderMaterial and edit its source code(s) with live updating as you type. It needn’t be fully featured, something like codemirror would be fine.
I’ve set this up in my own project and it makes writing shaders a lot easier.
Hey @atg - You know about the Node Material Editor correct? Not sure if it fits your need, but it’s integrated into the inspector/playground in the way it sounds like you’re looking for. Main difference being that with NME you don’t write the shader code yourself.
Yes exactly like that but for ShaderMaterial instead of NodeMaterial. Personally I prefer working with GLSL source rather than a node graph, and my shaders are already GLSL anyway.
I’ve been reading up on how NodeMaterial does it, it seems like it would be possible to do the same for ShaderMaterial by adding an edit() method to it.
To reuse as much code as possible, the source editor could just be part of the nodeEditor package, i.e. add a new class SourceEditor in nodeEditor/ with SourceEditor.Show({ shaderMaterial }).
The rest of the UI using CodeMirror is straightforward, I’ve already implemented in my own project, I’m happy to refactor&donate the code.
Would it be something easy to PR? I’m a little but reluctant to use CodeMirror as it is an external dependencies but if it is easy to import and license compatible, maybe we could use it?
Yeah I understand about not wanting dependencies, but it’s only a dependency for NME, it’s not going into the main babylon.js distribution or the inspector. CodeMirror is only 57k gzipped and it’s MIT licensed. It’s easy enough to switch it out for something else in the future if desired.
Monaco is not as straightforward as CodeMirror. GLSL support for CodeMirror is easily available but for Monaco a quick google didn’t turn anything up.
Monaco is also >10x bigger but it does pretty much the exact same thing. Monaco has really excellent support for JavaScript/TS that’s why it’s good for playgrounds.
As I said it’s easy enough to remove CodeMirror and replace it with something else at a later date.
but if possible Definitely all for it !!!