Изменение размера контекста WebGL в iOS

В iOS WebGL есть ошибка, которую можно воспроизвести с помощью следующего HTML:

<html>
<head>
    <title>Resize WebGL</title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>

<input type="button" id="resizeButton" value="resize"><br>
<canvas id="chart" style="width:100px; height:100px; border:1px solid #000;">
    <script>
        var canvas = document.getElementById('chart');
        var gl = null;

        function resetGL() {
            var devicePixelRatio = 2; // Warning: overrides window.devicePixelRatio
            var w = Math.floor(canvas.clientWidth * devicePixelRatio);
            var h = Math.floor(canvas.clientHeight * devicePixelRatio);
            if (canvas.width != w || canvas.height != h) {
                console.log("resetGL: Setting canvas.width=" + w + " canvas.height=" + h);
                canvas.width = w;
                canvas.height = h;
            }
            if (!gl || gl.isContextLost()) {
                gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
                console.log("Allocated WebGL context: " + gl);
            }
        }

        function redraw() {
            requestAnimationFrame(function () {
                resetGL();
                gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
                gl.clearColor(1, 1, 0.8, 1);
                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
            });
        }

        var bToggle = false;
        function resize() {
            bToggle = !bToggle;
            var s = bToggle ? '50px' : '100px';
            console.log("");
            console.log("Button: Setting canvas.style.width=" + s + " canvas.style.height=" + s);
            canvas.style.width = s;
            canvas.style.height = s;
            redraw();
        }
        var button = document.getElementById('resizeButton');
        button.addEventListener("click", resize);
        redraw();
    </script>
</canvas>
<br>
Press "resize", and iOS stomps on this text!
</body>
</html>

Я загрузил этот HTML-код на http://adam1234.s3-website-us-east-1.amazonaws.com/bug.html, чтобы вы могли легко запустить его.

Для тех, у кого нет устройства iOS, я загрузил скриншоты своего iPad до и после нажатия кнопка, которая показывает ошибку в iOS.

Этот код работает в десктопных браузерах и Android, но в iOS измененное окно WebGL выходит за пределы холста и топчет все, что находится за пределами холста. Это ошибка iOS. Ошибка исчезает, если для devicePixelRatio установлено значение 1, но я хочу использовать более высокое разрешение экранов Retina.

Как изменить размер холста WebGL с высоким разрешением в iOS?


ios webgl resize retina
person Adam Gawne-Cain    schedule 02.03.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел обходной путь. Приложение должно поместить элемент WebGL ‹canvas› внутрь ‹div› и воссоздавать элемент ‹canvas› при изменении размера ‹div›. Кроме того, у «холста» не должно быть границ, чтобы избежать другой ошибки iOS при размещении окна GL внутри холста с толстой рамкой на дисплеях Retina. Если вам нужна рамка, просто поместите границу на элемент ‹div›.

person Adam Gawne-Cain    schedule 13.03.2016