Updating lines in VR (they exist, but dynamically updating them...)

Hi Y’All,

Still working on these VR lines. I feel like I’m doing everything right, but I must not be. The lines definitely show up on my console; so, they exist. The points for each line do too. They look like they’re being updated, but I don’t see any lines showing up in the canvas/sketch. Since I have no error… not sure what to try next?

In my setup function:

  for (var i = 0; i < 10; i++) {
    var playerBoidLine = [];
    playerBoidLine.push(xr.baseExperience.camera.position);
    playerBoidLine.push(models[i].boid.position); //getBoundingInfo().boundingSphere.center);
    lineCollector.push(playerBoidLine);
    var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: playerBoidLine, updatable: true}, scene);
    boidLines.push(lines);
  }

In my render loop:

for (var i = 0; i < 10; i++) {
    lineCollector[i][0] = xr.baseExperience.camera.position; 
    lineCollector[i][1] = models[i].boid.position;
}
for (var i = 0; i < 10; i++) {
    boidLines[i].updateVerticesData(BABYLON.VertexBuffer.PositionKind, lineCollector[i]);
}

woops, at least caught why they are not showing up, bc I didn’t set updatable correctly, fixed that part!

var lines = BABYLON.MeshBuilder.CreateLines(“lines”, {points: playerBoidLine}, scene, true);

now gotta figure out why they don’t behave the right way…

Update Vertices - Babylon.js Documentation this is the page I’m trying to check against my work…

console.log(boidLines[0].getVerticesData(BABYLON.VertexBuffer.PositionKind)); <-- looks like the positions aren’t changing… just being static which is what I also observe in the canvas, so I don’t know how to change them? ¯_(ツ)_/¯ my array with new positions is definitely updating; so, for some reason can’t set the new positions of the lines to the new position of the array, even though I thought that’s what this does:

boidLines[i].updateVerticesData(BABYLON.VertexBuffer.PositionKind, lineCollector[i]);

To update the lines, just call createLines again with the updated array and passing your previous line instance in the instance parameter, as explained in Parametric Shapes - Babylon.js Documentation.

1 Like

I believe that won’t work for me for other reasons (bc my scene is a promise not an object); am I using the update method incorrectly above on my group of lines?

There’s no reason why it should not work with a promise. I think we need a repro PG to see what’s going on.

Here’s how the line builder is doing the update:

Just my two cents here (as I have seen a few other posts where this was an issue) - a promise resolves to an object. the scene is not a promise, but createScene returns a promise that resolves to a scene. Once you resolve this promise (with then , for example), you have a scene object and not a promise, but inside this context (which should be the context you are working in anyhow). Otherwise, @Evgeni_Popov has provided you with an a great answer :slight_smile:

@Evgeni_Popov here is the code

I instantiate the lines at 1175-1182

I try to update the lines at 1697-1710

The lines show, but I can’t update their positions

Could definitely use some help, very stuck; would also be willing to pay to get some help to just be nudged along here… would like to just keep moving forward.

I could be wrong but I feel like I have the right structures (meshes, I see them in the console and in the viewport) and data (again, I see these 3d vectors being updated that I want to update the lines to), but I feel like somehow these aren’t connecting and/or I am using the update method improperly; kind of new to 3D coding in general… so, tryna figure it out.

Been looking at this documentation:


I can’t see your code in the provided link.

I just tried popping into it with an incognito window; appeared to be successful

Are you able to get in?

Under the directory “views” on the left hand side is a file called “index.html” < that’s where the code is

Ok, I didn’t check this file!

In:

var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: playerBoidLine},
           scene, true);

You must flag the lines as updatable:

var lines = BABYLON.MeshBuilder.CreateLines("lines",
        {points: playerBoidLine, updatable: true}, scene, true);

Then, to update the lines:

for (var i = 0; i < 10; i++) {
    var newPositions = lineCollector[i];
    boidLines[i] = BABYLON.MeshBuilder.CreateLines("lines",
     {points: newPositions, updatable: true, instance: boidLines[i]}, scene, true);
}

Provided that newPositions are the 3D points of the updated lines.

OK, thank you.

I’m going to study this tomorrow, and get back to you about it to make sure that I fully understand it…

Really appreciate you looking into it though.

Alright #1., I thought I had made them updateable, but I had done that incorrectly; thank you for showing me the right way to do that. Now looking at the update loop.

OK, there are certain aspects of your re-write of line 1706 that I’m wondering if you can explain and/or point me to documentation.

(1.) It looks like you are creating 10 new lines every run of the update loop, yes?
(2.) what does “instance: boidlines[i]” mean? How do I learn about instance, I don’t think I’ve ever seen that before.

It looks like you are creating 10 new lines every run of the update loop, yes?

No, because I’m using the instance parameter, I’m in a “update mode”.

See doc linked previously: Parametric Shapes - Babylon.js Documentation

OK, thank you. I think I was looking at some playground examples that lead me astray. I’ll stick more heavily to the official documentation.

Hi There, I got some awesome help from Evgeni_Popov on the lines in VR. They are pretty cool: they shoot straight from the player’s head to the robots, and give you a sense of where your robots are at all times in the virtual space.

I’m now trying to move the lines so that they come out of the player’s chest, and I’m getting a very unusual error/effect, not even sure what to call it. Can’t tell if it’s an error, or if I’m referencing something incorrectly:

//trying to update the lines
        if (PBroadcaster == true){
        for (var i = 0; i < 10; i++) {
            
            //lineCollector[i][0] = xr.baseExperience.camera._position;
          
            lineCollector[i][0]._x = xr.baseExperience.camera._position._x;
            lineCollector[i][0]._y = xr.baseExperience.camera._position._y + 0.5;
            lineCollector[i][0]._z = xr.baseExperience.camera._position._z;
          
            lineCollector[i][1] = models[i].boid.position;
          
          
        }
        for (var i = 0; i < 10; i++) {
            var newPositions = lineCollector[i];
            boidLines[i] = BABYLON.MeshBuilder.CreateLines("lines", {points: newPositions, updatable: true, instance: boidLines[i]}, scene, true);
        }

What I’m trying to do here is shift the originating point of the line (player) slightly lower so that the line doesn’t originate right at the player’s eyes, but it continues to do so anyway. Here is the codebase this comes from: babylonboidsvrsockets (the code is in the index file) (line 1705).

Hi, a few things -

  1. a playground will be very helpful
  2. This should work in non vr as well (there is nothing “VR-y” in this code). Does it work with different camera types?
  3. We discourage using private parameters (like _position). Use .position instead, which we can guaranty (i know it is a getter in that case, but in many others it isn’t ).
  4. XR’s Y is the user’s height. So it should be y-0.5 and not +0.5. Or are you using a different reference space?
1 Like