Texture Optimization Best Practices for Fast-Loading Scenes

By Kris Schultz | Posted December 18, 2019


Amazon Sumerian builders often ask for advice on how to improve the load times of their scenes, especially as their scenes become increasingly complex. Load times are directly correlated to a scene’s file size and for many Amazon Sumerian scenes a significant portion of that file size can be attributed to the scene’s texture assets - those JPEG or PNG images which are applied to 3D models to give them visual detail or used for UI elements like icons. In this article we present three texture optimization best practices that can dramatically reduce your scene sizes and load times, helping you deliver a great user experience while also saving you money in Amazon Sumerian service costs. Let’s dive in.

You’ll learn about:

  • Choosing the right image format (PNG vs. JPEG)
  • Choosing the right compression settings
  • Choosing the right image resolution
  • Exceptions to the rules

Tip #1: Prefer JPEG over PNG

For textures that need to have transparency, use PNG (which can include an alpha channel representing the level of opacity for each pixel). For all other textures, use JPEG. When preparing your JPEG files in an image editing app, a compression setting of 60-70% is usually a good starting point but in many cases you can go even lower.

The image on the left uses a PNG color texture on the airplane. The image on the right uses a JPEG color texture that was exported from Photoshop using a 10% quality setting. The JPEG texture is less than 7% the size of the PNG texture but the quality is not visibly affected.

Plane-PNG Plane-JPEG
PNG version, 2.8 MB (View full size) JPEG version, 184 KB (View full size)

Tip #2: Reduce resolution of textures based on their display size.

Textures don’t need to have a higher resolution than the maximum resolution at which they will appear in the scene. For example, if you have a texture that will never occupy more than 200 x 200 pixels on screen then using a texture larger than those dimensions adds file size without providing any benefit.

The airplane in the scene below never appears on screen at a size larger than about 200 x 180. In the version on the left the airplane’s color texture is 2048 x 2048. On the right, that same texture has been scaled down to 200 x 200. Notice that there is no perceptible quality difference between the two, yet the texture used on the right is only 16% of the file size of the texture used on the left.

2048 x 2048 texture 200 x 200 texture
2048 x 2048 texture, 184 KB (View full size) 200 x 200 texture, 33 KB (View full size)

Tip #3: Use aggressive compression on JPG textures

Unlike images displayed in a traditional web page, textures are rarely viewed at one-to-one scale and are almost always viewed at an angle. These viewing conditions have a tendency to hide JPEG compression artifacts - the visual squiggles and other imperfections that can sometimes be seen in JPEG images. You can use this to your advantage by applying much higher levels of compression to your JPEG textures than you would typically use when preparing traditional web images. Exporting from an image editing app with compression quality as low as 20% or even 10% often works great.

The texture used below is highly detailed, yet exporting it from an image editor with 10% quality (right) produces no visible JPEG artifacts.

Original JPEG texture JPEG compressed at 10% quality
Original JPEG texture, 3.2 MB (View full size) JPEG compressed at 10% quality, 750 KB (View full size)

Exceptions

The guidelines above will serve you well about 90% of the time. However, there are some situations in which the PNG image format results in smaller files than the JPEG format. If your texture has large areas of flat color or if your texture is greyscale and can be saved as an 8-bit PNG without transparency you may find that PNG compression results in a smaller file size than JPEG. The only way to determine this for sure is to try compressing the texture in both formats and compare them.

Final Thoughts

The three texture optimization techniques above are extremely effective at keeping Amazon Sumerian scene sizes lean and load times fast. Make these practices a core part of your your creation workflow on every project to ensure you deliver a great experience to your end users.

If you have a success story about how these techniques have helped you we’d love to hear about it! Join the Sumerian Slack Community and tell us a little about what you built and the file size or load time savings you achieved.

Credits

Thank you to the generous creators who made the model and texture assets above available through a Creative Commons license.

Kris Schultz

Kris is a Specialist Solutions Architect helping customers succeed in leveraging AWS services to power innovative AR, VR, and real-time 3D applications. Kris is also a builder, implementing and delivering innovation prototypes for AWS customers as a member of the AWS R&D and Innovation team.