I’ve been working on a node editor and i’ve cooked up a version that generate’s three’s
ShaderMaterials. It’s super WIP and clunky, but i think it’s more or less complete as in that it can persist whatever’s being created, display the result using three, and spit out a JS class into the clipboard (export) although that bit is most likely broken.
This is my pet project that i’m using to experiment with various web technologies. I had it hooked up quickly with react initially. It looked much nicer, and was relatively easy to work with, but barfed after creating a handful of nodes. I then tried to do it all with three, but that actually barfed as well and was pretty complicated to work with. I ended up rendering this with a mixture of three, html and canvas. Ive been wanting to give pixi.js a shot, but i’ve already had too much going on.
As is, it should be working pretty fast with a lot of nodes and edges, with some visual bugs.
Feature wise, atm, there’s only one material -
MeshBasicMaterial and most of the GLSL functions, along with one custom (simplex noise) and one very specific to this editor - swizzle.
Red sockets can take multiple types, the others represent float,vec2,3,4 and sampler. If you want to output the depth to the color of the material you have to pipe it through the swizzle node (set to .xxx). I’m really curious if this feels clunky.
The sampler can load textures, but it’s super crude.
Obviously there’s a whole bunch of stuff to do here. When moving away from react i lost some pretty informative features from the nodes in the main view. Like a big plus sign that says that the math operator is adding instead of multiplying etc. This was sad. But clunky as it is, the graph should be valid, and there should be some output in that corner window.
The idea is that ultimately, a .js file can be exported, that describes a
MyMaterial extends Material (technically
ShaderMaterial) with a bunch of getters and setters already defined for you.
So whatever node you end up with in the graph that’s a leaf, under the hood it ends up on
yourInstance.uniforms.yourInput.value but the interface enables you to get and set with
I want to add a gltf option to the sphere,cube,cylinder preview mesh, and i’m not sure how to handle previewing custom attributes. Say something as simple as the second uv channel, but as complex as instance attributes.
Atm, this doesn’t have any vertex logic other than making some varyings, but it would be fairly easy to add some nodes that apply some vertex logic (positions,normals, instancing, maybe the option to do uvs there). I don’t know how to generate, or load data that would be useful for previewing these though.
Hopefully most of the stuff you do, you can undo, and then redo. (ctrl+z, ctrl+shift+z)