Plastic Ball Lighting

Information

Introduction Vertex Shader Fragment Shader Texture Summary

Introduction

This short article includes the shaders and texture which render a colorful ball, which looks like plastic. WebGL GLSL shaders process light on 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 plastic ball example applies light to a 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.

A number of initialization details were left out, to focus on the main topic. Most WebGL projects initialize as described in the WebGL e-book series. However information in this tutorial should apply to other WebGL projects, such as those that use Unity or three.js, as well.

For details regarding shader lighting please see Seven Thunder Software's Point Light Tutorial.

Vertex Shader

The vertex shader follows, with a number of 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 shaders and texture which render a colorful ball, which looks like plastic. WebGL GLSL shaders process light on 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 plastic ball example applies light to a 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 Seven Thunder Software's Point Light Tutorial.

Tags

learn to code, Web GL, 3D Programming, 3D Development, 3D Media, 3D Web, 3 D Websites, 3D Development, 3D Web Design, 3D Web Development, Web Development, free tutorials, online learning, learn coding, create 3D website, 3D Media, JavaScript, html5, html 5, Web GL, 3D rendering software, GLSL, 3D Graphics Engine, 3D rendering software, html tutorial, how to code, programming websites, learn computer programming, learn to code for free, learning coding, stem, 3D images, webgl simple example, webgl basics,
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.