adding more visuals without affecting performance
TRANSCRIPT
![Page 1: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/1.jpg)
Adding more visuals to the game without affecting performance
by Dmytro Vovk
![Page 2: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/2.jpg)
PERFORMANCE
![Page 3: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/3.jpg)
Performance
• Why it matters?!
![Page 4: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/4.jpg)
![Page 5: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/5.jpg)
![Page 6: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/6.jpg)
Performance
• Is a shared responsibility of both artists and programmers.
![Page 7: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/7.jpg)
Good Enough
• Don’t do more that it’s needed
![Page 8: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/8.jpg)
TECHNICAL TIPS FOR ART
![Page 9: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/9.jpg)
Technical Artist
• Is a bridge between you and a programmers.• They are usually responsible for technical side
of art and a performance.• Availability of TA in your team doesn’t mean,
that you don’t have to understand tech.
![Page 10: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/10.jpg)
Performance Killers
• Draw calls• Alpha blending• Huge textures
![Page 11: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/11.jpg)
Draw Call
• A command to GPU to render a set of vertices (mesh) with specified state – i.e. textures, shader, blend mode
![Page 12: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/12.jpg)
Draw Call
• Employ texture atlases – a set of small textures combined into big one
• Merge static meshes into one
![Page 13: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/13.jpg)
Texture Atlas
![Page 14: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/14.jpg)
![Page 15: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/15.jpg)
Alpha Blending
• Is the process of combining an image with a background to create the appearance of partial or full transparency.
• Most common blend mode in 2D games.• Most common source of performance
problems also
![Page 16: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/16.jpg)
Alpha Blending
• Alpha blending makes impossible to utilize some hardware optimizations, so it requires both visible and invisible pixels to be processed.
• In extreme cases this can be an order of magnitude slower
![Page 17: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/17.jpg)
Alpha Blending
• The majority of 2D games do not use translucent geometry i.e. alpha value of every pixel in textures is either 0 or 255.
![Page 18: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/18.jpg)
Alpha Blending
• So the pixels with alpha equal to 0 will not contribute to resulting image at all, but they still have to be processed
• And the pixels with alpha equal to 255 will replace any pixel that existed in the background image before, but it still requires those replaced pixels to be processed.
![Page 19: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/19.jpg)
Alpha Blending
• So sprites with huge transparent areas will affect performance a lot.
• This can be solved with a “proper” art
![Page 20: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/20.jpg)
Alpha Blending
• Replace sprite quads with more complex geometry:
![Page 21: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/21.jpg)
Alpha Blending
• Split geometry into two meshes – one alpha blended (blue), one – opaque (red):
![Page 22: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/22.jpg)
![Page 23: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/23.jpg)
Textures
• Textures are the biggest resources in the games.
• Apps are bound by 50 Mb app size limit.• The amount of available GPU memory can be
even lower on a low end device
![Page 24: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/24.jpg)
Textures
• RGB8 texture will occupy the same amount of memory as RGBA8 on most devices.
• Try to lower textures precision – RGB565 instead of RGB888, RGBA5551 instead of RGBA8888, etc.
• Compressed textures are more preferred though.
![Page 25: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/25.jpg)
Compressed Textures
• A texture compressed with a special lossy algorithm optimized for GPU.
• PNG is a lossless compressed image format. Why do you have to use something else?
![Page 26: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/26.jpg)
Texture VS File Compression
• On a disk: PNG (600Kb): PVRTC\DXT\ETC (128Kb):
![Page 27: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/27.jpg)
Texture VS File Compression
• In RAM: PNG (1Mb): PVRTC\DXT\ETC (128Kb):
![Page 28: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/28.jpg)
Texture VS File Compression
• In VRAM: PNG (1Mb): PVRTC\DXT\ETC (128Kb):
![Page 29: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/29.jpg)
Compressed Textures
• So compressed textures are preferable since they are:– Smaller, allow you to have more textures in the
game;– Internally optimized for GPU;– Faster to upload\stream to GPU;– Faster to render;
• They are not always applicable for 2D games
![Page 30: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/30.jpg)
Key Action Points
• Reduce the number of draw calls• Avoid alpha blended geometry as much as
possible• Try to compress your textures
![Page 31: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/31.jpg)
Best practices
• Employ engineering best practices:– Introduce Definition of Done. DoD is a checklist of
valuable activities;– Introduce a Sign Off process;– Talk to your TA, talk to other TA’s;– Talk to your programmers;– Self educate.
![Page 32: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/32.jpg)
BONUS
![Page 33: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/33.jpg)
Alpha test
– Alpha test effects performance heavily;– Use alpha blend instead;– If you still need to use alpha test, try to mimic it
with geometry
![Page 34: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/34.jpg)
Alpha test
• If it’s too hard to avoid alpha test with tessellated geometry, try to localize it into as small region, as possible*
![Page 35: Adding more visuals without affecting performance](https://reader035.vdocuments.net/reader035/viewer/2022070523/58ecc1611a28abaa188b476b/html5/thumbnails/35.jpg)
Alpha test
• All engines allow you to control the draw order of your geometry. To get the best performance possible, try do draw you geometry in this order:– Opaque geometry;– Alpha tested geometry;– Alpha blended geometry;