在iOS中调整WebGL上下文的大小 [英] Resize WebGL context in iOS
问题描述
iOS WebGL有一个错误，可以使用以下HTML复制:
iOS WebGL has a bug, which can be reproduced with following 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 ，因此您可以轻松运行它.
I have uploaded this HTML to http://adam1234.s3-website-us-east-1.amazonaws.com/bug.html so you can run it easily.
对于没有iOS设备的用户，我已经上传了iPad的屏幕截图之前和之后按下按钮，显示iOS中的错误.
For people who don't have an iOS device, I have uploaded screenshots of my iPad before and after pressing the button, which show the bug in iOS.
此代码可在台式机浏览器和Android上运行，但在iOS中，调整大小的WebGL窗口位于Canvas外部，并在画布外部产生踩踏现象.这是iOS中的错误.如果将devicePixelRatio设置为1，该错误将消失，但我想使用更高分辨率的视网膜屏幕.
This code works on desktop browsers and Android, but in iOS the resized WebGL window goes outside the Canvas and stomps on stuff outside the canvas. This is a bug in iOS. The bug goes away if devicePixelRatio is set to 1, but I want to use the higher resolution of retina screens.
如何在iOS中调整高分辨率WebGL画布的大小?
How can I resize a high resolution WebGL canvas in iOS?
推荐答案
我找到了解决方法.该应用程序应将WebGL< canvas> < div>中的元素，并重新创建< canvas>只要< div>大小变化.另外，< canvas>应该没有边框，以避免在将GL窗口放置在视网膜显示中带有粗边框的画布内的另一个iOS错误.如果需要边框，只需将边框放在< div>元素.
I found a work-around. The app should put the WebGL <canvas> element inside a <div>, and recreate the <canvas> element whenever the <div> size changes. Also, the <canvas> should have no border to avoid another iOS bug in placing the GL window inside the canvas with thick border in retina displays. If you want a border, then just put the border on the <div> element.
这篇关于在iOS中调整WebGL上下文的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
