import {PhongMaterial} from '@xeokit/xeokit-sdk/src/viewer/scene/materials/PhongMaterial.js'

public class | source

PhongMaterial

Extends:

Component → Material → 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, Mesh, buildTorusGeometry,
    ReadableGeometry, PhongMaterial, Texture, Fresnel} from "xeokit-sdk.es.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	alpha: Number Sets the PhongMaterial alpha.
public get	alpha: Number Gets the PhongMaterial alpha.
public set	alphaCutoff: Number 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	alphaCutoff: Number Gets the PhongMaterial's alpha cutoff value.
public get	alphaFresnel: Fresnel Gets the PhongMaterials's alpha Fresnel. Applies to PhongMaterial#alpha.
public get	alphaMap: Texture Gets the PhongMaterials's alpha Texture. Multiplies by PhongMaterial#alpha.
public set	alphaMode: String 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 get	alphaMode: String Gets the PhongMaterial's alpha rendering mode.
public set	ambient: Number[] Sets the PhongMaterial's ambient color. Default value is `[0.3, 0.3, 0.3]`.
public get	ambient: Number[] Gets the PhongMaterial's ambient color. Default value is `[0.3, 0.3, 0.3]`.
public get	ambientMap: Texture Gets the PhongMaterials's ambient Texture. Multiplies by PhongMaterial#ambient.
public set	backfaces: Boolean Sets whether backfaces are visible on attached Meshes.
public get	backfaces: Boolean Gets whether backfaces are visible on attached Meshes.
public set	diffuse: Number[] Sets the PhongMaterial's diffuse color. Multiplies by PhongMaterial#diffuseMap. Default value is `[1.0, 1.0, 1.0]`.
public get	diffuse: Number[] Sets the PhongMaterial's diffuse color. Multiplies by PhongMaterial#diffuseMap. Default value is `[1.0, 1.0, 1.0]`.
public get	diffuseFresnel: Fresnel Gets the PhongMaterials's diffuse Fresnel. Applies to PhongMaterial#diffuse.
public get	diffuseMap: Texture Gets the PhongMaterials's diffuse Texture. Multiplies by PhongMaterial#diffuse.
public set	emissive: Number[] Sets the PhongMaterial's emissive color. Multiplies by PhongMaterial#emissiveMap. Default value is `[0.0, 0.0, 0.0]`.
public get	emissive: Number[] Gets the PhongMaterial's emissive color. Multiplies by PhongMaterial#emissiveMap. Default value is `[0.0, 0.0, 0.0]`.
public get	emissiveFresnel: Fresnel Gets the PhongMaterials's emissive Fresnel. Applies to PhongMaterial#emissive.
public get	emissiveMap: Texture Gets the PhongMaterials's emissive Texture. Multiplies by PhongMaterial#emissive.
public set	frontface: String Sets the winding direction of geometry front faces.
public get	frontface: String Gets the winding direction of front faces on attached Meshes.
public set	lineWidth: Number Sets the PhongMaterial's line width. This is not supported by WebGL implementations based on DirectX [2019]. Default value is `1.0`.
public get	lineWidth: Number Gets 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 Gets the PhongMaterials's normal map Texture.
public get	occlusionMap: Texture Gets the PhongMaterials's ambient occlusion Texture.
public set	pointSize: Number Sets the PhongMaterial's point size. Default value is 1.0.
public get	pointSize: Number Gets the PhongMaterial's point size. Default value is 1.0.
public set	reflectivity: Number Sets how much ReflectionMap is reflected by this PhongMaterial.
public get	reflectivity: Number Gets how much ReflectionMap is reflected by this PhongMaterial.
public get	reflectivityFresnel: Fresnel Gets the PhongMaterials's reflectivity Fresnel. Applies to PhongMaterial#reflectivity.
public get	reflectivityMap: Texture Gets the PhongMaterials's reflectivity Texture. Multiplies by PhongMaterial#reflectivity.
public set	shininess: Number Sets the PhongMaterial shininess.
public get	shininess: Number Gets the PhongMaterial shininess.
public set	specular: Number[] Sets the PhongMaterial's specular color. Multiplies by PhongMaterial#specularMap. Default value is `[1.0, 1.0, 1.0]`.
public get	specular: Number[] Gets the PhongMaterial's specular color. Multiplies by PhongMaterial#specularMap. Default value is `[1.0, 1.0, 1.0]`.
public get	specularFresnel: Fresnel Gets the PhongMaterials's specular Fresnel. Applies to PhongMaterial#specular.
public get	specularMap: Texture Gets the PhongMaterials's specular Texture. Multiplies by PhongMaterial#specular.

Method Summary

Public Methods
public	destroy() Destroys this PhongMaterial.

Inherited Summary

From class Component
public get	owner: Component The Component that owns the lifecycle of this Component, if any.
public	destroyed: Boolean True as soon as this Component has been destroyed
public	id: String \| Number ID of this Component, unique within the Scene.
public	meta: * Arbitrary, user-defined metadata on this component.
public	scene: Scene The parent Scene that contains this Component.
public	viewer: Viewer The viewer that contains this Scene.
public	clear() Destroys all Components that are owned by this.
public	destroy() 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	hasSubs(event: String): Boolean 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	destroy()

Public Constructors

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

Override:

Material#constructor

Params:

Name	Type	Attribute	Description
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 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 alphaCutoff: Number source

Gets the PhongMaterial's alpha cutoff value.

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 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 get alphaMode: String source

Gets the PhongMaterial's alpha rendering mode.

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 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 backfaces: Boolean source

Gets whether backfaces are visible on attached Meshes.

Default is false.

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 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 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 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 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.

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