Texture efficiency png image vs material color

Discussion
,
1

Hi, I found from decentraland using color map like this in character asset.

pallatte
pallatte512×512 6.77 KB

They are using this for coloring example jacket. and set uv map like this

스크린샷 2022-06-22 오후 3.31.10
스크린샷 2022-06-22 오후 3.31.10539×528 112 KB

I thought that using material color is more efficient than using color palette like this but, I’m curious why did they use this way to coloring object.

Dose this way(make One color palette) is more efficient than using mesh coloring?

2

Maybe they use it to reduce drawcalls when it is single mesh

3

Oh I get the reason.

The drawcalls is more important than memory? I mean, then Is the ultimate optimize is texture bake? I recently felt that large texture cause lagging so I thought that if I don’t use texture it will be best.

4

My computer calculate 1.000 drawcalls for 9ms its a big number and give 60 FPS.
But some people have super laptop and 70.000 drawcalls too 60FPS.
Big texture - low FPS.

MB into videocard. Texture with one chanell (Like ambient occlusion)

8192*8192=67mb
4096*4096=16.7mb
2048*2048=4.2mb
1024*1024=1.04mb
512*512=0.26mb

MB into videocard. Texture with 4 chanell (standard texture)

8192*8192=268mb
4096*4096=67mb
2048*2048=16.7mb
1024*1024=4.1mb
512*512=1mb
5

You’ll need to minimize both of these things for the app to perform well. Color palettes can fit into very small textures, so these are generally a win on both dimensions. Higher-res textures cost more.

MB into videocard. Texture with one chanell (Like ambient occlusion)

Note that PNG and JPEG textures are usually unpacked to RGBA, even if only one channel is used. To do better you generally need to use special texture formats (KTX2, DDS, …) or THREE.DataTexture. Mipmaps also increase the memory footprint.

So in general for PNG / JPEG textures —

4096 * 4096 * 4 * 1.333 = 89 MB
6

Yes 4 chanell if default format. I forgot write that for one chanell i was using luminanceFormat. And in new version of three.js i use THREE.RedFormat.

7

The main advantage of doing something like this is to be able to swap palettes. When you work on a game, you want to be able to tweak things all the way up to (and beyond) release. If you store colors in the vertices - it would actually be more economical in terms of memory usage, but if you wanted to adjust the palette - you’d need to go over every character and change vertex colors, which is not a very pipeline-friendly operation.

that is to say - it’s easy to edit a texture that’s used in many different meshes, but not so easy to change a bunch of meshes all at once - that’s just not how 3d editing software works.

So you create a palette texture, and tweak it whenever you want to, or even swap it out for another palette and boom - every mesh in your game receives the change.

Some technicalities:

  • I said that it would be more economical to store vertex colors. UV is typically stored as 2d vector Float32, which takes up 8 bytes, in contrast, if you ditch the UV and write RGB color directly into the vertex, you only need 3 bytes (1 per channel).
  • general 3d editing software is aimed at working on a single mesh at a time, that’s the most common workflow
  • One of the hardest things for a game to get right is consistency, that is - having colors follow some kind of rule set, shapes, sizes, animation speeds etc. Colors are one of the most obvious things. So having the ability to tweak a bunch of meshes in your game from a single place (palette) is super handy.
1 Like
8

Thanks guys I’ve learn lot of things! I have to think about adjusting color palette for my project :slight_smile: