Gizmo and Extrude Mesh Feels Very Blurry (Weird)

Questions
1

I have used the same code in the playground to generate the arcs and cline that I want to make.
Arcs | Babylon.js Playground (babylonjs.com)

image
image511×512 29 KB

As you can see, it is as normal as we all get used to.

However, when I used it inside my real project, the result become this:

image
image1087×716 80.6 KB

You can see that the rotation tool is very blurry and as well as the arcs.
Besides, the reason why I show the rotation tool on the rectangle rather than the arc is that it does not appear at all! But this is might because of the transforms are 0s(it seems that the center point of the mesh is set to the origin):
image

The only difference I think is that the coordinate inside my real project is quite large (e.g., position = (-169221, 30, -451877)) or I am not using the arc rotate camera?

Any help is very grateful!

2

Welcome abroad!

It would be easier to tell what’s going on if you share your project :slight_smile:

3

Sure! Since the project is quite large, I will only post the relevant code:

export function createArc(props: BlockProperties, name: string, scene: Scene): Mesh {
	const origin = new Vector3(-props.XCentre, props.ZCentre, -props.YCentre);
	const v1 = new Vector3(-props.X1, props.Z1, -props.Y1);
	const v2 = new Vector3(-props.X2, props.Z2, -props.Y2);

	const ov1 = v1.subtract(origin);
	const ov2 = v2.subtract(origin);

	const n = props.Width / 2.0;

	var shape = [
		new Vector3(-n, 0, 0),
		new Vector3(+n, 0, 0),
		new Vector3(+n, 0.01, 0),
		new Vector3(-n, 0.01, 0),
		new Vector3(-n, 0, 0),
	];

	var radius = Vector3.Distance(v1, origin);

	var cross = Vector3.Cross(ov1, ov2);
	var dot = Vector3.Dot(ov1, ov2);
	var angle = Math.acos(dot / (ov1.length() * ov2.length()));

	var points = [];
	var minNb = 16;
	var factor = 2;
	var nbPoints = Math.floor(radius * angle * factor);
	nbPoints = nbPoints < minNb ? minNb : nbPoints;

	var firstPoint = Vector3.Normalize(ov1).scale(radius);
	var lastPoint = Vector3.Normalize(ov2).scale(radius);

	var matrix;
	var ang = angle / nbPoints;
	var rotated;
	for (var i = 0; i < nbPoints; i++) {
		matrix = Matrix.RotationAxis(cross, ang * i);
		rotated = Vector3.TransformCoordinates(firstPoint, matrix);
		points.push(rotated.add(origin));
	}
	points.push(lastPoint.add(origin));

	var extruded = MeshBuilder.ExtrudeShape(
		"extruded_" + name,
		{
			shape: shape,
			path: points,
			updatable: true,
			sideOrientation: Mesh.DOUBLESIDE,
		},
		scene
	);

	var box = MeshBuilder.CreateBox(extruded.name + "_pivot", { size: 1 }, scene);
	box.position = origin;
	box.isVisible = false;
	extruded.setParent(box);
	return box;
}
4

As you said:

The only difference I think is that the coordinate inside my real project is quite large (e.g., position = (-169221, 30, -451877)) or I am not using the arc rotate camera?

The position is too large for the GPU, which is what causes this visual problem. If you have a mesh located there, it should also look odd.

5

You can check Floating Origin Template for BJS 5.x - Demos and projects - Babylon.js (babylonjs.com) for support for large numbers

6

Yeah, I am also suspecting that.

7

@carolhmj Great thanks! I will be looking into it!

8

@carolhmj @Mickael_PASTOR Great! It’s working!

image
image793×695 38.9 KB

But the reflection seems strange than the rectangular block lol. Anyway, thanks a lot for all of your great help!

3 Likes