Как визуализировать содержимое WebGL с помощью устройств с высоким DPI?

Как правильно настроить WebGL для рендеринга всех собственных пикселей на дисплее с высокой точкой на дюйм (например, MacBook retina или pixel chromebook)?

7
webgl

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

существуют тесты соответствия, которым следуют эти правила. В частности, что браузеру не разрешено изменять размер backingstore для холста для холста WebGL.

для обычного 2D-холста это менее просто, но это не был заданный вопрос.

8