How to use custom shaders in the PlayCanvas editor?

I don’t see a way to provide custom shaders as input for ScriptComponents in the PlayCanvas editor like in the old way.
The editor doesn’t seem to allow me to use the shader files anywhere. So, is it not possible anymore?
Can we only provide shaders with an inline string?

And can anyone tell me how this used to work? … “shader chunk”? Where’s the rest of the program?

It is possible to create script attributes to reference shader assets.

You can define script attribute with type asset and assetType shader and hit “parse” on script in Editor to get attributes parsed.

Hi Max, thanks for your reply. I’m afraid I don’t fully understand this.
I included some two script attributes of assetType shader in this test
and ‘parsed’ the script. Now those parse arrows are red, but I don’t feel like I referenced any of the shader files.

Please learn how to debug your applications:

You’ve got basic error there, if you launch you’ll see where error is.

Ok, that was just silly of me. I did not launch the game, and was more focused on the settings.
Still trying to find out why my vertex and fragment shader are empty objects according to the material.

Your script code is wrong again.

var vertexShader   ='vshader');

Why you doing this if you already have attribute.
Then further down, asset != resource.
So what you need is this:

var vertexShader = this.vshader.resource;

Use Dev Tools in Chrome, and console.log to log things out and inspect variables in code using breakpoints - those are essential skills in development.

I have scarce idea of how the editor is trying to do what. Of course I tried several things and logged, but even inline strings for the fragment shader yields an empty shader {} object. so I assume something else is wrong. But I will try to debug…

Don’t forget this.material.update() after you changed shader.

Here is tutorial for custom shader:


One thing I noticed with the engine some time ago is that shaders don’t seem to work (or work the same) for entities if they use the StandardMaterial instead of Material class and the way they’re updated seems fundamentally different from eachother, which is kind of confusing.

Long story short, my shader programs work locally, but not even the simplest I can get to work in the editor.

Try creating a pc.BasicMaterial instead if you have a completely custom shader. Then in your sharedmaterial script you are not actually assigning the material to the model, you just set it to this.material which is not going to do anything. So instead try assigning the material to the model’s mesh instances e.g.

this.entity.model.meshInstances[0].material = this.material;

Note that the BasicMaterial doesn’t have properties like diffuse etc like the StandardMaterial has. You essentially have to set parameters for your shaders yourself instead. Also don’t forget to call setShader on your material after you create it.


perfect advice, this helped me out! got the program working, thank you! :slight_smile: