Better material rendering

firebird-ng/angular.json

@@ -107,5 +107,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "aa6f00cf-04e4-4e98-9d0e-1423cb1a0d51"
   }
 }

firebird-ng/package.json

@@ -1,6 +1,6 @@
 {
   "name": "firebird",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

firebird-ng/src/app/geometry.service.ts

@@ -97,7 +97,7 @@ export class GeometryService {
 
     //
     console.time('[GeoSrv]: Build geometry');
-    let rootObject3d = build(rootGeoManager, { numfaces: 500000000, numnodes: 50000000, instancing:1, dflt_colors: false, vislevel: 100, doubleside:true, transparency:true});
+    let rootObject3d = build(rootGeoManager, { numfaces: 500000000, numnodes: 50000000, instancing:0, dflt_colors: false, vislevel: 100, doubleside:true, transparency:true});
     console.timeEnd('[GeoSrv]: Build geometry');
     // >oO console.log(geo);
 

firebird-ng/src/app/main-display/main-display.component.ts

@@ -158,7 +158,7 @@ export class MainDisplayComponent implements OnInit {
     // Now we want to change the materials
     sceneGeometry.traverse( (child: any) => {
 
-      if(child.type!=="Mesh" || !child?.material?.isMaterial) {
+      if(!child?.material?.isMaterial) {
         return;
       }
 

firebird-ng/src/app/three-geometry.processor.ts

@@ -15,6 +15,9 @@ import {
   Matrix4,
   REVISION,
   MeshPhysicalMaterial,
+  MeshStandardMaterial,
+  ShaderMaterial,
+  EdgesGeometry,
 } from "three";
 import { PhoenixUIModule } from 'phoenix-ui-components';
 import { GeometryService} from './geometry.service';
@@ -44,22 +47,83 @@ function getColorOrDefault(material:any, defaultColor: Color): Color {
 
 export class ThreeGeometryProcessor {
 
-  glassMaterial = new MeshPhysicalMaterial({
-    color: 0xffff00, // Yellow color
-    metalness: 0,
-    roughness: 0,
-    transmission: 0.7, // High transparency
-    opacity: 1,
-    transparent: true,
-    reflectivity: 0.5
-  });
+  glassMaterial = new LineBasicMaterial( {
+    color: 0xf1f1f1,
+    linewidth: 1,
+    linecap: 'round', //ignored by WebGLRenderer
+    linejoin:  'round' //ignored by WebGLRenderer
+  } );
+
+  params = {
+    alpha: 0.5,
+    alphaHash: true,
+    taa: true,
+    sampleLevel: 2,
+  };
+
+  vertexShader = `
+    varying vec2 vUv;
+    void main()	{
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
+    }
+  `;
+  fragmentShader = `
+		//#extension GL_OES_standard_derivatives : enable
+    
+    varying vec2 vUv;
+    uniform float thickness;
+   	
+    float edgeFactor(vec2 p){
+    	vec2 grid = abs(fract(p - 0.5) - 0.5) / fwidth(p) / thickness;
+  		return min(grid.x, grid.y);
+    }
+    
+    void main() {
+			
+      float a = edgeFactor(vUv);
+      
+      vec3 c = mix(vec3(1), vec3(0), a);
+      
+      gl_FragColor = vec4(c, 1.0);
+    }
+  `;
+
+  alphaMaterial = new MeshStandardMaterial( {
+    color: 0xffffff,
+    alphaHash: this.params.alphaHash,
+    opacity: this.params.alpha
+  } );
+
+
+
+  // new MeshPhysicalMaterial({
+  //   color: 0xffff00, // Yellow color
+  //   metalness: 0,
+  //   roughness: 0,
+  //   transmission: 0.7, // High transparency
+  //   opacity: 1,
+  //   transparent: true,
+  //   reflectivity: 0.5
+  // });
 
   constructor() {
 
   }
 
   public process(geometry: any) {
 
+    let shaderMaterial = new ShaderMaterial({
+      uniforms: {
+        thickness: {
+          value: 1.5
+        }
+      },
+      vertexShader: this.vertexShader,
+      fragmentShader: this.fragmentShader
+    });
+
+
     // Now we want to change the materials
     geometry.traverse( (child: any) => {
 
@@ -75,7 +139,19 @@ export class ThreeGeometryProcessor {
       let name:string = child.name;
 
       if(name.startsWith("bar_") || name.startsWith("prism_")) {
-        child.material = this.glassMaterial;
+        child.material = this.alphaMaterial;
+        const edges = new EdgesGeometry(child.geometry);
+        const lineMaterial = new LineBasicMaterial({
+          color: 0xffffff,
+          // Copy clipping planes from parent, using type assertion for TypeScript
+          clippingPlanes: child.material.clippingPlanes ? child.material.clippingPlanes : undefined,
+          clipIntersection: (child.material as Material).clipIntersection,
+          clipShadows: (child.material as Material).clipShadows
+        });
+        const edgesLine = new LineSegments(edges, lineMaterial);
+
+        child.add(edgesLine);
+
       }
     });
   }