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

• Material

• • MultiMaterial

• • ShaderMaterial

• • PushMaterial

• • • BackgroundMaterial

• • • NodeMaterial

• • • PBRBaseMaterial

• • • • PBRBaseSimpleMaterial

• • • • • PBRMetallicRoughnessMaterial

• • • • • PBRSpecularGlossinessMaterial

• • • • PBRMaterial

• • • StandardMaterial

Vertex Shaders (vertex.fx)

• background Materials/Background/backgroundMaterial.ts

• color Meshes/linesMesh.ts, Rendering/boundingBoxRenderer.ts

• default Materials/standardMaterial.ts

• depth PostProcesses/volumetricLightScatteringPostProcess.ts, Rendering/depthRenderer.ts

• fxaa PostProcesses/fxaaPostProcess.ts

• geometry Rendering/geometryBufferRenderer.ts

• glowMapGeneration Layers/effectLayer.ts

• glowMapMerge Layers/highlightLayer.ts, Layers/glowLayer.ts

• gpuRenderParticles Particles/gpuParticleSystem.ts

• gpuUpdateParticles Particles/gpuParticleSystem.ts

• kernelBlur PostProcesses/blurPostProcess.ts

• layer

• lensFlare

• line

• outline

• particles

• pbr

• postprocess

• procedural

• shadowMap

• sprites

Fragment Shaders (fragment.fx)

• anaglyph

• background

• blackAndWhite

• bloomMerge

• blur

• chromaticAberration

• circleOfConfusion

• color

• colorCorrection

• convolution

• default

• depth

• depthBoxBlur

• depthOfField

• depthOfFieldMerge

• displayPass

• extractHightlights

• filter

• fxaa

• geometry

• glowBlurPostProcess

• glowMapGeneration

• glowMapMerge

• gpuRenderParticles

• gpuUpdateParticles

• grain

• highlights

• imageProcessing

• kernelBlur

• layer

• lensFlare

• lensHighlights

• line

• motionBlur

• noise

• outline

• particles

• pass

• passCube

• pbr

• refraction

• rgbdDecode

• rgbdEncode

• shadowMap

• sharpen

• sprites

• ssao

• ssao2

• ssaoCombine

• standard

• stereoscopicInterlace

• tonemap

• volumetricLightScattering

• volumetricLightScatteringPass

• vrDistortionCorrection

• vrMultiviewToSingleview

Texture Classes

• BaseTexture

• • Texture

• • • DynamicTexture

• • • RawTexture

• • • RawTexture3D

• • • RenderTargetTexture

• • • • MirrorTexture

• • • • RefractionTexture

• • • VideoTexture

• • ColorGradingTexture

• • CubeTexture

• • • RawCubeTexture

• • EquiRectangularCubeTexture

• • HDRCubeTexture

• • HtmlElementTexture

ProceduralTexture Classes

• ProceduralTexture

• • NoiseProceduralTexture

• • CustomProceduralTexture

Defined in dist/materialsLibrary

• CellMaterial

• CustomMaterial

• FireMaterial

• FurMaterial

• GradientMaterial

• GridMaterial

• LavaMaterial

• MixMaterial

• NormalMaterial

• ShadowOnlyMaterial

• SkyMaterial

• TerrainMaterial

• TriPlanarMaterial

• WaterMaterial

Other Material Classes

• Background Material

• How To Use ShaderMaterial

• SimpleMaterial: Create Material For Materials Library

• PBRCustomMaterial

Procedural Textures

https://doc.babylonjs.com/api/classes/babylon.proceduraltexture

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

https://doc.babylonjs.com/how_to/how_to_use_procedural_textures

Procedural textures defined in dist/proceduralTextures

• Brick

• Cloud

• Fire

• Grass

• Marble

• NormalMap

• PerlinNoise

• Road

• Starfield

• Wood

Addtional Procedural Textures referenced in https://doc.babylonjs.com/api/classes/babylon.proceduraltexture

• Custom: How To Use Procedural Textures

• NoiseProceduralTexture: How To Use Procedural Textures

How To Create a Procedureal Texture for the Procedural Textures Library

StandardMaterial Properties

https://doc.babylonjs.com/features/materials

Lighting and Color

backFaceCulling

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

Wireframe

Textures

Applying Different Material to Front and Back

Multimaterials

Rendering Process

4 Categories of Meshes

• Alpha-blended meshes

• Alpha-tested meshes

• Opaque meshes

• Depth pre-pass meshes

References

• Calculating UVs

• UVs demo

StandardMaterials

• Materials

• How Materials Work

UVs

• How Materials are Applied to Vertices

• How To Apply Material to Individual Faces

• How To Apply Different Material to Front and Back

Features

• Material Features

• How to Apply Bumps, Opacity, and Tiling

• How To Use Multiple Materials

• How To Use Parallax Mapping

• How To Use FresnelParameters

• How To Add Video as a Texture

• How To Use Dynamic Textures

• How To Obtain Reflections and Refractions

Physically Based Rendering (PBR)

• How to Start with Physically Based Rendering

• How To Master Physically Based Rendering (PBR)

Procedural Textures

• How To Use Procedural Texture

• Transparency and How Meshes are Rendered

• Material push mode

Shaders

• How To Put Shader Code in BJS

• Introduction to Shaders

• How To Create a Material For the Materials Library

• Material API