- ne MyMeshStandardMaterial.js for slicing

GeotiefExplore.code-workspace

@@ -19,8 +19,8 @@
 				"url": "http://localhost:8080",
 				"webRoot": "${workspaceFolder}",
 				"breakOnLoad": true,
-				// "runtimeExecutable": "C:/ProgramData/scoop/apps/googlechrome/current/chrome.exe",
+				"runtimeExecutable": "C:/ProgramData/scoop/apps/googlechrome/current/chrome.exe",
-				"runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
+				// "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
 				// "sourceMapPathOverrides": {
 				// 	"webpack:///./~/*": "${workspaceFolder}/node_modules/*", 
 				// 	"webpack:///./*":   "${workspaceFolder}/*", 

src/js/clip/MyMeshStandardMaterial.js

@@ -0,0 +1,66 @@
+import { MeshStandardMaterial } from 'three/src/materials/MeshStandardMaterial';
+import { shader } from './shader';
+
+export class MyMeshStandardMaterial extends MeshStandardMaterial {
+  constructor(materialParameters, uniforms) {
+   
+    super(materialParameters);
+    this.uniforms = uniforms;
+
+    this.onBeforeCompile = m_shader => {  
+
+      m_shader.uniforms.clippingLow = this.uniforms.clippingLow; // { type: "v3", value: new Vector3(0, 0, 0) };
+      m_shader.uniforms.clippingHigh = this.uniforms.clippingHigh; // { type: "v3", value: new Vector3(0, 0, 0) };
+
+
+
+  //     m_shader.vertexShader = `
+  //     varying vec3 vPos;
+  //     varying vec4 worldPosition;
+  //   ${m_shader.vertexShader}
+  // `.replace(
+  //       `#include <fog_vertex>`,
+  //       `#include <fog_vertex>
+  //       worldPosition = modelMatrix * vec4( position, 1.0 );
+  //       `
+  //     );
+
+      m_shader.vertexShader = shader.vertexMeshStandard;
+
+      // m_shader.vertexShader = 'varying vec4 realPosition; ' + m_shader.vertexShader;
+      // m_shader.vertexShader = m_shader.vertexShader.replace(
+      //   `#include <fog_vertex>`,
+      //   `#include <fog_vertex>
+      //    realPosition = modelMatrix * vec4( position, 1.0 );`
+      // );
+
+      m_shader.fragmentShader = shader.fragmentClippingMeshStandard;
+
+      //prepend the input to the shader
+      // m_shader.fragmentShader = `
+      //   uniform vec3 clippingLow;
+      //   uniform vec3 clippingHigh;
+      //   varying vec4 worldPosition;
+      //   ${m_shader.fragmentShader}
+      //   `.replace(
+      //   `gl_FragColor = vec4( outgoingLight, diffuseColor.a );`,
+      //   `
+      //     if (
+      //       worldPosition.x < clippingLow.x
+      //      || worldPosition.x > clippingHigh.x
+      //      || worldPosition.y < clippingLow.y
+      //      || worldPosition.y > clippingHigh.y
+      //      || worldPosition.z < clippingLow.z
+      //      || worldPosition.z > clippingHigh.z
+      //    ) {    
+      //     discard;
+      //   } else {       
+      //     gl_FragColor = vec4( outgoingLight, diffuseColor.a );
+      //   }
+      //   `
+      // );
+
+    };
+
+  }
+}

src/js/clip/shader.js

@@ -32,11 +32,11 @@ let shader = {
 
 			vNormal = normalMatrix * normal;
 			pixelNormal = normal;
-			// worldPosition = modelMatrix * vec4( position, 1.0 );
+			worldPosition = modelMatrix * vec4( position, 1.0 );
 			camPosition = cameraPosition;
 			
-			gl_Position = projectionMatrix * vPos;
+			// gl_Position = projectionMatrix * vPos;
-			// gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 			
 		}`,
 
@@ -85,54 +85,208 @@ let shader = {
 			
 		}`,
 
-	fragmentClippingFront: '\
+	fragmentClippingFront: `
-		uniform vec3 color;\
+		uniform vec3 color;
-		uniform vec3 clippingLow;\
+		uniform vec3 clippingLow;
-		uniform vec3 clippingHigh;\
+		uniform vec3 clippingHigh;
-		\
+		
-		varying vec3 pixelNormal;\
+		varying vec3 pixelNormal;
-		varying vec4 worldPosition;\
+		varying vec4 worldPosition;
-		varying vec3 camPosition;\
+		varying vec3 camPosition;
-		\
+		
-		void main( void ) {\
+		void main( void ) {
-			\
+			
-			float shade = (\
+			float shade = (
-				  3.0 * pow ( abs ( pixelNormal.y ), 2.0 )\
+				  3.0 * pow ( abs ( pixelNormal.y ), 2.0 )
-				+ 2.0 * pow ( abs ( pixelNormal.z ), 2.0 )\
+				+ 2.0 * pow ( abs ( pixelNormal.z ), 2.0 )
-				+ 1.0 * pow ( abs ( pixelNormal.x ), 2.0 )\
+				+ 1.0 * pow ( abs ( pixelNormal.x ), 2.0 )
-			) / 3.0;\
+			) / 3.0;
-			\
+			
-			if (\
+			// if (
-				   worldPosition.x < clippingLow.x  && camPosition.x < clippingLow.x\
+			// 	   worldPosition.x < clippingLow.x  && camPosition.x < clippingLow.x
-				|| worldPosition.x > clippingHigh.x && camPosition.x > clippingHigh.x\
+			// 	|| worldPosition.x > clippingHigh.x && camPosition.x > clippingHigh.x
-				|| worldPosition.y < clippingLow.y  && camPosition.y < clippingLow.y\
+			// 	|| worldPosition.y < clippingLow.y  && camPosition.y < clippingLow.y
-				|| worldPosition.y > clippingHigh.y && camPosition.y > clippingHigh.y\
+			// 	|| worldPosition.y > clippingHigh.y && camPosition.y > clippingHigh.y
-				|| worldPosition.z < clippingLow.z  && camPosition.z < clippingLow.z\
+			// 	|| worldPosition.z < clippingLow.z  && camPosition.z < clippingLow.z
-				|| worldPosition.z > clippingHigh.z && camPosition.z > clippingHigh.z\
+			// 	|| worldPosition.z > clippingHigh.z && camPosition.z > clippingHigh.z
-			) {\
+			// ) {
-				\
+				if (
-				discard;\
+					worldPosition.x < clippingLow.x  
-				\
+				 || worldPosition.x > clippingHigh.x 
-			} else {\
+				 || worldPosition.y < clippingLow.y  
-				\
+				 || worldPosition.y > clippingHigh.y
-				gl_FragColor = vec4( color * shade, 1.0 );\
+				 || worldPosition.z < clippingLow.z  
-				\
+				 || worldPosition.z > clippingHigh.z 
-			}\
+			 ) {
-			\
+				
-		}',
+				discard;
+				
+			} else {
+				
+				gl_FragColor = vec4( color * shade, 1.0 );
+				
+			}
+			
+		}`,
+
+	vertexMeshStandard: `
+		#define STANDARD
+		
+		varying vec3 vViewPosition;		
+		varying vec4 worldPosition;
+		
+		#include <common>
+		#include <uv_pars_vertex>
+		#include <uv2_pars_vertex>
+		#include <displacementmap_pars_vertex>
+		#include <color_pars_vertex>
+		#include <fog_pars_vertex>
+		#include <morphtarget_pars_vertex>
+		#include <skinning_pars_vertex>
+		#include <shadowmap_pars_vertex>
+		#include <logdepthbuf_pars_vertex>
+		#include <clipping_planes_pars_vertex>
+		
+		void main() {
+		
+			#include <uv_vertex>
+			#include <uv2_vertex>
+			#include <color_vertex>
+		
+			#include <beginnormal_vertex>
+			#include <morphnormal_vertex>
+			#include <skinbase_vertex>
+			#include <skinnormal_vertex>
+			#include <defaultnormal_vertex>
+		
+		
+		
+			#include <begin_vertex>
+			#include <morphtarget_vertex>
+			#include <skinning_vertex>
+			#include <displacementmap_vertex>
+			#include <project_vertex>
+			#include <logdepthbuf_vertex>
+			#include <clipping_planes_vertex>
+		
+			vViewPosition = - mvPosition.xyz;
+			worldPosition = modelMatrix * vec4( position, 1.0 );
+			
+			#include <worldpos_vertex>
+			#include <shadowmap_vertex>
+			#include <fog_vertex>
+		}`,
+
+	fragmentClippingMeshStandard: `
+		#define STANDARD
+
+		uniform vec3 diffuse;
+		uniform vec3 emissive;
+		uniform float roughness;
+		uniform float metalness;
+		uniform float opacity;
+		
+		varying vec3 vViewPosition;
+		uniform vec3 clippingLow;
+        uniform vec3 clippingHigh;
+        varying vec4 worldPosition;
+				
+		#include <common>
+		#include <packing>
+		#include <dithering_pars_fragment>
+		#include <color_pars_fragment>
+		#include <uv_pars_fragment>
+		#include <uv2_pars_fragment>
+		#include <map_pars_fragment>
+		#include <alphamap_pars_fragment>
+		#include <aomap_pars_fragment>
+		#include <lightmap_pars_fragment>
+		#include <emissivemap_pars_fragment>
+		#include <transmissionmap_pars_fragment>
+		#include <bsdfs>
+		#include <cube_uv_reflection_fragment>
+		#include <envmap_common_pars_fragment>
+		#include <envmap_physical_pars_fragment>
+		#include <fog_pars_fragment>
+		#include <lights_pars_begin>
+		#include <lights_physical_pars_fragment>
+		#include <shadowmap_pars_fragment>
+		#include <bumpmap_pars_fragment>
+		#include <normalmap_pars_fragment>
+		#include <clearcoat_pars_fragment>
+		#include <roughnessmap_pars_fragment>
+		#include <metalnessmap_pars_fragment>
+		#include <logdepthbuf_pars_fragment>
+		#include <clipping_planes_pars_fragment>
+		
+		void main() {
+		
+			#include <clipping_planes_fragment>
+		
+			vec4 diffuseColor = vec4( diffuse, opacity );
+			ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
+			vec3 totalEmissiveRadiance = emissive;
+		
+			#ifdef TRANSMISSION
+				float totalTransmission = transmission;
+			#endif
+		
+			#include <logdepthbuf_fragment>
+			#include <map_fragment>
+			#include <color_fragment>
+			#include <alphamap_fragment>
+			#include <alphatest_fragment>
+			#include <roughnessmap_fragment>
+			#include <metalnessmap_fragment>
+			#include <normal_fragment_begin>
+			#include <normal_fragment_maps>
+			#include <clearcoat_normal_fragment_begin>
+			#include <clearcoat_normal_fragment_maps>
+			#include <emissivemap_fragment>
+			#include <transmissionmap_fragment>
+		
+			// accumulation
+			#include <lights_physical_fragment>
+			#include <lights_fragment_begin>
+			#include <lights_fragment_maps>
+			#include <lights_fragment_end>
+		
+			// modulation
+			#include <aomap_fragment>
+		
+			vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance;
+		
+			// // this is a stub for the transmission model
+			// #ifdef TRANSMISSION
+			// 	diffuseColor.a *= mix( saturate( 1. - totalTransmission + linearToRelativeLuminance( reflectedLight.directSpecular + reflectedLight.indirectSpecular ) ), 1.0, metalness );
+			// #endif	
+
+			if (
+				worldPosition.x < clippingLow.x  
+			 || worldPosition.x > clippingHigh.x 
+			 || worldPosition.y < clippingLow.y  
+			 || worldPosition.y > clippingHigh.y
+			 || worldPosition.z < clippingLow.z  
+			 || worldPosition.z > clippingHigh.z 
+		 ) {			
+			discard;			
+		} else {			
+			gl_FragColor = vec4( outgoingLight, diffuseColor.a );			
+		}	
+		}`,
 
 
-	invisibleVertexShader: '\
+	invisibleVertexShader: `
-		void main() {\
+		void main() {
-			vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\
+			vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
-			gl_Position = projectionMatrix * mvPosition;\
+			gl_Position = projectionMatrix * mvPosition;
-		}',
+		}`,
 
-	invisibleFragmentShader: '\
+	invisibleFragmentShader: `
-		void main( void ) {\
+		void main( void ) {
-			gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 );\
+			gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 );
-			discard;\
+			discard;
-		}'
+		}`
 
 }
 export { shader };

src/js/layer/TinLayer.js

@@ -1,21 +1,15 @@
 // import { Group } from 'three/src/objects/Group';
 import { BufferGeometry } from 'three/src/core/BufferGeometry';
 import { Float32BufferAttribute, Uint16BufferAttribute } from 'three/src/core/BufferAttribute';
-import { MeshStandardMaterial } from 'three/src/materials/MeshStandardMaterial';
 import { DoubleSide } from 'three/src/constants';
 import { Mesh } from 'three/src/objects/Mesh';
 import { Layer } from './Layer';
 import { BitStream } from '../lib/bitstream';
 import { Plane } from 'three/src/math/Plane';
 import { Vector3 } from 'three/src/math/Vector3';
-import * as material from '../clip/material';
-import { ShaderMaterial } from 'three/src/materials/ShaderMaterial';
-import { uniforms } from "../clip/uniforms";
-import { shader } from '../clip/shader';
 import { Color } from 'three/src/math/Color';
-import { UniformsUtils } from 'three/src/renderers/shaders/UniformsUtils';
-import { ShaderLib } from 'three/src/renderers/shaders/ShaderLib';
 
+import { MyMeshStandardMaterial } from '../clip/MyMeshStandardMaterial';
 
 
 const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/';
@@ -105,50 +99,24 @@ class TinLayer extends Layer {
         //     clipShadows: true,
         // });
         // this.materialsArray.push(this.material);
-        let uniforms = this.uniforms = {
 
+        let uniforms = this.uniforms = {
             clipping: {
                 color: { type: "c", value: new Color(color) },
                 clippingLow: { type: "v3", value: new Vector3(0, 0, 0) },
-                clippingHigh: { type: "v3", value: new Vector3(0, 0, 0) },
+                clippingHigh: { type: "v3", value: new Vector3(0, 0, 0) }
-                // cspec: { type: "v3", value: new Vector3() },
-                // cdiff: { type: "v3", value: new Vector3() },
-                // roughness: { type: "v3", value: new Vector3() },
-                // spotLightPosition: { type: "v3", value: new Vector3() },
-                // clight: { type: "v3", value: new Vector3() },
-                // metalness: { type: "v1", value: 0.1 },
             }
         };
-
+        this.material = new MyMeshStandardMaterial({
-        // https://jsfiddle.net/qgu17w5o/43/
+            color: color,
-        // https://discourse.threejs.org/t/shadermaterial-created-from-meshstandardmaterials-shader-has-mirrored-reflection/3921
+            metalness: 0.1,
-        let standard = ShaderLib['standard'];
+            roughness: 0.75,
-        this.material = new ShaderMaterial({
+            flatShading: true,
-            lights: true,
-            clipIntersection: true,
-            clipShadows: true,
-            // uniforms: uniforms.clipping,
-            uniforms: UniformsUtils.clone(standard.uniforms),
-            vertexShader: shader.vertexClipping,
-            // vertexShader: standard.vertexShader,
             side: DoubleSide,
-            fragmentShader: shader.fragmentClippingFront,
+            clippingPlanes: [this.xLocalPlane, this.yLocalPlane],
-            // fragmentShader: standard.fragmentShader,          
+            clipIntersection: false,
-            // blending: AdditiveBlending,
+            clipShadows: true,
-            // transparent: true,
+        }, uniforms.clipping);   
-            // depthWrite: false,
-            clipping: true,
-            // colorWrite: false,
-
-        });
-        // this.material.uniforms.diffuseColor =  { type: "c", value: new Color(color) };
-        // this.material.uniforms.flatShading= true,
-        // this.material.uniforms.roughness.value = 0.75;
-        // this.material.uniforms.metalness.value = 1;
-        // this.material.uniforms.clippingLow= { type: "v3", value: new Vector3(0, 0, 0) };
-        // this.material.uniforms.clippingHigh= { type: "v3", value: new Vector3(0, 0, 0) };
-        // this.material.needsUpdate = true;
-
         this.materialsArray.push(this.material);
         let mesh = this.mainMesh = new Mesh(geometry, this.material);
         // mesh.userData.layerId = this.index;