[SOLVED] Apply a remote texture to pc.ElementComponent


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;


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!

1 Like

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";

I embedded this code before loading assets,

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

but I still encounter cross-domain problems and prompt the following error:

Can you tell me exactly how you eliminated this type of error?

I‘m sure it now just have CORS problem cause it works very well on my server with the same domain:

If it works on your server when hosted on the same domain, then you need in addition to configure your server to support CORS. Check the following site it contains several helpful guides on the subject:


1 Like

The problem you have is that your app is started at secure protocol HTTPS, while you are trying to get a file from unsecure location HTTP. Either start your app at HTTP too (not recommended) or request an image from HTTPS.

Yes, I run it from the hosting on PlayCanvas, I don’t know why it is http when I fill in the picture link, the browser or PlayCanvas server will automatically convert it to https

If your picture is not accessible through HTTPS (you should test it by just opening in a browser tab), then you need to change the server where the picture is hosted, or enable HTTPS on the server.

1 Like

However when I run the project in Edge which will not automatically convert the link to https, it reports CORS errors:

Here is the link of my project: https://playcanvas.com/project/739441/overview/remote-tex

You need to make HTTPS requests, not HTTP, if running the app from Playcanvas hosting:

1 Like

I tried to access tthat picture over HTTPS, but it is not possible - the server doesn’t support HTTPS. Your only option is to change the server that supports a secure protocol or add an SSL certificate to the server (if it is your server).

Oops…when I replaced the original picture that does not support HTTPS with another link that supports HTTPS, it still reports a CORS error, so I think it is still a cross-domain problem?

It seems this code did not work.

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

That code is correct. Please, note that the server must support CORS policy (allow other servers to access its content). If it doesn’t work, then it means the server doesn’t allow CORS.

1 Like

Understand, thank you very much :heart:. I will pay attention to configuring cross-domain rules when deploying it on my own server.

1 Like