Chapter 03Colors and Textures

What do you want displayed on the facet? Color texture?

In the section titled Understanding Meshes we

What is a Material

“Materials are an encapsulation on top of shaders. They provide a simple way to configure and share shaders”

First time material is created, its effect property is initialized.

An effect, defined in effect.ts, is an object that holds a vertex and fragment shader.

The shaders are compiled from plain text to GPU machine code and are cached. They are compiled when meshes using the materials are first rendered, when the material has changed and a mesh using the material is rendered, or when the compilation is forced by calling material.forceCompilation.

Materials need lighting in order for them to produce a material effect.

Materials can be shared by multiple meshes.

Materials can have color and texture.

Material Classes

Vertex Shaders (vertex.fx)

Fragment Shaders (fragment.fx)

Texture Classes

ProceduralTexture Classes

Defined in dist/materialsLibrary

Other Material Classes

Procedural Textures

“Procedural texturing is a way to programmatically create a texture. There are 2 types of procedural textures: code-only, and code that references some classic 2D images, sometimes calmpler’ images. This is the base class of any Procedural texture and contains most of the shareable code.”

Procedural textures defined in dist/proceduralTextures

Addtional Procedural Textures referenced in

How To Create a Procedureal Texture for the Procedural Textures Library

StandardMaterial Properties

Lighting and Color


Do you want backside of facet rendered? By default, the backfaces are culled (not rendered). If you want them rendered, set material.backFaceCulling = false.



Applying Different Material to Front and Back


Rendering Process

4 Categories of Meshes





Physically Based Rendering (PBR)

Procedural Textures