geolba/GeotiefExplore
2
1
Fork 0
Code Issues 7 Pull Requests Projects 1 Releases Wiki Activity

- shader lib: ShaderMaterial trials

Browse Source
This commit is contained in:
Arno Kaimbacher 2021-03-03 16:58:58 +01:00
parent b8aaeb84cf
commit 46e691372a
3 changed files with 121 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
GeotiefExplore.code-workspace
View File

@ -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}/*",

125
src/js/clip/shader.js
View File

@ -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;
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 );\
\
}',
void main() {
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 );\
\
}',
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;
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;\

42
src/js/layer/TinLayer.js
View File

@ -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;