Reference Source
public class | source

EmphasisMaterial

Extends:

ComponentMaterial → EmphasisMaterial

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

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]
});

Constructor Summary

Public Constructor
public

constructor(owner: Component, cfg: *)

Member Summary

Public Members
public get

Gets whether to render backfaces when EmphasisMaterial#fill is true..

public set

Sets whether to render backfaces when EmphasisMaterial#fill is true..

public get

Gets the transparency of edges.

public set

Sets the transparency of edges.

public set

Sets the RGB color of edges.

public get

Gets the RGB color of edges.

public set

Sets edge width.

public get

Gets edge width.

public set

Sets if edges are visible.

public get

Gets if edges are visible.

public get

Gets if surfaces are filled with color.

public set

Sets if surfaces are filled with color.

public get

Gets the transparency of filled faces.

public set

Sets the transparency of filled faces.

public get

Gets the RGB color of filled faces.

public set

Sets the RGB color of filled faces.

public get

Gets the current preset EmphasisMaterial configuration.

public set

Selects a preset EmphasisMaterial configuration.

public get

Gets available EmphasisMaterial presets.

Method Summary

Public Methods
public

Destroys this EmphasisMaterial.

Inherited Summary

From class Component
public get

The Component that owns the lifecycle of this Component, if any.

public

True as soon as this Component has been destroyed

public

ID of this Component, unique within the Scene.

public

meta: *

Arbitrary, user-defined metadata on this component.

public

The parent Scene that contains this Component.

public

The viewer that contains this Scene.

public

clear()

Destroys all Components that are owned by this.

public

Destroys this component.

public

error(message: String)

Logs an error for this component to the JavaScript console.

public

fire(event: String, value: Object, forget: Boolean)

Fires an event on this component.

public

Returns true if there are any subscribers to the given event on this component.

public

isType(type: *): *: Boolean

Tests if this component is of the given type, or is a subclass of the given type.

public

log(message: String)

Logs a console debugging message for this component.

public

off(subId: String)

Cancels an event subscription that was previously made with Component#on or Component#once.

public

on(event: String, callback: Function, scope: Object): String

Subscribes to an event on this component.

public

once(event: String, callback: Function, scope: Object)

Subscribes to the next occurrence of the given event, then un-subscribes as soon as the event is subIdd.

public

warn(message: String)

Logs a warning for this component to the JavaScript console.

From class Material
public

Public Constructors

public constructor(owner: Component, cfg: *) source

Override:

Material#constructor

Params:

NameTypeAttributeDescription
owner Component

Owner component. When destroyed, the owner will destroy this component as well.

cfg *
  • optional

The EmphasisMaterial configuration

cfg.id String
  • optional

Optional ID, unique among all components in the parent Scene, generated automatically when omitted.

cfg.fill Boolean
  • optional
  • default: true

Indicates if xray surfaces are filled with color.

cfg.fillColor Number[]
  • optional
  • default: [0.4,0.4,0.4]

EmphasisMaterial fill color.

cfg.fillAlpha Number
  • optional
  • default: 0.2

Transparency of filled xray faces. A value of 0.0 indicates fully transparent, 1.0 is fully opaque.

cfg.edges Boolean
  • optional
  • default: true

Indicates if xray edges are visible.

cfg.edgeColor Number[]
  • optional
  • default: [0.2,0.2,0.2]

RGB color of xray edges.

cfg.edgeAlpha Number
  • optional
  • default: 0.5

Transparency of xray edges. A value of 0.0 indicates fully transparent, 1.0 is fully opaque.

cfg.edgeWidth Number
  • optional
  • default: 1

Width of xray edges, in pixels.

cfg.preset String
  • optional

Selects a preset EmphasisMaterial configuration - see EmphasisMaterial#presets.

cfg.backfaces Boolean
  • optional
  • default: false

Whether to render geometry backfaces when emphasising.

Public Members

public get backfaces: Boolean source

Gets whether to render backfaces when EmphasisMaterial#fill is true..

Default is false.

public set backfaces: Boolean source

Sets whether to render backfaces when EmphasisMaterial#fill is true..

Default is false.

public get edgeAlpha: Number source

Gets the transparency of edges.

A value of 0.0 indicates fully transparent, 1.0 is fully opaque.

Default is 0.2.

public set edgeAlpha: Number source

Sets the transparency of edges.

A value of 0.0 indicates fully transparent, 1.0 is fully opaque.

Default is 0.2.

public set edgeColor: Number[] source

Sets the RGB color of edges.

Default is [0.2, 0.2, 0.2].

public get edgeColor: Number[] source

Gets the RGB color of edges.

Default is [0.2, 0.2, 0.2].

public set edgeWidth: Number source

Sets edge width.

This is not supported by WebGL implementations based on DirectX [2019].

Default value is 1.0 pixels.

public get edgeWidth: Number source

Gets edge width.

This is not supported by WebGL implementations based on DirectX [2019].

Default value is 1.0 pixels.

public set edges: Boolean source

Sets if edges are visible.

Default is true.

public get edges: Boolean source

Gets if edges are visible.

Default is true.

public get fill: Boolean source

Gets if surfaces are filled with color.

Default is true.

public set fill: Boolean source

Sets if surfaces are filled with color.

Default is true.

public get fillAlpha: Number source

Gets the transparency of filled faces.

A value of 0.0 indicates fully transparent, 1.0 is fully opaque.

Default is 0.2.

public set fillAlpha: Number source

Sets the transparency of filled faces.

A value of 0.0 indicates fully transparent, 1.0 is fully opaque.

Default is 0.2.

public get fillColor: Number[] source

Gets the RGB color of filled faces.

Default is [0.4, 0.4, 0.4].

public set fillColor: Number[] source

Sets the RGB color of filled faces.

Default is [0.4, 0.4, 0.4].

public get preset: String source

Gets the current preset EmphasisMaterial configuration.

Default value is "default".

public set preset: String source

Selects a preset EmphasisMaterial configuration.

Default value is "default".

public get presets: Object source

Gets available EmphasisMaterial presets.

Public Methods

public destroy() source

Destroys this EmphasisMaterial.

Override:

Material#destroy