Problem mapping external texture on model

Help & Support
1

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

if(imageSrc){
            var shape = clone.findByName("imageShape");
            var material = shape.model.meshInstances[0].material;
            var newMaterial = material.clone();
     
            this.app.assets.loadFromUrl(imageSrc, "texture", function (err, asset) {
                asset.ready(function (asset) {
                var texture =   asset._resources[0]; 
                newMaterial.diffuseMap = texture;                
                shape.model.meshInstances[0].material = newMaterial;
                newMaterial.update();
            });
            });      
      }

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.

15
151850Ă—1276 114 KB
35
351686Ă—1112 123 KB

Thanks for helping out again!

2

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.

image

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

https://developer.playcanvas.com/en/tutorials/video-textures/

3

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

4

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

5

sure: can you open this? https://playcanvas.com/project/663055/settings
The code is located at root.js using the json of stations.json starting at line 158

6

Running the project gets me this:

image

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
7

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?

8

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

9

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
10

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
11

Ok, it has something to to with so called “Power of two” images. If I use an image of the playcanvas example it works. https://s.gravatar.com/avatar/9cabe6ef56706fc096eb29d33e1846ac?s=512
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.

12

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:
64x64
128x128
256x256
512x256
256x1024
etc

1 Like