An EdgeMaterial is a Material that defines the appearance of attached Meshes when they are highlighted, selected or ghosted.

Examples

Example 1: Ghost effect	Example 2: Ghost and highlight effects for architecture	Example 3: Ghost and highlight effects for CAD	Example 4: Ghost effect for CAD

Overview

• Ghost an Mesh by setting its Mesh/ghost:property property true.
• When ghosted, a Mesh's appearance is controlled by its EdgeMaterial.
• An EdgeMaterial provides several preset configurations that you can set it to. Select a preset by setting preset to the preset's ID. A map of available presets is provided in xeogl.EdgeMaterial.presets.
• By default, a Mesh uses the Scene's global EdgeMaterials, but you can give each Mesh its own EdgeMaterial when you want to customize the effect per-Mesh.
• Ghost all Meshes in a Model by setting the Model's Model/ghost:property property true. Note that all Meshes in a Model have the Scene's global EdgeMaterial by default.
• Modify the Scene's global EdgeMaterial to customize it.

Usage

• Ghosting
• Highlighting

Ghosting

In the usage example below, we'll create a Mesh with a ghost effect applied to it. The Mesh gets its own EdgeMaterial for ghosting, and has its Mesh/ghost:property property set true to activate the effect.

var mesh = new xeogl.Mesh({
   geometry: new xeogl.TeapotGeometry({
       edgeThreshold: 1
   }),
   material: new xeogl.PhongMaterial({
       diffuse: [0.2, 0.2, 1.0]
   }),
   edgeMaterial: new xeogl.EdgeMaterial({
       edges: true,
       edgeColor: [0.2, 1.0, 0.2],
       edgeAlpha: 1.0,
       edgeWidth: 2,
       vertices: true,
       vertexColor: [0.6, 1.0, 0.6],
       vertexAlpha: 1.0,
       vertexSize: 8,
       fill: true,
       fillColor: [0, 0, 0],
       fillAlpha: 0.7
   }),
   ghost: true
});

Note the edgeThreshold configuration on the Geometry we've created for our Mesh. Our EdgeMaterial is configured to draw a wireframe representation of the Geometry, which will have inner edges (ie. edges between adjacent co-planar triangles) removed for visual clarity. The edgeThreshold configuration indicates that, for this particular Geometry, 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 using the Scene's global EdgeMaterial by default. We'll also modify that EdgeMaterial to customize the effect.

var mesh = new xeogl.Mesh({
   geometry: new xeogl.TeapotGeometry({
       edgeThreshold: 5
   }),
   material: new xeogl.PhongMaterial({
       diffuse: [0.2, 0.2, 1.0]
   }),
   ghost: true
});

var edgeMaterial = mesh.scene.edgeMaterial;

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

Highlighting

In the next example, we'll use a ghosting in conjunction with highlighting, to emphasise a couple of objects within a gearbox Model. We'll load the Model from glTF, then ghost all of its Meshes except for two gears, which we'll highlight instead. The ghosted Meshes have the Scene's global ghosting EdgeMaterial, which we'll modify. The highlighted Meshes also have the Scene's global highlighting EdgeMaterial, which we'll modify as well.

var model = new xeogl.GLTFModel({
    src: "models/gltf/gearbox_conical/scene.gltf",
    edgeThreshold: 10
});

model.on("loaded", function() {

   model.meshes["gearbox#77.0"].highlight = true;
   model.meshes["gearbox#79.0"].highlight = true;

   var edgeMaterial = model.scene.edgeMaterial;

   edgeMaterial.edgeColor = [0.4, 0.4, 1.6];
   edgeMaterial.edgeAlpha = 0.8;
   edgeMaterial.edgeWidth = 3;

   var highlightMaterial = model.scene.highlightMaterial;

   highlightMaterial.color = [1.0, 1.0, 1.0];
   highlightMaterial.alpha = 1.0;
});

Presets

For convenience, an EdgeMaterial provides several preset configurations that you can set it to, which are provided in xeogl.EdgeMaterial.presets:

var presets = xeogl.EdgeMaterial.presets;

The presets look something like this:

{
       "default": {
           edgeColor: [0.2, 0.2, 0.2],
           edgeAlpha: 1.0,
           edgeWidth: 1
       },

        "sepia": {
           edgeColor: [0.45, 0.45, 0.41],
           edgeAlpha: 1.0,
           edgeWidth: 1
       },

       //...
}

Let's switch the Scene's global default EdgeMaterial over to the "sepia" preset used in Example 4: Ghost effect for CAD.

scene.edgeMaterial.preset = "sepia";

You can also just create an EdgeMaterial from a preset:

var mesh = new xeogl.Mesh({
   geometry: new xeogl.TeapotGeometry({
       edgeThreshold: 5
   }),
   material: new xeogl.PhongMaterial({
       diffuse: [0.2, 0.2, 1.0]
   }),
   edgeMaterial: new xeogl.EdgeMaterial({
       preset: "sepia"
   });
   ghost: true
});

Note that applying a preset just sets the EdgeMaterial's property values, which you are then free to modify afterwards.