# Sneak peek of the upcoming Node Material Editor ;D

**URL:** https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762
**Category:** Announcements
**Tags:** material
**Created:** [July 26, 2019, 10:41pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762 "2019-07-26T22:41:30Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [July 26, 2019, 10:41pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/1 "2019-07-26T22:41:30Z")

</div>

Check out a sneak peek of the new Node Material Editor coming with Babylon.js 4.1 in the fall!

I’m pouring a lot of love in it. I hop you folks will like it:

---

<div class="post-metadata">

### Author: ![Mr\_K](https://avatars.discourse-cdn.com/v4/letter/m/e56c9b/32.png) [@Mr\_K](https://forum.babylonjs.com/u/Mr_K)
#### Post date: [July 26, 2019, 11:32pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/2 "2019-07-26T23:32:17Z")

</div>

Amazing! I can see the potential for it becoming like Substance Designer in the web

---

<div class="post-metadata">

### Author: ![gryff](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gryff/32/1855_2.png) [@gryff](https://forum.babylonjs.com/u/gryff)
#### Post date: [July 27, 2019, 5:26am UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/3 "2019-07-27T05:26:03Z")

</div>

@Deltakosh : How long have you been in Seattle? The French accent gets stronger!

cheers, gryff 🙂

---

<div class="post-metadata">

### Author: ![poetoem](https://avatars.discourse-cdn.com/v4/letter/p/3be4f8/32.png) [@poetoem](https://forum.babylonjs.com/u/poetoem)
#### Post date: [July 27, 2019, 10:43am UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/4 "2019-07-27T10:43:07Z")

</div>

Wow that’s really impressive.  
So amazed by how powerful this stuff is!  
Great work!

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [July 27, 2019, 1:57pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/5 "2019-07-27T13:57:46Z")

</div>

5 years now:) but I’m getting older as well so not sure I will get a better accent anytime soon

---

<div class="post-metadata">

### Author: ![Wingnut](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wingnut/32/53_2.png) [@Wingnut](https://forum.babylonjs.com/u/Wingnut)
#### Post date: [July 27, 2019, 2:37pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/6 "2019-07-27T14:37:49Z")

</div>

DK likely gets SO MUCH American Girl attention. That’s probably why he is reluctant to lose the accent. 🙂 Too many sexy girls running-up, asking him to teach them about BJS. 😉

[[link to related thread](https://forum.babylonjs.com/t/node-based-material/1739)] If anyone has a link-to a super easy tutorial about WHAT IS a node-based material, please paste it… thx.

---

<div class="post-metadata">

### Author: ![aWeirdo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aweirdo/32/52_2.png) [@aWeirdo](https://forum.babylonjs.com/u/aWeirdo)
#### Post date: [July 27, 2019, 2:53pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/7 "2019-07-27T14:53:45Z")

</div>

Looks awesome! 🙂

---

<div class="post-metadata">

### Author: ![Wingnut](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wingnut/32/53_2.png) [@Wingnut](https://forum.babylonjs.com/u/Wingnut)
#### Post date: [July 29, 2019, 7:34pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/8 "2019-07-29T19:34:42Z")

</div>

Ok, so, can I start rattling-on about this? 🙂

Let’s look at Blender [“Material Nodes” -types](http://builder.openhmd.net/blender-hmd-viewport-temp/render/blender_render/materials/nodes/index.html). I think I counted 25 or 26 “material” node-types. Let’s call the Material Nodes area/system…the “materTree”… for fun.

Blender also uses node-trees… for Textures. Let’s look at [the available Texture Nodes](http://builder.openhmd.net/blender-hmd-viewport-temp/render/blender_render/textures/nodes/index.html). Let’s call it… “textuTree”, for even more fun. 🙂

Blender also has a node-tree system called: “Compositor”. Let’s look at the [Compositor node types](http://builder.openhmd.net/blender-hmd-viewport-temp/compositing/index.html). Let’s call it… “compoTree”.

It appears that the Compositor (compoTree)… includes ALL the node-types allowed in materTree, plus a few more. It also includes MOST of the node-types of textuTrees. (So what, Wingy?) 🙂

The two node-types that I was sort-of interested-in… was the Composite Node (compoTree-only)… and the Color/Mix Node… available in all 3 “systems”.

That’s the Blender-side of things. The BabylonJS system might be different. All in all, there seems to be plenty of power available. It looks like we can wire anything to anything… a massive pipe-o-thon!

Ok, that’s all I got… a mini intro to node-wrangling on Blender’s big 3 “tree” systems. Use the links above… to dive deeper into reading about Blender’s trees/branches/nodes, and expect a great materials future for BabylonJS. PARTY!!!

---

<div class="post-metadata">

### Author: ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)
#### Post date: [July 30, 2019, 7:00pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/9 "2019-07-30T19:00:46Z")

</div>

ohhh my this is amazing!  
I am extremely excited to have this.

Great work.

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [July 31, 2019, 3:01pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/10 "2019-07-31T15:01:52Z")

</div>

Thanks man, this kind of feedback fuels my motivation

---

<div class="post-metadata">

### Author: ![Elk](https://avatars.discourse-cdn.com/v4/letter/e/bbe5ce/32.png) [@Elk](https://forum.babylonjs.com/u/Elk)
#### Post date: [August 1, 2019, 7:25am UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/11 "2019-08-01T07:25:20Z")

</div>

This looks amazing, I can see myself loosing hours to this just playing around. And as a bit of a shader noob, this is going to be a great learning tool as well as a workflow improvement.

Keep up the great work 🙂

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [August 1, 2019, 2:53pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/12 "2019-08-01T14:53:04Z")

</div>

I really want to use the Node Material as a tool to create shareable materials in the community. We will have a dedicated folder in the assets repo where everyone will be able to get or save specific materials to share

---

<div class="post-metadata">

### Author: ![lluull](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lluull/32/3104_2.png) [@lluull](https://forum.babylonjs.com/u/lluull)
#### Post date: [August 2, 2019, 12:01am UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/13 "2019-08-02T00:01:53Z")

</div>

Hi,

This is awesome news, i see this post just now and i am super excited about … nodal materials is very welcome improvement for Babylon.

i have immediately try to try it but the playground get a error on startup making this preview node editor keeping some mystery for now 🙂

 ![materialeditor](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/d4ea47b42aafde0224060639309d1ddaa4c9c297.jpeg)

anyway keep rolling your amasing work guy’s.

notes:  
the nodes view looks good totally aligned with the modern flat and slick aesthetic of today.

by the way i am not fan of the collapsable side panels inherited from the inspector style, nothing wrong, but on my taste it is cumbersome left and right sides design, and this enforce many annoying mouse travel.

thx.

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [August 2, 2019, 12:39am UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/14 "2019-08-02T00:39:12Z")

</div>

This is the right URL (check the video’s comments ;)): [https://playground.babylonjs.com/#4I3SIR#1](https://playground.babylonjs.com/#4I3SIR#1)

---

<div class="post-metadata">

### Author: ![lluull](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lluull/32/3104_2.png) [@lluull](https://forum.babylonjs.com/u/lluull)
#### Post date: [August 2, 2019, 12:50am UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/15 "2019-08-02T00:50:19Z")

</div>

oops … my bad, maybe i need some glasses …

thx.

---

<div class="post-metadata">

### Author: ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)
#### Post date: [August 2, 2019, 3:13pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/16 "2019-08-02T15:13:54Z")

</div>

Sooooo, why are the “blocks” parented right under the main BJS object?

Shouldn’t they all be under like BABYLON.MaterialNode.blockOfSomekind?

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [August 2, 2019, 3:24pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/17 "2019-08-02T15:24:40Z")

</div>

All classes in BJS are under BJS main object. This is mandatory as we also support ES6 modules

---

<div class="post-metadata">

### Author: ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)
#### Post date: [August 2, 2019, 4:34pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/18 "2019-08-02T16:34:11Z")

</div>

I thought in ESNext you could still do things like

BABYLON.SomeClass.SubClass = class{…}

I’m guessing it’s a reverse compatibility thing then?

Also I guess it kinda does not matter sense everything is split up in ts files.

Never mind me 😆, I was just thinking out loud at this point.

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [August 2, 2019, 5:45pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/19 "2019-08-02T17:45:46Z")

</div>

> [@Pryme8](#):
>
> I’m guessing it’s a reverse compatibility thing then

Correct 🙂 We need to satisfy both worlds

---

<div class="post-metadata">

### Author: ![drburton](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/drburton/32/625_2.png) [@drburton](https://forum.babylonjs.com/u/drburton)
#### Post date: [August 17, 2019, 8:55pm UTC](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762/20 "2019-08-17T20:55:17Z")

</div>

That will teach me to take a couple of weeks off! This is amazing stuff!  
Any plans for a node based scripting system for Babylon.JS?

[Next page](https://forum.babylonjs.com/t/sneak-peek-of-the-upcoming-node-material-editor-d/4762.md?page=2)
