Fix iOS issue when canvas is too big.

src/js/libpannellum.js

@@ -114,6 +114,8 @@ function Renderer(container) {
             // Enable WebGL on canvas
             if (!gl)
                 gl = canvas.getContext('experimental-webgl', {alpha: false, depth: false});
+            if (gl.getError() == 1286)
+                handleWebGLError1286();
         }
         
         // If there is no WebGL, fall back to CSS 3D transform renderer.
@@ -402,8 +404,9 @@ function Renderer(container) {
         }
 
         // Check if there was an error
-        if (gl.getError() !== 0) {
-            console.log('Error: Something went wrong with WebGL!');
+        var err = gl.getError();
+        if (err !== 0) {
+            console.log('Error: Something went wrong with WebGL!', err);
             throw {type: 'webgl error'};
         }
 
@@ -443,6 +446,8 @@ function Renderer(container) {
         canvas.width = canvas.clientWidth * pixelRatio;
         canvas.height = canvas.clientHeight * pixelRatio;
         if (gl) {
+            if (gl.getError() == 1286)
+                handleWebGLError1286();
             gl.viewport(0, 0, canvas.width, canvas.height);
             if (imageType != 'multires') {
                 gl.uniform1f(program.aspectRatio, canvas.width / canvas.height);
@@ -1162,6 +1167,18 @@ function Renderer(container) {
         
 
     }
+
+    /**
+     * On iOS (iPhone 5c, iOS 10.3), this WebGL error occurs when the canvas is
+     * too big. Unfortuately, there's no way to test for this beforehand, so we
+     * reduce the canvas size if this error is thrown.
+     * @private
+     */
+    function handleWebGLError1286() {
+        console.log('Reducing canvas size due to error 1286!');
+        canvas.width = Math.round(canvas.width / 2);
+        canvas.height = Math.round(canvas.height / 2);
+    }
 }
 
 // Vertex shader for equirectangular and cube

src/js/pannellum.js

@@ -693,8 +693,8 @@ function onDocumentDoubleClick(event) {
 function mouseEventToCoords(event) {
     var pos = mousePosition(event);
     var canvas = renderer.getCanvas();
-    var canvasWidth = canvas.width / (window.devicePixelRatio || 1),
-        canvasHeight = canvas.height / (window.devicePixelRatio || 1);
+    var canvasWidth = canvas.clientWidth,
+        canvasHeight = canvas.clientHeight;
     var x = pos.x / canvasWidth * 2 - 1;
     var y = (1 - pos.y / canvasHeight * 2) * canvasHeight / canvasWidth;
     var focal = 1 / Math.tan(config.hfov * Math.PI / 360);
@@ -716,8 +716,8 @@ function onDocumentMouseMove(event) {
     if (isUserInteracting && loaded) {
         latestInteraction = Date.now();
         var canvas = renderer.getCanvas();
-        var canvasWidth = canvas.width / (window.devicePixelRatio || 1),
-            canvasHeight = canvas.height / (window.devicePixelRatio || 1);
+        var canvasWidth = canvas.clientWidth,
+            canvasHeight = canvas.clientHeight;
         var pos = mousePosition(event);
         //TODO: This still isn't quite right
         var yaw = ((Math.atan(onPointerDownPointerX / canvasWidth * 2 - 1) - Math.atan(pos.x / canvasWidth * 2 - 1)) * 180 / Math.PI * config.hfov / 90) + onPointerDownYaw;
@@ -1730,8 +1730,8 @@ function renderHotSpot(hs) {
         // Subpixel rendering doesn't work in Firefox
         // https://bugzilla.mozilla.org/show_bug.cgi?id=739176
         var canvas = renderer.getCanvas(),
-            canvasWidth = canvas.width / (window.devicePixelRatio || 1),
-            canvasHeight = canvas.height / (window.devicePixelRatio || 1);
+            canvasWidth = canvas.clientWidth,
+            canvasHeight = canvas.clientHeight;
         var coord = [-canvasWidth / hfovTan * yawSin * hsPitchCos / z / 2,
             -canvasWidth / hfovTan * (hsPitchSin * configPitchCos -
             hsPitchCos * yawCos * configPitchSin) / z / 2];