Reference Source
public class | source

PhongMaterial

Extends:

ComponentMaterial → PhongMaterial

Configures the normal rendered appearance of Meshes using the non-physically-correct Blinn-Phong shading model.

  • Useful for non-realistic objects like gizmos.
  • SpecularMaterial is best for insulators, such as wood, ceramics and plastic.
  • MetallicMaterial is best for conductive materials, such as metal.
  • LambertMaterial is appropriate for high-detail models that need to render as efficiently as possible.

Usage

In the example below, we'll create a Mesh with a PhongMaterial with a diffuse Texture and a specular Fresnel, using a buildTorusGeometry to create the Geometry.

[Run this example]

import {Viewer} from "../src/viewer/Viewer.js";
import {Mesh} from "../src/scene/mesh/Mesh.js";
import {buildTorusGeometry} from "../src/scene/geometry/builders/buildTorusGeometry.js";
import {ReadableGeometry} from "../src/scene/geometry/ReadableGeometry.js";
import {PhongMaterial} from "../src/scene/materials/PhongMaterial.js";
import {Texture} from "../src/scene/materials/Texture.js";
import {Fresnel} from "../src/scene/materials/Fresnel.js";

const viewer = new Viewer({
       canvasId: "myCanvas"
   });

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, buildTorusGeometry({
         center: [0, 0, 0],
         radius: 1.5,
         tube: 0.5,
         radialSegments: 32,
         tubeSegments: 24,
         arc: Math.PI * 2.0
     }),
     material: new PhongMaterial(viewer.scene, {
         ambient: [0.9, 0.3, 0.9],
         shininess: 30,
         diffuseMap: new Texture(viewer.scene, {
             src: "textures/diffuse/uvGrid2.jpg"
         }),
         specularFresnel: new Fresnel(viewer.scene, {
             leftColor: [1.0, 1.0, 1.0],
             rightColor: [0.0, 0.0, 0.0],
             power: 4
         })
    })
});

PhongMaterial Properties

The following table summarizes PhongMaterial properties:

Property Type Range Default Value Space Description
PhongMaterial#ambient Array [0, 1] for all components [1,1,1,1] linear The RGB components of the ambient light reflected by the material.
PhongMaterial#diffuse Array [0, 1] for all components [1,1,1,1] linear The RGB components of the diffuse light reflected by the material.
PhongMaterial#specular Array [0, 1] for all components [1,1,1,1] linear The RGB components of the specular light reflected by the material.
PhongMaterial#emissive Array [0, 1] for all components [0,0,0] linear The RGB components of the light emitted by the material.
PhongMaterial#alpha Number [0, 1] 1 linear The transparency of the material surface (0 fully transparent, 1 fully opaque).
PhongMaterial#shininess Number [0, 128] 80 linear Determines the size and sharpness of specular highlights.
PhongMaterial#reflectivity Number [0, 1] 1 linear Determines the amount of reflectivity.
PhongMaterial#diffuseMap Texture null sRGB Texture RGB components multiplying by PhongMaterial#diffuse. If the fourth component (A) is present, it multiplies by PhongMaterial#alpha.
PhongMaterial#specularMap Texture null sRGB Texture RGB components multiplying by PhongMaterial#specular. If the fourth component (A) is present, it multiplies by PhongMaterial#alpha.
PhongMaterial#emissiveMap Texture null linear Texture with RGB components multiplying by PhongMaterial#emissive.
PhongMaterial#alphaMap Texture null linear Texture with first component multiplying by PhongMaterial#alpha.
PhongMaterial#occlusionMap Texture null linear Ambient occlusion texture multiplying by PhongMaterial#ambient, PhongMaterial#diffuse and PhongMaterial#specular.
PhongMaterial#normalMap Texture null linear Tangent-space normal map.
PhongMaterial#diffuseFresnel Fresnel null Fresnel term applied to PhongMaterial#diffuse.
PhongMaterial#specularFresnel Fresnel null Fresnel term applied to PhongMaterial#specular.
PhongMaterial#emissiveFresnel Fresnel null Fresnel term applied to PhongMaterial#emissive.
PhongMaterial#reflectivityFresnel Fresnel null Fresnel term applied to PhongMaterial#reflectivity.
PhongMaterial#alphaFresnel Fresnel null Fresnel term applied to PhongMaterial#alpha.
PhongMaterial#lineWidth Number [0..100] 1 Line width in pixels.
PhongMaterial#pointSize Number [0..100] 1 Point size in pixels.
PhongMaterial#alphaMode String "opaque", "blend", "mask" "blend" Alpha blend mode.
PhongMaterial#alphaCutoff Number [0..1] 0.5 Alpha cutoff value.
PhongMaterial#backfaces Boolean false Whether to render geometry backfaces.
PhongMaterial#frontface String "ccw", "cw" "ccw" The winding order for geometry frontfaces - "cw" for clockwise, or "ccw" for counter-clockwise.

Constructor Summary

Public Constructor
public

constructor(owner: Component, cfg: *)

Member Summary

Public Members
public set

Sets the PhongMaterial alpha.

public get

Gets the PhongMaterial alpha.

public get

Gets the PhongMaterial's alpha cutoff value.

public set

Sets the PhongMaterial's alpha cutoff value.

This specifies the cutoff threshold when PhongMaterial#alphaMode equals "mask". If the alpha is greater than or equal to this value then it is rendered as fully opaque, otherwise, it is rendered as fully transparent. A value greater than 1.0 will render the entire material as fully transparent. This value is ignored for other modes.

Alpha is the combined result of PhongMaterial#alpha and PhongMaterial#alphaMap.

Default value is 0.5.

public get

Gets the PhongMaterials's alpha Fresnel.

Applies to PhongMaterial#alpha.

public get

Gets the PhongMaterials's alpha Texture.

Multiplies by PhongMaterial#alpha.

public get

Gets the PhongMaterial's alpha rendering mode.

public set

Sets the PhongMaterial's alpha rendering mode.

This governs how alpha is treated. Alpha is the combined result of PhongMaterial#alpha and PhongMaterial#alphaMap.

Supported values are:

  • "opaque" - The alpha value is ignored and the rendered output is fully opaque (default).
  • "mask" - The rendered output is either fully opaque or fully transparent depending on the alpha value and the specified alpha cutoff value.
  • "blend" - The alpha value is used to composite the source and destination areas. The rendered output is combined with the background using the normal painting operation (i.e. the Porter and Duff over operator).
public set

Sets the PhongMaterial's ambient color.

Default value is [0.3, 0.3, 0.3].

public get

Gets the PhongMaterial's ambient color.

Default value is [0.3, 0.3, 0.3].

public get

Gets the PhongMaterials's ambient Texture.

Multiplies by PhongMaterial#ambient.

public get

Gets whether backfaces are visible on attached Meshes.

public set

Sets whether backfaces are visible on attached Meshes.

public get

Sets the PhongMaterial's diffuse color.

Multiplies by PhongMaterial#diffuseMap.

Default value is [1.0, 1.0, 1.0].

public set

Sets the PhongMaterial's diffuse color.

Multiplies by PhongMaterial#diffuseMap.

Default value is [1.0, 1.0, 1.0].

public get

Gets the PhongMaterials's diffuse Fresnel.

Applies to PhongMaterial#diffuse.

public get

Gets the PhongMaterials's diffuse Texture.

Multiplies by PhongMaterial#diffuse.

public set

Sets the PhongMaterial's emissive color.

Multiplies by PhongMaterial#emissiveMap.

Default value is [0.0, 0.0, 0.0].

public get

Gets the PhongMaterial's emissive color.

Multiplies by PhongMaterial#emissiveMap.

Default value is [0.0, 0.0, 0.0].

public get

Gets the PhongMaterials's emissive Fresnel.

Applies to PhongMaterial#emissive.

public get

Gets the PhongMaterials's emissive Texture.

Multiplies by PhongMaterial#emissive.

public set

Sets the winding direction of geometry front faces.

public get

Gets the winding direction of front faces on attached Meshes.

public get

Gets the PhongMaterial's line width.

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

Default value is 1.0.

public set

Sets the PhongMaterial's line width.

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

Default value is 1.0.

public get

Gets the PhongMaterials's normal map Texture.

public get

Gets the PhongMaterials's ambient occlusion Texture.

public set

Sets the PhongMaterial's point size.

Default value is 1.0.

public get

Gets the PhongMaterial's point size.

Default value is 1.0.

public set

Sets how much ReflectionMap is reflected by this PhongMaterial.

public get

Gets how much ReflectionMap is reflected by this PhongMaterial.

public get

Gets the PhongMaterials's reflectivity Fresnel.

Applies to PhongMaterial#reflectivity.

public get

Gets the PhongMaterials's reflectivity Texture.

Multiplies by PhongMaterial#reflectivity.

public set

Sets the PhongMaterial shininess.

public get

Gets the PhongMaterial shininess.

public set

Sets the PhongMaterial's specular color.

Multiplies by PhongMaterial#specularMap. Default value is [1.0, 1.0, 1.0].

public get

Gets the PhongMaterial's specular color.

Multiplies by PhongMaterial#specularMap. Default value is [1.0, 1.0, 1.0].

public get

Gets the PhongMaterials's specular Fresnel.

Applies to PhongMaterial#specular.

public get

Gets the PhongMaterials's specular Texture.

Multiplies by PhongMaterial#specular.

Method Summary

Public Methods
public

Destroys this PhongMaterial.

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

viewer: *

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

cfg.id String
  • optional

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

cfg.ambient Number[]
  • optional
  • default: [1.0, 1.0, 1.0 ]

PhongMaterial ambient color.

cfg.diffuse Number[]
  • optional
  • default: [ 1.0, 1.0, 1.0 ]

PhongMaterial diffuse color.

cfg.specular Number[]
  • optional
  • default: [ 1.0, 1.0, 1.0 ]

PhongMaterial specular color.

cfg.emissive Number[]
  • optional
  • default: [ 0.0, 0.0, 0.0 ]

PhongMaterial emissive color.

cfg.alpha Number
  • optional
  • default: 1

Scalar in range 0-1 that controls alpha, where 0 is completely transparent and 1 is completely opaque.

cfg.shininess Number
  • optional
  • default: 80

Scalar in range 0-128 that determines the size and sharpness of specular highlights.

cfg.reflectivity Number
  • optional
  • default: 1

Scalar in range 0-1 that controls how much ReflectionMap is reflected.

cfg.lineWidth Number
  • optional
  • default: 1

Scalar that controls the width of lines.

cfg.pointSize Number
  • optional
  • default: 1

Scalar that controls the size of points.

cfg.ambientMap Texture
  • optional
  • default: null

A ambient map Texture, which will multiply by the diffuse property. Must be within the same Scene as this PhongMaterial.

cfg.diffuseMap Texture
  • optional
  • default: null

A diffuse map Texture, which will override the effect of the diffuse property. Must be within the same Scene as this PhongMaterial.

cfg.specularMap Texture
  • optional
  • default: null

A specular map Texture, which will override the effect of the specular property. Must be within the same Scene as this PhongMaterial.

cfg.emissiveMap Texture
  • optional
  • default: undefined

An emissive map Texture, which will override the effect of the emissive property. Must be within the same Scene as this PhongMaterial.

cfg.normalMap Texture
  • optional
  • default: undefined

A normal map Texture. Must be within the same Scene as this PhongMaterial.

cfg.alphaMap Texture
  • optional
  • default: undefined

An alpha map Texture, which will override the effect of the alpha property. Must be within the same Scene as this PhongMaterial.

cfg.reflectivityMap Texture
  • optional
  • default: undefined

A reflectivity control map Texture, which will override the effect of the reflectivity property. Must be within the same Scene as this PhongMaterial.

cfg.occlusionMap Texture
  • optional
  • default: null

An occlusion map Texture. Must be within the same Scene as this PhongMaterial.

cfg.diffuseFresnel Fresnel
  • optional
  • default: undefined

A diffuse {@link Fresnel"}}Fresnel{{/crossLink}}. Must be within the same Scene as this PhongMaterial.

cfg.specularFresnel Fresnel
  • optional
  • default: undefined

A specular {@link Fresnel"}}Fresnel{{/crossLink}}. Must be within the same Scene as this PhongMaterial.

cfg.emissiveFresnel Fresnel
  • optional
  • default: undefined

An emissive {@link Fresnel"}}Fresnel{{/crossLink}}. Must be within the same Scene as this PhongMaterial.

cfg.alphaFresnel Fresnel
  • optional
  • default: undefined

An alpha {@link Fresnel"}}Fresnel{{/crossLink}}. Must be within the same Scene as this PhongMaterial.

cfg.reflectivityFresnel Fresnel
  • optional
  • default: undefined

A reflectivity {@link Fresnel"}}Fresnel{{/crossLink}}. Must be within the same Scene as this PhongMaterial.

cfg.alphaMode String
  • optional
  • default: "opaque"

The alpha blend mode - accepted values are "opaque", "blend" and "mask". See the PhongMaterial#alphaMode property for more info.

cfg.alphaCutoff Number
  • optional
  • default: 0.5

The alpha cutoff value. See the PhongMaterial#alphaCutoff property for more info.

cfg.backfaces Boolean
  • optional
  • default: false

Whether to render geometry backfaces.

cfg.frontface Boolean
  • optional
  • default: "ccw"

The winding order for geometry front faces - "cw" for clockwise, or "ccw" for counter-clockwise.

Public Members

public set alpha: Number source

Sets the PhongMaterial alpha.

This is a factor in the range [0..1] indicating how transparent the PhongMaterial is.

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

Multiplies by PhongMaterial#alphaMap.

Default value is 1.0.

public get alpha: Number source

Gets the PhongMaterial alpha.

This is a factor in the range [0..1] indicating how transparent the PhongMaterial is.

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

Multiplies by PhongMaterial#alphaMap.

Default value is 1.0.

public get alphaCutoff: Number source

Gets the PhongMaterial's alpha cutoff value.

public set alphaCutoff: Number source

Sets the PhongMaterial's alpha cutoff value.

This specifies the cutoff threshold when PhongMaterial#alphaMode equals "mask". If the alpha is greater than or equal to this value then it is rendered as fully opaque, otherwise, it is rendered as fully transparent. A value greater than 1.0 will render the entire material as fully transparent. This value is ignored for other modes.

Alpha is the combined result of PhongMaterial#alpha and PhongMaterial#alphaMap.

Default value is 0.5.

public get alphaFresnel: Fresnel source

Gets the PhongMaterials's alpha Fresnel.

Applies to PhongMaterial#alpha.

public get alphaMap: Texture source

Gets the PhongMaterials's alpha Texture.

Multiplies by PhongMaterial#alpha.

public get alphaMode: String source

Gets the PhongMaterial's alpha rendering mode.

public set alphaMode: String source

Sets the PhongMaterial's alpha rendering mode.

This governs how alpha is treated. Alpha is the combined result of PhongMaterial#alpha and PhongMaterial#alphaMap.

Supported values are:

  • "opaque" - The alpha value is ignored and the rendered output is fully opaque (default).
  • "mask" - The rendered output is either fully opaque or fully transparent depending on the alpha value and the specified alpha cutoff value.
  • "blend" - The alpha value is used to composite the source and destination areas. The rendered output is combined with the background using the normal painting operation (i.e. the Porter and Duff over operator).

public set ambient: Number[] source

Sets the PhongMaterial's ambient color.

Default value is [0.3, 0.3, 0.3].

public get ambient: Number[] source

Gets the PhongMaterial's ambient color.

Default value is [0.3, 0.3, 0.3].

public get ambientMap: Texture source

Gets the PhongMaterials's ambient Texture.

Multiplies by PhongMaterial#ambient.

public get backfaces: Boolean source

Gets whether backfaces are visible on attached Meshes.

Default is false.

public set backfaces: Boolean source

Sets whether backfaces are visible on attached Meshes.

The backfaces will belong to Geometry compoents that are also attached to the Meshes.

Default is false.

public get diffuse: Number[] source

Sets the PhongMaterial's diffuse color.

Multiplies by PhongMaterial#diffuseMap.

Default value is [1.0, 1.0, 1.0].

public set diffuse: Number[] source

Sets the PhongMaterial's diffuse color.

Multiplies by PhongMaterial#diffuseMap.

Default value is [1.0, 1.0, 1.0].

public get diffuseFresnel: Fresnel source

Gets the PhongMaterials's diffuse Fresnel.

Applies to PhongMaterial#diffuse.

public get diffuseMap: Texture source

Gets the PhongMaterials's diffuse Texture.

Multiplies by PhongMaterial#diffuse.

public set emissive: Number[] source

Sets the PhongMaterial's emissive color.

Multiplies by PhongMaterial#emissiveMap.

Default value is [0.0, 0.0, 0.0].

public get emissive: Number[] source

Gets the PhongMaterial's emissive color.

Multiplies by PhongMaterial#emissiveMap.

Default value is [0.0, 0.0, 0.0].

public get emissiveFresnel: Fresnel source

Gets the PhongMaterials's emissive Fresnel.

Applies to PhongMaterial#emissive.

public get emissiveMap: Texture source

Gets the PhongMaterials's emissive Texture.

Multiplies by PhongMaterial#emissive.

public set frontface: String source

Sets the winding direction of geometry front faces.

Default is "ccw".

public get frontface: String source

Gets the winding direction of front faces on attached Meshes.

Default is "ccw".

public get lineWidth: Number source

Gets the PhongMaterial's line width.

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

Default value is 1.0.

public set lineWidth: Number source

Sets the PhongMaterial's line width.

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

Default value is 1.0.

public get normalMap: Texture source

Gets the PhongMaterials's normal map Texture.

public get occlusionMap: Texture source

Gets the PhongMaterials's ambient occlusion Texture.

public set pointSize: Number source

Sets the PhongMaterial's point size.

Default value is 1.0.

public get pointSize: Number source

Gets the PhongMaterial's point size.

Default value is 1.0.

public set reflectivity: Number source

Sets how much ReflectionMap is reflected by this PhongMaterial.

This is a scalar in range [0-1]. Default value is 1.0.

The surface will be non-reflective when this is 0, and completely mirror-like when it is 1.0.

Multiplies by PhongMaterial#reflectivityMap.

public get reflectivity: Number source

Gets how much ReflectionMap is reflected by this PhongMaterial.

This is a scalar in range [0-1]. Default value is 1.0.

The surface will be non-reflective when this is 0, and completely mirror-like when it is 1.0.

Multiplies by PhongMaterial#reflectivityMap.

public get reflectivityFresnel: Fresnel source

Gets the PhongMaterials's reflectivity Fresnel.

Applies to PhongMaterial#reflectivity.

public get reflectivityMap: Texture source

Gets the PhongMaterials's reflectivity Texture.

Multiplies by PhongMaterial#reflectivity.

public set shininess: Number source

Sets the PhongMaterial shininess.

This is a factor in range [0..128] that determines the size and sharpness of the specular highlights create by this PhongMaterial.

Larger values produce smaller, sharper highlights. A value of 0.0 gives very large highlights that are almost never desirable. Try values close to 10 for a larger, fuzzier highlight and values of 100 or more for a small, sharp highlight.

Default value is 80.0.

public get shininess: Number source

Gets the PhongMaterial shininess.

This is a factor in range [0..128] that determines the size and sharpness of the specular highlights create by this PhongMaterial.

Larger values produce smaller, sharper highlights. A value of 0.0 gives very large highlights that are almost never desirable. Try values close to 10 for a larger, fuzzier highlight and values of 100 or more for a small, sharp highlight.

Default value is 80.0.

public set specular: Number[] source

Sets the PhongMaterial's specular color.

Multiplies by PhongMaterial#specularMap. Default value is [1.0, 1.0, 1.0].

public get specular: Number[] source

Gets the PhongMaterial's specular color.

Multiplies by PhongMaterial#specularMap. Default value is [1.0, 1.0, 1.0].

public get specularFresnel: Fresnel source

Gets the PhongMaterials's specular Fresnel.

Applies to PhongMaterial#specular.

public get specularMap: Texture source

Gets the PhongMaterials's specular Texture.

Multiplies by PhongMaterial#specular.

Public Methods

public destroy() source

Destroys this PhongMaterial.

Override:

Material#destroy