Phong Material

Phong Material is a material that implements the Phong Reflection Model, one of the most widely used lighting models in 3D graphics. Beyond simply painting colors, you can realistically adjust the texture of an object using various Texture Maps.

1. Implementing Texture via Texture Maps

PhongMaterial completes the detail of an object by overlaying multiple texture layers. RedGPU supports various maps as follows:

Texture Map	Role	Effect
diffuseTexture	Basic pattern (Color Map)	Determines the basic color and pattern of the object surface
normalTexture	Surface irregularities (Normal Map)	Expresses fine unevenness and three-dimensionality without having to subdivide actual faces
specularTexture	Gloss map (Specular Map)	Defines which parts of the object will be shinier (metal, plastic, etc.)
emissiveTexture	Light-emitting map (Emissive Map)	Specifies areas that emit light themselves, regardless of lighting
alphaTexture	Transparency map (Alpha Map)	Specifies transparent or opaque areas based on texture brightness
displacementTexture	Displacement map	Moves actual geometry vertices to create physical unevenness

2. Key Property Control

You can control the intensity and sharpness of highlights through numerical adjustments.

const material = new RedGPU.Material.PhongMaterial(redGPUContext);

// 1. Basic color and transparency
material.color.setColorByHEX('#00CC99');
material.alpha = 1.0;

// 2. Highlight (Specular) control
material.specularPower = 32;    // Sharpness of the highlight (Shininess)
material.specularStrength = 1.0; // Intensity of the highlight

// 3. Advanced properties
material.displacementScale = 1.0; // Protrusion level of the displacement map
material.useSSR = true;           // Use screen space reflection

3. Practical Example: Combining Textures

By applying multiple maps simultaneously, you can make a simple sphere look like a detailed planet or a complex mechanical part.

import * as RedGPU from "https://redcamel.github.io/RedGPU/dist/index.js";

RedGPU.init(canvas, (redGPUContext) => {
    const scene = new RedGPU.Display.Scene();
    
    // 1. Create a material
    const material = new RedGPU.Material.PhongMaterial(redGPUContext);
    
    // 2. Apply various texture maps
    const assetPath = 'https://redcamel.github.io/RedGPU/examples/assets/phongMaterial/';
    
    material.diffuseTexture = new RedGPU.Resource.BitmapTexture(redGPUContext, assetPath + 'test_diffuseMap.jpg');
    material.normalTexture = new RedGPU.Resource.BitmapTexture(redGPUContext, assetPath + 'test_normalMap.jpg');
    material.specularTexture = new RedGPU.Resource.BitmapTexture(redGPUContext, assetPath + 'test_specularMap.jpg');
    material.displacementTexture = new RedGPU.Resource.BitmapTexture(redGPUContext, assetPath + 'test_displacementMap.jpg');
    
    material.displacementScale = 0.5; // Adjust displacement intensity

    const mesh = new RedGPU.Display.Mesh(
        redGPUContext, 
        new RedGPU.Primitive.Sphere(redGPUContext, 4, 64, 64), 
        material
    );
    scene.addChild(mesh);

    const controller = new RedGPU.Camera.OrbitController(redGPUContext);
    const view = new RedGPU.Display.View3D(redGPUContext, scene, controller);
    redGPUContext.addView(view);

    new RedGPU.Renderer().start(redGPUContext, () => {
        mesh.rotationY += 1;
    });
});

Live Demo

Observe how PhongMaterial with applied texture maps reacts under lighting.

Key Summary

• Phong Material is a lighting material that calculates light Diffuse and Specular reflections.
• Using a Normal Map allows for expressing detailed surface textures without having to subdivide faces.
• Physical three-dimensionality can be created by transforming actual geometry through a Displacement Map.

---

Next Steps

Learn about the various light sources that illuminate materials to create three-dimensionality.

• Light