/home/lindsay/xeolabs/xeogl-next/xeogl/src/materials/emphasisMaterial.js

xeogl / API Docs

API Docs for:

File: /home/lindsay/xeolabs/xeogl-next/xeogl/src/materials/emphasisMaterial.js

  1. /**
  2.  An **EmphasisMaterial** is a {{#crossLink "Material"}}{{/crossLink}} that defines the appearance of attached
  3.  {{#crossLink "Mesh"}}Meshes{{/crossLink}} when they are highlighted, selected or ghosted.
  4.  
  5.  ## Examples
  6.  
  7.  | <a href="../../examples/#effects_ghost"><img src="../../assets/images/screenshots/HighlightMaterial/teapot.png"></img></a> | <a href="../../examples/#effects_demo_housePlan"><img src="../../assets/images/screenshots/HighlightMaterial/house.png"></img></a> | <a href="../../examples/#effects_demo_gearbox"><img src="../../assets/images/screenshots/HighlightMaterial/gearbox.png"></img></a> | <a href="../../examples/#effects_demo_adam"><img src="../../assets/images/screenshots/HighlightMaterial/adam.png"></img></a>|
  8.  |:------:|:------:|:----:|:-----:|:-----:|
  9.  |[Example 1: Ghost effect](../../examples/#effects_ghost)|[Example 2: Ghost and highlight effects for architecture](../../examples/#effects_demo_housePlan)|[Example 3: Ghost and highlight effects for CAD](../../examples/#effects_demo_gearbox)| [Example 4: Ghost effect for CAD ](../../examples//#effects_demo_adam)|
  10.  
  11.  ## Overview
  12.  
  13.  * Ghost an {{#crossLink "Mesh"}}{{/crossLink}} by setting its {{#crossLink "Mesh/ghost:property"}}{{/crossLink}} property ````true````.
  14.  * When ghosted, a Mesh's appearance is controlled by its EmphasisMaterial.
  15.  * An EmphasisMaterial provides several preset configurations that you can set it to. Select a preset by setting {{#crossLink "EmphasisMaterial/preset:property"}}{{/crossLink}} to the preset's ID. A map of available presets is provided in {{#crossLink "EmphasisMaterial/presets:property"}}xeogl.EmphasisMaterial.presets{{/crossLink}}.
  16.  * By default, a Mesh uses the {{#crossLink "Scene"}}{{/crossLink}}'s global EmphasisMaterials, but you can give each Mesh its own EmphasisMaterial when you want to customize the effect per-Mesh.
  17.  * Ghost all Meshes in a {{#crossLink "Model"}}{{/crossLink}} by setting the Model's {{#crossLink "Model/ghost:property"}}{{/crossLink}} property ````true````. Note that all Meshes in a Model have the Scene's global EmphasisMaterial by default.
  18.  * Modify the Scene's global EmphasisMaterial to customize it.
  19.  
  20.  ## Usage
  21.  
  22.  * [Ghosting](#ghosting)
  23.  * [Highlighting](#highlighting)
  24.  
  25.  ### Ghosting
  26.  
  27.  In the usage example below, we'll create a Mesh with a ghost effect applied to it. The Mesh gets its own EmphasisMaterial for ghosting, and
  28.  has its {{#crossLink "Mesh/ghost:property"}}{{/crossLink}} property set ````true```` to activate the effect.
  29.  
  30.  <a href="../../examples/#effects_ghost"><img src="../../assets/images/screenshots/HighlightMaterial/teapot.png"></img></a>
  31.  
  32.  ````javascript
  33.  var mesh = new xeogl.Mesh({
  34.     geometry: new xeogl.TeapotGeometry({
  35.         edgeThreshold: 1
  36.     }),
  37.     material: new xeogl.PhongMaterial({
  38.         diffuse: [0.2, 0.2, 1.0]
  39.     }),
  40.     ghostMaterial: new xeogl.EmphasisMaterial({
  41.         edges: true,
  42.         edgeColor: [0.2, 1.0, 0.2],
  43.         edgeAlpha: 1.0,
  44.         edgeWidth: 2,
  45.         vertices: true,
  46.         vertexColor: [0.6, 1.0, 0.6],
  47.         vertexAlpha: 1.0,
  48.         vertexSize: 8,
  49.         fill: true,
  50.         fillColor: [0, 0, 0],
  51.         fillAlpha: 0.7
  52.     }),
  53.     ghost: true
  54.  });
  55.  ````
  56.  
  57.  Note the **edgeThreshold** configuration on the {{#crossLink "Geometry"}}{{/crossLink}} we've created for our
  58.  Mesh. Our EmphasisMaterial is configured to draw a wireframe representation of the Geometry, which will have inner edges (ie. edges between
  59.  adjacent co-planar triangles) removed for visual clarity. The ````edgeThreshold```` configuration indicates
  60.  that, for this particular Geometry, an inner edge is one where the angle between the surface normals of adjacent triangles is not
  61.  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.
  62.  
  63.  Here's the example again, this time using the Scene's global EmphasisMaterial by default. We'll also modify that EmphasisMaterial
  64.  to customize the effect.
  65.  
  66.  ````javascript
  67.  var mesh = new xeogl.Mesh({
  68.     geometry: new xeogl.TeapotGeometry({
  69.         edgeThreshold: 5
  70.     }),
  71.     material: new xeogl.PhongMaterial({
  72.         diffuse: [0.2, 0.2, 1.0]
  73.     }),
  74.     ghost: true
  75.  });
  76.  
  77.  var ghostMaterial = mesh.scene.ghostMaterial;
  78.  
  79.  ghostMaterial.edges = true;
  80.  ghostMaterial.edgeColor = [0.2, 1.0, 0.2];
  81.  ghostMaterial.edgeAlpha = 1.0;
  82.  ghostMaterial.edgeWidth = 2;
  83.  ghostMaterial.vertices = true;
  84.  ghostMaterial.vertexColor = [0.6, 1.0, 0.6];
  85.  ghostMaterial.vertexAlpha = 1.0;
  86.  ghostMaterial.vertexSize = 8;
  87.  ghostMaterial.fill = true;
  88.  ghostMaterial.fillColor = [0, 0, 0];
  89.  ghostMaterial.fillAlpha = 0.7;
  90.  ````
  91.  
  92.  ### Highlighting
  93.  
  94.  In the next example, we'll use a ghosting in conjunction with highlighting, to emphasise a couple of objects within
  95.  a gearbox {{#crossLink "Model"}}{{/crossLink}}. We'll load the Model from glTF, then ghost all of its Meshes except for two gears, which we'll highlight instead. The ghosted
  96.  Meshes have the Scene's global ghosting EmphasisMaterial, which we'll modify. The  highlighted Meshes also have the Scene's global highlighting EmphasisMaterial, which we'll modify as well.
  97.  
  98.  <a href="../../examples/#effects_demo_gearbox"><img src="../../assets/images/screenshots/HighlightMaterial/gearbox.png"></img></a>
  99.  
  100.  ````javascript
  101.  var model = new xeogl.GLTFModel({
  102.      src: "models/gltf/gearbox_conical/scene.gltf",
  103.      edgeThreshold: 10
  104.  });
  105.  
  106.  model.on("loaded", function() {
  107.  
  108.     model.ghost = true;
  109.  
  110.     model.meshes["gearbox#77.0"].ghost = false;
  111.     model.meshes["gearbox#79.0"].ghost = false;
  112.  
  113.     model.meshes["gearbox#77.0"].highlight = true;
  114.     model.meshes["gearbox#79.0"].highlight = true;
  115.  
  116.     var ghostMaterial = model.scene.ghostMaterial;
  117.  
  118.     ghostMaterial.edges = true;
  119.     ghostMaterial.edgeColor = [0.4, 0.4, 1.6];
  120.     ghostMaterial.edgeAlpha = 0.8;
  121.     ghostMaterial.edgeWidth = 3;
  122.     ghostMaterial.vertices = false;
  123.     ghostMaterial.vertexColor = [0.7, 1.0, 0.7];
  124.     ghostMaterial.vertexAlpha = 0.9;
  125.     ghostMaterial.vertexSize = 4.0;
  126.     ghostMaterial.fill = true;
  127.     ghostMaterial.fillColor = [0.2, 0.2, 0.7];
  128.     ghostMaterial.fillAlpha = 0.9;
  129.  
  130.     var highlightMaterial = model.scene.highlightMaterial;
  131.  
  132.     highlightMaterial.color = [1.0, 1.0, 1.0];
  133.     highlightMaterial.alpha = 1.0;
  134.  });
  135.  ````
  136.  
  137.  ## Presets
  138.  
  139.  For convenience, an EmphasisMaterial provides several preset configurations that you can set it to, which are provided in
  140.  {{#crossLink "EmphasisMaterial/presets:property"}}xeogl.EmphasisMaterial.presets{{/crossLink}}:
  141.  
  142.  ````javascript
  143.  var presets = xeogl.EmphasisMaterial.presets;
  144.  ````
  145.  
  146.  The presets look something like this:
  147.  
  148.  ````json
  149.  {
  150.         "default": {
  151.             edges: true,
  152.             edgeColor: [0.2, 0.2, 0.2],
  153.             edgeAlpha: 0.5,
  154.             edgeWidth: 1,
  155.             vertices: false,
  156.             vertexColor: [0.4, 0.4, 0.4],
  157.             vertexAlpha: 0.7,
  158.             vertexSize: 4.0,
  159.             fill: true,
  160.             fillColor: [0.4, 0.4, 0.4],
  161.             fillAlpha: 0.2
  162.         },
  163.  
  164.          "sepia": {
  165.             edges: true,
  166.             edgeColor: [0.52, 0.45, 0.41],
  167.             edgeAlpha: 1.0,
  168.             edgeWidth: 1,
  169.             vertices: false,
  170.             vertexColor: [0.7, 1.0, 0.7],
  171.             vertexAlpha: 0.9,
  172.             vertexSize: 4.0,
  173.             fill: true,
  174.             fillColor: [0.97, 0.79, 0.66],
  175.             fillAlpha: 0.4
  176.         },
  177.  
  178.         //...
  179.  }
  180.  ````
  181.  
  182.  Let's switch the Scene's global default  EmphasisMaterial over to the "sepia" preset used in <a href="/examples/#effects_demo_adam">Example 4: Ghost effect for CAD</a>.
  183.  
  184.  ````javascript
  185.  scene.ghostMaterial.preset = "sepia";
  186.  ````
  187.  
  188.  You can also just create an EmphasisMaterial from a preset:
  189.  
  190.  ````javascript
  191.  var mesh = new xeogl.Mesh({
  192.     geometry: new xeogl.TeapotGeometry({
  193.         edgeThreshold: 5
  194.     }),
  195.     material: new xeogl.PhongMaterial({
  196.         diffuse: [0.2, 0.2, 1.0]
  197.     }),
  198.     ghostMaterial: new xeogl.EmphasisMaterial({
  199.         preset: "sepia"
  200.     });
  201.     ghost: true
  202.  });
  203.  ````
  204.  
  205.  Note that applying a preset just sets the EmphasisMaterial's property values, which you are then free to modify afterwards.
  206.  
  207.  @class EmphasisMaterial
  208.  @module xeogl
  209.  @submodule materials
  210.  @constructor
  211.  @extends Material
  212.  @param [owner] {Component} Owner component. When destroyed, the owner will destroy this component as well. Creates this component within the default {{#crossLink "Scene"}}{{/crossLink}} when omitted.
  213.  @param [cfg] {*} The EmphasisMaterial configuration
  214.  @param [cfg.id] {String} Optional ID, unique among all components in the parent {{#crossLink "Scene"}}Scene{{/crossLink}}, generated automatically when omitted.
  215.  @param [cfg.meta=null] {String:Object} Metadata to attach to this EmphasisMaterial.
  216.  @param [cfg.edges=true] {Boolean} Indicates whether or not ghost edges are visible.
  217.  @param [cfg.edgeColor=[0.2,0.2,0.2]] {Array of Number}  RGB color of ghost edges.
  218.  @param [cfg.edgeAlpha=0.5] {Number} Transparency of ghost edges. A value of 0.0 indicates fully transparent, 1.0 is fully opaque.
  219.  @param [cfg.edgeWidth=1] {Number}  Width of ghost edges, in pixels.
  220.  @param [cfg.vertices=false] {Boolean} Indicates whether or not ghost vertices are visible.
  221.  @param [cfg.vertexColor=[0.4,0.4,0.4]] {Array of Number} Color of ghost vertices.
  222.  @param [cfg.vertexAlpha=0.7] {Number}  Transparency of ghost vertices. A value of 0.0 indicates fully transparent, 1.0 is fully opaque.
  223.  @param [cfg.vertexSize=4.0] {Number} Pixel size of ghost vertices.
  224.  @param [cfg.fill=true] {Boolean} Indicates whether or not ghost surfaces are filled with color.
  225.  @param [cfg.fillColor=[0.4,0.4,0.4]] {Array of Number} EmphasisMaterial fill color.
  226.  @param [cfg.fillAlpha=0.2] {Number}  Transparency of filled ghost faces. A value of 0.0 indicates fully transparent, 1.0 is fully opaque.
  227.  @param [cfg.backfaces=false] {Boolean} Whether to render {{#crossLink "Geometry"}}Geometry{{/crossLink}} backfaces.
  228.  @param [cfg.preset] {String} Selects a preset EmphasisMaterial configuration - see {{#crossLink "EmphasisMaterial/preset:method"}}EmphasisMaterial#preset(){{/crossLink}}.
  229.  */
  230.  
  231. import {Material} from './material.js';
  232. import {State} from '../renderer/state.js';
  233. import {componentClasses} from "./../componentClasses.js";
  234.  
  235. const PRESETS = {
  236.     "default": {
  237.         edges: true,
  238.         edgeColor: [0.2, 0.2, 0.2],
  239.         edgeAlpha: 0.5,
  240.         edgeWidth: 1,
  241.         vertices: false,
  242.         vertexColor: [0.4, 0.4, 0.4],
  243.         vertexAlpha: 0.7,
  244.         vertexSize: 4.0,
  245.         fill: true,
  246.         fillColor: [0.4, 0.4, 0.4],
  247.         fillAlpha: 0.2
  248.     },
  249.     "defaultWhiteBG": {
  250.         edgeColor: [0.2, 0.2, 0.2],
  251.         edgeAlpha: 1.0,
  252.         edgeWidth: 1,
  253.         vertices: false,
  254.         vertexColor: [0.4, 0.4, 0.4],
  255.         vertexAlpha: 0.7,
  256.         vertexSize: 4.0,
  257.         fill: true,
  258.         fillColor: [1, 1, 1],
  259.         fillAlpha: 0.6
  260.     },
  261.     "defaultLightBG": {
  262.         edges: true,
  263.         edgeColor: [0.2, 0.2, 0.2],
  264.         edgeAlpha: 0.5,
  265.         edgeWidth: 1,
  266.         vertices: false,
  267.         vertexColor: [0.4, 0.4, 0.4],
  268.         vertexAlpha: 0.7,
  269.         vertexSize: 4.0,
  270.         fill: true,
  271.         fillColor: [0.4, 0.4, 0.4],
  272.         fillAlpha: 0.2
  273.     },
  274.     "defaultDarkBG": {
  275.         edges: true,
  276.         edgeColor: [0.5, 0.5, 0.5],
  277.         edgeAlpha: 0.5,
  278.         edgeWidth: 1,
  279.         vertices: false,
  280.         vertexColor: [0.4, 0.4, 0.4],
  281.         vertexAlpha: 0.7,
  282.         vertexSize: 4.0,
  283.         fill: true,
  284.         fillColor: [0.4, 0.4, 0.4],
  285.         fillAlpha: 0.2
  286.     },
  287.     "phosphorous": {
  288.         edges: true,
  289.         edgeColor: [0.9, 0.9, 0.9],
  290.         edgeAlpha: 0.5,
  291.         edgeWidth: 2,
  292.         vertices: false,
  293.         vertexColor: [0.4, 0.4, 0.4],
  294.         vertexAlpha: 0.7,
  295.         vertexSize: 1.0,
  296.         fill: true,
  297.         fillColor: [0.0, 0.0, 0.0],
  298.         fillAlpha: 0.4
  299.     },
  300.     "sunset": {
  301.         edges: true,
  302.         edgeColor: [0.9, 0.9, 0.9],
  303.         edgeAlpha: 0.5,
  304.         edgeWidth: 1,
  305.         vertices: false,
  306.         vertexColor: [0.4, 0.4, 0.4],
  307.         vertexAlpha: 0.7,
  308.         vertexSize: 1.0,
  309.         fill: true,
  310.         fillColor: [0.9, 0.9, 0.6],
  311.         fillAlpha: 0.2
  312.     },
  313.     "vectorscope": {
  314.         edges: true,
  315.         edgeColor: [0.2, 1.0, 0.2],
  316.         edgeAlpha: 1,
  317.         edgeWidth: 2,
  318.         vertices: true,
  319.         vertexColor: [0.7, 1.0, 0.7],
  320.         vertexAlpha: 0.9,
  321.         vertexSize: 8.0,
  322.         fill: true,
  323.         fillColor: [0.0, 0.0, 0.0],
  324.         fillAlpha: 0.7
  325.     },
  326.     "battlezone": {
  327.         edges: true,
  328.         edgeColor: [0.2, 1.0, 0.2],
  329.         edgeAlpha: 1,
  330.         edgeWidth: 3,
  331.         vertices: false,
  332.         vertexColor: [0.8, 1.0, 0.8],
  333.         vertexAlpha: 0.9,
  334.         vertexSize: 8.0,
  335.         fill: true,
  336.         fillColor: [0.0, 0.0, 0.0],
  337.         fillAlpha: 1.0
  338.     },
  339.     "sepia": {
  340.         edges: true,
  341.         edgeColor: [0.529411792755127, 0.4577854573726654, 0.4100345969200134],
  342.         edgeAlpha: 1.0,
  343.         edgeWidth: 1,
  344.         vertices: false,
  345.         vertexColor: [0.7, 1.0, 0.7],
  346.         vertexAlpha: 0.9,
  347.         vertexSize: 4.0,
  348.         fill: true,
  349.         fillColor: [0.970588207244873, 0.7965892553329468, 0.6660899519920349],
  350.         fillAlpha: 0.4
  351.     },
  352.     "yellowHighlight": {
  353.         edges: true,
  354.         edgeColor: [0.529411792755127, 0.4577854573726654, 0.4100345969200134],
  355.         edgeAlpha: 1.0,
  356.         edgeWidth: 1,
  357.         vertices: false,
  358.         vertexColor: [0.7, 1.0, 0.7],
  359.         vertexAlpha: 0.9,
  360.         vertexSize: 4.0,
  361.         fill: true,
  362.         fillColor: [1.0, 1.0, 0.0],
  363.         fillAlpha: 0.5
  364.     },
  365.     "greenSelected": {
  366.         edges: true,
  367.         edgeColor: [0.4577854573726654, 0.529411792755127, 0.4100345969200134],
  368.         edgeAlpha: 1.0,
  369.         edgeWidth: 1,
  370.         vertices: false,
  371.         vertexColor: [0.7, 1.0, 0.7],
  372.         vertexAlpha: 0.9,
  373.         vertexSize: 4.0,
  374.         fill: true,
  375.         fillColor: [0.0, 1.0, 0.0],
  376.         fillAlpha: 0.5
  377.     },
  378.     "gamegrid": {
  379.         edges: true,
  380.         edgeColor: [0.4, 0.4, 1.6],
  381.         edgeAlpha: 0.8,
  382.         edgeWidth: 3,
  383.         vertices: false,
  384.         vertexColor: [0.7, 1.0, 0.7],
  385.         vertexAlpha: 0.9,
  386.         vertexSize: 4.0,
  387.         fill: true,
  388.         fillColor: [0.2, 0.2, 0.7],
  389.         fillAlpha: 0.9
  390.     }
  391. };
  392.  
  393. const type = "xeogl.EmphasisMaterial";
  394.  
  395. class EmphasisMaterial extends Material {
  396.  
  397.     /**
  398.      Available EmphasisMaterial presets.
  399.  
  400.      @property presets
  401.      @type {Object}
  402.      @static
  403.      */
  404.     static get presets() {
  405.         return PRESETS;
  406.     };
  407.  
  408.     /**
  409.      JavaScript class name for this Component.
  410.  
  411.      For example: "xeogl.AmbientLight", "xeogl.MetallicMaterial" etc.
  412.  
  413.      @property type
  414.      @type String
  415.      @final
  416.      */
  417.     get type() {
  418.         return type;
  419.     }
  420.  
  421.     init(cfg) {
  422.  
  423.         super.init(cfg);
  424.  
  425.         this._state = new State({
  426.             type: "EmphasisMaterial",
  427.             edges: null,
  428.             edgeColor: null,
  429.             edgeAlpha: null,
  430.             edgeWidth: null,
  431.             vertices: null,
  432.             vertexColor: null,
  433.             vertexAlpha: null,
  434.             vertexSize: null,
  435.             fill: null,
  436.             fillColor: null,
  437.             fillAlpha: null,
  438.             backfaces: true
  439.         });
  440.  
  441.         this._preset = "default";
  442.  
  443.         if (cfg.preset) { // Apply preset then override with configs where provided
  444.             this.preset = cfg.preset;
  445.             if (cfg.edges !== undefined) {
  446.                 this.edges = cfg.edges;
  447.             }
  448.             if (cfg.edgeColor)  {
  449.                 this.edgeColor = cfg.edgeColor;
  450.             }
  451.             if (cfg.edgeAlpha !== undefined) {
  452.                 this.edgeAlpha = cfg.edgeAlpha;
  453.             }
  454.             if (cfg.edgeWidth !== undefined) {
  455.                 this.edgeWidth = cfg.edgeWidth;
  456.             }
  457.             if (cfg.vertices !== undefined) {
  458.                 this.vertices = cfg.vertices;
  459.             }
  460.             if (cfg.vertexColor) {
  461.                 this.vertexColor = cfg.vertexColor;
  462.             }
  463.             if (cfg.vertexAlpha !== undefined) {
  464.                 this.vertexAlpha = cfg.vertexAlpha;
  465.             }
  466.             if (cfg.vertexSize) {
  467.                 this.vertexSize = cfg.vertexSize;
  468.             }
  469.             if (cfg.fill !== undefined) {
  470.                 this.fill = cfg.fill;
  471.             }
  472.             if (cfg.fillColor) {
  473.                 this.fillColor = cfg.fillColor;
  474.             }
  475.             if (cfg.fillAlpha !== undefined) {
  476.                 this.fillAlpha = cfg.fillAlpha;
  477.             }
  478.             if (cfg.backfaces !== undefined) {
  479.                 this.backfaces = cfg.backfaces;
  480.             }
  481.         } else {
  482.             this.edges = cfg.edges;
  483.             this.edgeColor = cfg.edgeColor;
  484.             this.edgeAlpha = cfg.edgeAlpha;
  485.             this.edgeWidth = cfg.edgeWidth;
  486.             this.vertices = cfg.vertices;
  487.             this.vertexColor = cfg.vertexColor;
  488.             this.vertexAlpha = cfg.vertexAlpha;
  489.             this.vertexSize = cfg.vertexSize;
  490.             this.fill = cfg.fill;
  491.             this.fillColor = cfg.fillColor;
  492.             this.fillAlpha = cfg.fillAlpha;
  493.             this.backfaces = cfg.backfaces;
  494.         }
  495.     }
  496.  
  497.  
  498.     /**
  499.      Indicates whether or not ghost edges are visible.
  500.  
  501.      @property edges
  502.      @default true
  503.      @type Boolean
  504.      */
  505.     set edges(value) {
  506.         value = value !== false;
  507.         if (this._state.edges === value) {
  508.             return;
  509.         }
  510.         this._state.edges = value;
  511.         this._renderer.imageDirty();
  512.     }
  513.  
  514.     get edges() {
  515.         return this._state.edges;
  516.     }
  517.  
  518.     /**
  519.      RGB color of ghost edges.
  520.  
  521.      @property edgeColor
  522.      @default [0.2, 0.2, 0.2]
  523.      @type Float32Array
  524.      */
  525.     set edgeColor(value) {
  526.         let edgeColor = this._state.edgeColor;
  527.         if (!edgeColor) {
  528.             edgeColor = this._state.edgeColor = new Float32Array(3);
  529.         } else if (value && edgeColor[0] === value[0] && edgeColor[1] === value[1] && edgeColor[2] === value[2]) {
  530.             return;
  531.         }
  532.         if (value) {
  533.             edgeColor[0] = value[0];
  534.             edgeColor[1] = value[1];
  535.             edgeColor[2] = value[2];
  536.         } else {
  537.             edgeColor[0] = 0.2;
  538.             edgeColor[1] = 0.2;
  539.             edgeColor[2] = 0.2;
  540.         }
  541.         this._renderer.imageDirty();
  542.     }
  543.  
  544.     get edgeColor() {
  545.         return this._state.edgeColor;
  546.     }
  547.  
  548.     /**
  549.      Transparency of ghost edges.
  550.  
  551.      A value of 0.0 indicates fully transparent, 1.0 is fully opaque.
  552.  
  553.      @property edgeAlpha
  554.      @default 0.5
  555.      @type Number
  556.      */
  557.     set edgeAlpha(value) {
  558.         value = (value !== undefined && value !== null) ? value : 0.5;
  559.         if (this._state.edgeAlpha === value) {
  560.             return;
  561.         }
  562.         this._state.edgeAlpha = value;
  563.         this._renderer.imageDirty();
  564.     }
  565.  
  566.     get edgeAlpha() {
  567.         return this._state.edgeAlpha;
  568.     }
  569.  
  570.     /**
  571.      Width of ghost edges, in pixels.
  572.  
  573.      @property edgeWidth
  574.      @default 1.0
  575.      @type Number
  576.      */
  577.     set edgeWidth(value) {
  578.         this._state.edgeWidth = value || 1.0;
  579.         this._renderer.imageDirty();
  580.     }
  581.  
  582.     get edgeWidth() {
  583.         return this._state.edgeWidth;
  584.     }
  585.  
  586.     /**
  587.      Indicates whether or not ghost vertices are visible.
  588.  
  589.      @property vertices
  590.      @default false
  591.      @type Boolean
  592.      */
  593.     set vertices(value) {
  594.         value = !!value;
  595.         if (this._state.vertices === value) {
  596.             return;
  597.         }
  598.         this._state.vertices = value;
  599.         this._renderer.imageDirty();
  600.     }
  601.  
  602.     get vertices() {
  603.         return this._state.vertices;
  604.     }
  605.  
  606.     /**
  607.      Color of ghost vertices.
  608.  
  609.      @property vertexColor
  610.      @default [0.4,0.4,0.4]
  611.      @type Float32Array
  612.      */
  613.     set vertexColor(value) {
  614.         let vertexColor = this._state.vertexColor;
  615.         if (!vertexColor) {
  616.             vertexColor = this._state.vertexColor = new Float32Array(3);
  617.         } else if (value && vertexColor[0] === value[0] && vertexColor[1] === value[1] && vertexColor[2] === value[2]) {
  618.             return;
  619.         }
  620.         if (value) {
  621.             vertexColor[0] = value[0];
  622.             vertexColor[1] = value[1];
  623.             vertexColor[2] = value[2];
  624.         } else {
  625.             vertexColor[0] = 0.4;
  626.             vertexColor[1] = 0.4;
  627.             vertexColor[2] = 0.4;
  628.         }
  629.         this._renderer.imageDirty();
  630.     }
  631.  
  632.     get vertexColor() {
  633.         return this._state.vertexColor;
  634.     }
  635.  
  636.     /**
  637.      Transparency of ghost vertices.
  638.  
  639.      A value of 0.0 indicates fully transparent, 1.0 is fully opaque.
  640.  
  641.      @property vertexAlpha
  642.      @default 0.7
  643.      @type Number
  644.      */
  645.     set vertexAlpha(value) {
  646.         value = (value !== undefined && value !== null) ? value : 0.7;
  647.         if (this._state.vertexAlpha === value) {
  648.             return;
  649.         }
  650.         this._state.vertexAlpha = value;
  651.         this._renderer.imageDirty();
  652.     }
  653.  
  654.     get vertexAlpha() {
  655.         return this._state.vertexAlpha;
  656.     }
  657.  
  658.     /**
  659.      Pixel size of ghost vertices.
  660.  
  661.      @property vertexSize
  662.      @default 4.0
  663.      @type Number
  664.      */
  665.     set vertexSize(value) {
  666.         this._state.vertexSize = value || 4.0;
  667.         this._renderer.imageDirty();
  668.     }
  669.  
  670.     get vertexSize() {
  671.         return this._state.vertexSize;
  672.     }
  673.  
  674.     /**
  675.      Indicates whether or not ghost surfaces are filled with color.
  676.  
  677.      @property fill
  678.      @default true
  679.      @type Boolean
  680.      */
  681.     set fill(value) {
  682.         value = value !== false;
  683.         if (this._state.fill === value) {
  684.             return;
  685.         }
  686.         this._state.fill = value;
  687.         this._renderer.imageDirty();
  688.     }
  689.  
  690.     get fill() {
  691.         return this._state.fill;
  692.     }
  693.  
  694.     /**
  695.      RGB color of filled ghost faces.
  696.  
  697.      @property fillColor
  698.      @default [0.4, 0.4, 0.4]
  699.      @type Float32Array
  700.      */
  701.     set fillColor(value) {
  702.         let fillColor = this._state.fillColor;
  703.         if (!fillColor) {
  704.             fillColor = this._state.fillColor = new Float32Array(3);
  705.         } else if (value && fillColor[0] === value[0] && fillColor[1] === value[1] && fillColor[2] === value[2]) {
  706.             return;
  707.         }
  708.         if (value) {
  709.             fillColor[0] = value[0];
  710.             fillColor[1] = value[1];
  711.             fillColor[2] = value[2];
  712.         } else {
  713.             fillColor[0] = 0.4;
  714.             fillColor[1] = 0.4;
  715.             fillColor[2] = 0.4;
  716.         }
  717.         this._renderer.imageDirty();
  718.     }
  719.  
  720.     get fillColor() {
  721.         return this._state.fillColor;
  722.     }
  723.  
  724.     /**
  725.      Transparency of filled ghost faces.
  726.  
  727.      A value of 0.0 indicates fully transparent, 1.0 is fully opaque.
  728.  
  729.      @property fillAlpha
  730.      @default 0.2
  731.      @type Number
  732.      */
  733.     set fillAlpha(value) {
  734.         value = (value !== undefined && value !== null) ? value : 0.2;
  735.         if (this._state.fillAlpha === value) {
  736.             return;
  737.         }
  738.         this._state.fillAlpha = value;
  739.         this._renderer.imageDirty();
  740.     }
  741.  
  742.     get fillAlpha() {
  743.         return this._state.fillAlpha;
  744.     }
  745.  
  746.     /**
  747.      Whether backfaces are visible on attached {{#crossLink "Mesh"}}Meshes{{/crossLink}}.
  748.  
  749.      The backfaces will belong to {{#crossLink "Geometry"}}{{/crossLink}} components that are also attached to
  750.      the {{#crossLink "Mesh"}}Meshes{{/crossLink}}.
  751.  
  752.      @property backfaces
  753.      @default false
  754.      @type Boolean
  755.      */
  756.     set backfaces(value) {
  757.         value = !!value;
  758.         if (this._state.backfaces === value) {
  759.             return;
  760.         }
  761.         this._state.backfaces = value;
  762.         this._renderer.imageDirty();
  763.     }
  764.  
  765.     get backfaces() {
  766.         return this._state.backfaces;
  767.     }
  768.  
  769.     /**
  770.      Selects a preset EmphasisMaterial configuration.
  771.  
  772.      Available presets are:
  773.  
  774.      * "default" - grey wireframe with translucent fill, for light backgrounds.
  775.      * "defaultLightBG" - grey wireframe with grey translucent fill, for light backgrounds.
  776.      * "defaultDarkBG" - grey wireframe with grey translucent fill, for dark backgrounds.
  777.      * "vectorscope" - green wireframe with glowing vertices and black translucent fill.
  778.      * "battlezone" - green wireframe with black opaque fill, giving a solid hidden-lines-removed effect.
  779.      * "sepia" - light red-grey wireframe with light sepia translucent fill - easy on the eyes.
  780.      * "gamegrid" - light blue wireframe with dark blue translucent fill - reminiscent of Tron.
  781.      * "yellowHighlight" - light yellow translucent fill - highlights while allowing underlying detail to show through.
  782.  
  783.      @property preset
  784.      @default "default"
  785.      @type String
  786.      */
  787.     set preset(value) {
  788.         value = value || "default";
  789.         if (this._preset === value) {
  790.             return;
  791.         }
  792.         const preset = PRESETS[value];
  793.         if (!preset) {
  794.             this.error("unsupported preset: '" + value + "' - supported values are " + Object.keys(PRESETS).join(", "));
  795.             return;
  796.         }
  797.         this.edges = preset.edges;
  798.         this.edgeColor = preset.edgeColor;
  799.         this.edgeAlpha = preset.edgeAlpha;
  800.         this.edgeWidth = preset.edgeWidth;
  801.         this.vertices = preset.vertices;
  802.         this.vertexColor = preset.vertexColor;
  803.         this.vertexAlpha = preset.vertexAlpha;
  804.         this.vertexSize = preset.vertexSize;
  805.         this.fill = preset.fill;
  806.         this.fillColor = preset.fillColor;
  807.         this.fillAlpha = preset.fillAlpha;
  808.         this._preset = value;
  809.     }
  810.  
  811.     get preset() {
  812.         return this._preset;
  813.     }
  814.  
  815.     destroy() {
  816.         super.destroy();
  817.         this._state.destroy();
  818.     }
  819. }
  820.  
  821. componentClasses[type] = EmphasisMaterial;
  822.  
  823. export {EmphasisMaterial};
  824.