EmphasisMaterial

Configures the appearance of Entitys when they are xrayed, highlighted or selected.

• XRay an Entity by setting Entity#xrayed true.
• Highlight an Entity by setting Entity#highlighted true.
• Select an Entity by setting Entity#selected true.
• When Entitys are within the subtree of a root Entity, then setting Entity#xrayed, Entity#highlighted or Entity#selected on the root will collectively set those properties on all sub-Entitys.
• EmphasisMaterial provides several presets. Select a preset by setting EmphasisMaterial#preset to the ID of a preset in EmphasisMaterial#presets.
• By default, a Mesh uses the default EmphasisMaterials in Scene#xrayMaterial, Scene#highlightMaterial and Scene#selectedMaterial but you can assign each Mesh#xrayMaterial, Mesh#highlightMaterial or Mesh#selectedMaterial to a custom EmphasisMaterial, if required.

Usage

In the example below, we'll create a Mesh with its own XRayMaterial and set Mesh#xrayed true to xray it.

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

new Mesh(viewer.scene, {
    geometry: new BoxGeometry(viewer.scene, {
        edgeThreshold: 1
    }),
    material: new PhongMaterial(viewer.scene, {
        diffuse: [0.2, 0.2, 1.0]
    }),
    xrayMaterial: new EmphasisMaterial(viewer.scene, {
        fill: true,
        fillColor: [0, 0, 0],
        fillAlpha: 0.7,
        edges: true,
        edgeColor: [0.2, 1.0, 0.2],
        edgeAlpha: 1.0,
        edgeWidth: 2
    }),
    xrayed: true
});

Note the edgeThreshold configuration for the ReadableGeometry on our Mesh. EmphasisMaterial configures a wireframe representation of the ReadableGeometry for the selected emphasis mode, 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 TeapotGeometry(viewer.scene, {
        edgeThreshold: 5
    }),
    material: new PhongMaterial(viewer.scene, {
        diffuse: [0.2, 0.2, 1.0]
    }),
    xrayed: true
});

var xrayMaterial = viewer.scene.xrayMaterial;

xrayMaterial.fillColor = [0.2, 1.0, 0.2];
xrayMaterial.fillAlpha = 1.0;

Presets

Let's switch the Scene#xrayMaterial to one of the presets in EmphasisMaterial#presets:

viewer.xrayMaterial.preset = EmphasisMaterial.presets["sepia"];

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

var myEmphasisMaterial = new EMphasisMaterial(viewer.scene, {
     preset: "sepia",
     fillColor = [1.0, 0.5, 0.5]
});