Best Practices for Web Games on AirConsole

this guide provides developers with essential guidelines and standards for building performant and reliable webgl games for airconsole the document applies to desktop, mobile, and automotive devices games are expected to scale automatically across platforms — there are no separate versions 🎯 goals ensure compliance with docid\ iedkpmfjl8jqs3uoifhmg provide performance and resource usage best practices deliver games that are robust, safe, and enjoyable everywhere ✅ technical requirements general requirements compatibility game must run correctly on chrome 61+ (baseline automotive embedded chromium) loading performance main menu loads in ≤30s under 20mbit up/down with 100ms latency frame rate game must achieve ≥30 fps consistently across all supported platforms error handling no uncaught exceptions in console during normal play always validate performance under throttled conditions, not just on your development machine 🚀 general performance best practices rendering — lights, shaders & materials automotive graphics chip are heavily pixel throughput limited (up to 20x lower than current generation mobiles) prefer baked lighting for static geometry; reserve 1–2 realtime dynamic lights for hero objects only use lightmaps (directional if supported) or spherical harmonics light probes for dynamic objects shadow strategy if shadows are required, use single sun/dir light shadows with resolution ≤1024 and cascade count ≤2 ; disable soft shadows on low end avoid per pixel point/spot shadows shader precision default to mediump in fragment shaders; use highp only where artifacts are visible (normals/ibl) in vertex shaders, highp is generally fine branching & loops avoid dynamic branching and unbounded loops in fragment shaders; prefer static #define based variants and precomputed luts (brdf, fog, tone map curves) material variants limit material permutations; prefer a single uber shader with compile time feature flags, or a small set of well curated variants specular/ibl use image based lighting with prefiltered environment maps (mip chain as roughness levels) keep environment cubemap at ≤256 px face (≤128 on low end / automotive) normals & tangents use octahedral/bc5 style normal encodings when possible; otherwise compress normals to two channels recompute tangents offline pbr pragmatism avoid it unless it provides significant value if used, use metalness/roughness workflow; clamp roughness to \[0 04, 0 96] to avoid fireflies tone mapping & gamma avoid hdr and tonemapping unless it provides significant value if used work in linear space with srgb textures; apply aces (approx) or filmic tone mapping once at the end of the pipeline transparency sort back to front; minimize overdraw prefer alpha test / dithered cutout over expensive blended layers when possible post processing budget keep to ≤1–2 passes prefer fxaa over msaa; ensure mobile optimised shaders are used when running on cars instancing & batching batch small meshes and gpu instance repeated props to keep draw calls < 200 overdraw control keep fill rate low; avoid full screen particles and parallax layers use depth pre pass only if profiling proves a net win texture sampling prefer trilinear with mipmaps ; add anisotropy 2–4x for ground textures avoid manual lod biasing unless necessary texture lookups for wide support try to have <= 4 texture l skinned meshes limit bones per draw (≤50); update skinning on gpu where available; pool and reuse skeletons baked/global lighting + minimal dynamic lights yields the biggest visual/performance win for webgl across all devices assets — formats, sizes & streaming texture formats ship gpu compressed textures astc (best), etc2 (fallback androidtv) and dxt for desktop where available use basis or ktx2 which are optimal for automotive and desktop texture sizes target max 2048² (automotive) / 4096² (desktop high) generate full mip chains; avoid npot when possible to keep mips efficient atlasing use sprite/texture atlases to reduce binds; group by sampler/state streaming stream large assets (music, video) and lazy load level content; gate heavy loads behind user interactions audio stream bgm; keep sfx short and pooled avoid decoding large audio during gameplay memory management cap texture memory per platform ( 256mb for low end & automotive, higher for desktop) implement lazy asset loading load resources only when needed use asset eviction strategies unload unused textures/models/audio monitor garbage collection behavior; avoid excessive object churn in critical loops run memory profiling sessions at least once per major milestone — many issues only appear under long play sessions particles & vfx keep particle systems gpu cheap billboard quads, batched draws, avoid complex fragment work prefer cpu updated, gpu drawn pools avoid allocating particle and vfx systems during gameplay cull off screen particle and vfx systems early for smoke/fire, use flipbook textures / texture sheets at half/quarter res limit additive blending areas using tight sprite meshes where possible input & responsiveness ensure input latency <100ms under normal conditions support airconsole's input integration only design for scalable ui layouts — support resizing and different aspect ratios if your game's input is time sensitive use lag compensation approaches and timestamps for controller > screen messages for the best game experience audio use compressed audio formats (aac low, ogg) for background music keep audio memory low by streaming long tracks ensure to implement onpause/onshowad > onresume/onadcomplete to pause and resume audio power & battery minimize unnecessary background work pause heavy animations or physics simulations when not visible use frame skipping or dynamic resolution scaling if hardware struggles 🚗 automotive specific considerations while games must scale automatically across all platforms, automotive environments require additional care avoid distracting animations or high contrast flashing elements handle os memory pressure → free unused textures/models implement crash recovery auto return to safe menu state test readability under glare and low light conditions 🧪 testing & certification mandatory test scenarios chrome devtools network throttling (20mbit/100ms latency) fps measurement with chrome performance tab memory profiling vs platform budgets long play session stability (≥1 hour) airconsole simulator and real device tests (incl automotive hardware where possible) recommended tooling chrome devtools (performance, memory, network tabs) webgl inspector / spector js for gpu analysis for automotive, test using the xiaomi pad 6 wlan https //www gsmarena com/xiaomi pad 6 12237 php for web to test your game in a similar performance setup as many cars, use chrome to load https //airconsole com https //airconsole com as desktop site and connect the chrome dev tools with video stream active this gives a somewhat similar experience and performance profile android native games work like normal but ensure to not add your game to xiaomi's game space! this would enable optimisations that impact performance and behaviour considerably ⚖️ do’s and don’ts do ✅ don’t ❌ use compressed textures and atlases ship raw pngs or too many small textures profile with chrome devtools and spector js assume desktop performance = automotive implement adaptive quality (lod, texture scaling) hardcode high quality settings test input latency on real devices (incl automotive) only test on desktop chrome stream large assets (audio/video) load everything eagerly at startup 📌 summary meet technical requirements across all platforms follow general performance best practices rendering, networking, memory, input, audio, and power apply automotive specific safety considerations when needed use robust testing workflows and profiling tools to ensure consistent quality by following this guide, developers can deliver games that are performant, efficient, and enjoyable across all environments on airconsole