Problem mapping external texture on model

I load a texture from an external server (via JSON). This is how:

            var shape = clone.findByName("imageShape");
            var material = shape.model.meshInstances[0].material;
            var newMaterial = material.clone();
  , "texture", function (err, asset) {
                asset.ready(function (asset) {
                var texture =   asset._resources[0]; 
                newMaterial.diffuseMap = texture;                
                shape.model.meshInstances[0].material = newMaterial;

Works fine but…! :slightly_smiling_face:

…but the texture is displayed in a weird way. If I upload the same texture into the asset manager and connect it to the diffuse channel it looks like it should.

Thanks for helping out again!

Hey @Karl47,

I think the issue is that most like the texture you load in code is missing some standard properties, which are prefilled when you import it in the editor. Properties like filtering and UV addressing.


Take a look at this example on how to set those properties in code, this might resolve your issue:

Hi @Leonidas,
thanks for answering again but this didn’t help. It seems that the projection comes from the wrong side. Any idea?

It seems like UV addressing isn’t proper indeed, is it possible to create a simple repro project and share it here?

sure: can you open this?
The code is located at root.js using the json of stations.json starting at line 158

Running the project gets me this:


When compared to the original image seems about right. Are there any steps to reproduce the issue you had above?

Tested on firefox and chrome, desktop.

1 Like

Hi @Leonidas, you’re right. It seems to be a Safari problem. I’m using Safari 13.0.4 on MacOS 10.15.2. Firefox and Chrome are working fine.
Has anyone from Playcanvas staff a solution for that?

By the way: IE and Edge are displaying it also not right. Same problem as on Safari

It seems to be a WebGL1 issue, if you run the project using the Prefer WebGL 1.0 flag it will reproduce the issue in Firefox and Chrome as well.

Sounds like a bug, or at least a case of misconfiguration. Try posting an issue to the engine repo:

1 Like

Yes, that’s it. Activation of WebGL 2 in Safari (developer / experimental functions) solve the problem (for me) but not for my audition and the rest of the world. :wink:

1 Like

Ok, it has something to to with so called “Power of two” images. If I use an image of the playcanvas example it works.
So I have only to find out what a power of two image is and how to create it. is it the size (512 x512)?
I’ll write it down here as soon as I’ve found it out.

That’s a good find! The editor by default will automatically resize textures uploaded to have both sides to the closest POT size.

Power of two are sizes that are produced by multiplying 2 by 2 in sequence:

1 Like