API

Display Vertex Normals

Show Mesh Vertex Normals

This snippet allows you to add lines showing the normals for each vertex of a mesh. The color and size of the lines can be set.

import { VertexBuffer } from "@babylonjs/core/Buffers/buffer";
import { Color3 } from "@babylonjs/core/Maths/math.color";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
function showNormals(mesh, size, color, sc) {
var normals = mesh.getVerticesData(VertexBuffer.NormalKind);
var positions = mesh.getVerticesData(VertexBuffer.PositionKind);
color = color || Color3.White();
sc = sc || scene;
size = size || 1;
var lines = [];
for (let i = 0; i < normals.length; i += 3) {
var v1 = Vector3.FromArray(positions, i);
var v2 = v1.add(Vector3.FromArray(normals, i).scaleInPlace(size));
lines.push([v1.add(mesh.position), v2.add(mesh.position)]);
}
var normalLines = MeshBuilder.CreateLineSystem("normalLines", { lines: lines }, sc);
normalLines.color = color;
return normalLines;
}

Playground

Displaying Vertex Normals