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

- ne MyMeshStandardMaterial.js for slicing

Browse Source
This commit is contained in:
Arno Kaimbacher 2021-03-04 17:01:32 +01:00
parent 46e691372a
commit be8c6d0a8c
5 changed files with 285 additions and 96 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}/*",

66
src/js/clip/MyMeshStandardMaterial.js Normal file
View File

@ -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 );
// }
// `
// );
};
}
}

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

@ -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 * modelViewMatrix * vec4( position, 1.0 );
// gl_Position = projectionMatrix * vPos;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`,
@ -85,54 +85,208 @@ let shader = {
}`,
fragmentClippingFront: '\
uniform vec3 color;\
uniform vec3 clippingLow;\
uniform vec3 clippingHigh;\
\
varying vec3 pixelNormal;\
varying vec4 worldPosition;\
varying vec3 camPosition;\
\
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;\
\
if (\
worldPosition.x < clippingLow.x && camPosition.x < clippingLow.x\
|| worldPosition.x > clippingHigh.x && camPosition.x > clippingHigh.x\
|| worldPosition.y < clippingLow.y && camPosition.y < clippingLow.y\
|| worldPosition.y > clippingHigh.y && camPosition.y > clippingHigh.y\
|| worldPosition.z < clippingLow.z && camPosition.z < clippingLow.z\
|| worldPosition.z > clippingHigh.z && camPosition.z > clippingHigh.z\
) {\
\
discard;\
\
} else {\
\
gl_FragColor = vec4( color * shade, 1.0 );\
\
}\
\
}',
fragmentClippingFront: `
uniform vec3 color;
uniform vec3 clippingLow;
uniform vec3 clippingHigh;
varying vec3 pixelNormal;
varying vec4 worldPosition;
varying vec3 camPosition;
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;
// if (
// worldPosition.x < clippingLow.x && camPosition.x < clippingLow.x
// || worldPosition.x > clippingHigh.x && camPosition.x > clippingHigh.x
// || worldPosition.y < clippingLow.y && camPosition.y < clippingLow.y
// || worldPosition.y > clippingHigh.y && camPosition.y > clippingHigh.y
// || worldPosition.z < clippingLow.z && camPosition.z < clippingLow.z
// || worldPosition.z > clippingHigh.z && camPosition.z > clippingHigh.z
// ) {
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( 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: '\
void main() {\
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\
gl_Position = projectionMatrix * mvPosition;\
}',
invisibleVertexShader: `
void main() {
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}`,
invisibleFragmentShader: '\
void main( void ) {\
gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 );\
discard;\
}'
invisibleFragmentShader: `
void main( void ) {
gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 );
discard;
}`
}
export { shader };

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

@ -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) },
// 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 },
clippingHigh: { type: "v3", value: new Vector3(0, 0, 0) }
}
};
// 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: UniformsUtils.clone(standard.uniforms),
vertexShader: shader.vertexClipping,
// vertexShader: standard.vertexShader,
this.material = new MyMeshStandardMaterial({
color: color,
metalness: 0.1,
roughness: 0.75,
flatShading: true,
side: DoubleSide,
fragmentShader: shader.fragmentClippingFront,
// 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;
clippingPlanes: [this.xLocalPlane, this.yLocalPlane],
clipIntersection: false,
clipShadows: true,
}, uniforms.clipping);
this.materialsArray.push(this.material);
let mesh = this.mainMesh = new Mesh(geometry, this.material);
// mesh.userData.layerId = this.index;

5
src/js/main.js
View File

File diff suppressed because one or more lines are too long