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.
2 Likes
@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 
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?
@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.
3 Likes
Ah, thanks!
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
Hi Playcanvas-Team,
sorry to bring this up again but is there any news on the clear coat / car paint shader in the editor?
Thanks
Martin