Safari iOS 8上的Webgl圖像紋理失敗

Question

以下示例在所有主流瀏覽器上都能正常工作，即使在Safari Mac OS上也是如此，但它無法在我的iPad上使用最近的iOS8顯示正確的圖像。 http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html

此外，以下教程在iOS8上運行不正常。

http://blog.thematicmapping.org/2014/01/photo-spheres-with-threejs.html

我們應該如何在webgl iOS中顯示全景圖像？

Answer 1

移動設備不允許紋理大小與桌面瀏覽器相同。 webgl_panorama_equirectangular.html示例中的紋理是4096x2048，這對於移動設備來說很重要。 減小紋理的大小，但保持2的力量。

Answer 2

訪問iOS上的http://webglreport.com/ ，我們看到“Max Texture Size：4096”。 事實上iOS支持全景圖像高達4096 * 2048，但是，我相信在three.js中有一個bug。 在我的測試中，如果全景圖像的大小大於4096，它將自動縮放到4096 * 2048並且它將被正確渲染。 但是，如果圖像大小正好是4096 * 2048，則不會進行縮放，渲染會出現問題。

作為一種解決方法，您可以在函數clampToMaxSize中對three.js進行一些小改動：

更改

if ( image.width > maxSize || image.height > maxSize ) {

至

if ( image.width >= maxSize || image.height >= maxSize ) {

這意味着我們縮放尺寸為4096 * 2048的圖像。 在函數clampToMaxSize中，它最重要的是它

context.drawImage( image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height );

Answer 3

2048x2048是IOS8 safari上的最大紋理尺寸，或者使用具有6x 1024x1024紋理的天空盒的全景img 2048x1024在分辨率和性能方面將是更好的解決方案