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:

https://playcanvas.github.io/#graphics/material-clear-coat.html

Hello @Leonidas many thanks, this is the source

PlayCanvas Clear Coat Material body { margin: 0; overflow-y: hidden; }
<!-- The script -->
<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
    app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
    app.setCanvasResolution(pc.RESOLUTION_AUTO);

    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.addComponent("camera");
    camera.translate(0, 0, 3);
    app.root.addChild(camera);

    // 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)
    });
    app.root.addChild(light);
    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('helipad.dds', 'cubemap', {
        url: "../assets/cubemaps/helipad.dds"
    }, {
        type: pc.TEXTURETYPE_RGBM
    });
    app.assets.add(cubemapAsset);
    app.assets.load(cubemapAsset);
    cubemapAsset.ready(function () {
        app.scene.setSkybox(cubemapAsset.resources);
    });

    // 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);
        app.root.addChild(sphere);
    };

    // 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;
                material.update();

                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;
                clearCoatMaterial.update();

                createSphere(0.5, 0, 0, clearCoatMaterial);

                app.start();
            });
        });
    });

    // 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));
        camera.lookAt(pc.Vec3.ZERO);
    });
</script>

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.

1 Like

Thanks @Leonidas !