PBR Renderer shader definition

Hello, I have been looking at the different ways to create materials in PlayCanvas, From what I can see there are the following two options:

  • Use the Phong/Physical shaders provided in the editor front-end
  • Write your own custom vs/fs + shader definition files and assign them to the model

Is the Physical shader code available somewhere? I want to use it as a base, So I can pass in the maps and do some modifications to the shader stages. From what I have been told PBR rendering is pretty complex, and a lot of uniform variables are sent into the shader programs via the shader definition script, And without a reference, it’s difficult to write.

Is there some way to just write the vs/fs steps I want to do, and then send it further down the PBR processing chain?

Also, Is there any way to preview a shader in the editor viewport, without having to launch the runtime?

Hi @Toku and welcome,

The Physical (PBR) shader code is being generated automatically based on the selected material settings (to optimize and include only relevant bits). You can take a look at how it is being generated here:

Yes definitely, and that is the recommended approach to use the shader chunks system and override parts of the standard material program (PBR). This isn’t fully documented as the API is still changing but if you search on the forums for shader chunks you will find plenty of examples.

You can also check these tutorials:



As of now no, you can’t execute custom Javascript in editor.

There is some work going on to make shader development much easier. https://github.com/playcanvas/engine/pull/2206

1 Like

Thanks for the info, Ill look into adapting the standard shader for the needs of the project. However, As it is compiled during runtime, does that mean there is no available code for the standard shader I can pass into a vs/fs+shader script? Is that available anywhere? And also, Will the shader code change depending on platform, or does GLSL adapt the code for the platform afterwards?

Also, Is there any documentation about uniform variables which are passed into the shader, such as time (to create panning effects)
If there are any tutorials about creating a strobe effect (panning opacity map) through a material that would be ideal

You can take a look at all chunks used to generate the resulting shader here:

All uniforms used are included on each frag/vert file.

All GLSL code will stay mostly the same on all platforms, the only difference is WebGL 1 VS WebGL 2. You will notice #ifdefs in the code that target each API depending on the context the app is running.

The 2nd tutorial I’ve posted above demonstrates how to pass time and override a shader chunk to use for animating.

1 Like

Thanks, I will look into this. I also tried that tutorial and it seemed to work. It doesnt seem as difficult as I anticipated because you can inject code using the js file. Hopefully the node editor will make this a lot easier to port designs from UE/Unity :slight_smile:

1 Like