Follow

Best Texture Practices

Suggestions tips and hints.

In order to optimise the 3D experiences and make them much more enjoyable, we suggest avoiding really heavy, high-res textures.

However, there are several tricks that the HP Reveal creative team use in order to optimise the experience - and this article will outline exactly that!

 

  • Try to use the smallest size possible for textures, unless it is required for the model at hand
  • Avoid using the maximum size of 1024x1024 pixels, in most cases 512x512 pixels or even 256x256 pixels will be more than enough
  • Utilise a free online service such as 'Tinypng.com' to optimizes your PNG images by file size while preserving full transparency! By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. All unnecessary metadata is stripped too

In the following example each texture starts at a 24 bit depth png and 1024x1024 pixels which means that they will be really heavy textures, and the whole experience will take quite a long time to load.

Diffuse 1k=1.6Mb before Tinypng, 755Kb after  

Normal map 1k=1.4Mb before Tinypng, 767.4Kb after

Specular 1k=756Kb before Tinypng, 369.1Kb after

oscillator_1k.png
oscillator_1K.png  

 

 

Continuing with the same example we swapped each texture map for their 512 version. Each texture map retains the 24 bit depth png but the textures are a quarter of their 1k textures, for this example a texture this size tends to work well, it all depends the level of detail each experience needs

Diffuse 512x512=416Kb before Tinypng, 201.9Kb after  

Normal map 512x512=299Kb before Tinypng, 181Kb after

Specular 512k512=187Kb before Tinypng, 96Kb after

oscillator_512.png
oscillator_512.png

 

Once more we carry on with the same example only this time we used 256x texture map version, meaning that this textures are 16th part of the original 1k textue. We also start with the 24bit depth texture maps.

Diffuse 256x256=107Kb before Tinypng, 53.8Kb after 

Normal map 256x256=60.4Kb before Tinypng, 41.3Kb after

Specular 256x256=48.4Kb before Tinypng, 24.2Kb after

Oscillator_256.png
oscillator_256.png

 

Conclusion

Finally for this specific example we decided that the best combination was a mixture of 512's and 256's textures.

It is always a compromise to choose between quality and overall experience, for this example we decided 256 for the specular texture and normal was more than enough, while on the diffuse we decided that 512 was enough to keep the necessary detail.

So if we had gone for 1k texures and without optimising we would be looking at almost 4Mb in textures alone, after optimising we are looking at about 270Kb and the overall quality has not changed that much.

 

 

 

-When possible use Png-8bit depth rather than png-24 bit depth as this will reduce the weight of the file. To accomplish this we tend to use a really good free online tool, Tinypng.com which is great to reduce files in weight we have a quick tutorial here

 

-When Possible fill any spare and empty texture space around the UVs with a flat colour (we recommend black) allowing enough pixels as padding area around the UVS  to avoid seams, this little action will decrease greatly the size of the texture file, mainly on those textures with a big amount of unused space just by following this easy procedure as with the example below, on a 1k texture we saved from 2.14 Mb to 1.75Mb it might not seem a lot but that is about 20% less heavy just by following this easy procedure.

animation_padlock.gif

adding_black.png

 

 

- When saving in a PNG 8 format, do not use less than 3 colours. Using only two colours will result in weird banding effects.

  export_4_colours.gif

 

-It's advised to use the fewest number of texture files, and when possible make use of the least power intensive shaders in your favourite 3D program. more on our article dedicated to shaders

 

-It is a great idea to use the emissive channel together with the diffuse in order to get some ambient shading and that way avoid the use of lots of lights which would increase the render engine time, check this article for more information.

 

Conclusion

Optimize, optimize, optimize and then optimize some more.

  1. Use as few textures as posible.
  2. Use the smallest size posible.
  3. Use the least posible colour depth.
  4. Use at least 4 colours (never 2 colours).
  5. Use the least amount of lights.
  6. Use the least render intensive shaders
  7. Use ambient shading when possible.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk