{"id":94,"date":"2013-04-08T11:19:39","date_gmt":"2013-04-08T11:19:39","guid":{"rendered":"http:\/\/www.w3.org\/community\/games\/?p=94"},"modified":"2013-04-17T17:28:03","modified_gmt":"2013-04-17T17:28:03","slug":"devicenormalpixelratio-proposal-for-zoom-independent-devicepixelratio-for-hd-retina-games","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/games\/2013\/04\/08\/devicenormalpixelratio-proposal-for-zoom-independent-devicepixelratio-for-hd-retina-games\/","title":{"rendered":"deviceNormalPixelRatio: proposal for zoom-independent devicePixelRatio for HD Retina games"},"content":{"rendered":"

Reposted from \/community\/respimg<\/a> per Marcos Caceres’ request.<\/p>\n

This is a proposal for addition of a zoom-independent version of window.devicePixelRatio<\/code> to HTML5.<\/p>\n

The issue<\/h1>\n

Before Firefox 18 and Chrome 25, to make a 3D (WebGL) game drawn in HD, we could set the scale in <meta name=\"viewport\"><\/code> to 1 and multiply the size of 2D things (HUD elements, menus) by window.devicePixelRatio<\/code>.<\/p>\n

However, since these versions of the browsers, devicePixelRatio<\/code> started to take browser zoom level into account.<\/p>\n

While the change works perfectly for loading of high-resolution versions of <img><\/code> images and background-image<\/code>s, it has been impossible to draw HUD elements in HD 3D games with correct sizes since that.<\/p>\n

Glossary of this proposal<\/h1>\n

DPR – zoom-dependent window.devicePixelRatio<\/code>.
\nOld DPR – devicePixelRatio<\/code> behavior before Firefox 18 and Chrome 25.
\nNew DPR – devicePixelRatio<\/code> behavior since Firefox 18 and Chrome 25.<\/p>\n

Issue details<\/h1>\n

With the old DPR, when <meta name=\"viewport\"><\/code> scale is 1, we could simply multiply the size of HUD elements by DPR to get resolution-independent size of the element (so that it doesn’t look too small too dense displays):<\/p>\n

\/\/drawing a 48dip cross at (16dip;16dip)
\nctx.fillRect(32 * devicePixelRatio, 16 * devicePixelRatio, 16 * devicePixelRatio, 48 * devicePixelRatio);
\nctx.fillRect(16 * devicePixelRatio, 32 * devicePixelRatio, 48 * devicePixelRatio, 16 * devicePixelRatio);<\/code><\/p>\n

On screen, the cross would have the following size with the old behavior:<\/p>\n\n\n\n\n\n\n\n\n\n
Display DPI<\/th>\nZoom level<\/th>\ndevicePixelRatio<\/code><\/th>\nOutput size on screen<\/th>\n<\/tr>\n
96 (1x)<\/td>\n100%<\/td>\n1<\/td>\n48×48<\/td>\n<\/tr>\n
96 (1x)<\/td>\n200%<\/td>\n1<\/td>\n96×96<\/td>\n<\/tr>\n
96 (1x)<\/td>\n400%<\/td>\n1<\/td>\n192×192<\/td>\n<\/tr>\n
192 (2x)<\/td>\n100%<\/td>\n2<\/td>\n96×96<\/td>\n<\/tr>\n
192 (2x)<\/td>\n200%<\/td>\n2<\/td>\n192×192<\/td>\n<\/tr>\n
192 (2x)<\/td>\n400%<\/td>\n2<\/td>\n384×384<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

This is fine, on high-DPI displays 384×384 looks like 192×192 on low-DPI displays, so it’s correctly zoomed by 400% (48 * 4 = 192).<\/p>\n

However, with the new DPI, DPR is multiplied by the zoom level too, so if we multiply the size by DPR, we get the element scaled twice<\/b> (in the script by DPR and in the browser by zoom):<\/p>\n\n\n\n\n\n\n\n\n\n
Display DPI<\/th>\nZoom level<\/th>\ndevicePixelRatio<\/code><\/th>\nOutput size on screen<\/th>\n<\/tr>\n
96 (1x)<\/td>\n100%<\/td>\n1<\/td>\n48×48<\/td>\n<\/tr>\n
96 (1x)<\/td>\n200%<\/td>\n2<\/td>\n192×192<\/td>\n<\/tr>\n
96 (1x)<\/td>\n400%<\/td>\n4<\/td>\n768×768<\/b><\/td>\n<\/tr>\n
192 (2x)<\/td>\n100%<\/td>\n2<\/td>\n96×96<\/td>\n<\/tr>\n
192 (2x)<\/td>\n200%<\/td>\n4<\/td>\n384×384<\/td>\n<\/tr>\n
192 (2x)<\/td>\n400%<\/td>\n8<\/td>\n1536×1536<\/b><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

On high-DPI displays, 1536×1536 looks like 768×768 on low-DPI displays. 768×768 is 1600%<\/b> larger than 48×48, while we only wanted to zoom by 400%<\/b>.<\/p>\n

So, as I said before, we get the element zoomed by zoomLevel^2 instead of zoomLevel.et the element zoomed by zoomLevel^2 instead of zoomLevel.<\/p>\n

Use case example<\/h1>\n

If you open WebQuake<\/a> on a high-DPI display, you can see that the game is rendered in HD, but the HUD and the menus appear too small.<\/p>\n

This is because I set <meta viewport> scale to 1. If I didn’t do this, the HUD size would be correct, but the game would be blurry.<\/p>\n

What exactly I want is to render the game in HD while having the HUD drawn at correct size.<\/p>\n

The solution<\/h1>\n

The solution is very simple.<\/p>\n

A constant value which behaves the same way as the old DPR – doesn’t take zoom level into account.<\/p>\n

Let it be named window.deviceNormalPixelRatio<\/code> or navigator.deviceNormalPixelRatio<\/code>.<\/p>\n

Another important thing is to make it viewport scale-independent. It would have no point then, since it is to be used when viewport scale is forced to 1 (for manual scaling of selected elements).<\/p>\n

It must be accessible from CSS queries too so we won’t have to use JavaScript to resize every element.<\/p>\n

For HD image loading, the old devicePixelRatio<\/code> would be used, and for manual <meta name=\"viewport\"><\/code> correction, deviceNormalPixelRatio<\/code> would be.<\/p>\n

Another possible use<\/h1>\n

Along with DPI scaling, deviceNormalPixelRatio<\/code> can be used to retrieve zoom level in a cross-browser way (there’s no way to retrieve zoom level yet!):<\/p>\n

var zoom = devicePixelRatio \/ deviceNormalPixelRatio;<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

Reposted from \/community\/respimg per Marcos Caceres’ request. This is a proposal for addition of a zoom-independent version of window.devicePixelRatio to HTML5. The issue Before Firefox 18 and Chrome 25, to make a 3D (WebGL) game drawn in HD, we could … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":3967,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[1],"tags":[],"class_list":["post-94","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/games\/wp-json\/wp\/v2\/posts\/94","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.w3.org\/community\/games\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3.org\/community\/games\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/games\/wp-json\/wp\/v2\/users\/3967"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/games\/wp-json\/wp\/v2\/comments?post=94"}],"version-history":[{"count":4,"href":"https:\/\/www.w3.org\/community\/games\/wp-json\/wp\/v2\/posts\/94\/revisions"}],"predecessor-version":[{"id":98,"href":"https:\/\/www.w3.org\/community\/games\/wp-json\/wp\/v2\/posts\/94\/revisions\/98"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/games\/wp-json\/wp\/v2\/media?parent=94"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/games\/wp-json\/wp\/v2\/categories?post=94"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/games\/wp-json\/wp\/v2\/tags?post=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}