Added self-shadows to physical rendering. Fixed material propagation to black on color change.

Author: deleulas

js/LDRColorMaterials.js

@@ -430,7 +430,7 @@ LDR.Colors.createRandomTexture = function(damage, waves, waveSize, speckle) {
 
 LDR.Colors.envMapPrefix = 'textures/cube/';
 LDR.Colors.textureMaterialPrefix = 'textures/materials/';
-LDR.Colors.listeningMaterials = {trans:[], // Only one trans material.
+LDR.Colors.listeningMaterials = {trans:[], // Only one trans texture.
                                  opaque:[], // -||-
                                  pearl:[],
                                  rubber:[],
@@ -627,7 +627,7 @@ LDR.Colors.buildStandardMaterial = function(colorID, texmap) {
     }
     else if(colorID === 0) {
         registerTextureListener = m => LDR.Colors.listeningMaterials.opaque.push(m);
-        params.specular = 0xFFFFFF; // Increase glare
+        params.specular = 0xDFDFDF; // Increase glare
         params.shininess = 82;
         params.reflectivity = 0.9;
     }

js/LDRLoader.js

@@ -2201,7 +2201,7 @@ THREE.LDRPartType.prototype.generateThreePart = function(loader, c, p, r, cull,
             material = LDR.Colors.buildStandardMaterial(tc);
 	}
         let mesh = new THREE.Mesh(g.clone(), material); // Using clone to ensure matrix in next line doesn't affect other usages of the geometry.
-        mesh.castShadow = loader.physicalRenderingAge !== 0;
+        mesh.receiveShadow = mesh.castShadow = loader.physicalRenderingAge !== 0;
         mesh.geometry.applyMatrix4(m4);
         //mesh.applyMatrix4(m4); // Doesn't work for all LDraw parts as the matrix needs to be decomposable to position, quaternion and scale. Some rotation matrices in LDraw parts are not decomposable.
         mc.addMesh(tc, mesh, pd);

js/Scene.js

@@ -46,7 +46,7 @@ ENV.Scene = function(canvas, color) {
     // Light and background:
     this.hemisphereLight = new THREE.HemisphereLight(0xF4F4FB, 0x30302B, 0.65);
     this.scene.add(this.hemisphereLight);
-    this.scene.background = new THREE.Color(0xDDDDDD);//A0A0A2);
+    this.scene.background = new THREE.Color(0xFBF3FF);
 }
 
 ENV.Scene.prototype.setUpGui = function(setModelColorOriginal) {
@@ -128,6 +128,9 @@ ENV.Scene.prototype.setUpGui = function(setModelColorOriginal) {
                 M.envMapIntensity = m.envMapIntensity;
                 M.transparent = m.transparent;
                 M.opacity = m.opacity;
+                M.shininess = m.shininess;
+                M.reflectivity = m.reflectivity;
+                M.specular = m.specular;
 
                 LDR.Colors.loadTextures(() => {M.normalMap = m.normalMap; M.needsUpdate = true; self.render();});
 		setModelColorOriginal && setModelColorOriginal(idx);
@@ -220,18 +223,18 @@ ENV.Scene.prototype.addPointLight = function() {
 
 ENV.Scene.prototype.addDirectionalLight = function() {
     const dist = this.size.w*1.5;
-    const y = this.size.h*2;
+    const y = this.size.h;
     const diam = this.size.diam;
 
     let light = new THREE.DirectionalLight(0xF6E3FF, 0.4); // color, intensity
-    light.position.set(0.3*dist, 0.3*dist, -0.1*dist);
+    light.position.set(-0.05*dist, y, -0.02*dist);
     light.lookAt(0,0,0);
 
     light.castShadow = true;
     light.shadow.mapSize.width = Math.floor(3*diam); // Adjust according to size!
     light.shadow.mapSize.height = Math.floor(3*diam);
     light.shadow.camera.near = 0.5;
-    light.shadow.camera.far = 3*(dist+y);
+    light.shadow.camera.far = 3.5*(dist+y);
     light.shadow.camera.left = -diam;
     light.shadow.camera.right = diam;
     light.shadow.camera.top = diam;

sample_physical.htm

@@ -19,9 +19,15 @@
   <script src="js/three.min.js"></script>
   <script src="js/OrbitControls.js"></script>
   <script src="js/dat.gui.min.js"></script>
+  <script src="js/CopyShader.js"></script>
+  <script src="js/Pass.js"></script>
+  <script src="js/OutlinePass.js"></script>
+  <script src="js/ShaderPass.js"></script>
+  <script src="js/RenderPass.js"></script>
+  <script src="js/MaskPass.js"></script>
+  <script src="js/EffectComposer.js"></script>
   <script src="js/colors.js"></script>
   <script src="js/Scene.js"></script>
-  <script src="js/ClientStorage.js"></script>
   <script src="js/LDROptions.js"></script>
   <script src="js/LDRShaders.js"></script>
   <script src="js/LDRGenerator.js"></script>
@@ -38,10 +44,7 @@
       let model = 'models/corvette_full.mpd';
       //let model = '6091.dat'; // Has overlap of line and conditional line causing trouble for the normal calculation.
       //let model = '85080.dat'; // Has conditional lines partially overlapping with hard corners, also causing issues for normal calculation.
-      //let model = 'models/mf.mpd';
-      //let model = 'models/texmap_dish.ldr';
-      //let model = 'models/488_strip.mpd';
-      //let model = 'models/test0.ldr';
+      //let model = '3024.dat';
 
       // Materials:
       //let model = 'models/luminance.ldr';
@@ -96,31 +99,9 @@
         animateConstruction();
       }
 
-      LDR.Options.lineContrast = 2; // No lines.
-      LDR.Options.studs = 2; // Logos are made using textures
+      LDR.Studs.makeGenerators('', 0, 2); // 0 for no high contrast. 2 for logo on texture.
 
-      let storage; // Make custom storage that attempts to generate parts before fetching them.
-      LDR.Studs.makeGenerators('', 0, 2);
-      storage = {
-        retrievePartsFromStorage: (loader, toBeFetched, onDone) => {
-          let retrieved = [];
-          function attemptGeneratorFirst(id) {
-            let pt = LDR.Generator.make(id);
-            if(pt) {
-              loader.partTypes[id] = pt;
-              pt.steps.forEach(step => step.subModels.forEach(sm => attemptGeneratorFirst(sm.ID)));
-              retrieved.push(id);
-            }
-            else {
-              loader.load(id);
-            }
-          }
-          toBeFetched.forEach(attemptGeneratorFirst);
-          onDone(retrieved);
-        }
-      };
-
-      ldrLoader = new THREE.LDRLoader(onLoad, storage, {physicalRenderingAge:20});
+      ldrLoader = new THREE.LDRLoader(onLoad, null, {physicalRenderingAge:20});
       ldrLoader.load(model);
   </script>
  </body>