Beach Ball Lighting

Information

Introduction Vertex Shader Fragment Shader Texture Summary

Introduction

This short article includes the shaders and texture which render a bright plastic like ball. WebGL applies directional light to a sphere, which looks like a beach ball with slightly wrinkled dull plastic. The sphere's mapped with colorful checkers. Lighting brightens colors as you swipe to rotate and move the ball.

The beach ball example applies directional light to a brightly textured sphere. Lighting helps define the texture of the surface covering the ball. Light location, light color, and ambient color are declared with constants in the vertex shader.

As the ball spins and moves, both a model matrix and a normal matrix upload to the GPU. The model matrix represents rotation and translation data for the ball. The normal matrix equals the model matrix inverted and transposed. The vertex shader uses normal attributes and the normal matrix to compute lighting per frame.

For details regarding shader lighting please see the Point Light Tutorial. See WebGL Lighting Techniques and Examples for more projects with WebGL light shaders and light maps.

Vertex Shader

The vertex shader follows with many (hopefully helpful) comments. The vertex shader prepares varying v3_light_weight.

attribute vec3 a_position;
attribute vec3 a_normal;
attribute vec2 a_tex_coord0;

uniform mat4 um4_matrix;
uniform mat4 um4_pmatrix;
uniform mat3 um3_nmatrix;

varying vec2 v_tex_coord0;
varying vec3 v3_light_weight;
  
vec3 v_normal_transform;
vec4 v_position;    
 
// Ambient color added in.
// Affects shadow area as well as
// lighted area.
// c_ambient and c_lighted_dcolor
// affect each other.
const vec3 c_ambient = vec3(0.2,0.2,0.4);

// XYZ location of point light.
// The larger these values, the brighter the
// light. Despite normalization.
const vec3 c_light_location = vec3(-1.8,5.0,-1.0);

// Diffuse color multiplied in.
// Affects lighted areas most.
const vec3 c_light_dcolor = vec3(0.5,0.5,0.7);

void main(void) {
        
// Multiply perspective matrix, model matrix, and vertex.        
gl_Position = um4_pmatrix * um4_matrix * vec4(a_position,1.0);
        
// Texel corresponding to the vertex.
v_tex_coord0 = a_tex_coord0;
        
// Normal matrix * normal.
v_normal_transform = um3_nmatrix * a_normal;
        
float f_light_weight = max(
 dot(
  v_normal_transform, 
  c_light_location
 ), 
 0.0
);

v3_light_weight = c_ambient + c_light_dcolor * f_light_weight;

}

Fragment Shader

The fragment shader follows. The fragment shader multiplies varying v3_light_weight, by a sample from the texture.

precision mediump float;

varying vec2 v_tex_coord0;

varying vec3 v3_light_weight;

uniform sampler2D u_sampler0;

void main(void) {

vec4 v4_tex_color = texture2D(u_sampler0, v_tex_coord0);
 
gl_FragColor = vec4(v4_tex_color.rgb * v3_light_weight, 1.0);
}

Texture

The beach ball texture follows. The texture's composed of sixteen evenly divided squares with different colors.

Sixteen Colors in Checkered Pattern

Summary

This short article included the vertex shader, fragment shader, and sphere texture. WebGL applies directional light to a sphere, which looks like a beach ball with slightly wrinkled dull plastic. The sphere's mapped with colorful checkers. Lighting brightens colors as you swipe to rotate and move the ball.

The beach ball example applies directional light to a brightly textured sphere. Lighting helps define the texture of the surface covering the ball. Light location, light color, and ambient color are declared with constants in the vertex shader.

As the ball spins and moves, both a model matrix and a normal matrix upload to the GPU. The model matrix represents rotation and translation data for the ball. The normal matrix equals the model matrix inverted and transposed. The vertex shader uses normal attributes and the normal matrix to compute lighting per frame.

For details regarding shader lighting please see the Point Light Tutorial. See WebGL Lighting Techniques and Examples for more projects with WebGL light shaders and light maps.

Copyright © 2015 Seven Thunder Software. All Rights Reserved.