I’ve been working on this on and off for a number of years:
https://dusanbosnjak.com/test/nodes3/
I want to be solving ux and rendering problems, like how to make groups of nodes into functions, how to draw all this efficiently and such. But im stuck on getting it out of the experimental phase. The biggest problem (the way i see it, but im open to suggestions) is not being able to actually target three. I may have got close, but with the looming TSL/webgpu changes this feels a bit demoralizing.
I wanted to target all the versions of three.js, so if someone hasnt updated, they could still use this and export a working shader. The way i tried to do this was to look for differences in the templates between the versions. It looks something like this for the MeshBasicMaterial, obviously at the time of R129.
I had to normalize these, eg some were in glsl files, others were in js files, some were in one file etc. I was able to do this, and regardless of how it looks in that particular revision, i get the same shader template structure on my end.
I’ve also tried to generalize the uniforms present in the material to some degree of success.
MeshBasicMaterial is for the most part the same, but others have added other map slots over time. So if i run the preview/editor on say R163 ill have transmission and whatnot, which is not present in the older versions. I could perhaps ignore this on export (but youll get a different shader) or even enable the editor to show you that particular version of the material.
I could perhaps pursue this further - generalize uniforms and just make the editor display and use whats present in the material without knowing what it is (eg, transmission) hold off the actual work on the editor until this is solved. Maybe there aren’t any other features that can be added to the material, since they are already pretty advanced.
How far back would you target this, is there a need to use a tool such as this for R76? If not, where would be the cutoff point? 10 versions? 10 months?
Since this is just the “frontend” of sorts to editing shaders, i don’t really care whats in the backend. My solution for all this is really very very simple, i have some graph, i traverse it, and i spit out a list of operations, no optimizations, nothing fancy. The whole idea was to just test out if a string is sufficient to represent all the materials in three.js.
I dont know anything about TSL, what would the world look like if i try to use this as the backend? Can i generate TSL out of the GLSL shader itself, or would i be using TSL as my data structure? What happens in this case with WebGLRenderer
and would i be able to target older versions of three, if that even makes sense to begin with?
So, tl:dr; i have this interface, i’m displaying previews, i can connect things, but to export an actually useful artifact, is whats bogging the project down. The less i work on it, the more three moves forward, and this falls behind.
FWIW this is the idea:
At the end of the day, if you made a node myInput1
you would get
myMaterial.myInput1 = 5
And it would be TypeScript safe.