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

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?

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:

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.

2 Likes

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!

4 Likes

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

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

2 Likes

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 :slight_smile:

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

@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

1 Like

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