AlbertTJames

Different behavior for sprite2D textures across browsers

11 posts in this topic

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.

58ebbb6b1e519_ScreenShot2017-04-10at19_05_10.thumb.png.606a3f245a36a6ed5a978f8188902de4.png

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

58ebbb69ef37b_ScreenShot2017-04-10at18_09_36.png.5b57028944524d93d903759eb336d66b.png

 

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

58ebbb69c7402_ScreenShot2017-04-10at18_09_28.png.d66cbdcb944f3889fe72778d9e93b07b.png

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

58ebbb6a3b37f_ScreenShot2017-04-10at18_10_02.png.8b6c7187dd38ae095dabb4a34bda6398.png

58ebbc481e23f_ScreenShot2017-04-10at18_10_23.png.fa86925498fe0398bae31119c7a5b23b.png

But somehow it is seems worst in safari:

58ebbb6a8aefb_ScreenShot2017-04-10at18_11_08.png.fc803e0c9a7187c2de0107c4bc2a3f89.png

 

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

58ebc037a708c_ScreenShot2017-04-10at19_25_59.png.8de4dd67ac4ac9834442bfe26930d3ad.png

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

@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.

AlbertTJames likes this

Share this post


Link to post
Share on other sites
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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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

Deltakosh likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.