Update 3D rendering logic (#353)

* Update makeShapeFromMesh

* Move normal computation to three

* Fix loading animation

* Disable edges rendering for STL file

* Fix worker busy signal

* Update Playwright Snapshots

* Remove comments

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: trungleduc

packages/base/src/3dview/helpers.ts

@@ -11,8 +11,8 @@ import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2.js';
 
 import { getCSSVariableColor } from '../tools';
 
-export const DEFAULT_LINEWIDTH = 4;
-export const SELECTED_LINEWIDTH = 12;
+export const DEFAULT_LINEWIDTH = 2;
+export const SELECTED_LINEWIDTH = 6;
 
 // Apply the BVH extension
 
@@ -122,29 +122,30 @@ export function buildShape(options: {
   const { faceList, edgeList, jcObject } = data;
 
   const vertices: Array<number> = [];
-  const normals: Array<number> = [];
   const triangles: Array<number> = [];
 
   let vInd = 0;
   if (faceList.length === 0 && edgeList.length === 0) {
     return null;
   }
-  faceList.forEach(face => {
+  for (const face of faceList) {
     // Copy Vertices into three.js Vector3 List
-    vertices.push(...face.vertexCoord);
-    normals.push(...face.normalCoord);
-
+    const vertexCoorLength = face.vertexCoord.length;
+    for (let ii = 0; ii < vertexCoorLength; ii++) {
+      vertices.push(face.vertexCoord[ii]);
+    }
     // Sort Triangles into a three.js Face List
-    for (let i = 0; i < face.triIndexes.length; i += 3) {
+    const triIndexesLength = face.triIndexes.length;
+    for (let i = 0; i < triIndexesLength; i += 3) {
       triangles.push(
         face.triIndexes[i + 0] + vInd,
         face.triIndexes[i + 1] + vInd,
         face.triIndexes[i + 2] + vInd
       );
     }
 
-    vInd += face.vertexCoord.length / 3;
-  });
+    vInd += vertexCoorLength / 3;
+  }
 
   let color = DEFAULT_MESH_COLOR;
   let visible = jcObject.visible;
@@ -167,20 +168,20 @@ export function buildShape(options: {
   // it's too bad Three.js does not easily allow setting uniforms independently per-mesh
   const material = new THREE.MeshPhongMaterial({
     color,
-    side: THREE.DoubleSide,
     wireframe: false,
     flatShading: false,
     clippingPlanes,
     shininess: 0
   });
 
   const geometry = new THREE.BufferGeometry();
+
   geometry.setIndex(triangles);
   geometry.setAttribute(
     'position',
     new THREE.Float32BufferAttribute(vertices, 3)
   );
-  geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
+  geometry.computeVertexNormals();
   geometry.computeBoundingBox();
   if (vertices.length > 0) {
     geometry.computeBoundsTree();
@@ -231,7 +232,7 @@ export function buildShape(options: {
 
   let edgeIdx = 0;
   const edgesMeshes: LineSegments2[] = [];
-  edgeList.forEach(edge => {
+  for (const edge of edgeList) {
     const edgeMaterial = new LineMaterial({
       linewidth: DEFAULT_LINEWIDTH,
       // @ts-ignore Missing typing in ThreeJS
@@ -242,7 +243,6 @@ export function buildShape(options: {
       polygonOffsetFactor: -5,
       polygonOffsetUnits: -5
     });
-
     const edgeGeometry = new LineGeometry();
     edgeGeometry.setPositions(edge.vertexCoord);
     const edgesMesh = new LineSegments2(edgeGeometry, edgeMaterial);
@@ -254,10 +254,10 @@ export function buildShape(options: {
     };
 
     edgesMeshes.push(edgesMesh);
-
+    meshGroup.add(edgesMesh);
     edgeIdx++;
-  });
-  meshGroup.add(...edgesMeshes);
+  }
+
   meshGroup.add(mainMesh);
 
   return { meshGroup, mainMesh, edgesMeshes };

packages/base/src/3dview/mainview.tsx

@@ -50,7 +50,6 @@ import {
 } from './helpers';
 import { MainViewModel } from './mainviewmodel';
 import { Spinner } from './spinner';
-
 interface IProps {
   viewModel: MainViewModel;
 }
@@ -92,6 +91,7 @@ export class MainView extends React.Component<IProps, IStates> {
       this
     );
     this._mainViewModel.renderSignal.connect(this._requestRender, this);
+    this._mainViewModel.workerBusy.connect(this._workerBusyHandler, this);
 
     // @ts-ignore Missing ThreeJS typing
     this._raycaster.params.Line2 = {};
@@ -145,6 +145,7 @@ export class MainView extends React.Component<IProps, IStates> {
     );
 
     this._mainViewModel.renderSignal.disconnect(this._requestRender, this);
+    this._mainViewModel.workerBusy.disconnect(this._workerBusyHandler, this);
     this._mainViewModel.dispose();
   }
 
@@ -570,6 +571,9 @@ export class MainView extends React.Component<IProps, IStates> {
     if (this._explodedViewLinesHelperGroup !== null) {
       this._scene.remove(this._explodedViewLinesHelperGroup);
     }
+    if (this._clippingPlaneMesh !== null) {
+      this._scene.remove(this._clippingPlaneMesh);
+    }
 
     const guidata = this._model.sharedModel.getOption('guidata');
     const selectedNames = this._selectedMeshes.map(sel => sel.name);
@@ -641,7 +645,10 @@ export class MainView extends React.Component<IProps, IStates> {
 
     this._scene.add(this._clippingPlaneMesh);
     this._scene.add(this._meshGroup);
-
+    if (this._loadingTimeout) {
+      clearTimeout(this._loadingTimeout);
+      this._loadingTimeout = null;
+    }
     this.setState(old => ({ ...old, loading: false }));
   };
 
@@ -719,6 +726,19 @@ export class MainView extends React.Component<IProps, IStates> {
     this._updateRefLength(true);
   }
 
+  private _workerBusyHandler(_: MainViewModel, busy: boolean) {
+    if (this._loadingTimeout) {
+      clearTimeout(this._loadingTimeout);
+    }
+    if (busy) {
+      this._loadingTimeout = setTimeout(() => {
+        // Do not show loading animation for the first 250
+        this.setState(old => ({ ...old, loading: true }));
+      }, 250);
+    } else {
+      this.setState(old => ({ ...old, loading: false }));
+    }
+  }
   private async _requestRender(
     sender: MainViewModel,
     renderData: {
@@ -728,9 +748,8 @@ export class MainView extends React.Component<IProps, IStates> {
     }
   ) {
     const { shapes, postShapes, postResult } = renderData;
-
     if (shapes !== null && shapes !== undefined) {
-      this._shapeToMesh(renderData.shapes);
+      this._shapeToMesh(shapes);
       const options = {
         binary: true,
         onlyVisible: false
@@ -811,7 +830,9 @@ export class MainView extends React.Component<IProps, IStates> {
   private _updateSelected(selection: { [key: string]: ISelection }) {
     // Reset original color for old selection
     for (const selectedMesh of this._selectedMeshes) {
-      let originalColor = DEFAULT_MESH_COLOR;
+      let originalColor = selectedMesh.name.startsWith('edge-')
+        ? DEFAULT_EDGE_COLOR
+        : DEFAULT_MESH_COLOR;
       const guidata = this._model.sharedModel.getOption('guidata');
       if (
         guidata &&
@@ -1309,4 +1330,5 @@ export class MainView extends React.Component<IProps, IStates> {
   private _collaboratorPointers: IDict<IPointer>;
   private _pointerGeometry: THREE.SphereGeometry;
   private _contextMenu: ContextMenu;
+  private _loadingTimeout: ReturnType<typeof setTimeout> | null;
 }

packages/base/src/3dview/mainviewmodel.ts

@@ -45,6 +45,10 @@ export class MainViewModel implements IDisposable {
   > {
     return this._renderSignal;
   }
+
+  get workerBusy(): ISignal<this, boolean> {
+    return this._workerBusy;
+  }
   get jcadModel() {
     return this._jcadModel;
   }
@@ -87,7 +91,6 @@ export class MainViewModel implements IDisposable {
     switch (msg.action) {
       case MainAction.DISPLAY_SHAPE: {
         const { result, postResult } = msg.payload;
-
         const rawPostResult: IDict<IPostOperatorInput> = {};
         const threejsPostResult: IDict<IPostOperatorInput> = {};
 
@@ -119,6 +122,7 @@ export class MainViewModel implements IDisposable {
           });
           this.sendRawGeometryToWorker(rawPostResult);
         }
+        this._workerBusy.emit(false);
 
         break;
       }
@@ -127,7 +131,7 @@ export class MainViewModel implements IDisposable {
           return;
         }
         const content = this._jcadModel.getContent();
-
+        this._workerBusy.emit(true);
         this._postMessage({
           action: WorkerAction.LOAD_FILE,
           payload: {
@@ -204,10 +208,12 @@ export class MainViewModel implements IDisposable {
   ): Promise<void> {
     if (change.objectChange) {
       await this._worker.ready;
+      const content = this._jcadModel.getContent();
+      this._workerBusy.emit(true);
       this._postMessage({
         action: WorkerAction.LOAD_FILE,
         payload: {
-          content: this._jcadModel.getContent()
+          content
         }
       });
     }
@@ -228,6 +234,7 @@ export class MainViewModel implements IDisposable {
       postResult?: IDict<IPostOperatorInput>;
     }
   >(this);
+  private _workerBusy = new Signal<this, boolean>(this);
   private _isDisposed = false;
 }