A question about loading materials

Help & Support
43

Yeah,I have seen and forked your test,In your video, it shows that all the functions are working well,the skybox was changed succesfully,but I when running your test I saw the material.cubemap was not changed,and I add a log in forked project,it shows that the .ready function isn’t triggered, and when I adding these code in my demo(which you have it now),the .ready function isn’t triggered either,this is my code:

var mat = asset.resource;
entity.model.model.meshInstances[index].material = mat;
if (mat.name === "polesrar2_carpaint_white_mat.json") {
    // The material with the problem in the door
    var textureUrls = [
        "./polestar2/47347304/Refl_0005s_0000.jpg",
        "./polestar2/47347304/Refl_0005s_0000.jpg",
        "./polestar2/47347307/Refl_0001s_0000.jpg",
        "./polestar2/47347306/Refl_0002s_0000.jpg",
        "./polestar2/47347304/Refl_0005s_0000.jpg",
        "./polestar2/47347304/Refl_0005s_0000.jpg"
    ];

    // Create assets from the texture URLs
    var textures = textureUrls.map(function (url, i) {
        var asset = new pc.Asset('skybox' + '-' + i,
            'texture', {
                url: url
            });
        app.assets.add(asset);
        return asset.id;
    });

    var cubemap = new pc.Asset(
        'skybox',
        'cubemap',
        'null', {
            textures: textures
        }
    );
    this.app.assets.add(cubemap);
    // app.assets.load(cubemap);
    // app.setSkybox(cubemap);
    cubemap.ready(function (asset) {
        console.log('triggered');
        for (var i = 0; i < textures.length; ++i) {
            var texture = app.assets.find(textures[i]);
            texture.resource.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
            texture.resource.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
        }
        mat.resource.useSkybox = false;
        mat.cubeMap = asset.resource;
        mat.update();
        console.log(mat);
    });
}

I was deeply confused.btw in my demo, you can find that the material of the car lamp is not loaded successfully，which also bothers me :joy_cat:

44
45

You have a typo here. 'null' should be null

    var cubemap = new pc.Asset(
        'skybox',
        'cubemap',
        null, {
            textures: textures
        }
    );

Then you should be able to load the cubemap without errors via

    app.assets.load(cubemap);

There is still an issue on why the cubemap doesn’t appear as expected on the material but I’m on holiday so can’t look into it.

@mvaligursky @slimbuck I’ve replicated the issue of the material not appearing on this project unless it’s also the skybox: https://playcanvas.com/editor/scene/1164378

If you get some time next week, can you take a quick look please?

1 Like
46

@yaustar it took a little while to spot the issue. In cubemap-at-runtime.js the line:
material.update();

should be:
material.resource.update();.

You might want to consider changing the variable declaration while you’re at it:
var material = app.assets.find('test-material').resource;

2 Likes
47

Ouch. I wonder how that didn’t throw an error? Does pc.Asset have an update function?

48

Fixed demo project: https://playcanvas.com/editor/scene/1164378

1 Like
49

Another question about loadding materials :joy_cat:
In the demo,there is a car light model，and it also have loaded materials,but according the render effects,it shows that it lost some materials,I have checked the log,and didn’t find the reason because the log shows that all material was loaded successfully,so,I have to turn to you for help.

50

What do you mean by ‘lost’?

Which render effects?

Has the material been added correct to a model in the scene?

Has update on the material resource been called?

Can you show this issue in a smaller project that someone on the forum can look at?

51

Hi,I made a demo:DynamicLoadMaterials.

You can see there are two car lights(left and right),the left car light entity is just model in the scene,the right car light entity has model and perfect materials.

In fact,both of these car lights entity had perfect materials,and I have downloaded the assets(I put these assets on the server：https://arlive.sixeco.com/test ) through this way:

截屏2021-06-15 15.00.38
截屏2021-06-15 15.00.38692×1422 86.1 KB

then I cleared the materials of left car light,so this entity is only model,But,I add a scriptComponent to add materials dynamicly.

Now,all the preparations are done.So,I launched,and got a mistake about CORS policy(error log:Access to XMLHttpRequest at ‘https://arlive.sixeco.com/test/polestar2_light_only_model.mapping.json’ from origin ‘https://launch.playcanvas.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
arlive.sixeco.com/test/polestar2_light_only_model.mapping.json:1 Failed to load resource: net::ERR_FAILED).

if you launch this project,you can get it too. so,I packaged this project and put it on my server,and the address is DynamicLoadMaterials ,So you can see the final effect，the left car light materials are not well rendered as the right car light,I don’t know why.please help,thank you!

52

Demo is private so I can’t access it: https://playcanvas.com/editor/scene/1175758

Is this the only error you get? If so, it’s a server configuration issue rather than a PlayCanvas one. You will need to setup your server to allow sites from other domains to access the files.