Skip to content

Commit c7ef690

Browse files
kovacsvkovacsv
committed
All materials render black on some mobile devices #69
Let's detect the wrong devices, and set precision to mediump only if needed.
1 parent ff46ecc commit c7ef690

11 files changed

Lines changed: 144 additions & 76 deletions

‎sandbox/embed_selfhost_fullscreen.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
<script type="text/javascript" src="../source/export/exporter.js"></script>
5656
<script type="text/javascript" src="../source/external/rhinoimporter.js"></script>
5757
<script type="text/javascript" src="../source/external/rhinoexporter.js"></script>
58+
<script type="text/javascript" src="../source/external/threeutils.js"></script>
5859
<script type="text/javascript" src="../source/external/threeconverter.js"></script>
5960
<script type="text/javascript" src="../source/external/threemodelloader.js"></script>
6061
<script type="text/javascript" src="../source/parameters/parameterlist.js"></script>

‎sandbox/embed_selfhost_multiple.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
<script type="text/javascript" src="../source/export/exporter.js"></script>
5757
<script type="text/javascript" src="../source/external/rhinoimporter.js"></script>
5858
<script type="text/javascript" src="../source/external/rhinoexporter.js"></script>
59+
<script type="text/javascript" src="../source/external/threeutils.js"></script>
5960
<script type="text/javascript" src="../source/external/threeconverter.js"></script>
6061
<script type="text/javascript" src="../source/external/threemodelloader.js"></script>
6162
<script type="text/javascript" src="../source/parameters/parameterlist.js"></script>

‎sandbox/embed_selfhost_single.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
<script type="text/javascript" src="../source/export/exporter.js"></script>
5656
<script type="text/javascript" src="../source/external/rhinoimporter.js"></script>
5757
<script type="text/javascript" src="../source/external/rhinoexporter.js"></script>
58+
<script type="text/javascript" src="../source/external/threeutils.js"></script>
5859
<script type="text/javascript" src="../source/external/threeconverter.js"></script>
5960
<script type="text/javascript" src="../source/external/threemodelloader.js"></script>
6061
<script type="text/javascript" src="../source/parameters/parameterlist.js"></script>

‎sandbox/embed_selfhost_single_scroll.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
<script type="text/javascript" src="../source/export/exporter.js"></script>
5656
<script type="text/javascript" src="../source/external/rhinoimporter.js"></script>
5757
<script type="text/javascript" src="../source/external/rhinoexporter.js"></script>
58+
<script type="text/javascript" src="../source/external/threeutils.js"></script>
5859
<script type="text/javascript" src="../source/external/threeconverter.js"></script>
5960
<script type="text/javascript" src="../source/external/threemodelloader.js"></script>
6061
<script type="text/javascript" src="../source/parameters/parameterlist.js"></script>

‎sandbox/invalid_driver_detector.html‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,6 @@
5353
pixels
5454
);
5555

56-
// TODO: remove
57-
let resultDiv = document.createElement ('div');
58-
document.body.appendChild (resultDiv);
59-
resultDiv.innerHTML = pixels;
60-
6156
document.body.removeChild (canvas);
6257
if (pixels[0] < 50 && pixels[1] < 50 && pixels[2] < 50) {
6358
return true;

‎source/external/threeconverter.js‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
OV.ConvertModelToThreeMeshes = function (model, callbacks)
1+
OV.ModelToThreeConversionParams = class
2+
{
3+
constructor ()
4+
{
5+
this.forceMediumpForMaterials = false;
6+
}
7+
};
8+
9+
OV.ConvertModelToThreeMeshes = function (model, params, callbacks)
210
{
311
function CreateThreeMaterial (model, materialIndex)
412
{
@@ -35,7 +43,7 @@ OV.ConvertModelToThreeMeshes = function (model, callbacks)
3543
specularColor.setRGB (0.0, 0.0, 0.0);
3644
}
3745

38-
let threeMaterial = new THREE.MeshPhongMaterial ({
46+
let materialParams = {
3947
color : diffuseColor,
4048
specular : specularColor,
4149
emissive : emissiveColor,
@@ -44,8 +52,12 @@ OV.ConvertModelToThreeMeshes = function (model, callbacks)
4452
transparent : material.transparent,
4553
alphaTest : material.alphaTest,
4654
side : THREE.DoubleSide
47-
});
48-
55+
};
56+
if (params.forceMediumpForMaterials) {
57+
materialParams.precision = 'mediump';
58+
}
59+
60+
let threeMaterial = new THREE.MeshPhongMaterial (materialParams);
4961
LoadTexture (threeMaterial, material.diffuseMap, function (threeTexture) {
5062
if (!material.multiplyDiffuseMap) {
5163
threeMaterial.color.setRGB (1.0, 1.0, 1.0);

‎source/external/threemodelloader.js‎

Lines changed: 71 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -3,89 +3,93 @@ OV.ThreeModelLoader = class
33
constructor ()
44
{
55
this.importer = new OV.Importer ();
6-
this.importer.AddImporter (new OV.Importer3dm ());
6+
this.importer.AddImporter (new OV.Importer3dm ());
77
this.callbacks = null;
8-
this.inProgress = false;
8+
this.inProgress = false;
9+
this.hasHighpDriverIssue = OV.HasHighpDriverIssue ();
910
}
1011

1112
Init (callbacks)
1213
{
1314
this.callbacks = callbacks;
1415
}
1516

16-
LoadFromUrlList (urls, settings)
17-
{
18-
if (this.inProgress) {
19-
return;
20-
}
17+
LoadFromUrlList (urls, settings)
18+
{
19+
if (this.inProgress) {
20+
return;
21+
}
2122

22-
let obj = this;
23-
this.inProgress = true;
23+
let obj = this;
24+
this.inProgress = true;
2425
this.callbacks.onLoadStart ();
25-
this.importer.LoadFilesFromUrls (urls, function () {
26-
obj.OnFilesLoaded (settings);
27-
});
28-
}
29-
30-
LoadFromFileList (files, settings)
31-
{
32-
if (this.inProgress) {
33-
return;
34-
}
26+
this.importer.LoadFilesFromUrls (urls, function () {
27+
obj.OnFilesLoaded (settings);
28+
});
29+
}
30+
31+
LoadFromFileList (files, settings)
32+
{
33+
if (this.inProgress) {
34+
return;
35+
}
3536

36-
let obj = this;
37-
this.inProgress = true;
37+
let obj = this;
38+
this.inProgress = true;
3839
this.callbacks.onLoadStart ();
39-
this.importer.LoadFilesFromFileObjects (files, function () {
40-
obj.OnFilesLoaded (settings);
41-
});
42-
}
40+
this.importer.LoadFilesFromFileObjects (files, function () {
41+
obj.OnFilesLoaded (settings);
42+
});
43+
}
4344

44-
ReloadFiles (settings)
45-
{
46-
if (this.inProgress) {
47-
return;
48-
}
45+
ReloadFiles (settings)
46+
{
47+
if (this.inProgress) {
48+
return;
49+
}
4950

50-
this.inProgress = true;
51+
this.inProgress = true;
5152
this.callbacks.onLoadStart ();
52-
this.OnFilesLoaded (settings);
53-
}
53+
this.OnFilesLoaded (settings);
54+
}
5455

55-
OnFilesLoaded (settings)
56-
{
57-
let obj = this;
58-
this.callbacks.onImportStart ();
59-
OV.RunTaskAsync (function () {
60-
obj.importer.Import (settings, {
61-
onSuccess : function (importResult) {
62-
obj.OnModelImported (importResult);
63-
},
64-
onError : function (importError) {
65-
obj.callbacks.onLoadError (importError);
66-
obj.inProgress = false;
67-
}
68-
});
69-
});
70-
}
56+
OnFilesLoaded (settings)
57+
{
58+
let obj = this;
59+
this.callbacks.onImportStart ();
60+
OV.RunTaskAsync (function () {
61+
obj.importer.Import (settings, {
62+
onSuccess : function (importResult) {
63+
obj.OnModelImported (importResult);
64+
},
65+
onError : function (importError) {
66+
obj.callbacks.onLoadError (importError);
67+
obj.inProgress = false;
68+
}
69+
});
70+
});
71+
}
7172

72-
OnModelImported (importResult)
73-
{
74-
let obj = this;
75-
this.callbacks.onVisualizationStart ();
76-
OV.ConvertModelToThreeMeshes (importResult.model, {
77-
onTextureLoaded : function () {
78-
obj.callbacks.onTextureLoaded ();
79-
},
80-
onModelLoaded : function (meshes) {
81-
obj.callbacks.onModelFinished (importResult, meshes);
82-
obj.inProgress = false;
83-
}
84-
});
85-
}
73+
OnModelImported (importResult)
74+
{
75+
let obj = this;
76+
this.callbacks.onVisualizationStart ();
77+
let params = new OV.ModelToThreeConversionParams ();
78+
// https://github.com/kovacsv/Online3DViewer/issues/69
79+
params.forceMediumpForMaterials = this.hasHighpDriverIssue;
80+
OV.ConvertModelToThreeMeshes (importResult.model, params, {
81+
onTextureLoaded : function () {
82+
obj.callbacks.onTextureLoaded ();
83+
},
84+
onModelLoaded : function (meshes) {
85+
obj.callbacks.onModelFinished (importResult, meshes);
86+
obj.inProgress = false;
87+
}
88+
});
89+
}
8690

87-
GetImporter ()
88-
{
89-
return this.importer;
90-
}
91+
GetImporter ()
92+
{
93+
return this.importer;
94+
}
9195
};

‎source/external/threeutils.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
OV.HasHighpDriverIssue = function ()
2+
{
3+
let canvas = document.createElement ('canvas');
4+
document.body.appendChild (canvas);
5+
let parameters = {
6+
canvas : canvas,
7+
antialias : true
8+
};
9+
10+
let renderer = new THREE.WebGLRenderer (parameters);
11+
renderer.setClearColor ('#ffffff', 1);
12+
renderer.setSize (10, 10);
13+
14+
let scene = new THREE.Scene ();
15+
16+
let ambientLight = new THREE.AmbientLight (0x888888);
17+
scene.add (ambientLight);
18+
19+
let light = new THREE.DirectionalLight (0x888888);
20+
light.position.set (0.0, 0.0, 1.0);
21+
scene.add (light);
22+
23+
let camera = new THREE.PerspectiveCamera (45.0, 1.0, 0.1, 1000.0);
24+
camera.position.set (0.0, 0.0, 1.0);
25+
camera.up.set (0.0, 1.0, 0.0);
26+
camera.lookAt (new THREE.Vector3 (0.0, 0.0, 0.0));
27+
scene.add (camera);
28+
29+
let plane = new THREE.PlaneGeometry (1.0, 1.0);
30+
let mesh = new THREE.Mesh (plane, new THREE.MeshPhongMaterial ({
31+
color : 0xcc0000
32+
}));
33+
scene.add (mesh);
34+
renderer.render (scene, camera);
35+
36+
let context = renderer.getContext ();
37+
let pixels = new Uint8Array (4);
38+
context.readPixels(
39+
5, 5, 1, 1,
40+
context.RGBA,
41+
context.UNSIGNED_BYTE,
42+
pixels
43+
);
44+
45+
document.body.removeChild (canvas);
46+
if (pixels[0] < 50 && pixels[1] < 50 && pixels[2] < 50) {
47+
return true;
48+
}
49+
return false;
50+
};

‎tools/config.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"source/export/exporter.js",
5252
"source/external/rhinoimporter.js",
5353
"source/external/rhinoexporter.js",
54+
"source/external/threeutils.js",
5455
"source/external/threeconverter.js",
5556
"source/external/threemodelloader.js",
5657
"source/parameters/parameterlist.js",

‎website/embed.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
<script type="text/javascript" src="../source/export/exporter.js"></script>
6565
<script type="text/javascript" src="../source/external/rhinoimporter.js"></script>
6666
<script type="text/javascript" src="../source/external/rhinoexporter.js"></script>
67+
<script type="text/javascript" src="../source/external/threeutils.js"></script>
6768
<script type="text/javascript" src="../source/external/threeconverter.js"></script>
6869
<script type="text/javascript" src="../source/external/threemodelloader.js"></script>
6970
<script type="text/javascript" src="../source/parameters/parameterlist.js"></script>

0 commit comments

Comments
 (0)