Pixel perfect textures

Hi, a short question!

How can I include pixel perfect textures on 3d objects both in regular Babylon.js scene and in material editor?

Consider the following picture, where I uploaded my 96x96 pixel texture to the node material editor with a custom model (barrel). In Blender, the texture is sharp when the ‘texture interpolation’ is set to ‘closest’, but how do I do the same effect in Babylon.js and in node material editor? :thinking:

I too would love to know if there is a “right” way to do this, but as a work-around, you could upsample your 96x96px texture outside of BJS to 1k or 2k using the “closet” equivalent (i.e. in Photoshop it’s called “nearest neighbor”). Not ideal that you now have to use a larger texture, but it achieves the visual you’re looking for.

1 Like

There is linear_linear sampling mode that might be what you are looking for.

1 Like

you could upsample your 96x96px texture

Unfortunately my goal is to use pixel textures to reduce texture size and make nice looking textures quickly so I don’t really approve this solution…

There is linear_linear sampling mode that might be what you are looking for.

True, this is most likely what I would like to have… Just trying to look for examples how to do this properly, since when I try to updateSamplingMode on my textures, nothing happens :fearful:

You can’t change the sampling mode in the NME (@Deltakosh: maybe that’s something we should add?) but you can definitely do it in js code.

Can you setup a repro in the Playground so that we can have a look?

Note that if you use closest in Blender, the corresponding sampling mode would be something like BABYLON.Constants.TEXTURE_NEAREST_SAMPLINGMODE or maybe BABYLON.Constants.TEXTURE_NEAREST_NEAREST_MIPLINEAR.

1 Like

Well, I got it working on my local machine/project with setTimeout. Somehow it didn’t update the sampling mode if I tried to do it in the onSuccess function when the mesh is loaded.

setTimeout(() => {
  mesh.material.albedoTexture.updateSamplingMode(1)
}, 2000)

Looks like this at the moment:

Do you have any advice on the jagged edges of the each pixel? :smiley:

Also would be cool if NME supported this!

Maybe you can try to update the sampling mode on the onLoadObservable of the texture instead of the mesh onSuccess.

Also, if you want smooth rendering you should use bilinear/trilinear filtering mode and not nearest filtering.

1 Like

Hmmm, but bilinear/trilinear do not produce sharp pixel perfect results do they?

The end result I am trying to manage to get is something like this; pixel perfect texture where each pixel does not have jagged edges:

They are using FXAA to antialias the final result:

https://playground.babylonjs.com/#3A37JL

1 Like

Thank you for your assistance @Evgeni_Popov :heart:

I also added super sampling to further fine tune the outer edges:

engine.setHardwareScalingLevel(0.5)

The only question left is: can the sampling modes be added to the node material editor? :smiley:

If @Deltakosh is ok, I think you can create an issue in the repo about this, that points to this thread.

1 Like

sure go ahead, I can work on that later

1 Like

Whats the difference between TEXTURE_LINEAR_LINEAR and TEXTURE_NEAREST_SAMPLINGMODE?
@Deltakosh

Also you should not have to super sample and should avoid doing that, as you will take up the majority of most clients vRam in doing so and cause your scene to not perform well unless its really limited on scope.

People like me who are running 4k monitors with a kind of crappy video card cant afford to render 8k resolution scenes.

TEXTURE_LINEAR_LINEAR means that mag filtering = LINEAR, min filtering = LINEAR and no mipmap filtering.

TEXTURE_NEAREST_SAMPLINGMODE (same thing than TEXTURE_NEAREST_NEAREST) means that mag filtering = NEAREST, min filtering = NEAREST and no mipmap filtering.

1 Like

Also you should not have to super sample and should avoid doing that

Are there any alternatives to this problem? Super sampling does help to make the edges smoother, but you are correct that it requires more powerful computer to run the scene…

Maybe more agressive anti-aliasing?