Reference Source
public class | source

EdgeMaterial

Extends:

ComponentMaterial → EdgeMaterial

Configures the appearance of Entitys when their edges are emphasised.

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

Constructor Summary

Public Constructor
public

constructor(owner: Component, cfg: *)

Member Summary

Public Members
public set

Sets edge transparency.

public get

Gets edge transparency.

public set

Sets RGB edge color.

public get

Gets RGB edge color.

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 set

Selects a preset EdgeMaterial configuration.

public get

The current preset EdgeMaterial configuration.

public get

Gets available EdgeMaterial presets.

Method Summary

Public Methods
public

Destroys this EdgeMaterial.

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

scheduleTask(task: *)

Schedule a task to perform on the next browser interval

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 EdgeMaterial configuration

cfg.id String
  • optional

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

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

RGB edge color.

cfg.edgeAlpha Number
  • optional
  • default: 1.0

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

cfg.edgeWidth Number
  • optional
  • default: 1

Edge width in pixels.

cfg.preset String
  • optional

Selects a preset EdgeMaterial configuration - see EdgeMaterial#presets.

Public Members

public set edgeAlpha: Number source

Sets edge transparency.

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

Default value is 1.0.

public get edgeAlpha: Number source

Gets edge transparency.

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

Default value is 1.0.

public set edgeColor: Number[] source

Sets RGB edge color.

Default value is [0.2, 0.2, 0.2].

public get edgeColor: Number[] source

Gets RGB edge color.

Default value 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 set preset: String source

Selects a preset EdgeMaterial configuration.

Default value is "default".

public get preset: String source

The current preset EdgeMaterial configuration.

Default value is "default".

public get presets: Object source

Gets available EdgeMaterial presets.

Public Methods

public destroy() source

Destroys this EdgeMaterial.

Override:

Material#destroy