"material-clear-coat",

"material-physical",

<title>PlayCanvas Clear Coat Material</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<link rel="icon" type="image/png" href="../playcanvas-favicon.png" />

<script src="../../build/output/playcanvas.js"></script>

<style>

body {

margin: 0;

overflow-y: hidden;

}

</style>

<!-- The canvas element -->

<canvas id="application-canvas"></canvas>

<!-- 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);

});

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"

});

app.assets.add(cubemapAsset);

app.assets.load(cubemapAsset);

cubemapAsset.ready(function () {

// Mark the cubemaps as RGBM format since it's an HDR cubemap

cubemapAsset.resources.forEach(function (cubemap) {

cubemap.rgbm = true;

});

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>

vec3 combineColorCC() {

return combineColor()+(ccSpecularLight*ccSpecularity+ccReflection.rgb*ccSpecularity*ccReflection.a);

}

#ifdef CLEARCOAT

gl_FragColor.rgb = combineColorCC();

#endif

#ifdef CLEARCOAT

fresnel = 1.0 - max(dot(ccNormalW, dViewDirW), 0.0);

fresnel2 = fresnel * fresnel;

fresnel *= fresnel2 * fresnel2;

fresnel *= ccGlossiness * ccGlossiness;

ccSpecularity = ccSpecularity + (1.0 - ccSpecularity) * fresnel;

#ifdef CLEARCOAT

uniform float material_clearCoatGlossiness;

#ifdef CLEARCOAT

ccGlossiness = 1.0;

ccGlossiness *= material_clearCoatGlossiness;

ccGlossiness += 0.0000001;

float calcLightSpecular(float tGlossiness, vec3 tNormalW) {

float roughness = max((1.0 - tGlossiness) * (1.0 - tGlossiness), 0.001);

float NoH = dot(tNormalW, h);

float NoV = dot(tNormalW, dViewDirW);

float NoL = dot(tNormalW, -dLightDirNormW);

float getLightSpecular() {

return calcLightSpecular(dGlossiness, dNormalW);

}

float getLightSpecularCC() {

return calcLightSpecular(ccGlossiness, ccNormalW);

}