Different behavior for sprite2D textures across browsers

[AlbertTJames]

Hi, 

 

I was wondering if someone had experienced slight differences in "offsets" using sprite2D texture and wether it might be related to caching.

As an example I have a fairly small texture of 16*16 here in svg, but i tried also using png, same problem.

That's the begining of the sprite texture zoomed in 4800%

When using it in chrome with a code like this:

 

  const crossSheet = taskObject.cloneAssetIntoScene(R.get.crossSheet, scene) 
  crossSheet.hasAlpha = false

  const cross = new BABYLON.Sprite2D(crossSheet, {
    parent: canvas,
    id: 'cross',
    marginAlignment: 'v: center, h: center',
    spriteSize: new BABYLON.Size(16, 16),
    spriteLocation: new BABYLON.Vector2(0, 0),
  })
 
  cross.spriteFrame = R.get.cross_predict

The texture is at the center of the screen here, in chrome the top misses 0.5px

 

In Safari there is a difference in colors and width of strokes:

If now I am using a 16,17 sprite size i get a correct sprite in chrome:

But somehow it is seems worst in safari:

 

Any clue ? Do you think it is related to the caching strategy ? @Nockawa

 

Here is the link to the texture:

https://drive.google.com/open?id=0BxggOFF8_iXkb3JRRjg0YkJtRzQ 

Here is a playground, on the playground it is the BOTTOM 0.5px that get cutoff..

http://babylonjs-playground.com/#20MSFF#64

 

[GameMonetize]

Ping @Nockawa

[AlbertTJames]

Could it be due to the fact that the image is not pixel perfect ?

 

But it does not explain the different behavior in browsers... 

 

EDIT:

Ok im not sure if it is pixel perfect... let me make a real pixel perfect for sure..

 

EDIT2:

Ok the image was not exactly pixel perfect but that did not change the problem.
So I pinpointed the issue a bit more. It is LINKED (due?) to the resize behavior of the canvas, if I resize my window, the slight offset changes, up down left right, sometime it actually lends perfectly.. weird

[Nockawa]

this is an issue I've battled against many and many hours lately.

TL;DR: make sure you're HTMLCanvas width/height and CSS' width/height are the same (if you set the CSS to 100% in some browsers it won't be the same!). It should fix the issue.

There's nothing (that I'm aware of, so, yes, maybe there is) that I can do, because I use the Engine.getRenderingWidth/Height methods to computes the matrix stuff, but they use the HTML value, if the CSS value are different, then I'm screwed.

Maybe @Deltakosh can help on this, because up to this day, I'm powerless...

[Nockawa]

@AlbertTJames after discussing with @Deltakosh I'm going to proceed differently and hopefully the issue will be finally solved! I'll let you know.

[Nockawa]

@AlbertTJames is the img perfect now? because the one I looked was perfect to me?

If it's perfect, then I acknowledge the issue, for some reason there's something I can't get right and to be honest it drives me crazy because no matter how hard I try there's always something that doesn't work as expected. I found a way to fix your particular issue, but it fucked up another case and I can't find a way to make both work.

There are internal debugging tools under development and with the help of other I hope I'll be able to fix it, but as of today, I won't go further on it alone: it's a dead end, sorry.

[GameMonetize]

@AlbertTJames do you mind trying to use the Sprites from babylonjs and see if you have the same issue? this will help us fix the issue

[AlbertTJames]

I missed those messages. Do you mean use the Sprite in a 3d scene and resize ? @Deltakosh

[AlbertTJames]

On 19/04/2017 at 1:58 PM, Nockawa said:

@AlbertTJames is the img perfect now? because the one I looked was perfect to me?

If it's perfect, then I acknowledge the issue, for some reason there's something I can't get right and to be honest it drives me crazy because no matter how hard I try there's always something that doesn't work as expected. I found a way to fix your particular issue, but it fucked up another case and I can't find a way to make both work.

There are internal debugging tools under development and with the help of other I hope I'll be able to fix it, but as of today, I won't go further on it alone: it's a dead end, sorry.

Dont loose hope @Nockawa ! You did such an amazing job already. I imagine how frustrating it must be, but there is no reason it should not work. With the proper approach, in theory, it should work for all use case. Just take a breather, work on it when you have time.

 

I am sorry I cant be of more help. I can test stuff to help, but really getting into the core of canvas2d and understanding how you implemented those things is too much work for me right now. And even if I did, i would probably mess things up !  

 

about your question, here is a link to a pixel perfect version of the center target: 

The behavior seems better now, but it is still jumpy with resize.

http://www.babylonjs-playground.com/#20MSFF#67 

 

And it seems not to be the size of the canvas, but the size of the whole window, because in the playground, if you cange the size of the canvas by moving the center bar the image/offset stays the same, but if you resize the window somehow it resets the sprite offset

 

[GameMonetize]

Yes I meant with sprite3d. I want to understand the core issue and as sprite3d uses another approach this could be a good test

[Nockawa]

@AlbertTJames thanks, I have indeed a lot of things to deal with recently...But I won't give up.

Could you do what DeltaKosh asked you, because the other guys are going to help me on solving this and we need all the clues we can get.

Thanks

[AlbertTJames]

http://www.babylonjs-playground.com/#20MSFF#68 

 

Here is a comparison of 3 center cross, one with the sprite 3d, and 2 with the sprite 2d. To reproduce the effect, grab the side of the window and resize slowly, you will see the flickering of 1 pixel.

I am sure it is a round() , a floor() or ceil() somewhere...

 

This will not be a problem for large sprites ... this flickering is present for all sprites but it is really a 1px flicker.. 

As a hack I will just put transparency margin around my sprite and I think it will not be visible any more, ill let you know.