Issue with Trailmesh and scaling

Hi,

I have an issue using the TrailMesh.

I’m trying to use it in an AR project which means that almost everything in the scene is having a scale change applied to it per frame.

Essentially, the TrailMesh always shows where an object has been on screen versus in 3D space.

I have created a playground with an example in it:

https://www.babylonjs-playground.com/#20OAV9#2572

By default, the playground does not scale the grey sphere. You will note that the green sphere moves horizontally parallel to the grey cube behind it.

All objects (except the ground) are children of the grey sphere. If you comment out the line (currently 60):
var newScale = sphere.scaling.x;
and remove the comment from:
//var newScale = sphere.scaling.x + (0.005 * sphere.scaleDirection);

Running in this configuration results in the yellow trail no longer representing the object’s movement in 3D space but rather screen space.

I need to figure out how to make the TrailMesh object scale as per the green sphere and grey cube. Help please!

A couple of quick observations:

If I no longer have the green sphere as a child of the grey one the trail behaves. Commenting out this line:

sphere.addChild(movingObject);

You can then add the following line to scale the green sphere by itself:

find:
sphere.scaling = new BABYLON.Vector3(newScale, newScale, newScale);

and add below:

movingObject.scaling = new BABYLON.Vector3(newScale, newScale, newScale);

Note that the green sphere no longer moves in relation to the grey one now.

I am also not sure that TrailMesh correctly scales in this example either (size wise)

Adding @RaananW who might be able to help as he is the king of AR :slight_smile:

I am not 100% sure this is accurate :slight_smile:

Why would you scale everything on each frame? the objects stay the same, it is the distance between you and the object that makes it look like it is being re-scaled.

But this part aside, this is less about AR and more about trailmesh. I guess we will need to know what the expected behavior is, because I sadly didn’t understand the issue.

1 Like

Interesting regarding AR… I’m using 8th wall and their SDK examples all provide a scale that you need to apply to a parent object in the scene to make it appear in the correct place. I’ll happily take any guidance on a better approach (indeed different libraries).

The issue with the TrailMesh is that it doesn’t scale in space. In the playground example it is essentially parented as:

Sphere -> movingObject -> TrailMesh

As the scale changes the trail bascially moves about the screen tracing where the moving object has been rendered.

I was expecting it to remain ‘static’ as it were in reference to the mesh that is set as it’s emitter.

I placed a box called guide that is also a child to the main sphere. The green child sphere moves directly left/right in front of the guide even when scaled. The trailmesh does not.

The best way to see what i mean is to remove the comment on line 61 in the playground :slight_smile:

I am so sorry I am still unsure of what you expect to see :frowning:

I am not sure to fully get this part:

This is probably since 8th wall can’t control the camera’s position which is fixed in one place. Using WebXR you can track you rpoisition in space using native functionality in your browser. It still lacks some features that the 8th wall do offer, but it is developing rapidly. You can read about it here - WebXR Augmented Reality Features | Babylon.js Documentation

It’s late here in Australia… I will make a couple of gifs tomorrow; actual vs. expected. Hopefully that will make things clearer.

1 Like

Perfect thanks a lot no rush :slight_smile:

I would love to be able to use webXR. Unfortunately it’s really limited in terms of platform support at the moment.

I plan on looking at ar.js and jsartoolkit when we have a gap in between projects. Having come from using Sumerian for a few projects I’m really enjoying the depth of control and feature set of babylonjs. Although the learning curve is a bit steeper.

1 Like

@RaananW - as requested:

The first two images are whilst the example runs with no scaling happening at runtime… They also represent what I believe should be the correct behaviour of the trailmesh.

expected - scale at 1-1-1
^ Running with a scale for sphere of 1,1,1
expected - scale at 0.3
^ Running with a scale for sphere of 0.3,0.3,0.3


^ What the trailmesh does at startup when the sphere scale is set to 0.3,0.3,0.3

As the scene starts, initial frame looks like it is rendered with the sphere scaled at 1,1,1.


^ What the trailmesh does with the following code enabled:
var newScale = sphere.scaling.x + (0.05 * sphere.scaleDirection);
sphere.scaling = new BABYLON.Vector3(newScale, newScale, newScale);

Note that:

  • The green sphere always moves horizontally and in front of the grey box
  • The green sphere only moves on the x-axis
  • EVERYTHING bar the ground plane is a child of the grey sphere
  • I would expect the trail to scale in world space and give a result similar to the first two pictures. Since the object it is a trail of only ever moves horizontally in world space, the trail should only ever be horizontal as well.
  • In practice, the trailmesh highlights where the green sphere has been on the screen not in world space

@RaananW - any thoughts on this one?

Do I understand correctly, that you would expect the entire trail mesh to scale? the tail doesn’t scale as you expect it to?

1 Like

@RaananW - correct; rather than those arcs I would expect a horizontal line.

I am so sorry @Darren, i know it might look like I am trying to just “convince” you that everything is as it should be, but I don’t, I am really trying to understand the issue.

There is a catch here, especially with trail mesh. Trail mesh takes the current state of the generator, and generates new points in space (in world space). To get the trail mesh to scale down together with the sphere, you will need to set its scaling correctly as well. The trail mesh is not a child of the sphere, it is using the sphere to generate its trajectory. afterwards it fades out the trail it has created, but it doesn’t know the context in which previous points were made in.

If you set the trail mesh’s scaling thou, you will see weird behavior, due to the space in which the dots were made in (here is the example - https://www.babylonjs-playground.com/#20OAV9#2629) . You will need to reposition the trail mesh correctly.