RedGPU V4.4.0-Alpha

English

한국어

English

한국어

Appearance

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 MapRoleEffect
diffuseTextureBasic pattern (Color Map)Determines the basic color and pattern of the object surface
normalTextureSurface irregularities (Normal Map)Expresses fine unevenness and three-dimensionality without having to subdivide actual faces
specularTextureGloss map (Specular Map)Defines which parts of the object will be shinier (metal, plastic, etc.)
emissiveTextureLight-emitting map (Emissive Map)Specifies areas that emit light themselves, regardless of lighting
alphaTextureTransparency map (Alpha Map)Specifies transparent or opaque areas based on texture brightness
displacementTextureDisplacement mapMoves actual geometry vertices to create physical unevenness

2. Key Property Control ​

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

javascript
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.shininess = 32;    // Sharpness of the highlight (Shininess)
material.specularStrength = 1.0; // Intensity of the highlight

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.

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

RedGPU.init(canvas, (redGPUContext) => {
    const scene = new RedGPU.Display.Scene();
    
    // 1. Lighting Setup (PhongMaterial requires light to be visible)
    const light = new RedGPU.Light.DirectionalLight();
    scene.lightManager.addDirectionalLight(light);

    // 2. Create a material
    const material = new RedGPU.Material.PhongMaterial(redGPUContext);
    
    // 3. 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');

    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.

Next Steps ​

Learn about PBRMaterial, which realistically expresses metallic and roughness properties through Physically Based Rendering (PBR).