[RFC] Shader Editor

[slimbuck]

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:

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 textures
• support the usual array of math functions
• primarily engine-only workflow with some basic editor support

Post launch we plan to add support for:

• modify vertex offset
• support post-process materials
• add branching and flow control nodes
• in-editor workflow
• modify and customise lighting

Please can you tell us what you most would like to create with a shader editor tool like this in the comments below?

Thanks!

[Leonidas]

Many thanks for this update, it looks great!

It will be of great use to us to have an easy to use tool that lets us easily mix colors/maps in a material. For example in this PlayCanvas scene for the ground:

We use vertex colors to paint the various material channels (diffuse, normal, metal, parallax) on the ground. For example red for grass, blue for pavement etc. Although the mapping is straightforward right now it requires a complex to maintain shader to do that.

Here we use black/white masks to blend two textures together for dirt/decay on materials. This is actually doable right now with detail textures, but sometimes we take it a step further and blend three maps at the same place. Being able to do this visually or at least with easy to maintain shader code would be very helpful!

Same for being able to do small things like rotate a texture map by a certain angle.

Many thanks again.

[Dava]

I am working at a betting/casino dev company, we are in need of a custom shader in order to make an animated background for our apps, similar to this https://www.shadertoy.com/view/ltGSWD

If the graph has the ability to create such a thing, I would like to apply as a beta tester.
I have experience with node-based procedural graphs such as Substance Designer (https://www.artstation.com/davasoft) and Unity3D Shader graph

[underlight]

Looks promising!
Is it going to tackle into existing shader chunks, or they’re going to be will be completely rewritten as well?

[slimbuck]

Hi @Dava,

This should be possible with a combination of textures or just math. Have you tried creating something like this?

Thanks!

[slimbuck]

Hi @underlight,

The Shader Editor will replace the engine’s frontend chunks. By this we mean all the chunks that define artist-tweakable look of the material.

The backend chunks, which deal with lighting and shadowing and everything else engine-side will be shared with the existing standard/uber material.

Hope that makes sense

Thanks!

[Dava]

@slimbuck

This should be possible with a combination of textures or just math. Have you tried creating something like this?

Just started working with shaders, now I know it’s easy, but I would still like to participate in shader graph as beta tester if possible, I would like to see how it’s working

[slimbuck]

Ahh sorry I thought you were already in the beta @Dava. @yaustar should have given you access now!

[aaron_ligthart]

awesome news! I just got back into weblGL shaders again and I recently thought this feature would be great. For me it would be cool if we’d be able to access the depth buffer of a camera to create some effects based on distance.

If it’s possible I’d love to beta test the shader graph to test the workflow of creating shaders this way.

[yaustar]

Done. I send you a DM

[hagane3d]

Hello guys,

I recently saw that shader graph editor is on beta testing, that’s great!
Would be possible to join to this beta and check it out the editor and capabilities, I think I’m not an expert, but I have some experience building shaders in different shader graph editors from UDK/UE4 to shader forge, amplify, and lastly the Effekseer shader editor.

I hope it can be possible
Thanks in advance.
Cheers!

[yaustar]

Done

[Mark_Lundin]

Any chance of a beta test @yaustar ?

[yaustar]

done

[Nazar_Unloop]

Hi Steven,

Me and my colleague are currently developing a boat simulator in which in some parts of this boat it is necessary to have a mixture of two overlapping materials (one of them with alpha). I don’t know how to write shaders, but I know how to make shaders through nodes. I just found out that your team is developing Shader Editor and I would like to know how I can experiment with making shader nodes on playcanvas.

Thanks,

[yaustar]

@Nazar_Unloop Unfortunately, at the moment, the shader editor is not yet ready to be used with production yet so there isn’t any integration with the Scene Editor.

[Nazar_Unloop]

Thank you for reply. Anyway is it possible in playcanvas blend two materials in one?

Cheers.

[Leonidas]

You can use the detailMap channel to blend e.g. a second diffuse map with the default one.

This setting is not exposed in editor, you can use it in your code. Check the API here:

https://developer.playcanvas.com/en/api/pc.StandardMaterial.html#diffuseDetailMap

[Leonidas]

Check this as well, it may be of help using a custom a shader:

Color to Texture transition

Hi @AnasRahim, Not sure if it can be done without a shader, here is my take by overriding the diffuse chunk: const ColorChange = pc.createScript('colorChange'); // initialize code called once per entity ColorChange.prototype.initialize = function() { const material = this.entity.model.material; material.chunks.diffusePS = 'uniform vec3 material_diffuse;\n'+ 'uniform sampler2D texture_diffuseMap;\n'+ 'uniform float transitionState;\n'+ '\n'+ 'v…

[Nazar_Unloop]

Thank you.
I’ll take a look at this