Recommend me a node-based shader/material editor compatible with PlayCanvas

[Dan_Organ]

Hi. I don’t really want to write my own shaders. But there are a lot of tools to create shaders by using node-based GUI. Unfortunately, I can’t use tools intended for Unity because they are using another shader language.
What do you think about BabylonJS Node Material Editor? It is exporting GLSL shaders, something like this:

// Vertex shader
precision highp float;

attribute vec3 position;

uniform mat4 u_World;
uniform mat4 u_ViewProjection;
uniform vec4 u_color;

void main(void) {
vec4 output1 = u_World * vec4(position, 1.0);
vec4 output0 = u_ViewProjection * output1;
gl_Position = output0;
}


// Fragment shader
precision highp float;

uniform mat4 u_World;
uniform mat4 u_ViewProjection;
uniform vec4 u_color;

void main(void) {
gl_FragColor = u_color;
}

Can I use it with Playcanvas? Does anyone try it? Do you know another node-based tool compatible with PlayCanvas?

[Leonidas]

Hi @Dan_Organ and welcome,

There isn’t any node based material/shader editor available for PlayCanvas currently. There is a lot of work being done at the moment to support one in the future by the team:

Standard Node Material and Shader Graph

Shader graph asset

Potentially you could use a third party node based system to prepare your shader. But you won’t be able to directly export to GLSL and import to PlayCanvas without making changes to add support for uniforms/buffers etc as PlayCanvas expects them.

[will]

Yeah, I would recommend waiting a few weeks and you should start to see lots of interesting developments relating to node-based shader editing in PlayCanvas. Definitely keep your eye on the GitHub repo for developments!

[Dan_Organ]

@Leonidas

Potentially you could use a third party node based system to prepare your shader. But you won’t be able to directly export to GLSL and import to PlayCanvas without making changes to add support for uniforms/buffers etc as PlayCanvas expects them.

Thanks. Then I’ll try to remap shaders made in Babylon material editor.

@will

Yeah, I would recommend waiting a few weeks and you should start to see lots of interesting developments relating to node-based shader editing in PlayCanvas.

Glad to hear it. It would improve my workflow greatly.

[hearsepileup]

Hey! I can see a bunch of work gone into this feature on Github, just wanted to check if it was still alive? I’m about to do a bunch of shader stuff and am weighing up arbitrarily replacing shader chunks. If there’s a recommended way of inserting my own shader code that isn’t just straight implementing my own from the ground up it’d be great to know

No worries if not, but replacing shader chunks seems like a slightly hacky approach from what I’m seeing and wanted to check!

[yaustar]

@hearsepileup Work is currently being done on it at the moment and will be open source when ready.

Preview of the tool here: https://youtu.be/64fcCy9lvq8?t=4827

[hearsepileup]

Nice work, that looks awesome! Really cool to see this stuff being implemented

[ViktorKom]

Any news about when the node material editor will be realized?
The last update on the GitHub been at 7 months ago.

[Leonidas]

Hi @ViktorKom and welcome,

It’s in closed beta right now, you can request an invite and find more about it in this thread:

[RFC] Shader Editor

Hi Everyone! We’re busy working on a new shader editor for customising materials in PlayCanvas. It is node based and should be familiar to those of you who have experience with node based material editors. Here is a quick screenshot of shader editor: [Screenshot 2021-06-08 at 10.51.03] At launch we plan to support: customising material properties like albedo, normal, specular, roughness etc have access to surface properties like texture coordinates, position, vertex normal sample 2d textur…

[will]

Just to chip in on this. The shader editor is in a separate GitHub repo that is currently private. We’ll open source it when it comes out of closed beta.