PlayCanvas car paint shader

Hello friends, I would like to know if there is any tutorial to make a carpaint shader / material in playcanvas, that has flakes and small flares in the paint. It is understood? Any help will be appreciated.

Hi @Ariel_Cancio,

From what I know, no there isn’t any tutorial.

Clear coat materials are now available in the engine, making car paint reflections easier. It’s not yet implemented in the editor, but you can enable it in code, take a look at this engine example:

Hello @Leonidas many thanks, this is the source

PlayCanvas Clear Coat Material body { margin: 0; overflow-y: hidden; }
<!-- The script -->
    var canvas = document.getElementById("application-canvas");

    // Create the application and start the update loop
    var app = new pc.Application(canvas);

    // Set the canvas to fill the window and automatically change resolution to be the same as the canvas size

    window.addEventListener("resize", function () {
        app.resizeCanvas(canvas.width, canvas.height);

    var miniStats = new pcx.MiniStats(app);

    app.scene.gammaCorrection = pc.GAMMA_SRGB;
    app.scene.toneMapping = pc.TONEMAP_ACES;
    // Set the skybox to the 128x128 cubemap mipmap level
    app.scene.skyboxMip = 1;

    // Create an entity with a camera component
    var camera = new pc.Entity();
    camera.translate(0, 0, 3);

    // Create an entity with a directional light component
    var light = new pc.Entity();
    light.addComponent("light", {
        type: "directional",
        color: new pc.Color(1, 0.8, 0.25)
    light.setLocalEulerAngles(85, -100, 0);

    // Load a cubemap asset. This DDS file was 'prefiltered' in the
    // PlayCanvas Editor and then downloaded.
    var cubemapAsset = new pc.Asset('', 'cubemap', {
        url: "../assets/cubemaps/"
    }, {
        type: pc.TEXTURETYPE_RGBM
    cubemapAsset.ready(function () {

    // function to create sphere
    var createSphere = function (x, y, z, material) {
        var sphere = new pc.Entity();

        sphere.addComponent("model", {
            material: material,
            type: "sphere"
        sphere.setLocalPosition(x, y, z);
        sphere.setLocalScale(0.7, 0.7, 0.7);

    // async load a textures, create materials and spheres, then start app
    app.assets.loadFromUrl("../assets/textures/flakes5n.png", "texture", function (err, asset) {
        var normalMap = asset.resource;
        app.assets.loadFromUrl("../assets/textures/flakes5c.png", "texture", function (err, asset) {
            var diffuseMap = asset.resource;
            app.assets.loadFromUrl("../assets/textures/flakes5o.png", "texture", function (err, asset) {
                var otherMap = asset.resource;

                var material = new pc.StandardMaterial();
                material.diffuseMap = diffuseMap;
                material.metalnessMap = otherMap;
                material.metalnessMapChannel = 'r';
                material.glossMap = otherMap;
                material.glossMapChannel = 'g';
                material.normalMap = normalMap;
                material.diffuse = new pc.Color(0.6, 0.6, 0.9);
                material.diffuseTint = true;
                material.metalness = 1.0;
                material.shininess = 90.0;
                material.bumpiness = 0.7;
                material.useMetalness = true;

                createSphere(-0.5, 0, 0, material);

                var clearCoatMaterial = new pc.StandardMaterial();
                clearCoatMaterial.diffuseMap = diffuseMap;
                clearCoatMaterial.metalnessMap = otherMap;
                clearCoatMaterial.metalnessMapChannel = 'r';
                clearCoatMaterial.glossMap = otherMap;
                clearCoatMaterial.glossMapChannel = 'g';
                clearCoatMaterial.normalMap = normalMap;
                clearCoatMaterial.diffuse = new pc.Color(0.6, 0.6, 0.9);
                clearCoatMaterial.diffuseTint = true;
                clearCoatMaterial.metalness = 1.0;
                clearCoatMaterial.shininess = 90;
                clearCoatMaterial.bumpiness = 0.7;
                clearCoatMaterial.useMetalness = true;
                clearCoatMaterial.clearCoat = 0.25;
                clearCoatMaterial.clearCoatGlossiness = 0.9;

                createSphere(0.5, 0, 0, clearCoatMaterial);


    // update things each frame
    var time = 0;
    app.on("update", function (dt) {
        // rotate camera around the objects
        time += dt;
        camera.setLocalPosition(3 * Math.sin(time * 0.5), 0, 3 * Math.cos(time * 0.5));

where should i put this code ?? I do not understand sorry

Hi @Ariel_Cancio,

So that’s an engine example, meaning that it starts a project directly without the editor.

You will have to study it and grab the relevant parts to use in an editor script.

Here is where the clear coat material properties are set. I think that’s all you need.


Thanks @Leonidas !

@Leonidas, when will the clearcoat setting be enabled in the editor? It’s been a while now, and I still haven’t seen it anywhere :slight_smile:

I already use the code to generate my materials, but I’d be much happier if I could use materials created in the editor.

While I have your attention, is it possible to create a two-tone base coat in any way using a fresnel value?

@yaustar may be able to find out when editor support for this is coming out.

In the meantime Will has made a script that makes it easier to use a clearcoat material, check it out:

Ah, I am not sure about it, @yaustar who from the team may know this?

@ray is the guy. But I don’t believe we implement two-tone based coat.

1 Like

@eilsoe - clear coat enabled in the editor is probably just a few days away - it has been implemented - just needs testing and deployment.

Clear coat currently only supports the additional clear coat layer - it is possible to get a two tone effect in the base layer using specular color and a metallic fleck normal map (top sphere is with clear coat, bottom is just base layer):

A better effect could be achieved with a custom shader or shader chunks.


Ah, thanks! :slight_smile:

Glad to hear it’s not far off now. I’ll give it a shot with your two-tone approach. See where it gets me :slight_smile:

Hi Playcanvas-Team,

sorry to bring this up again but is there any news on the clear coat / car paint shader in the editor?


@ray would know.

@will would know.