Drawing lines for debugging positions

Yes you can. It’s designed to be called each frame when passing the parameter instance : no new object allocation, etc.
Just update the coordinates of your points and the lines will update automatically :slight_smile:

Hello @MackeyK24 - my team and I developed this. Not only do you need POS (positions), but ROT (rotations) as well. This is why we called it a POSROTPATH.

We use it to animate characters in a movie, but it would work perfectly for what you describe.
There are at least 3 other suprises we ran into. I’ll share below.

let anmPATH = [{POS:{}, ROT:{}, META:{}}];

: )

POSROTPATH surprises


:grin: :eagle:

Yo @jerome … I am trying to update the create lines using LineBuilder every frame. But it seems a little hokey pokey. Is there a difference between MeshBuilder.CreateLines, LineBuilder.CreateLines and Mesh.CreateLines.

I am calling Create Line Every Frame Like This:

if (this.drawRabbitTracker === true) {
    const trackVehiclePosition:BABYLON.Vector3 = new BABYLON.Vector3(transformPosition.x, (transformPosition.y + 0.5), transformPosition.z);
    const trackRabbitPosition:BABYLON.Vector3 = new BABYLON.Vector3(rabbitPosition.x, (rabbitPosition.y + 0.5), rabbitPosition.z);
    this.rabbitTrackerLine = BABYLON.LinesBuilder.CreateLines((this.transform.name + ".TrackingLine"), { points: [ trackVehiclePosition, trackRabbitPosition ], updatable:true, instance: this.rabbitTrackerLine }, this.scene);
    this.rabbitTrackerLine.color = BABYLON.Color3.Red();
    console.log("Tracking Rabbit: " + rabbitPosition);

It seems to work sometimes then just disappears then will just come back.

Example shot going around track with line between the car and the chase rabbit sphere:

And then a little further its just gone:

That is soooo weird… I dont know how else to type the lines of code to update the CreateLines other than what i listed above. So i dont see what i could be doing wrong… But sure as shit… That line disappears for a while then re appears …

Got any ideas what could be going on ???


Yo @aFalcon … Bro Not ignored… Just not applicable …

First Thing… I use the Babylon Toolkit Editor Workflow. So most of the stuff i do is RE-IMPLEMENTING some kind of Unity Functionality for Babylon.

In this case… Its a Catmull Rom Waypoint system… For Catmull Rom style of control point placement… Rotation is not such a factor. Rotation of the control point may be be more of an issue using bezier or something else… But i am basically using Catmull with various resolutions.

Unity Shot of my Waypoint Manager component that uses native Unity Tooling and Gizmos to DRAW/EDIT waypoints and create catmull rom paths in between the control points… All done using the simple native unity api and workflow:

Resolution Count: 1

And my picture perfect re-production of the unity scene with control points and catmull rom calculated paths… All done using native BabylonJS code via BABYLON.ScriptComponents…

And Unity Shot with higher and smoother catmull rom path

Resolution Count: 20

And BabylonJS Reproduction:

Catmull Rom calculated paths only really give shit about positions… Rotations dont really matter in this case.

FYI… My WaypointManager script component ALSO tracking the original control point transforms. So i have access to the rotation for the control point. If i ever need it.

NOTE: My little chase rabbit LOOKS AT each control point position and TRANSLATES along the Z-Axis… That how i smoothly move the chase rabbit along the racing path. But again… The control points rotations are not needed here either.

But Bro… Please dont stop sharing


1 Like

Ok, that makes sense. Thx 4 explaining. Understanding Catmull. I use Ed’s interpolation. Looks like you use his spline. Sounds like two sides of the same coin. As usual aFalcon is a few tangents off! : )

Probably wont help but - editor system to draw lines between edit points:

nx.VISPATHS = [];
nx.createVISPATHEditor = function(path){
var VISPATH = BABYLON.MeshBuilder.CreateLines(‘aVISPATH’, {points:path,updatable:true}, nx.scene);
VISPATH.color = BABYLON.Color3.Blue()
for (var i=0; i<path.length; i++){
var editNode = BABYLON.Mesh.CreateSphere(“editNode”+i, 1, 0.5, nx.scene);
editNode.editMode = 0;
editNode.vectorIndex = i;
editNode.material = nx.blueMat;
editNode.position = new BABYLON.Vector3(path[i].x,path[i].y,path[i].z)
nx.meshEditor.editNodes.push(editNode) //INIT-FOR-TEN-KEY-EVENTS-.
editNode.editFn = function(){ //---------TEN-KEY-EVENTS--------------------------------------------------------------------------.
var direction = (nx.ctrl.num8 || nx.ctrl.num6 || nx.ctrl.num7 || nx.ctrl.plus) ? 1 : (nx.ctrl.num4 || nx.ctrl.num2 || nx.ctrl.num9 || nx.ctrl.minus) ? -1 : 0;
nx.ctrl.mag = (nx.ctrl.alt)? 0.01 : 0.1;
var moveAmount = nx.ctrl.mag * direction;
if(nx.ctrl.num8 || nx.ctrl.num2){ this.position.z += moveAmount;
nx.VISPATHS[this.vectorIndex].x += moveAmount;
if(nx.ctrl.num4 || nx.ctrl.num6){ this.position.x += moveAmount;
nx.VISPATHS[this.vectorIndex].y += moveAmount;
if(nx.ctrl.plus || nx.ctrl.minus){ this.position.y += moveAmount;
nx.VISPATHS[this.vectorIndex].z += moveAmount;
// nx.createVISPATHEditor
VISPATH = BABYLON.MeshBuilder.CreateLines(‘aVISPATH’+i, {points:nx.VISPATHS,updatable:true,instance:VISPATH}, nx.scene);
editNode.actionManager = new BABYLON.ActionManager(nx.scene); //–MESH-CLICK-EVENTS---------------------------------------------.
editNode.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) {
var eNode = evt.meshUnderPointer;
if(!eNode){ return; }
if(!eNode.editMode){ //MODE-ITERATOR-.
eNode.material = nx.greenMat;
}else if(eNode.editMode === ‘greenEdit’ ){
eNode.material = nx.blueMat;
nx.activeEditNodes.splice(nx.activeEditNodes.indexOf(eNode),1) //deselect

: )

I don’t know LinesBuilder, I was talking about MeshBuilder that is the way to go imho for dynamically updatable lines

Its really weird… Like it has something to do with the Camera Position / Orientation.

If i back the camera WAY out where i can see the whole scene… the line renders the whole way around the track.

If i start to bring the camera closer… The line starts to just disappear.

Do you have any idea why the camera position would affect the updatable lines from CreateLines ???

I also go back to my original question… is there any kind of GUI type DrawLine … Like Unity uses… with its Gizmos.DrawLine. because something seems A MUCK with using the CreateLines mesh to draw dynamic lines each frame.

@Deltakosh … You got any clues ???

1 Like

Pinging @bghgary to see if he also might have any thoughts on this one.

Creating lines in MeshBuilder forwards to LinesBuilder, so they should be the same.

It might be useful to use Spector.js to make sure the calls to WebGL are being executed. Is there a PG that repros this?

1 Like

I have lines disappear based on camera position when they are rendered with


But never with createLine (code posted above)

I dont know why. : )

I’m gonna try make a playground with AI car navigation using a spline path. There should be a red trace line from the car to a chase rabbit sphere … gonna take me sec to refactor my scene for public playground testing

1 Like

Yo @bghgary … The playground seems to have some breaking changes and i cant load async scenes anymore.

So whenever that gets addressed i will post an example of the CreateLines mesh just disappearing.

I’m on it:)

1 Like

Yo @bghgary … Here is a playground showing trace lines (created with CreateLines) that just disappear for a while… Then will come back for a sec and disappear again. Lines 72 - 92 deal with
the CreateLines calls: Babylon.js Playground

Please see if you can tell why the LinesMesh fails to render sometimes ???

It seems the bouding infos are not refreshed when updating a LineBuilder.

Corrected playground: https://www.babylonjs-playground.com/#75U928#1


It does seem like the bounding info should be automatically updated when creating an instanced line mesh. @Deltakosh What do you think?

1 Like

From my memory, as the time we (I) created some of the dynamically updatable shapes (with the parameter instance passed back to MeshBuilder), the BInfo was updated at the mesh/line creation time.
Then, when updating again, say each frame for a dynamic morphing for instance, the BInfo recomputation was not done by default for performance reasons. It was up to the user to decide whether he wanted or not to recompute it according to his needs and his current mesh : when dealing with a 10K vertex ribbon or line, maybe he doesn’t care about this feature, but when dealing with a 100-1000 vertex intersectable mesh he probably wants it anyway.

[EDIT] That said, it could probably be integrated inside the loop that updates the vertex positions in the dynamic update process, just like it’s done in the SPS (optional BInfo computation), in order to NOT reiterate over all the vertices just to update the bbox :


Thanks @Evgeni_Popov … That’s was it :grinning: