All materials render black on some mobile devices #69

Let's detect the wrong devices, and set precision to mediump only if needed.

sandbox/embed_selfhost_fullscreen.html

@@ -55,6 +55,7 @@
 	<script type="text/javascript" src="../source/export/exporter.js"></script>
 	<script type="text/javascript" src="../source/external/rhinoimporter.js"></script>
 	<script type="text/javascript" src="../source/external/rhinoexporter.js"></script>
+	<script type="text/javascript" src="../source/external/threeutils.js"></script>
 	<script type="text/javascript" src="../source/external/threeconverter.js"></script>
 	<script type="text/javascript" src="../source/external/threemodelloader.js"></script>
 	<script type="text/javascript" src="../source/parameters/parameterlist.js"></script>

sandbox/embed_selfhost_multiple.html

@@ -56,6 +56,7 @@
 	<script type="text/javascript" src="../source/export/exporter.js"></script>
 	<script type="text/javascript" src="../source/external/rhinoimporter.js"></script>
 	<script type="text/javascript" src="../source/external/rhinoexporter.js"></script>
+	<script type="text/javascript" src="../source/external/threeutils.js"></script>
 	<script type="text/javascript" src="../source/external/threeconverter.js"></script>
 	<script type="text/javascript" src="../source/external/threemodelloader.js"></script>
 	<script type="text/javascript" src="../source/parameters/parameterlist.js"></script>

sandbox/embed_selfhost_single.html

@@ -55,6 +55,7 @@
 	<script type="text/javascript" src="../source/export/exporter.js"></script>
 	<script type="text/javascript" src="../source/external/rhinoimporter.js"></script>
 	<script type="text/javascript" src="../source/external/rhinoexporter.js"></script>
+	<script type="text/javascript" src="../source/external/threeutils.js"></script>
 	<script type="text/javascript" src="../source/external/threeconverter.js"></script>
 	<script type="text/javascript" src="../source/external/threemodelloader.js"></script>
 	<script type="text/javascript" src="../source/parameters/parameterlist.js"></script>

sandbox/embed_selfhost_single_scroll.html

@@ -55,6 +55,7 @@
 	<script type="text/javascript" src="../source/export/exporter.js"></script>
 	<script type="text/javascript" src="../source/external/rhinoimporter.js"></script>
 	<script type="text/javascript" src="../source/external/rhinoexporter.js"></script>
+	<script type="text/javascript" src="../source/external/threeutils.js"></script>
 	<script type="text/javascript" src="../source/external/threeconverter.js"></script>
 	<script type="text/javascript" src="../source/external/threemodelloader.js"></script>
 	<script type="text/javascript" src="../source/parameters/parameterlist.js"></script>

sandbox/invalid_driver_detector.html

@@ -53,11 +53,6 @@
 				pixels
 			);
 			
-			// TODO: remove
-			let resultDiv = document.createElement ('div');
-			document.body.appendChild (resultDiv);
-			resultDiv.innerHTML = pixels;
-
 			document.body.removeChild (canvas);
 			if (pixels[0] < 50 && pixels[1] < 50 && pixels[2] < 50) {
 				return true;

source/external/threeconverter.js

@@ -1,4 +1,12 @@
-OV.ConvertModelToThreeMeshes = function (model, callbacks)
+OV.ModelToThreeConversionParams = class
+{
+	constructor ()
+	{
+		this.forceMediumpForMaterials = false;
+	}
+};
+
+OV.ConvertModelToThreeMeshes = function (model, params, callbacks)
 {
 	function CreateThreeMaterial (model, materialIndex)
 	{
@@ -35,7 +43,7 @@ OV.ConvertModelToThreeMeshes = function (model, callbacks)
 			specularColor.setRGB (0.0, 0.0, 0.0);
 		}
 
-		let threeMaterial = new THREE.MeshPhongMaterial ({
+		let materialParams = {
 			color : diffuseColor,
 			specular : specularColor,
 			emissive : emissiveColor,
@@ -44,8 +52,12 @@ OV.ConvertModelToThreeMeshes = function (model, callbacks)
 			transparent : material.transparent,
 			alphaTest : material.alphaTest,
 			side : THREE.DoubleSide
-		});
+		};
-		
+		if (params.forceMediumpForMaterials) {
+			materialParams.precision = 'mediump';
+		}
+
+		let threeMaterial = new THREE.MeshPhongMaterial (materialParams);
 		LoadTexture (threeMaterial, material.diffuseMap, function (threeTexture) {
 			if (!material.multiplyDiffuseMap) {
 				threeMaterial.color.setRGB (1.0, 1.0, 1.0);

source/external/threemodelloader.js

@@ -3,9 +3,10 @@ OV.ThreeModelLoader = class
     constructor ()
     {
         this.importer = new OV.Importer ();
-		this.importer.AddImporter (new OV.Importer3dm ());
+        this.importer.AddImporter (new OV.Importer3dm ());
         this.callbacks = null;
-		this.inProgress = false;
+        this.inProgress = false;
+        this.hasHighpDriverIssue = OV.HasHighpDriverIssue ();
     }
 
     Init (callbacks)
@@ -13,79 +14,82 @@ OV.ThreeModelLoader = class
         this.callbacks = callbacks;
     }
 
-	LoadFromUrlList (urls, settings)
+    LoadFromUrlList (urls, settings)
-	{
+    {
-		if (this.inProgress) {
+        if (this.inProgress) {
-			return;
+            return;
-		}
+        }
 
-		let obj = this;
+        let obj = this;
-		this.inProgress = true;
+        this.inProgress = true;
         this.callbacks.onLoadStart ();
-		this.importer.LoadFilesFromUrls (urls, function () {
+        this.importer.LoadFilesFromUrls (urls, function () {
-			obj.OnFilesLoaded (settings);
+            obj.OnFilesLoaded (settings);
-		});
+        });
-	}
+    }
-	
-	LoadFromFileList (files, settings)
-	{
-		if (this.inProgress) {
-			return;
-		}
-
-		let obj = this;
-		this.inProgress = true;
-        this.callbacks.onLoadStart ();
-		this.importer.LoadFilesFromFileObjects (files, function () {
-			obj.OnFilesLoaded (settings);
-		});
-	}
-
-	ReloadFiles (settings)
-	{
-		if (this.inProgress) {
-			return;
-		}
-
-		this.inProgress = true;
-        this.callbacks.onLoadStart ();
-		this.OnFilesLoaded (settings);		
-	}
     
-	OnFilesLoaded (settings)
+    LoadFromFileList (files, settings)
-	{
+    {
-		let obj = this;
+        if (this.inProgress) {
-		this.callbacks.onImportStart ();
+            return;
-		OV.RunTaskAsync (function () {
+        }
-			obj.importer.Import (settings, {
-				onSuccess : function (importResult) {
-					obj.OnModelImported (importResult);
-				},
-				onError : function (importError) {
-					obj.callbacks.onLoadError (importError);
-					obj.inProgress = false;
-				}
-			});
-		});
-	}
 
-	OnModelImported (importResult)
+        let obj = this;
-	{
+        this.inProgress = true;
-		let obj = this;
+        this.callbacks.onLoadStart ();
-		this.callbacks.onVisualizationStart ();
+        this.importer.LoadFilesFromFileObjects (files, function () {
-		OV.ConvertModelToThreeMeshes (importResult.model, {
+            obj.OnFilesLoaded (settings);
-			onTextureLoaded : function () {
+        });
-				obj.callbacks.onTextureLoaded ();
+    }
-			},
-			onModelLoaded : function (meshes) {
-				obj.callbacks.onModelFinished (importResult, meshes);
-				obj.inProgress = false;
-			}
-		});
-	}
 
-	GetImporter ()
+    ReloadFiles (settings)
-	{
+    {
-		return this.importer;
+        if (this.inProgress) {
-	}
+            return;
+        }
+
+        this.inProgress = true;
+        this.callbacks.onLoadStart ();
+        this.OnFilesLoaded (settings);        
+    }
+    
+    OnFilesLoaded (settings)
+    {
+        let obj = this;
+        this.callbacks.onImportStart ();
+        OV.RunTaskAsync (function () {
+            obj.importer.Import (settings, {
+                onSuccess : function (importResult) {
+                    obj.OnModelImported (importResult);
+                },
+                onError : function (importError) {
+                    obj.callbacks.onLoadError (importError);
+                    obj.inProgress = false;
+                }
+            });
+        });
+    }
+
+    OnModelImported (importResult)
+    {
+        let obj = this;
+        this.callbacks.onVisualizationStart ();
+        let params = new OV.ModelToThreeConversionParams ();
+		// https://github.com/kovacsv/Online3DViewer/issues/69
+        params.forceMediumpForMaterials = this.hasHighpDriverIssue;
+        OV.ConvertModelToThreeMeshes (importResult.model, params, {
+            onTextureLoaded : function () {
+                obj.callbacks.onTextureLoaded ();
+            },
+            onModelLoaded : function (meshes) {
+                obj.callbacks.onModelFinished (importResult, meshes);
+                obj.inProgress = false;
+            }
+        });
+    }
+
+    GetImporter ()
+    {
+        return this.importer;
+    }
 };

source/external/threeutils.js

@@ -0,0 +1,50 @@
+OV.HasHighpDriverIssue = function ()
+{
+    let canvas = document.createElement ('canvas');
+    document.body.appendChild (canvas);
+    let parameters = {
+        canvas : canvas,
+        antialias : true
+    };
+
+    let renderer = new THREE.WebGLRenderer (parameters);
+    renderer.setClearColor ('#ffffff', 1);
+    renderer.setSize (10, 10);
+
+    let scene = new THREE.Scene ();
+
+    let ambientLight = new THREE.AmbientLight (0x888888);
+    scene.add (ambientLight);
+
+    let light = new THREE.DirectionalLight (0x888888);
+    light.position.set (0.0, 0.0, 1.0);	
+    scene.add (light);
+
+    let camera = new THREE.PerspectiveCamera (45.0, 1.0, 0.1, 1000.0);
+    camera.position.set (0.0, 0.0, 1.0);
+    camera.up.set (0.0, 1.0, 0.0);
+    camera.lookAt (new THREE.Vector3 (0.0, 0.0, 0.0));
+    scene.add (camera);
+
+    let plane = new THREE.PlaneGeometry (1.0, 1.0);
+    let mesh = new THREE.Mesh (plane, new THREE.MeshPhongMaterial ({
+        color : 0xcc0000
+    }));
+    scene.add (mesh);
+    renderer.render (scene, camera);
+
+    let context = renderer.getContext ();
+    let pixels = new Uint8Array (4);
+    context.readPixels(
+        5, 5, 1, 1,
+        context.RGBA,
+        context.UNSIGNED_BYTE,
+        pixels
+    );
+    
+    document.body.removeChild (canvas);
+    if (pixels[0] < 50 && pixels[1] < 50 && pixels[2] < 50) {
+        return true;
+    }
+    return false;
+};

tools/config.json

@@ -51,6 +51,7 @@
 		"source/export/exporter.js",
 		"source/external/rhinoimporter.js",
 		"source/external/rhinoexporter.js",
+		"source/external/threeutils.js",
 		"source/external/threeconverter.js",
 		"source/external/threemodelloader.js",
 		"source/parameters/parameterlist.js",

website/embed.html

@@ -64,6 +64,7 @@
 	<script type="text/javascript" src="../source/export/exporter.js"></script>
 	<script type="text/javascript" src="../source/external/rhinoimporter.js"></script>
 	<script type="text/javascript" src="../source/external/rhinoexporter.js"></script>
+	<script type="text/javascript" src="../source/external/threeutils.js"></script>
 	<script type="text/javascript" src="../source/external/threeconverter.js"></script>
 	<script type="text/javascript" src="../source/external/threemodelloader.js"></script>
 	<script type="text/javascript" src="../source/parameters/parameterlist.js"></script>

website/index.html

@@ -64,6 +64,7 @@
 	<script type="text/javascript" src="../source/export/exporter.js"></script>
 	<script type="text/javascript" src="../source/external/rhinoimporter.js"></script>
 	<script type="text/javascript" src="../source/external/rhinoexporter.js"></script>
+	<script type="text/javascript" src="../source/external/threeutils.js"></script>
 	<script type="text/javascript" src="../source/external/threeconverter.js"></script>
 	<script type="text/javascript" src="../source/external/threemodelloader.js"></script>
 	<script type="text/javascript" src="../source/parameters/parameterlist.js"></script>