Use Physically Based Rendering when possible #99

sandbox/embed_iframe.html

@@ -38,6 +38,11 @@
         width=360 height=240
         style="border:1px solid #eeeeee;">
     </iframe>
+    <iframe
+        src="../../website/embed.html#model=../test/testfiles/gltf/DamagedHelmet/glTF-Binary/DamagedHelmet.glb"
+        width=360 height=240
+        style="border:1px solid #eeeeee;">
+    </iframe>
     <iframe
         src="../../website/embed.html#model=wrong.3ds"
         width=360 height=240

source/threejs/threeconverter.js

@@ -78,6 +78,8 @@ OV.ConvertModelToThreeMeshes = function (model, params, output, callbacks)
 			threeMaterial.metalness = material.metalness;
 			threeMaterial.roughness = material.roughness;
 			LoadTexture (threeMaterial, material.metallicMap, (threeTexture) => {
+				threeMaterial.metalness = 0.8;
+				threeMaterial.roughness = 0.8;
 				threeMaterial.metalnessMap = threeTexture;
 				threeMaterial.roughnessMap = threeTexture;
 				callbacks.onTextureLoaded ();

source/viewer/viewer.js

@@ -187,6 +187,14 @@ OV.Viewer = class
         this.Render ();
     }
 
+    SetEnvironmentMap (textures)
+    {
+        let loader = new THREE.CubeTextureLoader ();
+        this.scene.environment = loader.load (textures, () => {
+            this.Render ();
+        });
+    }
+
     GetCamera ()
     {
         return this.navigation.GetCamera ();

test/testfiles/gltf/DamagedHelmet/README.md

@@ -0,0 +1,15 @@
+# Damaged Helmet
+
+## Screenshot
+
+![screenshot](screenshot/screenshot.png)
+
+## License Information
+
+Battle Damaged Sci-fi Helmet - PBR by [theblueturtle_](https://sketchfab.com/theblueturtle_), published under a Creative Commons Attribution-NonCommercial license
+
+https://sketchfab.com/models/b81008d513954189a063ff901f7abfe4
+
+## Modifications
+
+The original model was built on an early draft of glTF 2.0 that did not become final.  This new model has been imported and re-exported from Blender to bring it into alignment with the final release glTF 2.0 specification.

test/testfiles/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf

@@ -0,0 +1,204 @@
+{
+    "accessors" : [
+        {
+            "bufferView" : 0,
+            "componentType" : 5123,
+            "count" : 46356,
+            "max" : [
+                14555
+            ],
+            "min" : [
+                0
+            ],
+            "type" : "SCALAR"
+        },
+        {
+            "bufferView" : 1,
+            "componentType" : 5126,
+            "count" : 14556,
+            "max" : [
+                0.9424954056739807,
+                0.8128451108932495,
+                0.900973916053772
+            ],
+            "min" : [
+                -0.9474585652351379,
+                -1.18715500831604,
+                -0.9009949564933777
+            ],
+            "type" : "VEC3"
+        },
+        {
+            "bufferView" : 2,
+            "componentType" : 5126,
+            "count" : 14556,
+            "max" : [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "min" : [
+                -1.0,
+                -1.0,
+                -1.0
+            ],
+            "type" : "VEC3"
+        },
+        {
+            "bufferView" : 3,
+            "componentType" : 5126,
+            "count" : 14556,
+            "max" : [
+                0.9999759793281555,
+                1.998665988445282
+            ],
+            "min" : [
+                0.002448640065267682,
+                1.0005531199858524
+            ],
+            "type" : "VEC2"
+        }
+    ],
+    "asset" : {
+        "generator" : "Khronos Blender glTF 2.0 exporter",
+        "version" : "2.0"
+    },
+    "bufferViews" : [
+        {
+            "buffer" : 0,
+            "byteLength" : 92712,
+            "byteOffset" : 0,
+            "target" : 34963
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 174672,
+            "byteOffset" : 92712,
+            "target" : 34962
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 174672,
+            "byteOffset" : 267384,
+            "target" : 34962
+        },
+        {
+            "buffer" : 0,
+            "byteLength" : 116448,
+            "byteOffset" : 442056,
+            "target" : 34962
+        }
+    ],
+    "buffers" : [
+        {
+            "byteLength" : 558504,
+            "uri" : "DamagedHelmet.bin"
+        }
+    ],
+    "images" : [
+        {
+            "uri" : "Default_albedo.jpg"
+        },
+        {
+            "uri" : "Default_metalRoughness.jpg"
+        },
+        {
+            "uri" : "Default_emissive.jpg"
+        },
+        {
+            "uri" : "Default_AO.jpg"
+        },
+        {
+            "uri" : "Default_normal.jpg"
+        }
+    ],
+    "materials" : [
+        {
+            "emissiveFactor" : [
+                1.0,
+                1.0,
+                1.0
+            ],
+            "emissiveTexture" : {
+                "index" : 2
+            },
+            "name" : "Material_MR",
+            "normalTexture" : {
+                "index" : 4
+            },
+            "occlusionTexture" : {
+                "index" : 3
+            },
+            "pbrMetallicRoughness" : {
+                "baseColorTexture" : {
+                    "index" : 0
+                },
+                "metallicRoughnessTexture" : {
+                    "index" : 1
+                }
+            }
+        }
+    ],
+    "meshes" : [
+        {
+            "name" : "mesh_helmet_LP_13930damagedHelmet",
+            "primitives" : [
+                {
+                    "attributes" : {
+                        "NORMAL" : 2,
+                        "POSITION" : 1,
+                        "TEXCOORD_0" : 3
+                    },
+                    "indices" : 0,
+                    "material" : 0
+                }
+            ]
+        }
+    ],
+    "nodes" : [
+        {
+            "mesh" : 0,
+            "name" : "node_damagedHelmet_-6514",
+            "rotation" : [
+                0.7071068286895752,
+                0.0,
+                -0.0,
+                0.7071068286895752
+            ]
+        }
+    ],
+    "samplers" : [
+        {}
+    ],
+    "scene" : 0,
+    "scenes" : [
+        {
+            "name" : "Scene",
+            "nodes" : [
+                0
+            ]
+        }
+    ],
+    "textures" : [
+        {
+            "sampler" : 0,
+            "source" : 0
+        },
+        {
+            "sampler" : 0,
+            "source" : 1
+        },
+        {
+            "sampler" : 0,
+            "source" : 2
+        },
+        {
+            "sampler" : 0,
+            "source" : 3
+        },
+        {
+            "sampler" : 0,
+            "source" : 4
+        }
+    ]
+}

website/assets/envmaps/fishermans_bastion/readme.txt

@@ -0,0 +1,13 @@
+Author
+======
+
+This is the work of Emil Persson, aka Humus.
+http://www.humus.name
+
+
+
+License
+=======
+
+This work is licensed under a Creative Commons Attribution 3.0 Unported License.
+http://creativecommons.org/licenses/by/3.0/

website/o3dv/embed.js

@@ -11,7 +11,7 @@ OV.Embed = class
     Load ()
     {
         let canvas = $('<canvas>').appendTo (this.parameters.viewerDiv);
-        this.viewer.Init (canvas.get (0));
+        this.InitViewer (canvas);
         this.InitModelLoader ();
         this.Resize ();
 
@@ -63,6 +63,19 @@ OV.Embed = class
         this.viewer.FitToWindow (boundingSphere, false);        
     }    
 
+    InitViewer (canvas)
+    {
+        this.viewer.Init (canvas.get (0));
+        this.viewer.SetEnvironmentMap ([
+            'assets/envmaps/fishermans_bastion/posx.jpg',
+            'assets/envmaps/fishermans_bastion/negx.jpg',
+            'assets/envmaps/fishermans_bastion/posy.jpg',
+            'assets/envmaps/fishermans_bastion/negy.jpg',
+            'assets/envmaps/fishermans_bastion/posz.jpg',
+            'assets/envmaps/fishermans_bastion/negz.jpg'
+        ]);
+    }
+
     InitModelLoader ()
     {
         OV.InitModelLoader (this.modelLoader, {

website/o3dv/website.js

@@ -233,6 +233,14 @@ OV.Website = class
         let canvas = $('<canvas>').appendTo (this.parameters.viewerDiv);
         this.viewer.Init (canvas.get (0));
         this.viewer.SetBackgroundColor (this.settings.backgroundColor);
+        this.viewer.SetEnvironmentMap ([
+            'assets/envmaps/fishermans_bastion/posx.jpg',
+            'assets/envmaps/fishermans_bastion/negx.jpg',
+            'assets/envmaps/fishermans_bastion/posy.jpg',
+            'assets/envmaps/fishermans_bastion/negy.jpg',
+            'assets/envmaps/fishermans_bastion/posz.jpg',
+            'assets/envmaps/fishermans_bastion/negz.jpg'
+        ]);        
         this.ShowViewer (false);
     }