From dcd5049a65fd7c6b43ee0e3722f583926082d622 Mon Sep 17 00:00:00 2001 From: Sindarius Date: Fri, 18 Dec 2020 13:16:47 -0600 Subject: [PATCH] Updated to @babylonjs/core --- GCodeViewer/GCodeViewer.vue | 7 +++ GCodeViewer/viewer/axes.js | 36 +++++++----- GCodeViewer/viewer/bed.js | 42 +++++++------ GCodeViewer/viewer/buildobjects.js | 57 ++++++++++-------- GCodeViewer/viewer/gcodeline.js | 17 +++--- GCodeViewer/viewer/gcodeprocessor.js | 88 +++++++++++++++------------- GCodeViewer/viewer/gcodeviewer.js | 73 ++++++++++++++--------- GCodeViewer/viewer/utils.js | 2 +- 8 files changed, 188 insertions(+), 134 deletions(-) diff --git a/GCodeViewer/GCodeViewer.vue b/GCodeViewer/GCodeViewer.vue index e3e73d0..7499ddb 100644 --- a/GCodeViewer/GCodeViewer.vue +++ b/GCodeViewer/GCodeViewer.vue @@ -591,6 +591,13 @@ export default { }, 250); }, }, + activated() { + viewer.pause = false; + this.resize(); + }, + deactivated() { + viewer.pause = true; + }, watch: { move: { handler(newValue) { diff --git a/GCodeViewer/viewer/axes.js b/GCodeViewer/viewer/axes.js index d0d73aa..35d2fa6 100644 --- a/GCodeViewer/viewer/axes.js +++ b/GCodeViewer/viewer/axes.js @@ -1,5 +1,11 @@ 'use strict'; -import * as BABYLON from 'babylonjs'; + +import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture' +import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial' +import { Mesh } from '@babylonjs/core/Meshes/mesh' +import { Color3 } from '@babylonjs/core/Maths/math.color' +import { Vector3 } from '@babylonjs/core/Maths/math.vector' + export default class { constructor(scene) { @@ -25,13 +31,13 @@ export default class { } makeTextPlane(text, color, size) { - var dynamicTexture = new BABYLON.DynamicTexture('DynamicTexture', 50, this.scene, true); + var dynamicTexture = new DynamicTexture('DynamicTexture', 50, this.scene, true); dynamicTexture.hasAlpha = true; dynamicTexture.drawText(text, 5, 40, 'bold 36px Arial', color, 'transparent', true); - var plane = BABYLON.Mesh.CreatePlane('TextPlane', size, this.scene, true); - plane.material = new BABYLON.StandardMaterial('TextPlaneMaterial', this.scene); + var plane = Mesh.CreatePlane('TextPlane', size, this.scene, true); + plane.material = new StandardMaterial('TextPlaneMaterial', this.scene); plane.material.backFaceCulling = false; - plane.material.specularColor = new BABYLON.Color3(0, 0, 0); + plane.material.specularColor = new Color3(0, 0, 0); plane.material.diffuseTexture = dynamicTexture; return plane; } @@ -48,30 +54,30 @@ export default class { return; } - this.axesMesh = new BABYLON.Mesh('axis'); + this.axesMesh = new Mesh('axis'); this.registerClipIgnore(this.axesMesh); - var axisX = BABYLON.Mesh.CreateLines('axisX', [BABYLON.Vector3.Zero(), new BABYLON.Vector3(this.size, 0, 0), new BABYLON.Vector3(this.size * 0.95, 0.05 * this.size, 0), new BABYLON.Vector3(this.size, 0, 0), new BABYLON.Vector3(this.size * 0.95, -0.05 * this.size, 0)], this.scene); - axisX.color = new BABYLON.Color3(1, 0, 0); + var axisX = Mesh.CreateLines('axisX', [Vector3.Zero(), new Vector3(this.size, 0, 0), new Vector3(this.size * 0.95, 0.05 * this.size, 0), new Vector3(this.size, 0, 0), new Vector3(this.size * 0.95, -0.05 * this.size, 0)], this.scene); + axisX.color = new Color3(1, 0, 0); axisX.parent = this.axesMesh; var xChar = this.makeTextPlane('X', 'red', this.size / 10); - xChar.position = new BABYLON.Vector3(0.9 * this.size, 0.05 * this.size, 0); + xChar.position = new Vector3(0.9 * this.size, 0.05 * this.size, 0); xChar.parent = this.axesMesh; - var axisY = BABYLON.Mesh.CreateLines('axisY', [BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, this.size, 0), new BABYLON.Vector3(-0.05 * this.size, this.size * 0.95, 0), new BABYLON.Vector3(0, this.size, 0), new BABYLON.Vector3(0.05 * this.size, this.size * 0.95, 0)], this.scene); - axisY.color = new BABYLON.Color3(0, 1, 0); + var axisY = Mesh.CreateLines('axisY', [Vector3.Zero(), new Vector3(0, this.size, 0), new Vector3(-0.05 * this.size, this.size * 0.95, 0), new Vector3(0, this.size, 0), new Vector3(0.05 * this.size, this.size * 0.95, 0)], this.scene); + axisY.color = new Color3(0, 1, 0); axisY.parent = this.axesMesh; var yChar = this.makeTextPlane('Z', 'green', this.size / 10); - yChar.position = new BABYLON.Vector3(0, 0.9 * this.size, -0.05 * this.size); + yChar.position = new Vector3(0, 0.9 * this.size, -0.05 * this.size); yChar.parent = this.axesMesh; - var axisZ = BABYLON.Mesh.CreateLines('axisZ', [BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, this.size), new BABYLON.Vector3(0, -0.05 * this.size, this.size * 0.95), new BABYLON.Vector3(0, 0, this.size), new BABYLON.Vector3(0, 0.05 * this.size, this.size * 0.95)], this.scene); - axisZ.color = new BABYLON.Color3(0, 0, 1); + var axisZ = Mesh.CreateLines('axisZ', [Vector3.Zero(), new Vector3(0, 0, this.size), new Vector3(0, -0.05 * this.size, this.size * 0.95), new Vector3(0, 0, this.size), new Vector3(0, 0.05 * this.size, this.size * 0.95)], this.scene); + axisZ.color = new Color3(0, 0, 1); axisZ.parent = this.axesMesh; var zChar = this.makeTextPlane('Y', 'blue', this.size / 10); - zChar.position = new BABYLON.Vector3(0, 0.05 * this.size, 0.9 * this.size); + zChar.position = new Vector3(0, 0.05 * this.size, 0.9 * this.size); zChar.parent = this.axesMesh; this.axesMesh.setEnabled(this.visible); diff --git a/GCodeViewer/viewer/bed.js b/GCodeViewer/viewer/bed.js index b2f17de..f604d2e 100644 --- a/GCodeViewer/viewer/bed.js +++ b/GCodeViewer/viewer/bed.js @@ -1,9 +1,13 @@ 'use strict'; -import * as BABYLON from 'babylonjs'; -import { GridMaterial } from 'babylonjs-materials'; +import { Color3, Color4 } from '@babylonjs/core/Maths/math.color' +import { Vector3, Quaternion } from '@babylonjs/core/Maths/math.vector' +import { Space } from '@babylonjs/core/Maths/math.axis' +import {StandardMaterial } from '@babylonjs/core/Materials/standardMaterial' +import { HighlightLayer } from '@babylonjs/core/Layers/highlightLayer' +import { MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder' -import { Color4 } from 'babylonjs'; +import { GridMaterial } from '@babylonjs/materials/grid/gridMaterial'; export const RenderBedMode = { bed: 0, @@ -44,10 +48,10 @@ export default class { this.bedLineColor = '#0000FF'; /* - this.planeMaterial = new BABYLON.StandardMaterial('planeMaterial', this.scene); + this.planeMaterial = new StandardMaterial('planeMaterial', this.scene); this.planeMaterial.alpha = 1; - this.planeMaterial.diffuseColor = new BABYLON.Color3(0.25, 0.25, 0.25); - this.planeMaterial.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1); + this.planeMaterial.diffuseColor = new Color3(0.25, 0.25, 0.25); + this.planeMaterial.specularColor = new Color3(0.1, 0.1, 0.1); */ if (!this.getBedColor()) { @@ -55,7 +59,7 @@ export default class { } this.planeMaterial = this.buildGridMaterial(); - this.boxMaterial = new BABYLON.StandardMaterial('bedBoxMaterial', this.scene); + this.boxMaterial = new StandardMaterial('bedBoxMaterial', this.scene); this.boxMaterial.alpha = 0; this.debug = false; } @@ -95,16 +99,16 @@ export default class { let bedSize = this.getSize(); if (this.isDelta) { let radius = Math.abs(this.buildVolume.x.max - this.buildVolume.x.min) / 2; - this.bedMesh = BABYLON.MeshBuilder.CreateDisc('BuildPlate', { radius: radius }, this.scene); - this.bedMesh.rotationQuaternion = new BABYLON.Quaternion.RotationAxis(new BABYLON.Vector3(1, 0, 0), Math.PI / 2); + this.bedMesh = MeshBuilder.CreateDisc('BuildPlate', { radius: radius }, this.scene); + this.bedMesh.rotationQuaternion = new Quaternion.RotationAxis(new Vector3(1, 0, 0), Math.PI / 2); this.bedMesh.material = this.planeMaterial; } else { let width = bedSize.x; let depth = bedSize.y; - this.bedMesh = BABYLON.MeshBuilder.CreatePlane('BuildPlate', { width: width, height: depth }, this.scene); + this.bedMesh = MeshBuilder.CreatePlane('BuildPlate', { width: width, height: depth }, this.scene); this.bedMesh.material = this.planeMaterial; - this.bedMesh.rotationQuaternion = new BABYLON.Quaternion.RotationAxis(new BABYLON.Vector3(1, 0, 0), Math.PI / 2); - this.bedMesh.translate(new BABYLON.Vector3(bedCenter.x, 0, bedCenter.y), 1, BABYLON.Space.WORLD); + this.bedMesh.rotationQuaternion = new Quaternion.RotationAxis(new Vector3(1, 0, 0), Math.PI / 2); + this.bedMesh.translate(new Vector3(bedCenter.x, 0, bedCenter.y), 1, Space.WORLD); } this.registerClipIgnore(this.bedMesh); } @@ -126,7 +130,7 @@ export default class { let bedSize = this.getSize(); let bedCenter = this.getCenter(); if (this.isDelta) { - this.bedMesh = BABYLON.MeshBuilder.CreateCylinder( + this.bedMesh = MeshBuilder.CreateCylinder( 'bed', { diameterTop: bedSize.x, @@ -146,7 +150,7 @@ export default class { this.bedMesh.renderingGroupId = 2; this.scene.setRenderingAutoClearDepthStencil(2, false, false, false); - var hl = new BABYLON.HighlightLayer('hl', this.scene, { isStroke: true, blurTextureSizeRatio: 3 }); + var hl = new HighlightLayer('hl', this.scene, { isStroke: true, blurTextureSizeRatio: 3 }); hl.addMesh(this.bedMesh,this.getBedColor4()); this.bedMesh.onBeforeRenderObservable.add(() => { @@ -159,7 +163,7 @@ export default class { this.registerClipIgnore(this.bedMesh); } else { - this.bedMesh = BABYLON.MeshBuilder.CreateBox( + this.bedMesh = MeshBuilder.CreateBox( 'bed', { width: bedSize.x, @@ -193,13 +197,13 @@ export default class { } buildGridMaterial() { let gridMaterial = new GridMaterial('bedMaterial', this.scene); - gridMaterial.mainColor = new BABYLON.Color4(0, 0, 0, 0); - gridMaterial.lineColor = BABYLON.Color3.FromHexString(this.getBedColor()); + gridMaterial.mainColor = new Color4(0, 0, 0, 0); + gridMaterial.lineColor = Color3.FromHexString(this.getBedColor()); gridMaterial.gridRatio = 5; gridMaterial.opacity = 0.8; gridMaterial.majorUnitFrequency = 10; gridMaterial.minorUnitVisibility = 0.6; - gridMaterial.gridOffset = new BABYLON.Vector3(0, 0, 0); + gridMaterial.gridOffset = new Vector3(0, 0, 0); return gridMaterial; } getBedColor() { @@ -214,7 +218,7 @@ export default class { } } getBedColor4(){ - return BABYLON.Color4.FromHexString(this.getBedColor().padEnd(9,'F')); + return Color4.FromHexString(this.getBedColor().padEnd(9,'F')); } dispose() { this.bedMesh.dispose(false, true); diff --git a/GCodeViewer/viewer/buildobjects.js b/GCodeViewer/viewer/buildobjects.js index 55231e7..11c2c69 100644 --- a/GCodeViewer/viewer/buildobjects.js +++ b/GCodeViewer/viewer/buildobjects.js @@ -1,7 +1,16 @@ 'use strict'; -import * as BABYLON from 'babylonjs'; + import * as d3 from 'd3'; +import { Vector3 } from '@babylonjs/core/Maths/math.vector' +import { Color3, Color4 } from '@babylonjs/core/Maths/math.color' +import { Texture } from '@babylonjs/core/Materials/Textures/texture' +import { Mesh } from '@babylonjs/core/Meshes/mesh' +import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder' +import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial' +import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents' + + export default class { constructor(scene) { this.scene = scene; @@ -39,9 +48,9 @@ export default class { alpha = this.alphaLevel; } - let material = new BABYLON.StandardMaterial(name, this.scene); + let material = new StandardMaterial(name, this.scene); material.diffuseColor = color; - material.specularColor = new BABYLON.Color3(0.0, 0.0, 0.0); + material.specularColor = new Color3(0.0, 0.0, 0.0); material.alpha = alpha; material.needAlphaTesting = () => true; material.separateCullingPass = true; @@ -49,11 +58,11 @@ export default class { return material; } rebuildMaterials() { - this.baseMaterial = this.setBuildMaterial('BuildObjectBaseMaterial', new BABYLON.Color4(0.1, 0.5, 0.1), 0.25); - this.highlightMaterial = this.setBuildMaterial('BuildObjectHighlightMateria', new BABYLON.Color3(0.8, 0.8, 0.8)); - this.cancelledMaterial = this.setBuildMaterial('BuildObjectHighlightMateria', new BABYLON.Color3(1, 0, 0), 0.4); - this.cancelledHighlightMaterial = this.setBuildMaterial('BuildObjectHighlightMateria', new BABYLON.Color3(1, 1, 0), 0.6); - let material = new BABYLON.Texture.CreateFromBase64String(this.xmark, 'checkerboard', this.scene); + this.baseMaterial = this.setBuildMaterial('BuildObjectBaseMaterial', new Color4(0.1, 0.5, 0.1), 0.25); + this.highlightMaterial = this.setBuildMaterial('BuildObjectHighlightMateria', new Color3(0.8, 0.8, 0.8)); + this.cancelledMaterial = this.setBuildMaterial('BuildObjectHighlightMateria', new Color3(1, 0, 0), 0.4); + this.cancelledHighlightMaterial = this.setBuildMaterial('BuildObjectHighlightMateria', new Color3(1, 1, 0), 0.6); + let material = new Texture.CreateFromBase64String(this.xmark, 'checkerboard', this.scene); this.cancelledMaterial.diffuseTexture = material; this.cancelledHighlightMaterial.diffuseTexture = material; } @@ -75,18 +84,18 @@ export default class { for (let cancelObjectIdx = 0; cancelObjectIdx < boundaryObjects.length; cancelObjectIdx++) { let cancelObject = boundaryObjects[cancelObjectIdx]; - let buildObject = BABYLON.MeshBuilder.CreateTiledBox( + let buildObject = MeshBuilder.CreateTiledBox( 'OBJECTMESH:' + cancelObject.name, { - pattern: BABYLON.Mesh.CAP_ALL, - alignVertical: BABYLON.Mesh.TOP, - alignHorizontal: BABYLON.Mesh.LEFT, + pattern: Mesh.CAP_ALL, + alignVertical: Mesh.TOP, + alignHorizontal: Mesh.LEFT, tileHeight: 4, tileWidth: 4, width: Math.abs(cancelObject.x[1] - cancelObject.x[0]), height: this.getMaxHeight() + 10, depth: Math.abs(cancelObject.y[1] - cancelObject.y[0]), - sideOrientation: BABYLON.Mesh.FRONTSIDE, + sideOrientation: Mesh.FRONTSIDE, }, this.scene ); @@ -106,7 +115,7 @@ export default class { //generate a label var textPlane = this.makeTextPlane(cancelObject.name, cancelObject.cancelled ? 'yellow' : 'white', 20); - textPlane.position = new BABYLON.Vector3(0, this.getMaxHeight() / 2 + 10, 0); + textPlane.position = new Vector3(0, this.getMaxHeight() / 2 + 10, 0); textPlane.isPickable = false; textPlane.metadata = cancelObject; textPlane.parent = buildObject; @@ -116,7 +125,7 @@ export default class { } makeTextPlane(text, color, size) { /* - var dynamicTexture = new BABYLON.DynamicTexture('DynamicTexture', { width: text.length * 20, height: 200 }, this.scene, true); + var dynamicTexture = new DynamicTexture('DynamicTexture', { width: text.length * 20, height: 200 }, this.scene, true); dynamicTexture.hasAlpha = true; dynamicTexture.drawText(text, null, null, 'bold 24px Roboto', color, 'transparent', true);*/ var svg = d3 @@ -152,11 +161,11 @@ export default class { var url = window.URL.createObjectURL(blob); this.labelSVGS.push(url); - let plane = BABYLON.MeshBuilder.CreatePlane('TextPlane', { width: size, height: 8 }, this.scene); - plane.material = new BABYLON.StandardMaterial('TextPlaneMaterial', this.scene); + let plane = MeshBuilder.CreatePlane('TextPlane', { width: size, height: 8 }, this.scene); + plane.material = new StandardMaterial('TextPlaneMaterial', this.scene); plane.material.backFaceCulling = false; - plane.material.specularColor = new BABYLON.Color3(0, 0, 0); - plane.material.diffuseTexture = new BABYLON.Texture(url, this.scene); //dynamicTexture; + plane.material.specularColor = new Color3(0, 0, 0); + plane.material.diffuseTexture = new Texture(url, this.scene); //dynamicTexture; plane.material.diffuseTexture.hasAlpha = true; plane.billboardMode = 7; this.registerClipIgnore(plane); @@ -171,12 +180,12 @@ export default class { this.observableControls = this.scene.onPointerObservable.add((pointerInfo) => { let pickInfo = pointerInfo.pickInfo; switch (pointerInfo.type) { - case BABYLON.PointerEventTypes.POINTERDOWN: + case PointerEventTypes.POINTERDOWN: { this.cancelHitTimer = Date.now(); } break; - case BABYLON.PointerEventTypes.POINTERUP: + case PointerEventTypes.POINTERUP: { if (Date.now() - this.cancelHitTimer > 200) { return; @@ -184,7 +193,7 @@ export default class { this.handleClick(pickInfo); } break; - case BABYLON.PointerEventTypes.POINTERMOVE: { + case PointerEventTypes.POINTERMOVE: { this.handlePointerMove(pickInfo); } } @@ -213,12 +222,12 @@ export default class { mesh.material = this.cancelledMaterial; mesh.enableEdgesRendering(); mesh.edgesWidth = 15.0; - mesh.edgesColor = new BABYLON.Color4(1, 0, 0, 1); + mesh.edgesColor = new Color4(1, 0, 0, 1); } else { mesh.material = this.baseMaterial; mesh.enableEdgesRendering(); mesh.edgesWidth = 15.0; - mesh.edgesColor = new BABYLON.Color4(0, 1, 0, 1); + mesh.edgesColor = new Color4(0, 1, 0, 1); } } handleClick(pickInfo) { diff --git a/GCodeViewer/viewer/gcodeline.js b/GCodeViewer/viewer/gcodeline.js index c3b25f3..b5cc350 100644 --- a/GCodeViewer/viewer/gcodeline.js +++ b/GCodeViewer/viewer/gcodeline.js @@ -1,7 +1,8 @@ /* eslint-disable no-unused-vars */ 'use strict'; - -import * as BABYLON from 'babylonjs'; +import { Color4 } from '@babylonjs/core/Maths/math.color' +import { Mesh } from '@babylonjs/core/Meshes/mesh' +import { MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder' export default class { constructor() { @@ -19,18 +20,18 @@ export default class { renderLine(scene) { var points = [this.start, this.end]; - let lineMesh = BABYLON.Mesh.CreateLines('lines', points, scene); + let lineMesh = Mesh.CreateLines('lines', points, scene); lineMesh.enableEdgesRendering(); lineMesh.edgesWidth = 10; - lineMesh.edgesColor = new BABYLON.Color4(1, 1, 0, 1); + lineMesh.edgesColor = new Color4(1, 1, 0, 1); } renderLineV2(scene) { - var tube = BABYLON.MeshBuilder.CreateTube('tube', { + var tube = MeshBuilder.CreateTube('tube', { path: [this.start, this.end], radius: 0.2, tesselation: 4, - sideOrientation: BABYLON.Mesh.FRONTSIDE, + sideOrientation: Mesh.FRONTSIDE, updatable: false, }); tube.doNotSyncBoundingInfo = true; @@ -83,8 +84,8 @@ export default class { getColor() { if (this.extruding) { - return new BABYLON.Color4(1, 1, 1, 1); + return new Color4(1, 1, 1, 1); } - return new BABYLON.Color4(1, 0, 0, 1); + return new Color4(1, 0, 0, 1); } } diff --git a/GCodeViewer/viewer/gcodeprocessor.js b/GCodeViewer/viewer/gcodeprocessor.js index 3a95ee8..4fc0712 100644 --- a/GCodeViewer/viewer/gcodeprocessor.js +++ b/GCodeViewer/viewer/gcodeprocessor.js @@ -1,7 +1,15 @@ /*eslint no-useless-escape: 0*/ 'use strict'; -import * as BABYLON from 'babylonjs'; +import { Engine } from '@babylonjs/core/Engines/engine' +import { Vector3 } from '@babylonjs/core/Maths/math.vector' +import { Color4 } from '@babylonjs/core/Maths/math.color' +import { VertexBuffer } from '@babylonjs/core/Meshes/buffer' +import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial' +import { SolidParticleSystem } from '@babylonjs/core/Particles/solidParticleSystem' +import { PointsCloudSystem } from '@babylonjs/core/Particles/pointsCloudSystem' +import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder' + import gcodeLine from './gcodeline'; import { doArc } from './utils.js' @@ -19,8 +27,8 @@ export const ColorMode = { export default class { constructor() { - this.currentPosition = new BABYLON.Vector3(0, 0, 0); - this.currentColor = new BABYLON.Color4(0.25, 0.25, 0.25, 1); + this.currentPosition = new Vector3(0, 0, 0); + this.currentColor = new Color4(0.25, 0.25, 0.25, 1); this.renderVersion = RenderMode.Line; this.absolute = true; //Track if we are in relative or absolute mode. this.lines = []; @@ -50,14 +58,14 @@ export default class { this.lineLengthTolerance = 0.05; this.extruderColors = [ - new BABYLON.Color4(0, 1, 1, 1), //c - new BABYLON.Color4(1, 0, 1, 1), //m - new BABYLON.Color4(1, 1, 0, 1), //y - new BABYLON.Color4(0, 0, 0, 1), //k - new BABYLON.Color4(1, 1, 1, 1), //w + new Color4(0, 1, 1, 1), //c + new Color4(1, 0, 1, 1), //m + new Color4(1, 1, 0, 1), //y + new Color4(0, 0, 0, 1), //k + new Color4(1, 1, 1, 1), //w ]; - this.progressColor = new BABYLON.Color4(0, 1, 0, 1); + this.progressColor = new Color4(0, 1, 0, 1); //scene data this.lineMeshIndex = 0; @@ -98,13 +106,13 @@ export default class { if (!this.minFeedColorString) { this.minFeedColorString = '#0000FF'; } - this.minFeedColor = BABYLON.Color4.FromHexString(this.minFeedColorString.padEnd(9, 'F')); + this.minFeedColor = Color4.FromHexString(this.minFeedColorString.padEnd(9, 'F')); this.maxFeedColorString = localStorage.getItem('maxFeedColor'); if (!this.maxFeedColorString) { this.maxFeedColorString = '#FF0000'; } - this.maxFeedColor = BABYLON.Color4.FromHexString(this.maxFeedColorString.padEnd(9, 'F')); + this.maxFeedColor = Color4.FromHexString(this.maxFeedColorString.padEnd(9, 'F')); //render every nth row this.everyNthRow = 0; @@ -123,7 +131,7 @@ export default class { this.spreadLines = false; this.spreadLineAmount = 10; this.debug = false; - this.specularColor = new BABYLON.Color4(0.1, 0.1, 0.1, 0.1); + this.specularColor = new Color4(0.1, 0.1, 0.1, 0.1); this.lookAheadLength = 500; this.cancelLoad = false; @@ -139,13 +147,13 @@ export default class { for (var idx = 0; idx < colors.length; idx++) { var color = colors[idx]; - var extruderColor = BABYLON.Color4.FromHexString(color.padEnd(9, 'F')); + var extruderColor = Color4.FromHexString(color.padEnd(9, 'F')); this.extruderColors.push(extruderColor); } } setProgressColor(color) { - this.progressColor = BABYLON.Color4.FromHexString(color.padEnd(9, 'F')); + this.progressColor = Color4.FromHexString(color.padEnd(9, 'F')); } getMaxHeight() { @@ -252,7 +260,7 @@ export default class { } initVariables() { - this.currentPosition = new BABYLON.Vector3(0, 0, 0); + this.currentPosition = new Vector3(0, 0, 0); this.cancelLoad = false; this.absolute = true; this.currentZ = 0; @@ -393,7 +401,7 @@ export default class { } else if (ratio <= 0) { this.currentColor = this.minFeedColor; } else { - this.currentColor = BABYLON.Color4.Lerp(this.minFeedColor, this.maxFeedColor, ratio); + this.currentColor = Color4.Lerp(this.minFeedColor, this.maxFeedColor, ratio); } } @@ -440,7 +448,7 @@ export default class { } } else if (this.renderTravels && !line.extruding) { - line.color = new BABYLON.Color4(1, 0, 0, 1); + line.color = new Color4(1, 0, 0, 1); this.travels.push(line); } @@ -455,12 +463,12 @@ export default class { let line = new gcodeLine(); line.gcodeLineNumber = this.gcodeLineNumber; line.start = curPt.clone(); - line.end = new BABYLON.Vector3(point.x, point.y,point.z); + line.end = new Vector3(point.x, point.y,point.z); line.color = this.currentColor.clone(); if(this.debug){ - line.color = cw ? new BABYLON.Color4(0,1,1,1) : new BABYLON.Color4(1,1,0,1) + line.color = cw ? new Color4(0,1,1,1) : new Color4(1,1,0,1) if(idx == 0){ - line.color = new BABYLON.Color4(0,1,0,1); + line.color = new Color4(0,1,0,1); } } curPt = line.end.clone(); @@ -470,11 +478,11 @@ export default class { - this.currentPosition = new BABYLON.Vector3( arcResult.position.x, arcResult.position.y, arcResult.position.z); + this.currentPosition = new Vector3( arcResult.position.x, arcResult.position.y, arcResult.position.z); } break; case 'G28': //Home - this.currentPosition = new BABYLON.Vector3(0, 0, 0); + this.currentPosition = new Vector3(0, 0, 0); break; case 'G90': this.absolute = true; @@ -516,7 +524,7 @@ export default class { finalColors[1] -= (1 - this.extruderColors[extruderIdx].g) * this.extruderPercentage[extruderIdx]; finalColors[2] -= (1 - this.extruderColors[extruderIdx].b) * this.extruderPercentage[extruderIdx]; } - this.currentColor = new BABYLON.Color4(finalColors[0], finalColors[1], finalColors[2], 0.1); + this.currentColor = new Color4(finalColors[0], finalColors[1], finalColors[2], 0.1); break; } } @@ -633,7 +641,7 @@ export default class { colorArray.push(data.colors); } - let lineMesh = BABYLON.MeshBuilder.CreateLineSystem( + let lineMesh = MeshBuilder.CreateLineSystem( 'm ' + this.lineMeshIndex, { lines: lineArray, @@ -653,12 +661,12 @@ export default class { lineMesh.doNotSyncBoundingInfo = true; lineMesh.freezeWorldMatrix(); // prevents from re-computing the World Matrix each frame lineMesh.freezeNormals(); - lineMesh.markVerticesDataAsUpdatable(BABYLON.VertexBuffer.ColorKind); + lineMesh.markVerticesDataAsUpdatable(VertexBuffer.ColorKind); - const lineSolidMat = new BABYLON.StandardMaterial('solidMaterial', scene); + const lineSolidMat = new StandardMaterial('solidMaterial', scene); lineSolidMat.specularColor = this.specularColor; - lineSolidMat.diffuseColor = new BABYLON.Color4(1, 1, 1, 0.5); - lineSolidMat.alphaMode = BABYLON.Engine.ALPHA_ONEONE; + lineSolidMat.diffuseColor = new Color4(1, 1, 1, 0.5); + lineSolidMat.alphaMode = Engine.ALPHA_ONEONE; lineSolidMat.needAlphaTesting = () => true; lineMesh.material = lineSolidMat; @@ -673,7 +681,7 @@ export default class { } else { lastUpdate = Date.now(); - var colorData = lineMesh.getVerticesData(BABYLON.VertexBuffer.ColorKind); + var colorData = lineMesh.getVerticesData(VertexBuffer.ColorKind); if (colorData === null || colorData === undefined) { console.log('Failed to Load Color VBO'); @@ -713,7 +721,7 @@ export default class { } lastRendered = renderTo; - lineMesh.updateVerticesData(BABYLON.VertexBuffer.ColorKind, colorData, true); + lineMesh.updateVerticesData(VertexBuffer.ColorKind, colorData, true); if (that.gcodeFilePosition === Number.MAX_VALUE) { runComplete = true; } @@ -738,7 +746,7 @@ export default class { } this.renderMode = 'Mesh Rendering'; - var box = BABYLON.MeshBuilder.CreateBox('box', { width: 1, height: layerHeight, depth: layerHeight * 1.2 }, scene); + var box = MeshBuilder.CreateBox('box', { width: 1, height: layerHeight, depth: layerHeight * 1.2 }, scene); let l = this.lines; @@ -749,7 +757,7 @@ export default class { that.gcodeLineIndex[meshIndex].push(particle.props.gcodeLineNumber); }; - let sps = new BABYLON.SolidParticleSystem('gcodemodel' + meshIndex, scene, { + let sps = new SolidParticleSystem('gcodemodel' + meshIndex, scene, { updatable: true, enableMultiMaterial: true, useVertexAlpha: this.lineVertexAlpha || this.liveTracking, @@ -762,9 +770,9 @@ export default class { sps.buildMesh(); //Build out solid and transparent material. - let solidMat = new BABYLON.StandardMaterial('solidMaterial', scene); + let solidMat = new StandardMaterial('solidMaterial', scene); solidMat.specularColor = this.specularColor; - let transparentMat = new BABYLON.StandardMaterial('transparentMaterial', scene); + let transparentMat = new StandardMaterial('transparentMaterial', scene); transparentMat.specularColor = this.specularColor; if (this.lineVertexAlpha || this.liveTracking) { transparentMat.alpha = this.liveTracking && !this.liveTrackingShowSolid ? 0 : this.materialTransparency; @@ -787,10 +795,10 @@ export default class { particle.color = that.progressColor; particle.materialIndex = 0; } else if (that.gcodeLineIndex[meshIndex][particle.idx] < that.gcodeFilePosition + that.lookAheadLength) { - particle.color = new BABYLON.Color4(particle.color.r, particle.color.g, particle.color.b, 1); + particle.color = new Color4(particle.color.r, particle.color.g, particle.color.b, 1); particle.materialIndex = 0; } else { - particle.color = new BABYLON.Color4(particle.color.r, particle.color.g, particle.color.b, 0); + particle.color = new Color4(particle.color.r, particle.color.g, particle.color.b, 0); } }; @@ -818,7 +826,7 @@ export default class { let meshIndex = this.lineMeshIndex; this.gcodeLineIndex.push(new Array()); //point cloud - this.sps = new BABYLON.PointsCloudSystem('pcs' + meshIndex, 1, scene); + this.sps = new PointsCloudSystem('pcs' + meshIndex, 1, scene); let l = this.lines; @@ -857,7 +865,7 @@ export default class { travelArray.push(data.points); travelColorArray.push(data.colors); } - var travelMesh = BABYLON.MeshBuilder.CreateLineSystem( + var travelMesh = MeshBuilder.CreateLineSystem( 'travels', { lines: travelArray, @@ -912,13 +920,13 @@ export default class { updateMinFeedColor(value) { localStorage.setItem('minFeedColor', value); this.minFeedColorString = value; - this.minFeedColor = BABYLON.Color4.FromHexString(value.padEnd(9, 'F')); + this.minFeedColor = Color4.FromHexString(value.padEnd(9, 'F')); } updateMaxFeedColor(value) { localStorage.setItem('maxFeedColor', value); this.maxFeedColorString = value; - this.maxFeedColor = BABYLON.Color4.FromHexString(value.padEnd(9, 'F')); + this.maxFeedColor = Color4.FromHexString(value.padEnd(9, 'F')); } updateColorRate(min, max) { diff --git a/GCodeViewer/viewer/gcodeviewer.js b/GCodeViewer/viewer/gcodeviewer.js index 74e7a07..07bd487 100644 --- a/GCodeViewer/viewer/gcodeviewer.js +++ b/GCodeViewer/viewer/gcodeviewer.js @@ -1,12 +1,25 @@ 'use strict'; -import * as BABYLON from 'babylonjs'; -import 'babylonjs-materials'; +import { Engine } from '@babylonjs/core/Engines/engine' +import { Scene } from "@babylonjs/core/scene" +import { Plane } from '@babylonjs/core/Maths/math.plane' +import { Color3 } from '@babylonjs/core/Maths/math.color' +import { Vector3 } from '@babylonjs/core/Maths/math.vector' +import { Space } from '@babylonjs/core/Maths/math.axis' +import {MeshBuilder} from '@babylonjs/core/Meshes/meshBuilder' +import { TransformNode} from '@babylonjs/core/Meshes/transformNode' +import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera' +import { PointLight } from '@babylonjs/core/Lights/pointLight' +import { Axis } from '@babylonjs/core/Maths/math.axis' + + + import gcodeProcessor from './gcodeprocessor.js'; import Bed from './bed.js'; import BuildObjects from './buildobjects.js'; import Axes from './axes.js'; + export default class { constructor(canvas) { this.lastLoadKey = 'lastLoadFailed'; @@ -26,6 +39,8 @@ export default class { this.zTopClipValue; this.zBottomClipValue; this.cancelHitTimer = 0; + this.pause = false; + this.cameraInertia = localStorage.getItem('cameraInertia') === 'true'; @@ -68,17 +83,17 @@ export default class { if (bottom > top) { this.zTopClipValue = bottom + 1; } - this.scene.clipPlane = new BABYLON.Plane(0, 1, 0, this.zTopClipValue); - this.scene.clipPlane2 = new BABYLON.Plane(0, -1, 0, this.zBottomClipValue); + this.scene.clipPlane = new Plane(0, 1, 0, this.zTopClipValue); + this.scene.clipPlane2 = new Plane(0, -1, 0, this.zBottomClipValue); } init() { - this.engine = new BABYLON.Engine(this.canvas, true, { doNotHandleContextLost: true }); + this.engine = new Engine(this.canvas, true, { doNotHandleContextLost: true }); this.engine.enableOfflineSupport = false; - this.scene = new BABYLON.Scene(this.engine); + this.scene = new Scene(this.engine); if (this.debug) { this.scene.debugLayer.show(); } - this.scene.clearColor = BABYLON.Color3.FromHexString(this.getBackgroundColor()); + this.scene.clearColor = Color3.FromHexString(this.getBackgroundColor()); this.bed = new Bed(this.scene); this.bed.registerClipIgnore = (mesh) => { @@ -87,27 +102,31 @@ export default class { var bedCenter = this.bed.getCenter(); // Add a camera to the scene and attach it to the canvas - this.orbitCamera = new BABYLON.ArcRotateCamera('Camera', Math.PI / 2, 2.356194, 250, new BABYLON.Vector3(bedCenter.x, -2, bedCenter.y), this.scene); + this.orbitCamera = new ArcRotateCamera('Camera', Math.PI / 2, 2.356194, 250, new Vector3(bedCenter.x, -2, bedCenter.y), this.scene); this.orbitCamera.invertRotation = false; this.orbitCamera.attachControl(this.canvas, false); this.updateCameraInertiaProperties() // this.orbitCamera.wheelDeltaPercentage = 0.02; // this.orbitCamera.pinchDeltaPercentage = 0.02; //Disabled at the moment - //this.flyCamera = new BABYLON.UniversalCamera('UniversalCamera', new BABYLON.Vector3(0, 0, -10), this.scene); + //this.flyCamera = new UniversalCamera('UniversalCamera', new Vector3(0, 0, -10), this.scene); // Add lights to the scene - //var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), this.scene); - var light2 = new BABYLON.PointLight('light2', new BABYLON.Vector3(0, 1, -1), this.scene); - light2.diffuse = new BABYLON.Color3(1, 1, 1); - light2.specular = new BABYLON.Color3(1, 1, 1); + //var light1 = new HemisphericLight("light1", new Vector3(1, 1, 0), this.scene); + var light2 = new PointLight('light2', new Vector3(0, 1, -1), this.scene); + light2.diffuse = new Color3(1, 1, 1); + light2.specular = new Color3(1, 1, 1); var that = this; this.engine.runRenderLoop(function () { + + if(that.pause){ + return; + } that.scene.render(); - //Update light 2 position light2.position = that.scene.cameras[0].position; + }); this.buildObjects = new BuildObjects(this.scene); @@ -165,12 +184,12 @@ export default class { (this.scene.activeCamera.alpha = Math.PI / 2), (this.scene.activeCamera.beta = 2.356194); if (this.bed.isDelta) { this.scene.activeCamera.radius = bedCenter.x; - this.scene.activeCamera.target = new BABYLON.Vector3(bedCenter.x, -2, bedCenter.y); - this.scene.activeCamera.position = new BABYLON.Vector3(-bedSize.x, bedSize.z, -bedSize.x); + this.scene.activeCamera.target = new Vector3(bedCenter.x, -2, bedCenter.y); + this.scene.activeCamera.position = new Vector3(-bedSize.x, bedSize.z, -bedSize.x); } else { this.scene.activeCamera.radius = 250; - this.scene.activeCamera.target = new BABYLON.Vector3(bedCenter.x, -2, bedCenter.y); - this.scene.activeCamera.position = new BABYLON.Vector3(-bedSize.x / 2, bedSize.z, -bedSize.y / 2); + this.scene.activeCamera.target = new Vector3(bedCenter.x, -2, bedCenter.y); + this.scene.activeCamera.position = new Vector3(-bedSize.x / 2, bedSize.z, -bedSize.y / 2); } } @@ -280,7 +299,7 @@ export default class { if (color.length > 7) { color = color.substring(0, 7); } - this.scene.clearColor = BABYLON.Color3.FromHexString(color); + this.scene.clearColor = Color3.FromHexString(color); } localStorage.setItem('sceneBackgroundColor', color); } @@ -379,17 +398,17 @@ export default class { break; } - this.toolCursor.setAbsolutePosition(new BABYLON.Vector3(x, z, y)); + this.toolCursor.setAbsolutePosition(new Vector3(x, z, y)); } } buildtoolCursor() { if (this.toolCursor !== undefined) return; - this.toolCursor = new BABYLON.TransformNode('toolCursorContainer'); - this.toolCursorMesh = BABYLON.MeshBuilder.CreateCylinder('toolCursorMesh', { diameterTop: 0, diameterBottom: 1 }, this.scene); + this.toolCursor = new TransformNode('toolCursorContainer'); + this.toolCursorMesh = MeshBuilder.CreateCylinder('toolCursorMesh', { diameterTop: 0, diameterBottom: 1 }, this.scene); this.toolCursorMesh.parent = this.toolCursor; - this.toolCursorMesh.position = new BABYLON.Vector3(0, 3, 0); - this.toolCursorMesh.rotate(BABYLON.Axis.X, Math.PI, BABYLON.Space.LOCAL); - this.toolCursorMesh.scaling = new BABYLON.Vector3(3, 3, 3); + this.toolCursorMesh.position = new Vector3(0, 3, 0); + this.toolCursorMesh.rotate(Axis.X, Math.PI, Space.LOCAL); + this.toolCursorMesh.scaling = new Vector3(3, 3, 3); this.toolCursorMesh.isVisible = this.toolCursorVisible; this.registerClipIgnore(this.toolCursorMesh); } @@ -406,8 +425,8 @@ export default class { this.scene.clipPlane2 = null; }); mesh.onAfterRenderObservable.add(() => { - this.scene.clipPlane = new BABYLON.Plane(0, 1, 0, this.zTopClipValue); - this.scene.clipPlane2 = new BABYLON.Plane(0, -1, 0, this.zBottomClipValue); + this.scene.clipPlane = new Plane(0, 1, 0, this.zTopClipValue); + this.scene.clipPlane2 = new Plane(0, -1, 0, this.zBottomClipValue); }); } updateCameraInertiaProperties() { diff --git a/GCodeViewer/viewer/utils.js b/GCodeViewer/viewer/utils.js index 40c6f3b..1681de5 100644 --- a/GCodeViewer/viewer/utils.js +++ b/GCodeViewer/viewer/utils.js @@ -103,7 +103,7 @@ export function doArc(tokens, currentPosition, relativeMove, arcSegLength) { let zDist = currZ - z; let zStep = zDist / totalSegments; - + //get points for the arc let px = currX; let py = currY;