Merge pull request #92 from sophiedeziel/tube-extrusion

Add a mode to render extrusion as tubes

Author: remcoder

demo/index.html

@@ -72,6 +72,10 @@ <h1>GCode Preview</h1>
           <label for="extrusion">Extrusion</label
           ><input type="checkbox" id="extrusion" />
         </div>
+        <div class="controls">
+          <label for="render-tubes">Render tubes</label
+          ><input type="checkbox" id="render-tubes" />
+        </div>
         <div class="controls">
           <label for="extrusion-color">Extrusion color</label>
           <input type="color" id="extrusion-color" value="#ff0000" />

demo/js/demo.js

@@ -13,6 +13,7 @@ const lineWidth = document.getElementById('line-width');
 const lineWidthValue = document.getElementById('line-width-value');
 const toggleSingleLayerMode = document.getElementById('single-layer-mode');
 const toggleExtrusion = document.getElementById('extrusion');
+const toggleRenderTubes = document.getElementById('render-tubes');
 const extrusionColor = document.getElementById('extrusion-color');
 const backgroundColor = document.getElementById('background-color');
 const toggleTravel = document.getElementById('travel');
@@ -51,6 +52,7 @@ function initDemo() {
     allowDragNDrop: true,
     topLayerColor: 'rgb(0, 255, 255)',
     lastSegmentColor: '#fff',
+    renderTubes: false,
     extrusionColor: 'hotpink',
     backgroundColor: preferDarkMode.matches ? '#111' : '#eee',
     travelColor: new THREE.Color('lime')
@@ -111,6 +113,12 @@ function initDemo() {
     preview.renderExtrusion = toggleExtrusion.checked;
     preview.render();
   });
+
+  toggleRenderTubes.addEventListener('click', function () {
+    preview.renderTubes = toggleRenderTubes.checked;
+    preview.render();
+  });
+
   extrusionColor.addEventListener('input', () =>
     throttle(() => {
       preview.extrusionColor = extrusionColor.value;

dist/gcode-preview.d.ts

@@ -69,16 +69,16 @@ declare type RenderLayer = {
     travel: number[];
     z: number;
 };
-declare type Vector3 = {
+declare type GVector3 = {
     x: number;
     y: number;
     z: number;
     r: number;
     i: number;
     j: number;
 };
-declare type Point = Vector3;
-declare type BuildVolume = Vector3;
+declare type Point = GVector3;
+declare type BuildVolume = GVector3;
 declare type State = {
     x: number;
     y: number;
@@ -101,6 +101,7 @@ declare type GCodePreviewOptions = {
     lineWidth?: number;
     nonTravelMoves?: string[];
     minLayerThreshold?: number;
+    renderTubes?: boolean;
     startLayer?: number;
     targetId?: string;
     topLayerColor?: ColorRepresentation;
@@ -118,6 +119,7 @@ declare class WebGLPreview {
     canvas: HTMLCanvasElement;
     renderExtrusion: boolean;
     renderTravel: boolean;
+    renderTubes: boolean;
     lineWidth?: number;
     startLayer?: number;
     endLayer?: number;
@@ -162,6 +164,7 @@ declare class WebGLPreview {
     addLineSegment(layer: RenderLayer, p1: Point, p2: Point, extrude: boolean): void;
     addArcSegment(layer: RenderLayer, p1: Point, p2: Point, extrude: boolean, cw: boolean): void;
     addLine(vertices: number[], color: number): void;
+    addTubeLine(vertices: number[], color: number): void;
     addThickLine(vertices: number[], color: number): void;
     private _enableDropHandler;
     _readFromStream(stream: ReadableStream): Promise<void>;

dist/gcode-preview.es.js

@@ -6,26 +6,33 @@ import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2';
 import { GridHelper } from './gridHelper';
 import { LineBox } from './lineBox';
 import {
-  Scene,
-  PerspectiveCamera,
-  WebGLRenderer,
-  Group,
-  Color,
-  REVISION,
-  Fog,
+  AmbientLight,
   AxesHelper,
-  Euler,
   BufferGeometry,
+  CatmullRomCurve3,
+  Color,
+  ColorRepresentation,
+  Euler,
   Float32BufferAttribute,
+  Fog,
+  Group,
   LineBasicMaterial,
   LineSegments,
-  ColorRepresentation
+  Mesh,
+  MeshLambertMaterial,
+  PerspectiveCamera,
+  PointLight,
+  REVISION,
+  Scene,
+  TubeGeometry,
+  Vector3,
+  WebGLRenderer
 } from 'three';
 
 type RenderLayer = { extrusion: number[]; travel: number[]; z: number };
-type Vector3 = { x: number; y: number; z: number; r: number; i: number; j: number };
-type Point = Vector3;
-type BuildVolume = Vector3;
+type GVector3 = { x: number; y: number; z: number; r: number; i: number; j: number };
+type Point = GVector3;
+type BuildVolume = GVector3;
 export type State = { x: number; y: number; z: number; r: number; e: number; i: number; j: number }; // feedrate?
 
 export type GCodePreviewOptions = {
@@ -41,6 +48,7 @@ export type GCodePreviewOptions = {
   lineWidth?: number;
   nonTravelMoves?: string[];
   minLayerThreshold?: number;
+  renderTubes?: boolean;
   startLayer?: number;
   targetId?: string;
   topLayerColor?: ColorRepresentation;
@@ -65,6 +73,7 @@ export class WebGLPreview {
   canvas: HTMLCanvasElement;
   renderExtrusion = true;
   renderTravel = false;
+  renderTubes = false;
   lineWidth?: number;
   startLayer?: number;
   endLayer?: number;
@@ -103,6 +112,7 @@ export class WebGLPreview {
     this.debug = opts.debug ?? this.debug;
     this.allowDragNDrop = opts.allowDragNDrop ?? this.allowDragNDrop;
     this.nonTravelmoves = opts.nonTravelMoves ?? this.nonTravelmoves;
+    this.renderTubes = opts.renderTubes ?? this.renderTubes;
 
     if (opts.extrusionColor != undefined) {
       this.extrusionColor = new Color(opts.extrusionColor);
@@ -238,6 +248,14 @@ export class WebGLPreview {
       this.drawBuildVolume();
     }
 
+    if (this.renderTubes) {
+      const light = new AmbientLight(0xcccccc, 1);
+      const dLight = new PointLight(0xffffff, 0.8);
+      dLight.position.set(0, 500, 500);
+      this.scene.add(light);
+      this.scene.add(dLight);
+    }
+
     this.group = new Group();
     this.group.name = 'gcode';
     const state: State = { x: 0, y: 0, z: 0, r: 0, e: 0, i: 0, j: 0 };
@@ -311,21 +329,35 @@ export class WebGLPreview {
 
   doRenderExtrusion(layer: RenderLayer, index: number): void {
     if (this.renderExtrusion) {
-      const brightness = 0.1 + (0.7 * index) / this.layers.length;
+      let extrusionColor;
+      if (this.singleLayerMode || this.renderTubes) {
+        extrusionColor = this._extrusionColor;
+      } else {
+        const brightness = 0.1 + (0.7 * index) / this.layers.length;
 
-      this._extrusionColor.getHSL(target);
-      const extrusionColor = new Color().setHSL(target.h, target.s, brightness);
+        this._extrusionColor.getHSL(target);
+        extrusionColor = new Color().setHSL(target.h, target.s, brightness);
+      }
 
       if (index == this.layers.length - 1) {
         const layerColor = this._topLayerColor ?? extrusionColor;
         const lastSegmentColor = this._lastSegmentColor ?? layerColor;
 
         const endPoint = layer.extrusion.splice(-3);
         const preendPoint = layer.extrusion.splice(-3);
-        this.addLine(layer.extrusion, layerColor.getHex());
-        this.addLine([...preendPoint, ...endPoint], lastSegmentColor.getHex());
+        if (this.renderTubes) {
+          this.addTubeLine(layer.extrusion, layerColor.getHex());
+          this.addTubeLine([...preendPoint, ...endPoint], lastSegmentColor.getHex());
+        } else {
+          this.addLine(layer.extrusion, layerColor.getHex());
+          this.addLine([...preendPoint, ...endPoint], lastSegmentColor.getHex());
+        }
       } else {
-        this.addLine(layer.extrusion, extrusionColor.getHex());
+        if (this.renderTubes) {
+          this.addTubeLine(layer.extrusion, extrusionColor.getHex());
+        } else {
+          this.addLine(layer.extrusion, extrusionColor.getHex());
+        }
       }
     }
 
@@ -488,6 +520,45 @@ export class WebGLPreview {
     this.group.add(lineSegments);
   }
 
+  addTubeLine(vertices: number[], color: number): void {
+    let curvePoints: Vector3[] = [];
+    const curves: CatmullRomCurve3[] = [];
+
+    // Merging into one curve for performance
+    for (let i = 0; i < vertices.length; i += 6) {
+      const v = vertices.slice(i, i + 6);
+      const startPoint = new Vector3(v[0], v[1], v[2]);
+      const endPoint = new Vector3(v[3], v[4], v[5]);
+
+      if (curvePoints.length === 0) {
+        curvePoints.push(startPoint);
+      }
+
+      if (!curvePoints[curvePoints.length - 1].equals(startPoint)) {
+        curves.push(new CatmullRomCurve3(curvePoints, false, 'catmullrom', 0));
+        curvePoints = [];
+        curvePoints.push(startPoint);
+      }
+
+      curvePoints.push(endPoint);
+    }
+
+    if (curvePoints.length > 2) {
+      curves.push(new CatmullRomCurve3(curvePoints, false, 'catmullrom', 0));
+    }
+
+    curves.forEach((curve) => {
+      const material = new MeshLambertMaterial({ color: color });
+      this.disposables.push(material);
+      const segments = Math.ceil(curve.getLength() * 2);
+      const geometry = new TubeGeometry(curve, segments, 0.3, 4, false);
+      this.disposables.push(geometry);
+      const lineSegments = new Mesh(geometry, material);
+
+      this.group.add(lineSegments);
+    });
+  }
+
   addThickLine(vertices: number[], color: number): void {
     if (!vertices.length) return;