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.
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.
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.
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:
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:
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.
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?
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.
. I will pay attention to configuring cross-domain rules when deploying it on my own server.