fix: rendering issue below ios 10

package.json

@@ -8,7 +8,8 @@
 	"types": "declaration/index.d.ts",
 	"scripts": {
 		"start": "webpack-dev-server --open --host 0.0.0.0",
-		"build": "rm -rf ./dist && rollup -c && npm run declaration && npm run printsizes",
+    "build": "rm -rf ./dist && rollup -c && npm run declaration && npm run printsizes",
+    "watch": "rollup -c -w",
 		"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
 		"printsizes": "print-sizes ./dist --exclude=\\.map",
 		"test": "karma start",

src/PanoImageRenderer/PanoImageRenderer.ts

@@ -601,13 +601,13 @@ class PanoImageRenderer extends Component<{
 
     gl.useProgram(shaderProgram);
     (shaderProgram as any).vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
-    gl.enableVertexAttribArray((shaderProgram as any).vertexPositionAttribute);
     (shaderProgram as any).pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
     (shaderProgram as any).mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     (shaderProgram as any).samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
     (shaderProgram as any).textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
     (shaderProgram as any).uEye = gl.getUniformLocation(shaderProgram, "uEye");
 
+    gl.enableVertexAttribArray((shaderProgram as any).vertexPositionAttribute);
     gl.enableVertexAttribArray((shaderProgram as any).textureCoordAttribute);
 
     // clear buffer

src/PanoImageRenderer/WebGLUtils.ts

@@ -39,8 +39,6 @@ export default class WebGLUtils {
     gl.attachShader(program, fragmentShader);
     gl.linkProgram(program);
 
-    gl.detachShader(program, vertexShader);
-    gl.detachShader(program, fragmentShader);
     gl.deleteShader(vertexShader);
     gl.deleteShader(fragmentShader);
 

test/manual/PanoViewer/ContextLost.html

@@ -112,4 +112,4 @@ <h3>number of active viewers: <span id="contextCnt">0</span></h3>
   </script>
 </body>
 
-</html>
+</html>

test/manual/PanoViewer/Events.html

@@ -63,7 +63,7 @@ <h2>Events</h2>
       "animationEnd": eventLogger,
       "error": eventLogger,
     });
-    
+
     function eventLogger(evt) {
       console.log(evt);
       log && log(evt.eventType);
@@ -79,4 +79,4 @@ <h2>Events</h2>
   </script>
 </body>
 
-</html>
+</html>

test/manual/PanoViewer/FullScreen.html

@@ -62,7 +62,7 @@ <h1 class="ui header">Full Screen</h1>
 			</div>
 		</div>
 		<div id="fullscreen-container"></div>
-		
+
 		<!--To use semantic-ui-->
 		<script src="../lib/jquery-3.3.1.min.js"></script>
 		<script src="../lib/semantic.min.js"></script>
@@ -74,7 +74,7 @@ <h1 class="ui header">Full Screen</h1>
 		<script>
 			var isFullScreen = false;
 			var container = document.getElementById("panoviewer-showcase");
-			
+
 			var PanoViewer = eg.view360.PanoViewer;
 			var panoViewer = new PanoViewer(container, {
 				yaw: 180,
@@ -93,4 +93,4 @@ <h1 class="ui header">Full Screen</h1>
 			});
 		</script>
 	</body>
-</html>
+</html>

test/manual/PanoViewer/PanoVideo.html

@@ -92,4 +92,4 @@ <h3>Available on Chrome Browser</h3>
   </script>
 </body>
 
-</html>
+</html>

test/manual/PanoViewer/PanoViewer.html

@@ -251,7 +251,7 @@ <h1 class="pageTitle">PanoViewer Manual Test</h1>
         "folders": {}
       }
     }
-  } 
+  }
 };
 
 var gridView = new GridView(document.querySelector(".grid-chart"), 0, 0);
@@ -286,7 +286,7 @@ <h1 class="pageTitle">PanoViewer Manual Test</h1>
 gui.remember(object);
 
 var params = {
-    loadFile : function() { 
+    loadFile : function() {
       document.querySelector('#file').click();
     },
     aspectRatio: 1,
@@ -427,8 +427,8 @@ <h1 class="pageTitle">PanoViewer Manual Test</h1>
   panoViewer.updateViewportDimensions();
 });
 
-gui.add(params, 'aspectRatio', 
-  { 
+gui.add(params, 'aspectRatio',
+  {
     "1:1": 1, "16:9": 16/9, "9:16": 9/16,
     "2:1": 2, "1:2": 1/2, "21:9": 21/9, "9:21": 9/21
   }
@@ -485,4 +485,4 @@ <h1 class="pageTitle">PanoViewer Manual Test</h1>
 window.panoViewer = panoViewer;
 })();
 </script>
-</html>
+</html>

test/manual/PanoViewer/TouchDirection.html

@@ -57,4 +57,4 @@ <h1 class="pageTitle">TouchDirection Manual Test</h1>
 
 })();
 </script>
-</html>
+</html>

test/manual/PanoViewer/Visible.html

@@ -134,7 +134,7 @@ <h2>Visible Activation</h2>
 			viewerEl.classList.add("inactive");
 			instance.destroy();
 			photo360ViewerMap[key] = null;
-		} 
+		}
 	});
 
 	// 보이게 된 엘리먼트 처리
@@ -145,7 +145,7 @@ <h2>Visible Activation</h2>
 		var instance = photo360ViewerMap[key];
 
 		// 인스턴스가 없으면 초기화 후 키 생성
-		if (!instance) { 
+		if (!instance) {
 			delete viewerEl["__photo360__"];
 			key = (new Date()).getTime() + idx;
 
@@ -164,7 +164,8 @@ <h2>Visible Activation</h2>
 				}, 10);
 			}).on("suspend", function(evt) {
 				viewerEl.classList.add("inactive");
-			}).on("error", function() {
+			}).on("error", function(e) {
+        console.error(e);
 				alert("이 브라우저는 webgl 을 지원하지 않습니다. 따라서 PanoViewer 가 동작할 수 없습니다.");
 			});
       		viewerEl.classList.add("loading");
@@ -219,4 +220,4 @@ <h2>Visible Activation</h2>
 
 </script>
 </body>
-</html>
+</html>

test/manual/SpinViewer/SpinViewer.html

@@ -120,4 +120,4 @@ <h3>options</h3>
     return options.scale * 2000 / window.innerWidth;
   }
 </script>
-</html>
+</html>

test/manual/SpinViewer/SpriteImage.html

@@ -95,7 +95,7 @@ <h3>Play Options</h3>
     "horizontal": {interval: 100, playCount: 10},
     "grid":{interval: 16}
   }
-  
+
   var verticalSpriteImage = new eg.view360.SpriteImage(document.getElementById("vertical-sprites"), {
     imageUrl: "../img/SpinViewer/foodwindow.jpg",
     rowCount: 48,
@@ -140,4 +140,4 @@ <h3>Play Options</h3>
     sprites[type].stop();
   }
 </script>
-</html>
+</html>

test/manual/YawPitchControl.html

@@ -160,7 +160,7 @@ <h1 class="pageTitle">YawPitchControl Manual Test</h1>
         "folders": {}
       }
     }
-  } 
+  }
 };
 var gridView = new GridView(document.querySelector(".grid-chart"), 0, 0);
 var threePanoView = new ThreePanoView(document.querySelector( '.pano-viewer' ), object.image, 0, 0, object.pitchRangeSize < 65 ? object.pitchRangeSize : 65, 1);
@@ -268,7 +268,7 @@ <h1 class="pageTitle">YawPitchControl Manual Test</h1>
   const yawRange = yawpitch.options.yawRange;
   const pitchRange = yawpitch.options.pitchRange;
   const fovRange = yawpitch.options.fovRange;
-  
+
   threePanoView.render(yaw, pitch, fov);
   gridView.render(yaw, pitch, yawRange, pitchRange);
 
@@ -286,4 +286,4 @@ <h1 class="pageTitle">YawPitchControl Manual Test</h1>
   document.getElementById("fov_range_max_value").innerHTML = fovRange[1].toFixed(0);
 }
 </script>
-</html>
+</html>