My project will pause for a few seconds on iOS devices, but not on Android. Will the rendering ability of playcanvas on iOS devices be weaker than that of Android?
Hi @ashaaaaaaa,
A newish iphone with updated iOS should look very similar to android.
Do you have any idea why iOS would be loading more slowly though? Do you have a project we can take a look at?
Thanks
This is a private project and is not open to the public. I can add you to the project team for your convenience. But please keep it private, don’t fork, don’t set it public
In case of multiple refreshes,the time of loading page opening on ios and Android is quite different. Obviously, the ios device stalled for a few seconds when the progress bar reached 100%.Android phones have a very short period of stagnation.My device is iPhone12, and Android device is a Huawei mobile phone
I would recommend looking at Safari devtools remotely and checking the profiler on startup to see where the time is going.
I don’t quite understand what you said. I don’t have Safari devtools. Can you take a look at it for me? I also put you into my project team, but please keep it private, don’t fork, don’t set it public
Do you not have access to a Mac?
Yes, I have no Mac device to test. It’s all Windows 
If you can DM us a build link (playcanv.as) I can take a quick look
What iOS device do you have and what version of iOS are you using?
Ok, I have sent you a message
Looking at the profiler, it’s related to the shader compiling as you can see in the profiler here:
I’m a bit confused on why it is noticably slower on iOS than Android though.
I’ve written stops on possible ways to reduce these times on this post that you could try: How did he get into the car when the progress bar reached 100% - #11 by yaustar
Are you disabling/enabling lights on the first frame?
I found some code that enables lights at some point into the app and that causes the shaders to recompile
ShowLightEvent.prototype.openLight = function() {
var t = this;
setTimeout((function() {
for (let i = 0; i < t.lightEntitys.length; i++)
console.log("open light"),
t.lightEntitys[i].enabled = !0
}
), 300)
}
It would be better to have this done on the first frame (initialisation or post initialisation) so that you don’t have the shaders compile in the first frame and then 300 ms later, recompile again.
If you must have it done this way, what could be better than disabling/enabling lights, is to set the color to be black to ‘disable’ them. Shaders don’t need to compile then.
Also, try the latest engine 1.61.3 as that has some performance improvements for shaders compiling.
As an extra note, the downside of enabling meshes over several frames to try not to freeze the page for too long may mean longer total shader compile times as they can’t be done in parallel in one frame.
You may want to try having it all done in single frame and see what the time tradeoff is.
Yes, I set the effect of delaying the light on, because when the default setting of the light enabled is true, there will be a jam when entering the page, and when the light is turned off, it will reduce a lot. I thought it would be better to turn on the light later, but obviously I was wrong
I don’t know what you mean by ‘be done in parallel in one frame’ 
I want to know if the pre-loaded material is selected, but it is not used in the project initialization or any time node, will it increase the compilation of the shader?
it will not. Only shaders on meshes that are visible / rendered by the camera have their shaders compiled.
Through some tests, I found that setting clearcoat in the material will make my project stall for a few seconds after loading, but it will be better to implement clearcoat through script
var ClearCoat = pc.createScript('clearCoat');
ClearCoat.attributes.add('materials', {
type: 'json',
title: 'Materials',
schema: [
{
name: 'material',
title: 'Material',
description: 'Material to expose clear coat properties.',
type: 'asset',
assetType: 'material'
},
{
name: 'clearCoatMap',
title: 'CC Map',
description: 'Monochrome clear coat intensity map (default is null). If specified, will be multiplied by normalized clearCoat value and/or vertex colors.',
type: 'asset',
assetType: 'texture'
},
{
name: 'clearCoatMapChannel',
title: 'CC Map Channel',
description: 'Color channel of the clear coat intensity map to use. Can be "r", "g", "b" or "a".',
type: 'number',
enum: [
{ 'R': 0 },
{ 'G': 1 },
{ 'B': 2 },
{ 'A': 3 }
],
default: 0
},
{
name: 'clearCoatMapOffset',
title: 'CC Map Offset',
description: 'Controls the 2D offset of the clear coat intensity map. Each component is between 0 and 1.',
type: 'vec2'
},
{
name: 'clearCoatMapTiling',
title: 'CC Map Tiling',
description: 'Controls the 2D tiling of the clear coat intensity map.',
type: 'vec2'
},
{
name: 'clearCoatMapUv',
title: 'CC Map UV',
description: 'Clear coat intensity map UV channel.',
type: 'number',
enum: [
{ 'UV0': 0 },
{ 'UV1': 1 }
],
default: 0
},
{
name: 'clearCoatVertexColor',
title: 'CC Vertex Color',
description: 'Use mesh vertex colors for clear coat intensity. If clearCoatMap is set, it will be multiplied by vertex colors.',
type: 'boolean',
default: false
},
{
name: 'clearCoatVertexColorChannel',
title: 'CC Vertex Color Channel',
description: 'Vertex color channel to use for clear coat intensity. Can be "r", "g", "b" or "a".',
type: 'number',
enum: [
{ 'R': 0 },
{ 'G': 1 },
{ 'B': 2 },
{ 'A': 3 }
],
default: 0
},
{
name: 'clearCoat',
title: 'CC Intensity',
description: 'Defines intensity of clear coat layer from 0 to 1. Clear coat layer is disabled when clearCoat == 0. Default value is 0.',
type: 'number',
default: 0,
min: 0,
max: 1
},
{
name: 'clearCoatGlossMap',
title: 'CC Gloss Map',
description: 'Monochrome clear coat glossiness map (default is null). If specified, will be multiplied by normalized clearCoatGlossiness value and/or vertex colors.',
type: 'asset',
assetType: 'texture'
},
{
name: 'clearCoatGlossMapChannel',
title: 'CC Gloss Map Channel',
description: 'Color channel of the clear coat gloss map to use. Can be "r", "g", "b" or "a".',
type: 'number',
enum: [
{ 'R': 0 },
{ 'G': 1 },
{ 'B': 2 },
{ 'A': 3 }
],
default: 0
},
{
name: 'clearCoatGlossMapOffset',
title: 'CC Gloss Map Offset',
description: 'Controls the 2D offset of the clear coat gloss map. Each component is between 0 and 1.',
type: 'vec2'
},
{
name: 'clearCoatGlossMapTiling',
title: 'CC Gloss Map Tiling',
description: 'Controls the 2D offset of the clear coat gloss map. Each component is between 0 and 1.',
type: 'vec2'
},
{
name: 'clearCoatGlossMapUv',
title: 'CC Gloss Map UV',
description: 'Clear coat gloss map UV channel.',
type: 'number',
enum: [
{ 'UV0': 0 },
{ 'UV1': 1 }
],
default: 0
},
{
name: 'clearCoatGlossMapVertexColor',
title: 'CC Gloss Map Vertex Color',
description: 'Use mesh vertex colors for clear coat glossiness. If clearCoatGlossMap is set, it will be multiplied by vertex colors.',
type: 'boolean',
default: false
},
{
name: 'clearCoatGlossMapVertexColorChannel',
title: 'CC Gloss Map Vertex Color Channel',
description: 'Vertex color channel to use for clear coat glossiness. Can be "r", "g", "b" or "a".',
type: 'number',
enum: [
{ 'R': 0 },
{ 'G': 1 },
{ 'B': 2 },
{ 'A': 3 }
],
default: 0
},
{
name: 'clearCoatGlossiness',
title: 'CC Glossiness',
description: 'Defines the clear coat glossiness of the clear coat layer from 0 (rough) to 1 (mirror).',
type: 'number',
default: 1,
min: 0,
max: 1
},
{
name: 'clearCoatNormalMap',
title: 'CC Normal Map',
description: 'The clear coat normal map of the material (default is null). The texture must contains normalized, tangent space normals.',
type: 'asset',
assetType: 'texture'
},
{
name: 'clearCoatNormalMapOffset',
title: 'CC Normal Map Offset',
description: 'Controls the 2D offset of the main clear coat normal map. Each component is between 0 and 1.',
type: 'vec2'
},
{
name: 'clearCoatNormalMapTiling',
title: 'CC Normal Map Tiling',
description: 'Controls the 2D tiling of the main clear coat normal map.',
type: 'vec2'
},
{
name: 'clearCoatNormalMapUv',
title: 'CC Normal Map UV',
description: 'Clear coat normal map UV channel.',
type: 'number',
enum: [
{ 'UV0': 0 },
{ 'UV1': 1 }
],
default: 0
},
{
name: 'clearCoatBumpiness',
title: 'CC Bumpiness',
description: 'The bumpiness of the clear coat layer. This value scales the assigned main clear coat normal map. It should be normally between 0 (no bump mapping) and 1 (full bump mapping), but can be set to e.g. 2 to give even more pronounced bump effect.',
type: 'number',
default: 1,
min: 0,
max: 2
}
],
array: true
});
// initialize code called once per entity
ClearCoat.prototype.initialize = function() {
var clearCoatProps = [
'clearCoat',
'clearCoatBumpiness',
'clearCoatGlossMap',
'clearCoatGlossMapChannel',
'clearCoatGlossMapOffset',
'clearCoatGlossMapTiling',
'clearCoatGlossMapUv',
'clearCoatGlossMapVertexColor',
'clearCoatGlossMapVertexColorChannel',
'clearCoatGlossiness',
'clearCoatMap',
'clearCoatMapChannel',
'clearCoatMapOffset',
'clearCoatMapTiling',
'clearCoatMapUv',
'clearCoatNormalMap',
'clearCoatNormalMapOffset',
'clearCoatNormalMapTiling',
'clearCoatNormalMapUv',
'clearCoatVertexColor',
'clearCoatVertexColorChannel'
];
var channels = [ 'r', 'g', 'b', 'a' ];
var updateMaterials = function (materials) {
materials.forEach(function (entry) {
var material = entry.material.resource;
clearCoatProps.forEach(function (prop) {
if (prop.endsWith('Channel')) {
material[prop] = channels[entry[prop]];
} else {
material[prop] = entry[prop];
}
});
material.update();
});
};
this.on('attr', function(name, value, prev) {
updateMaterials(value);
});
updateMaterials(this.materials);
};
What is the difference between directly setting clearcoat through materials and through scripts?
Well, thanks to your help, I can eliminate the influence of some hidden materials 