[SOLVED] Apply a remote texture to pc.ElementComponent

Hello.

I am still learning the engine, so forgive me, if I miss something obvious. I am making a Facebook Instant Game. The issue I am having is to show player’s avatar in the game UI. The project is private, but here is a pseudo code, showing my steps and the error I am getting in console:

This is how I get the remote photo of the player:

        var asset = new pc.Asset(id, "texture", {
            url: url_to_player_photo
        });

        app.assets.add(asset); // I get an error "_loader of null" here without this line

        asset.on("load", function() {
            // template: it is a hidden group of UI elements, one of which is called 'Avatar', an empty Image Element
            var entity = template.clone();
            entity.enabled = true;
            entity.findByName("Avatar").element.texture = asset;
            some_parent.addChild(entity);
        });

        app.assets.load(asset);

Probably I am not applying the texture correctly? However, here is the error I get in the console:

WebGL: INVALID_VALUE: uniform1iv: no array

The error count rises rapidly, until the console stops it from showing.

If it matters, the photo URL is a full path to the file, with params. So, the path doesn’t end with a file extension, since Facebook also adds the app ID, hash number and other details to the path. Accessing the file without those parameters is not possible.

Thanks in advance!

Hi @LeXXik, and welcome! Try changing this line to:

entity.findByName("Avatar").element.texture = asset.resource;

Thank you, @Leonidas )

Well, that did remove the WebGL error, I was mentioning, but there is no image shown. The URL is correct, as I can simply use it in a browser address bar to access the photo.

However, the blueish square in the screenshot is the Avatar image element, which suppose to show the picture.

Do I need to somehow update the texture, like we do with meshes?

Not sure why this isn’t working, if your remote image is available (CORS should be enable as well).

Is it possible to create a simple sample project about this to take a look?

Actually, this is a good info, @Leonidas! Thank you ) Now, I know that I am doing it the right way. It means that the problem is somewhere else, so now I can dig it further. We can consider this issue as closed.

1 Like

Ok, adding the answer for reference. The real cause for not showing the images was the CORS. The solution was to configure the texture handler in initialize method:

this.app.loader.getHandler("texture").crossOrigin = "anonymous";
1 Like