webgl - 高 DPI デバイスを使用して WebGL コンテンツをレンダリングする方法は?

Question

インチあたりのドット数が多いディスプレイ (macbook retina やピクセル chromebook など) ですべてのネイティブ ピクセルにレンダリングするように WebGL をセットアップする正しい方法は何ですか?

Answer 1

WebGL の場合は比較的単純です。

var desiredCSSWidth = 400;
var desiredCSSHeight = 300;
var devicePixelRatio = window.devicePixelRatio || 1;

canvas.width  = desiredCSSWidth  * devicePixelRatio;
canvas.height = desiredCSSHeight * devicePixelRatio;

canvas.style.width  = desiredCSSWidth  + "px";
canvas.style.height = desiredCSSHeight + "px";

http://www.khronos.org/webgl/wiki/HandlingHighDPIを参照してください。

これらのルールが守られていることを確認する適合性テストがあります。具体的には、ブラウザーが WebGL キャンバスのキャンバスのバッキングストアのサイズを変更することは許可されていません。

通常の 2D キャンバスの場合はそれほど単純ではありませんが、それは問題ではありませんでした。