UV mapping seems to be blending colors from the texture

I’ve taken a look at a few similar issues on this forum, but I don’t think I’ve found one describing my exact issue. Part of the problem is I don’t know exactly what terminology to use.

I am using UV mapping to assign colors to entire faces in blender. This is a method followed by the youtuber I’m watching for low poly (Imphenzia). Basically, I scale the UVs down to a tiny number and just drag the entire thing into the color I want:

Everything looks great in blender, but when I move over to Babylon.js, the colors are off. My best guess is that the colors are being blended together for some reason.

I got some help from the Babylon.js discord, but the advice was mostly geared towards blender. I tried the advice, but noticed no difference because things were already appearing correctly in blender, and the settings changes didn’t affect anything in Babylon.js.

The advice was this:

UV coordinates, at least in Blender, take into account baking margins. Which can lead to color coordinates bleeding into white-space coordinates, and vice-versa. The default baking margin is 16px usually.

Changing the baking margin didn’t affect anything in blender, nor in babylon js.

You might also try disabling GLB [Draco] compression if you have it enabled to see if that makes a difference when having white-space. I know you removed white-space recently, so that probably isn’t the issue, but compression is known to bleed / blend colors.

I have disabled compression on my glb export, but no effect.

Please let me know if I can provide any additional information. I’m pretty new to 3D modeling in general and so I’m absolutely lost as to what could be going on here.

Hello and welcome to the Babylon community! Love your username :rofl:

Seems like this was an issue with texture sampling modes :slight_smile: The default mode is Linear, which will perform an interpolation on the closest vertices, messing up the colors. Setting it to Nearest, which just fetches the closest texture coordinate, will leave things as they are: Texture Filtering - Derivative

You can pass the desired sampling on the texture constructor: Create a Simple World Series | Babylon.js Playground (babylonjs.com)

EDIT: Another good explanation about sampling/filtering Linear Filtering (paroj.github.io) :smiley:


I actually tried the NEAREST_NEAREST mode yesterday but it didn’t work! I guess I just needed to have someone else do it for it to work :sweat_smile:.