Drawing lines for debugging positions

[MackeyK24]

Hi guys… I am trying to draw lines from one point to another. Mainly for debug purposes. So can draw a line from my car position to the the upcoming waypoint position. I would also like to draw lines to show the physics raycast hit position as well. I know there is a RayHelper for native BABYLON.Ray.

But i really need to show a line from one point to another… Not necessarily from a raycast. Just point-to-point.

Any body out there know how to draw lines from point to point so i can track the progress of my car going around the track and its look ahead position on the racing line… Basically:

DrawLine(carTransform.position, waypoint.position) 

Or something like that

[jerome]

https://doc.babylonjs.com/api/classes/babylon.meshbuilder#createlines

https://doc.babylonjs.com/babylon101/parametric_shapes

[MackeyK24]

I use CreateLines already… To render my CatmullRom splines. But i believe that makes static meshes. I was looking for some kind of DrawLine that could be called every frame to track the position of a transform.

Example:

My Vehicle would be the origin point. There is a Chase Rabbit transform that moves around a race track. As the chase rabbit moves around the track a need to draw a line from
the vehicle (position a) to the chase rabbit (position b).

But things are moving and need to updated (RE-DRAWN) every frame. How can CreateLines which makes a static mesh, be used like that ???

Yo @Deltakosh or @sebavan (possibly @Wingnut ) … You guys got any thoughts on this as well ???

[Wingnut]

Hi M!

https://www.babylonjs-playground.com/#1EBCJY#3

Thx to @jerome , notice line 57. When you call a CreateLines and include the name of a pre-existing lines-Mesh (such as linesMesh)… it “updates” the original… instead of creating another. I think that’s what you need, if I understand.

PS: I LIKE being listed alongside big dogs like DK and Bavs. Thx M! I’m not in the same class as you three, but I’m SO GOOD-AT being full of crap, that my solutions sometimes appear somehow useful.

[MackeyK24]

So do we call CreateLines every frame to make it track the end position ???

[Wingnut]

I don’t think it matters whether you call update every frame or at some setInterval… the important part might be … copying the ending points of the OLD path… into the beginning points of the new path… just before the update call.

One method might be… before the update call, copy the ending 50% of old path… into beginning of new path, and then add 50% more new path. This way, you are TELLING IT to track the previous end point(s).

You can likely re-use the old path… for the new one (while retaining old end-points)… after some well-executed array pops, pushes, shifts, and unshifts, too.

At least i think that’s how you’ll do it… but I’m not sure what you are trying to do. Experiment, i guess.

[jerome]

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

[aFalcon]

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:{}}];

: )

[aFalcon]

POSROTPATH surprises

deleted

[MackeyK24]

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 ???

[aFalcon]

For POSROTPATH ANMS, BABYLON.CINEMATICS.

[MackeyK24]

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

[aFalcon]

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:

/**********-VIS-PATH-EDITOR/
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(this.editMode===“greenEdit”){
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-.
nx.activeEditNodes.push(eNode);
eNode.material = nx.greenMat;
eNode.editMode=‘greenEdit’
}else if(eNode.editMode === ‘greenEdit’ ){
eNode.material = nx.blueMat;
eNode.editMode=0
nx.activeEditNodes.splice(nx.activeEditNodes.indexOf(eNode),1) //deselect
}
}));
nx.VISPATHS.push(editNode.position);
}
}

: )

[jerome]

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

[MackeyK24]

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 ???

[PirateJC]

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

[bghgary]

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?

[aFalcon]

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

BABYLON.RayHelper

But never with createLine (code posted above)

I dont know why. : )

[MackeyK24]

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

[MackeyK24]

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

New Playground Breaking Changes

Yo @Deltakosh … There seems to be some breaking changes in the playground. I uses to use an async version of createScene so i can bootstrap Ammo.js. This used to work fine, now it gets and TypeScript Promise error: public static async CreateScene(engine: BABYLON.Engine, canvas: HTMLCanvasElement): Promise<BABYLON.Scene> { // This creates a basic scene object (non-mesh) var scene = new BABYLON.Scene(engine); // This initializes bullet physics (non-mesh) const …

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