From 46e691372a308145d980675f33baf802a70826f4 Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Wed, 3 Mar 2021 16:58:58 +0100 Subject: [PATCH] - shader lib: ShaderMaterial trials --- GeotiefExplore.code-workspace | 4 +- src/js/clip/shader.js | 125 ++++++++++++++++++++++------------ src/js/layer/TinLayer.js | 46 ++++++++++--- 3 files changed, 121 insertions(+), 54 deletions(-) diff --git a/GeotiefExplore.code-workspace b/GeotiefExplore.code-workspace index b09fd1d..ad22e91 100644 --- a/GeotiefExplore.code-workspace +++ b/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:/Program Files (x86)/Google/Chrome/Application/chrome.exe", + // "runtimeExecutable": "C:/ProgramData/scoop/apps/googlechrome/current/chrome.exe", + "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe", // "sourceMapPathOverrides": { // "webpack:///./~/*": "${workspaceFolder}/node_modules/*", // "webpack:///./*": "${workspaceFolder}/*", diff --git a/src/js/clip/shader.js b/src/js/clip/shader.js index 79a4e7d..c99426e 100644 --- a/src/js/clip/shader.js +++ b/src/js/clip/shader.js @@ -1,52 +1,89 @@ - +// https://github.com/LeLeXD/Metalness/blob/master/Shader/index.html let shader = { - vertex: '\ - uniform vec3 color;\ - varying vec3 pixelNormal;\ - \ - void main() {\ - \ - pixelNormal = normal;\ - gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\ - \ - }', + // A vertex shader is a function that is applied on every vertex (point) of a mesh. + // It is usually used to distort or animate the shape of a mesh. Within our script it looks something like this: + vertex: ` + uniform vec3 color; + varying vec3 pixelNormal; + + void main() { + + pixelNormal = normal; + gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); + + }`, - vertexClipping: '\ - 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 );\ - \ - }', + vertexClipping: ` + uniform vec3 color; + uniform vec3 clippingLow; + uniform vec3 clippingHigh; + + varying vec3 pixelNormal; + varying vec4 worldPosition; + varying vec3 camPosition; + varying vec3 vNormal; + varying vec3 vPosition; + + void main() { + vec4 vPos = modelViewMatrix * vec4( position, 1.0 ); + vPosition = vPos.xyz; - fragment: '\ - uniform vec3 color;\ - varying vec3 pixelNormal;\ - \ - 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 );\ - \ - }', + 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;\ diff --git a/src/js/layer/TinLayer.js b/src/js/layer/TinLayer.js index e4b407e..36da41b 100644 --- a/src/js/layer/TinLayer.js +++ b/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, - vertexShader: shader.vertexClipping, + // 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;