diff --git a/app/three/ShaderMaterial.ts b/app/three/ShaderMaterial.ts index b94728f..fb50352 100644 --- a/app/three/ShaderMaterial.ts +++ b/app/three/ShaderMaterial.ts @@ -75,7 +75,7 @@ const fragmentShader = /*#__PURE__*/ Fn(() => { .and(positionWorld.y.greaterThanEqual(bounds.z)) .and(positionWorld.y.lessThanEqual(bounds.w)), () => { - let uv = positionWorld.xy + const uv = positionWorld.xy .sub(bounds.xz) .div(bounds.yw.sub(bounds.xz)) .toVar(); diff --git a/app/three/utils/build-clipping-planes.ts b/app/three/utils/build-clipping-planes.ts index c290404..9adeea8 100644 --- a/app/three/utils/build-clipping-planes.ts +++ b/app/three/utils/build-clipping-planes.ts @@ -8,7 +8,6 @@ import { LineBasicMaterial, LineSegments, Mesh, - MeshStandardMaterial, Object3DEventMap, PerspectiveCamera, Plane, @@ -26,7 +25,7 @@ import { MeshStandardNodeMaterial, WebGPURenderer, } from "three/webgpu"; -import { Fn, uniform, vec4 } from "three/tsl"; +import { vec4 } from "three/tsl"; export enum Orientation { X = "X", @@ -648,36 +647,19 @@ function generateCapMeshes( // Intersection surface can be a multipolygon consisting of disconnected polygons const polygons: Vector3[][] = buildPolygons(edges); - const offset = - orientation === Orientation.NX || - orientation === Orientation.NY || - orientation === Orientation.NZ - ? 1 - : -1; - const color = mesh.material instanceof MeshStandardNodeMaterial ? mesh.material.color - : new Color(1, 1, 1); + : new Color(0.1, 0.1, 0.1); const material = new MeshStandardNodeMaterial({ - color, side: DoubleSide, - metalness: 0.1, - roughness: 0.5, flatShading: true, - polygonOffset: true, - polygonOffsetFactor: offset, - polygonOffsetUnits: offset, wireframe: scene.userData.wireframe, alphaToCoverage: true, }); - const tColor = uniform(new Color(color)); - const fragmentShader = Fn(() => { - return vec4(tColor.r, tColor.g, tColor.b, 1.0); - }); - material.fragmentNode = fragmentShader(); + material.colorNode = vec4(color.r, color.g, color.b, 1.0); polygons.forEach((polygon) => { const geometry = triangulatePolygon(polygon, plane); @@ -687,7 +669,7 @@ function generateCapMeshes( capMesh.name = mesh.name; // Offset mesh to avoid flickering - const normal = plane.normal.clone().multiplyScalar(offset); + const normal = plane.normal.clone().multiplyScalar(10); const positionAttr = capMesh.geometry.attributes.position; for (let i = 0; i < positionAttr.count; i++) { @@ -698,7 +680,7 @@ function generateCapMeshes( } positionAttr.needsUpdate = true; - if (capMesh) { + if (capMesh && geometry.index && geometry.index.count > 0) { capMeshGroup.add(capMesh); } }); diff --git a/app/three/utils/build-meshes.ts b/app/three/utils/build-meshes.ts index d386d10..da55ada 100644 --- a/app/three/utils/build-meshes.ts +++ b/app/three/utils/build-meshes.ts @@ -10,7 +10,7 @@ import { fetchVertices, fetchTriangleIndices, transform } from "./utils"; import { TRIANGLE_INDICES_URL, VERTICES_URL } from "../config"; import { topoNodeMaterial } from "../ShaderMaterial"; import { MeshStandardNodeMaterial } from "three/webgpu"; -import { Fn, uniform, vec3, vec4 } from "three/tsl"; +import { vec4 } from "three/tsl"; interface MappedFeature { featuregeom_id: number; @@ -36,7 +36,7 @@ export async function buildMeshes(mappedFeatures: MappedFeature[]) { } async function buildMesh(layerData: MappedFeature) { - const color = `#${layerData.preview.legend_color}`; + const colorHex = `#${layerData.preview.legend_color}`; const name = layerData.preview.legend_text; const geomId = layerData.featuregeom_id.toString(); @@ -65,7 +65,7 @@ async function buildMesh(layerData: MappedFeature) { geometry.computeVertexNormals(); const material = new MeshStandardNodeMaterial({ - color: color, + color: colorHex, metalness: 0.1, roughness: 0.5, flatShading: true, @@ -73,11 +73,8 @@ async function buildMesh(layerData: MappedFeature) { alphaToCoverage: true, }); - const tColor = uniform(new Color(color)); - const fragmentShader = Fn(() => { - return vec4(tColor.r, tColor.g, tColor.b, 1.0); - }); - material.colorNode = fragmentShader(); + const color = new Color(colorHex); + material.colorNode = vec4(color.r, color.g, color.b, 1.0); const mesh = new Mesh( geometry,