Thursday February 19, 2026

Home | Contact | Support | WebGPU Graphics and Compute ... | WebGPU.. Games, Tutorials, Demos, Projects, and Code.....

WebGPU..

Games, Tutorials, Demos, Projects, and Code.....

Specular Lighting

This is where we take lighting to the next level - basic directional light does not really take into account lots of factors (e.g., the material the light is interacting with). Why are some surfaces shiny and others matt?

Specular lighting is the — Specular lighting is the 'shiny' factor on surfaces - you often notice it as a small white dot on round surfaces (snooker balls or other shiny balls).

Functions Used: setVertexBuffer(), setIndexBuffer(), drawIndexed(), createBuffer(), getMappedRange(), getContext(), requestAdapter(), getPreferredCanvasFormat(), createCommandEncoder(), beginRenderPass(), setPipeline(), draw(), end(), submit(), getCurrentTexture(), createView(), createShaderModule()

Look at the fragment shader - we can see the calculation for the diffuse (directional light component) and the specular light component. The specular lighting is dependent on the location of the camera (or the viewers eye). So as your camera moves around the specular shinyness moves as well.

<?php
@group(0) @binding(1) var mySampler: sampler;
@group(0) @binding(2) var myTexture: texture_2d<f32>;
@group(0) @binding(3) var <uniform> myTimer:   f32;

@fragment
fn main(@location(0) normal   : vec3<f32>,
        @location(1) uvs      : vec2<f32>,
        @location(2) position : vec3<f32> ) -> @location(0) vec4<f32> 
{
    //return textureSample(myTexture, mySampler, uvs );

    let scrolluv = uvs + vec2<f32>( myTimer*0.2, 0.0  );
    let texCol = textureSample(myTexture, mySampler, scrolluv );
       
    let lightdirection = normalize( vec3<f32>(1, 0, 1) );
	let nnormal        = normalize( -normal );

    // scale brightness based on the normal vs ref drection
    let diffuse = clamp( dot( lightdirection, nnormal ), 0.0, 1.0 ) * 2.0;

    var viewPos = vec3<f32>(0);
    var viewDir = normalize(viewPos - position);
    var reflectDir = reflect(-lightdirection, -nnormal);
	var specular   = pow(max(dot(viewDir, reflectDir), 0.0), 42) * 4.5;

	var illum = ( diffuse + specular );

	return vec4<f32>( texCol.xyz*illum , 1.0 ); 

}

@group(0) @binding(1) var mySampler: sampler;
@group(0) @binding(2) var myTexture: texture_2d<f32>;
@group(0) @binding(3) var <uniform> myTimer:   f32;

@fragment
fn main(@location(0) normal   : vec3<f32>,
        @location(1) uvs      : vec2<f32>,
        @location(2) position : vec3<f32> ) -> @location(0) vec4<f32>
{
    //return textureSample(myTexture, mySampler, uvs );

    let scrolluv = uvs + vec2<f32>( myTimer*0.2, 0.0  );
    let texCol = textureSample(myTexture, mySampler, scrolluv );

    let lightdirection = normalize( vec3<f32>(1, 0, 1) );
    let nnormal        = normalize( -normal );

    // scale brightness based on the normal vs ref drection
    let diffuse = clamp( dot( lightdirection, nnormal ), 0.0, 1.0 ) * 2.0;

    var viewPos = vec3<f32>(0);
    var viewDir = normalize(viewPos - position);
    var reflectDir = reflect(-lightdirection, -nnormal);
    var specular   = pow(max(dot(viewDir, reflectDir), 0.0), 42) * 4.5;

    var illum = ( diffuse + specular );

    return vec4<f32>( texCol.xyz*illum , 1.0 );

}

Resources and Links

• WebGPU Lab Example [LINK]

Advert (Support Website)

Visitor:

Copyright (c) 2002-2025 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.