Skip to content

Commit

Permalink
Updated to @babylonjs/core
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sindarius
Sindarius committed Dec 18, 2020
1 parent d8d44c8 commit dcd5049
Show file tree
Hide file tree
Showing 8 changed files with 188 additions and 134 deletions.
7 changes: 7 additions & 0 deletions GCodeViewer/GCodeViewer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -591,6 +591,13 @@ export default {
}, 250);
},
},
activated() {
viewer.pause = false;
this.resize();
},
deactivated() {
viewer.pause = true;
},
watch: {
move: {
handler(newValue) {
Expand Down
36 changes: 21 additions & 15 deletions GCodeViewer/viewer/axes.js
View file
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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;
}
Expand All @@ -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);
Expand Down
42 changes: 23 additions & 19 deletions GCodeViewer/viewer/bed.js
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -44,18 +48,18 @@ 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()) {
this.setBedColor('#0000FF');
}

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;
}
Expand Down Expand Up @@ -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);
}
Expand All @@ -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,
Expand All @@ -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(() => {
Expand All @@ -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,
Expand Down Expand Up @@ -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() {
Expand All @@ -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);
Expand Down
57 changes: 33 additions & 24 deletions GCodeViewer/viewer/buildobjects.js
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -39,21 +48,21 @@ 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;
material.backFaceCulling = true;
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;
}
Expand All @@ -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
);
Expand All @@ -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;
Expand All @@ -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
Expand Down Expand Up @@ -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);
Expand All @@ -171,20 +180,20 @@ 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;
}
this.handleClick(pickInfo);
}
break;
case BABYLON.PointerEventTypes.POINTERMOVE: {
case PointerEventTypes.POINTERMOVE: {
this.handlePointerMove(pickInfo);
}
}
Expand Down Expand Up @@ -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) {
Expand Down
17 changes: 9 additions & 8 deletions GCodeViewer/viewer/gcodeline.js
View file
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
}
Loading

0 comments on commit dcd5049

Please sign in to comment.