2D canvas issue Android VS PC

[chicagobob123]

I am using a 2D canvas to render a ground for my world. 

On the PC its fine consistent between machines. Then I went to view it on my phone (Samsung S7) chrome and the ground is in the wrong location. Its moved in the Z direction? 

Anyone have an idea?  

 

[GameMonetize]

Do you mean Canvas2D?

[chicagobob123]

So Sorry I really spaced out. It involves a context not canvas. There should be a hit head Emoticons for this. 

Lets start again.  I created a  BABYLON.DynamicTexture

var sizelimit=8192;
var dTexture=new BABYLON.DynamicTexture("dtex",sizelimit,scene,true);

var context=dTexture.getContext();

----> I drew the ground with different image tiles. 

context.drawImage(grnd[0],j*size,i*size);

 

       var materialGround=new BABYLON.StandardMaterial("std",scene);
       materialGround.diffuseTexture=dTexture;
       materialGround.specularPower=300000;

       dTexture.update();

--> created the ground and used the material

      var ground=BABYLON.Mesh.CreateGround("ground1",8192,8192,2,scene);
       ground.material=materialGround;
       ground.material.backFaceCulling=false;
       ground.position.y=0.1;
       ground.convertToFlatShadedMesh();
       ground.isPickable=false;

 

All works just fine except its not in the same place on android? Its hard to tell if its only the Z

direction where its off because its a phone but its off all right. 

 

[Fatalist]

This is why Canvas2D is a bad name for that library.

[GameMonetize]

This may be related to texture size. Can you provide a playground?

[chicagobob123]

Sorry so far I have not been able to pull off an example but could reall use some help.

I was able to see what is going on. 

I have tiles from the same image as a top and bottom border gnd[0] (all preloaded). 

In the center I loaded a bunch of different image tiles. What occurs is so ODD. ALL the same gnd[0] tiles in the positive z axis

while the center group shows up below. 

Android Chrome

xxxxxxxxxxxxx same

xxxxxxxxxxxxx same 

xxxxxxxxxxxxx multiple images 

While on the PC it renders correctly 

xxxxxxxxxxxxx same

xxxxxxxxxxxxx multiple images 

xxxxxxxxxxxxx same 

 

// create texture for ground

       var sizelimit=8192;
       var dTexture=new BABYLON.DynamicTexture("dtex",sizelimit,scene,true);

       var context=dTexture.getContext();
       var span=sizelimit/512;
       var size=w;

 for(var i=0;i<6;i++)
        {
         for(var j=0;j<span;j++)
          {
           context.drawImage(grnd[0],j*size,i*size);
          }
        }

       // draw out the tiles that make the ground.      
       var cnt=1;
       for(var i=0;i<4;i++)
        {
         for(var j=0;j<span;j++)
          {
           context.drawImage(grnd[cnt],j*size,(i+6)*size);
           cnt++;
          };
        }
    
             // draw out the tiles that make the ground.
       for(var i=0;i<6;i++)
        {
         for(var j=0;j<span;j++)
          {
           context.drawImage(grnd[0],j*size,(i + 10) *size);
          }
        }

 

     var materialGround=new BABYLON.StandardMaterial("std",scene);
       materialGround.diffuseTexture=dTexture;
       materialGround.specularPower=300000;

       dTexture.update();

       var ground=BABYLON.Mesh.CreateGround("ground1",8192,8192,2,scene);
       ground.material=materialGround;
       ground.material.backFaceCulling=false;
       ground.position.y=0.1;
       ground.convertToFlatShadedMesh();
       ground.isPickable=false;

[chicagobob123]

And I answered my own question. 

If you CHOOSE 8192 like I did it works on PC's but not android. I changed my resolution to 4096

(where I think I recall someone telling was the limit) and like magic it just worked. 

So the moral of the story, know your limitations