Edge rendering issue

Questions
1

Hi everyone-

I am creating meshes via CSG operations and some of the meshes don’t appear to render all their edges.

Here’s a pretty simple mesh that does not have edges on the top.

The top edges are unique in that they have segments in 2 facets, which a clue, I think.

image

Thanks and have a beautiful day!

-Flex

2

I took the time to try to solve your problem with chatGPT. There are some optimizations and solutions that seem valuable to me.

chatGPT: It appears that you are not passing the mesh to the BABYLON.MeshBuilder.CreateBox() method. Try modifying the line where you create the mesh to:

typescriptCopy code

const mesh = BABYLON.MeshBuilder.CreateBox('', { width: 1, height: 1, depth: 1 }, scene);

This will create a box mesh with dimensions of 1 unit each in width, height, and depth. You can adjust these values to match the dimensions of your mesh.

Also, you might want to call mesh.edgesColor = new BABYLON.Color4(1, 1, 1, 1); to set the color of the edges to white. By default, the color of the edges is black, which might make them difficult to see depending on the color of the mesh.

Additionally, the createNormals() method is unnecessary in this case since the applyToMesh() method already calculates normals for the mesh.

Here is the modified code:

typescriptCopy code

class Playground {
  public static CreateScene(engine: BABYLON.Engine, canvas: HTMLCanvasElement): BABYLON.Scene {
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);

    // This creates and positions a free camera (non-mesh)
    const camera = new BABYLON.ArcRotateCamera("",0,Math.PI / 3,80,new BABYLON.Vector3(0, 0, 0),scene);

    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;

    const vertexData = new BABYLON.VertexData();
    const indices = this.meshData.indices;
    const positions = this.meshData.positions;
    vertexData.indices = indices;
    vertexData.positions = positions;

    const mesh = BABYLON.MeshBuilder.CreateBox('', { width: 1, height: 1, depth: 1 }, scene);
    vertexData.applyToMesh(mesh);
    mesh.enableEdgesRendering();
    mesh.edgesWidth = 3;
    mesh.edgesColor = new BABYLON.Color4(1, 1, 1, 1);

    return scene;
  }

Me: The upper edge lines were not drawn.

chatGPT: One possible reason why some edges of your mesh may not be rendering could be due to the fact that those edges are not being marked as “hard edges”. In Babylon.js, hard edges are marked by setting the vertex normals at the edge to be perpendicular (i.e. not smoothed).

To create hard edges in your mesh, you can modify the meshData array to include a property for vertex normals, and set the normals for the vertices at the hard edges to be perpendicular. Here’s an example modification to your code:

javascriptCopy code

static meshData = {
    "positions": [...],
    "indices": [...],
    "normals": [
        // vertex normals for each position, with hard edges marked as perpendicular
        0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 
        0, 0, -1, 0, 1, 0, 0, -1, 0, 0, 1, 0, 
        0, 0, 1, 0, 1, 0, 0, -1, 0, 0, 1, 0, 
        0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 
        1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 
        1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 
        0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 
        0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 
        -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 
        -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 
        0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 
        0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0
    ]
};

In this example, the vertex normals for the positions at the hard edges are set to be perpendicular (i.e. (0, 0, -1) or (0, -1, 0) or (1, 0, 0) depending on the direction of the edge).

With these normals set, the mesh should render all its edges.

My conclusion: That didn’t really work either, then I had a working meshData created and with that it worked. The problem is apparently due to wrong indexes - my guess.

Test with a simplified model works fine:

edge rendering issue | Babylon.js Playground (babylonjs.com)

3

ChatGPT? Wow! It’s a brave new world!

I will chase down the hard edges possibility. I had a look at the normals and some maybe could be rounded.

Thanks,CodingCrusader

4

CSG geometries are notoriously bad for the edge renderer… You can try to use the old edge finder, which is able to find these edges, but it also finds others you don’t want:

4 Likes
5

Hmmm… I started writing code to remove the extraneous points on the edges and it’s kinda complicated. If I come up with anything good I’ll update the thread.

1 Like