EdgeMaterial

Configures the appearance of Entitys when their edges are emphasised.

• Emphasise edges of an Entity by setting Entity#edges true.
• When Entitys are within the subtree of a root Entity, then setting Entity#edges on the root will collectively set that property on all sub-Entitys.
• EdgeMaterial provides several presets. Select a preset by setting EdgeMaterial#preset to the ID of a preset in EdgeMaterial#presets.
• By default, a Mesh uses the default EdgeMaterial in Scene#edgeMaterial, but you can assign each Mesh#edgeMaterial to a custom EdgeMaterial if required.

Usage

In the example below, we'll create a Mesh with its own EdgeMaterial and set Mesh#edges true to emphasise its edges.

Recall that Mesh is a concrete subtype of the abstract Entity base class.

[Run this example]

import {Viewer, Mesh, buildSphereGeometry,
     ReadableGeometry, PhongMaterial, EdgeMaterial} from "xeokit-sdk.es.js";

const viewer = new Viewer({
     canvasId: "myCanvas",
     transparent: true
});

viewer.scene.camera.eye = [0, 0, 5];
viewer.scene.camera.look = [0, 0, 0];
viewer.scene.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {

     geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({
         radius: 1.5,
         heightSegments: 24,
         widthSegments: 16,
         edgeThreshold: 2 // Default is 10
     })),

     material: new PhongMaterial(viewer.scene, {
         diffuse: [0.4, 0.4, 1.0],
         ambient: [0.9, 0.3, 0.9],
         shininess: 30,
         alpha: 0.5,
         alphaMode: "blend"
     }),

     edgeMaterial: new EdgeMaterial(viewer.scene, {
         edgeColor: [0.0, 0.0, 1.0]
         edgeAlpha: 1.0,
         edgeWidth: 2
     }),

     edges: true
});

Note the edgeThreshold configuration for the ReadableGeometry on our Mesh. EdgeMaterial configures a wireframe representation of the ReadableGeometry, which will have inner edges (those edges between adjacent co-planar triangles) removed for visual clarity. The edgeThreshold indicates that, for this particular ReadableGeometry, an inner edge is one where the angle between the surface normals of adjacent triangles is not greater than 5 degrees. That's set to 2 by default, but we can override it to tweak the effect as needed for particular Geometries.

Here's the example again, this time implicitly defaulting to the Scene#edgeMaterial. We'll also modify that EdgeMaterial to customize the effect.

new Mesh({
    geometry: new ReadableGeometry(viewer.scene, buildSphereGeometry({
         radius: 1.5,
         heightSegments: 24,
         widthSegments: 16,
         edgeThreshold: 2 // Default is 10
     })),
    material: new PhongMaterial(viewer.scene, {
        diffuse: [0.2, 0.2, 1.0]
    }),
    edges: true
});

var edgeMaterial = viewer.scene.edgeMaterial;

edgeMaterial.edgeColor = [0.2, 1.0, 0.2];
edgeMaterial.edgeAlpha = 1.0;
edgeMaterial.edgeWidth = 2;

Presets

Let's switch the Scene#edgeMaterial to one of the presets in EdgeMaterial#presets:

viewer.edgeMaterial.preset = EdgeMaterial.presets["sepia"];

We can also create an EdgeMaterial from a preset, while overriding properties of the preset as required:

var myEdgeMaterial = new EdgeMaterial(viewer.scene, {
     preset: "sepia",
     edgeColor = [1.0, 0.5, 0.5]
});