- shader lib: ShaderMaterial trials

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/shader.js

@@ -1,52 +1,89 @@
-
+// https://github.com/LeLeXD/Metalness/blob/master/Shader/index.html
 
 let shader = {
 
-	vertex: '\
+	// A vertex shader is a function that is applied on every vertex (point) of a mesh. 
-		uniform vec3 color;\
+	// It is usually used to distort or animate the shape of a mesh. Within our script it looks something like this:
-		varying vec3 pixelNormal;\
+	vertex: `
-		\
+		uniform vec3 color;
-		void main() {\
+		varying vec3 pixelNormal;
-			\
-			pixelNormal = normal;\
-			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\
-			\
-		}',
 		
-	vertexClipping: '\
+		void main() {
-		uniform vec3 color;\
-		uniform vec3 clippingLow;\
-		uniform vec3 clippingHigh;\
-		\
-		varying vec3 pixelNormal;\
-		varying vec4 worldPosition;\
-		varying vec3 camPosition;\
-		\
-		void main() {\
-			\
-			pixelNormal = normal;\
-			worldPosition = modelMatrix * vec4( position, 1.0 );\
-			camPosition = cameraPosition;\
-			\
-			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\
-			\
-		}',
 			
-	fragment: '\
+			pixelNormal = normal;
-		uniform vec3 color;\
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-		varying vec3 pixelNormal;\
+			
-		\
+		}`,
-		void main( void ) {\
+
-			\
+	vertexClipping: `
-			float shade = (\
+		uniform vec3 color;
-				  3.0 * pow ( abs ( pixelNormal.y ), 2.0 )\
+		uniform vec3 clippingLow;
-				+ 2.0 * pow ( abs ( pixelNormal.z ), 2.0 )\
+		uniform vec3 clippingHigh;
-				+ 1.0 * pow ( abs ( pixelNormal.x ), 2.0 )\
+		
-			) / 3.0;\
+		varying vec3 pixelNormal;
-			\
+		varying vec4 worldPosition;
-			gl_FragColor = vec4( color * shade, 1.0 );\
+		varying vec3 camPosition;
-			\
+		varying vec3 vNormal;
-		}',
+		varying vec3 vPosition;
+		
+		void main() {
+			vec4 vPos = modelViewMatrix * vec4( position, 1.0 );
+			vPosition = vPos.xyz;
+
+			vNormal = normalMatrix * normal;
+			pixelNormal = normal;
+			// worldPosition = modelMatrix * vec4( position, 1.0 );
+			camPosition = cameraPosition;
+			
+			gl_Position = projectionMatrix * vPos;
+			// gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+			
+		}`,
+
+	fragment: `
+		uniform vec3 color;
+		varying vec3 pixelNormal;
+
+		varying vec3 vNormal;
+		varying vec3 vPosition;
+
+		// uniform vec3 spotLightPosition; // in world space		
+		// uniform vec3 clight;
+		// uniform vec3 cspec;
+		// uniform float roughness;
+		const float PI = 3.14159;
+		
+		
+		void main( void ) {
+			
+			float shade = (
+				  3.0 * pow ( abs ( pixelNormal.y ), 2.0 )
+				+ 2.0 * pow ( abs ( pixelNormal.z ), 2.0 )
+				+ 1.0 * pow ( abs ( pixelNormal.x ), 2.0 )
+			) / 3.0;
+
+			gl_FragColor = vec4( color * shade, 1.0 );
+			//gl_FragColor = vec4(color, 1.0);
+			
+			// vec4 lPosition = viewMatrix * vec4( spotLightPosition, 1.0 );
+			// vec3 l = normalize(lPosition.xyz - vPosition.xyz);			
+			// vec3 n = normalize( vNormal );  // interpolation destroys normalization, so we have to normalize
+			// vec3 v = normalize( -vPosition);
+			// vec3 h = normalize( v + l);
+					
+			// // small quantity to prevent divisions by 0
+			// float nDotl = max(dot( n, l ),0.000001);
+			// float lDoth = max(dot( l, h ),0.000001);			
+			// float nDoth = max(dot( n, h ),0.000001);			
+			// float vDoth = max(dot( v, h ),0.000001);			
+			// float nDotv = max(dot( n, v ),0.000001);
+			
+			// vec3 specularBRDF = FSchlick(lDoth)*GSmith(nDotv,nDotl)*DGGX(nDoth,roughness*roughness)/(4.0*nDotl*nDotv);	
+			// vec3 outRadiance = (PI* clight * nDotl * specularBRDF);			
+			
+			// gl_FragColor = vec4(pow( outRadiance, vec3(1.0/2.2)), 1.0);		
+			
+		}`,
 
 	fragmentClippingFront: '\
 		uniform vec3 color;\

src/js/layer/TinLayer.js

@@ -13,6 +13,10 @@ 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';
+
+
 
 const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/';
 const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/';
@@ -106,19 +110,45 @@ class TinLayer extends Layer {
             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 ShaderMaterial( {
+        // https://jsfiddle.net/qgu17w5o/43/
+        // https://discourse.threejs.org/t/shadermaterial-created-from-meshstandardmaterials-shader-has-mirrored-reflection/3921
+        let standard = ShaderLib['standard'];
+        this.material = new ShaderMaterial({
+            lights: true,
             clipIntersection: true,
             clipShadows: true,
-            uniforms:      uniforms.clipping,
+            // uniforms: uniforms.clipping,
+            uniforms: UniformsUtils.clone(standard.uniforms),
             vertexShader: shader.vertexClipping,
+            // vertexShader: standard.vertexShader,
+            side: DoubleSide,
             fragmentShader: shader.fragmentClippingFront,
-            // colorWrite: false,
+            // fragmentShader: standard.fragmentShader,          
+            // blending: AdditiveBlending,
+            // transparent: true,
             // 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;