Nearest Sample Mode creating strange features

[joshcamas]

Hia guys!

I'm having this problem that I can't seem to get replicated in the playground! Not sure why!
Basically, I have this sprite here:


And I have a material too! Here's what it looks like:

var tex = new BABYLON.Texture("monster.png", scene, false, true, BABYLON.Texture.NEAREST_SAMPLINGMODE);
var mat = new BABYLON.StandardMaterial("mat", scene);
mat.diffuseTexture = tex

Seems simple enough! And yet, something is strange. I'm guessing this has to do with the nearest sampling mode? But here is the output! I've drawn squares around what I want you to notice:

Notice how the width of some pixels are thin, when they should be the same length as everything else! It's even worse on this little guy:

Originally, this sword looks like this:

So what am I doing wrong? O_O It looks like when you scale an image in a image editor incorrectly or something

Thanks! And sorry about the massive pictures, not sure if it's possible to shrink them or something here..

 

[GameMonetize]

Hey

for the sword this seems to be related to a texture stretching (like if the mesh is not a square)

Can you try to use the same texture on the playground? On a simple plane

[joshcamas]

5 hours ago, Deltakosh said:

Hey

for the sword this seems to be related to a texture stretching (like if the mesh is not a square)

Can you try to use the same texture on the playground? On a simple plane

Oh, sorry that's because it's rotated! This is not the case, because individual pixels should at least have the same ratio, (even if they were stretched!) But it ain't.
And yaaaa here's a playground!!!
http://www.babylonjs-playground.com/#1RVSZA#3

Notice the strange irregularities? I'm not sure what to make of it! Here's a comparison:


Thanks for the reply!

 

[Wingnut]

http://www.babylonjs-playground.com/#1RVSZA#4

Particularly perpendicular 

The image looks pretty nice... in a browser... http://i.imgur.com/uxSsy7M.png
(control-mouseWheel to zoom?)

Not looking so good in the PG.  [Wingy oils-up some BJS texture bearings and scratches his beard in bewilderment]

[joshcamas]

Yupppp I'm confused too. You known when you scale a pixel image in GIMP or Photoshop without any interpolation, if it's not exactly scaled correctly, the pixels will be off? This reminds of that O_O
I would venture to say it's identical to that. But then, where is the origin of the problem? Maybe some sort of scale value is rounded or something, causing something to go crazy>

[Nabroski]

just dont use NEAREST_SAMPLINGMODE

(i use assert manager course of chromes caching strategy etc.)

http://www.babylonjs-playground.com/#1KDQTU#11

[Wingnut]

"course of" = "cuz of" = "because of"  ?  (just checking) 

I need to read the latest English Language Update Bulletins.  Perhaps I have fallen behind.

Nice solve!  Nabs just forces the issue... right before our very eyes... in line 27.  You're a God, Nabsy!

[Nabroski]

I learn english from listening to beatels songs, i never sure how to type becourse, be-course my chrome browser underlined it with a red implying i spell it wrong. 

just in case you are looking for that minecraft look

http://www.babylonjs-playground.com/#1KDQTU#17

[joshcamas]

Aww sadly this is not what I'm looking for!
I'm in deep need of a pixel form. In other words, I need it to look exactly like the sprite, with all of those crispy and sexy pixels!!!

One thing I'm not sure is: is nearest neighbor the interpolation I need? Is there such thing as "no interpolation", as in the pixels just scale? In GIMP there is that option when scaling:

 

Or is the "none" simply the nearest neighbor algorithm? If so, then I believe there may be a problem with the interpolation algorithm in Babylon itself. D:

Oh, and for me, your last example looks like this:
An

[fenomas]

Change your texture to be a power-of-two size (e.g. size it up to 1024x1024).

WebGL requires texture sizes to be powers of two, so when necessary BJS resizes images behind the scenes. Your texture here is getting distorted during that resize, not as part of the rendering process.

[fenomas]

Side note: Babylon should probably emit a warning when auto-resizing a texture with NEAREST sampling, since it's very, very likely to not be what the user wants.

[joshcamas]

I don't think it's automatically nearest, I chose that specifically. But if so, then yea for sure, since most people want it nice and soft <3

AND YES THANK YOU MAH MAN!! Look at that beautiful sword, that sexy goblin! You saved me!

 

[GameMonetize]

Thanks @fenomas you nailed it!

[fenomas]

1 hour ago, Deltakosh said:

Thanks @fenomas you nailed it!

It'd be great if BJS emitted a warning here... this is the kind of issue where it's almost impossible for the user to find the problem without magically knowing that there's a resize behind the scenes!

[GameMonetize]

what kind of warnings? "You are not using a POT2 textures" ?

[joshcamas]

10 hours ago, Deltakosh said:

what kind of warnings? "You are not using a POT2 textures" ?

Yeah that could work! "Scaling without using POT2 textures may result in visual oddities" or something
But maybe make it only say it once for the whole time cause otherwise it'd get spammy O_O Either that or only make it say that when you are using nearest neighbor

[GameMonetize]

I need to give it a thought but I agree we could be more vocal here

Fancy doing a PR?