I have been working in the Node Material Editor lately.
As part of the Babylon toolset, I think it is a gem.
Experimenting with it made me eager to master it. Which is awesome
I noted a few suggestions to make the user experience even better. Without any further ado:
Add a standard “Save as…” button that allows the user to choose the name and path on the file system of the output JSON file.
Fix control key behaviour on mac. When key is down, clicking anywhere makes a contextual menu pop up as if the user right-clicked This makes the rectangle-selection tool hardly usable and there is a true risk of then clicking “back” by mistake and lose some progress. true story.
Ability to embed GLTF model for the preview area directly in the output JSON file, or automatically load it from a public or local url.
Ability to change position of lights within the preview area OR make it so that when the PLAY button is pressed, while the model is turning on itself, the lights remain static so that we can see the model under more dynamic light conditions.
Make it a PWA as promised (!) OR make the github repository version work offline entirely; serving the repo is currently not working without access to the internet, both index.html and index-local.html contained in the ./nodeEditor /public/ return errors because they need to be online to download all of their static assets. That, or maybe I am not serving the files properly?
Add Node Material importing and viewing support to the Sandbox, to make it the absolute asset file viewing experience ever.
Finally, add a hotkey for quickly searching and inserting nodes right under the mouse cursor. I think other node interfaces use the Tab key usually and this is very helpful.
@wwwonka, thank you very much for the feedback! There are a couple of solutions I can point you to right now.
I had also wanted a “save as” button, but there are security protocols for browsers that prevent a page from doing that. There is a work around that allows this behavior, however. In your browser (I think most have some version of this) go into your preferences and navigate to your download location option. In there you will see an “ask every time” option which in essence makes every download a save as. While this is a global change and I was hesitant about doing it myself, I’ve found it helpful to be able to rename files I download and choose a path for them as it helps me stay organized and not have to remember the random name of the file I just downloaded for all files, not just node material json files.
We will certainly look into the key options to make things easier on MacOS
I like the idea of being able to tag a url in a json to load a custom model for NME. Embedding a model in the json could aggravate issues I am seeing around file size due to embedding textures. And this would only be a feature used in stand alone NME as if you have your scene loaded and open NME, you see changes on your actual model so a second preview window is less useful. But I think there may be something there that we can make better, possibly loading the model from the scene with the json when NME is launched from the scene. We will bounce this idea around because we need to make sure that we aren’t impacting performance of the node material running in scenes to reduce click tax in the authoring step.
We can certainly look into a toggle to rotate camera vs rotate model in preview. I know there is a desire for both but when we launched we chose rotating camera as our base to mimic what would likely happen in scene.
I agree with you that we all want a PWA for NME and it is on the list but we needed to focus on adding PBR, particle, and post process support to NME for this release. You can run things locally if you set up Babylon.js through a local server but this may be more set up than you are willing to do. I do prefer to develop locally before creating a playground to speed things up for me.
You can add node materials and import to the sandbox right now. Our main challenge is that the sandbox is a viewer/debugger, not a scene editor, so we need to be careful about sliding too far toward the latter or we will need to add a lot of functionality that will dramatically shift the focus in developing for the engine. To that end, we have added in a few places the ability to right-click add components to the scene and one of those is on the Materials group. You can then add a node material to the scene which can then load a json file. To assign the material to your mesh, select the mesh and in the inspector, you can change the Active Material to the node material you just created. I do this often for generating renders of meshes with custom node materials applied.
7. I also want to add a hotbox for adding nodes. We left it out of the first version due to the size of the task of designing and building the tool initially and with this release we needed to address the materials that were left out of v1. Getting this interaction right will take some iteration, but I agree with you that a faster way to grab nodes would be great.
Thanks again for the suggestions! We will certainly look into everything. Take care!
Hi @PatrickRyan, and thank you for such a detailed answer…!
I have been following your youtube tutorials along and I always feel honoured to get a response from one of the core members!
Your workaround works per-fect-ly!!
Thank you for adopting such a cross-platform attitude on behalf of all people using apple-stuff within the babylon community…
I agree with you that embedding the model directly within the JSON file isn’t necessarily the best approach; no unnecessary heavy files of any sort needed. The real pickle for me has more to do with having to reload the custom model every time I go back to work on a node material specifically created for a specific mesh. …If only there was a way of saving within the JSON a path that loads & displays the model automatically whenever it has been loaded… and then,it could simply fall back to the default cube whenever the model is missing from the path. I think this would only add that extra wow bit to the already amazing dev experience
I had only been using the standalone version of the NME before you mentioned it working with the sandbox. You raised my curiosity I can only dream of simply having to click a mesh while running my game and see its shader graph pop up, displaying the changes I am making in real-time + ready to be saved…! This kind of polishing should not remain secret, please make a youtube tutorial! The world has to know!
This feature is very much needed in my opinion. Seeing how lights affect the material while things are moving will only make the preview area closer to a real scene context and prevent the user to have to do some back & forth between the real scene and the NME down the line.
Those features are not only more exciting, but adding more value to the tool than making it a PWA for now. Although speaking here as a “digital nomad”, I cant wait for the NME to be PWA-ified as I have been struggling to make everything work offline even though I am using local servers all the way in my development. Peeking at the link you provided, am I wrong to think this would only be suitable for the “non-standalone” workflow? If possible, would you mind pointing me out by which way I can set the NME to be entirely reliable offline? I have been trying to serve the cloned babylon repo on my machine as @Deltakosh told me some time back but it doesnt work; as I told you I think it has to do with the index.html file trying to load external assets:
I can download those on my machine and modify the index.html file as I have been doing, but I think a much better experience would be for the NME to get updated along with the repo whenever I fetch for updates so that I can experiment with the new features as soon as they get released, no? You think this is currently possible?
I had no idea this was a thing! I have been doodling with this and I love it! Hey. Is there a way of embedding the shaders within aGLB or is this only supported with the .babylon format? So far my GLBs exported from the sandbox dont come along with the node materials. Is this a limitation of GLTF or perhaps I am making a mistake?
Zero stress on this! These are all wishes! And it is actually quite surprising to me to get heard in this regard! I wished I had the brain to help you out but it seems I can only wish for now…
*8. …Actually here is an extra wish (!) : to make the comment attribute of each node better suited for multi-line commentaries; as I am still fairly new to shader logic, I have been heavily using these as mental reminders of what everything does. As of now, the whole comment gets displayed in a single line in the inspector and it makes it hard to edit. But I am no princess and can live with it without any problems.
Anyways, thank you for hearing my suggestions out Patrick, and I am looking forward to unravel further more my understanding of this incredible tool that you’ve created.
@wwwonka, I do have a couple of answers for you right now. I am working on identifying what we will land for the 4.2 release out of your suggestions and what will be attacked post 4.2. But for now, I can give you a few things to use right now.
Glad it helped!
We always want to address any cross-plat concerns as Babylon.js is a cross-plat environment.
I am working on some UX around this topic. I don’t know where it will land yet. For now, there are a couple of tutorials on using NME on assets in your scene. A couple I can think of that walk through the process (though this wasn’t exactly the purpose of the video) were Lighting in Node Material and Fun with Light Textures. The first is just setting up the node material in NME stand-alone and the second shows importing the node material into the playground and updating the mesh in real time using NME.
Working on UX for this as well.
The trick to making all of these offline only would be to set up a local server. The way I do it is using the node.js package http-server which you can see in use on this video. If you put the local version of Babylon.js and your project in the same location on your drive and run the http server from there, you can serve the Babylon files from localhost and everything should run locally. If you have problems with getting it set up and running locally, set up a thread and ask specific questions about the issues you are having and someone from the team should be able to straighten it out.
The glTF spec does not have any concept about node material. This is specific to the Babylon.js engine so anything you create will need to be saved as a .babylon file if you want custom shaders. The only way to incorporate Babylon.js node materials into glTF would be through a custom extension to the spec. However the problem with extensions is that no one is directed to implement the extension so you lose the universal nature of the glTF format. So in that case, it makes no sense to create an extension for node material in glTF when the .babylon format is available.
Looking at this in the context of where NME will go from here.
One thing you can do for comments right now is to add comments to frames. The frame will wrap the comment to stay within the frame, so you can be a bit more verbose. The input field is still the same, so editing a long comment isn’t the best experience, but the frame will allow you to contain the comment a little better. Typically, you won’t want novels for comments in your shader code because that increases download size for the json (not by a lot but download is always your enemy). Usually I try to keep comments down to only areas that need them for clarity and try to be brief.
We’re always happy to get feedback and know how the community is using the engine to make sure we are delivering the best user experience. Thanks again for the comments and take care!
I can only dream of simply having to click a mesh while running my game and see its shader graph pop up, displaying the changes I am making in real-time + ready to be saved…! 
This kind of polishing should not remain secret, please make a youtube tutorial! The world has to know!
