10.10 - Combining Light and Surface Properties¶

Wow! We have covered a lot of techniques related to surface properties. And we have only touched the surface of what is possible! (Pun intended!)

To end our discussion of surface properties we need to combine them with lighting calculations. In general a fragment shader will:

determine a color for the fragment,
set up the fragment’s normal vector for lighting calculations, and
modify the color based on the lighting calculations.

Each of these steps can be simple or complex. Each step can involve a single method or combinations of methods. There is no limit on what your creative mind might come up with! For example, to create a color for a fragment you could combine a color attribute of the triangle with a color from an image texture map and some percentage of another color, where the percentage is calculated using a procedural texture map. To combine these colors you could pick from an infinite number of possible percentages, such as 1/3, 1/3, 1/3, or 1/2, 1/4, 1/4, or 3/4, 3/16, 1/16. You get the idea. In fact, almost all special effects are created by combining colors from multiple sources. And beyond the color selection, the lighting calculations can be complex, especially if there are multiple light sources of different types.

This lesson presents a very simple example of surface property and light reflection interaction. Hopefully you will be able to extrapolate the example into an infinite number of possibilities.

Experimentation Program¶

The following WebGL program creates two different shader programs, one to render the cubes in the scene, and another to render the block letters. Both shader programs use the same vertex shader but different fragment shaders. Let’s review the specifics of each shader before you experiment with the WebGL program.

The fragment shader that renders the cubes, shader38.frag, does the following:

Calculates a percentage value using a procedural texture map. (See the function my_texture.)
Using the percentage, calculates a gradient color using the model’s surface color and white.
Normalizes the surface normal because it is being interpolated across the surface.
Performs lighting calculations on the color.
Outputs the color to gl_FragColor

The fragment shader that renders the letters, shader39.frag, does the following:

Gets a color from an image texture map (water.png).
Creates a color that is half the texture map’s color and half the face’s color.
Normalizes the surface normal because it is being interpolated across the surface.
Performs lighting calculations on the color.
Outputs the color to gl_FragColor

Specifically notice the following in the surface_and_light_render.js code below:

In lines 383-384 the two shader programs are created: cube_program and text_program.
In lines 393-396 the models for the cubes are created using the cube_program shader.
In lines 398-400 the models for the letters are created using the text_program shader.
When the scene is rendered in the right canvas:
- In line 238 the gl2.useProgram() function is used to make the cube_program active. This allows all the cubes to be rendered using a procedural texture map (lines 255-258).
- In line 262 the gl2.useProgram() function is used to make the text_program active. This allows all the letters to be rendered using an image texture map (lines 255-258).
The lighting data has to be passed into the shaders twice, once for each shader program. This is done in lines 244-249 for the cube_program shader and in lines 265-270 for the text_program shader.

Please experiment with the WebGL program below and study the code.

Show: Code Canvas Run Info

surface_and_light_render.js
shader38.vert
shader38.frag
shader39.frag

/**
 * learn_webgl_render_01.js, By Wayne Brown, Fall 2015
 *
 * Given
 *   - a model definition as defined in learn_webgl_model_01.js, and
 *   - specific shader programs: vShader01.vert, fShader01.frag
 * Perform the following tasks:
 *   1) Build appropriate Vertex Object Buffers (VOB's)
 *   2) Create GPU VOB's for the data and copy the data into the buffers.
 *   3) Render the VOB's
 */

/**
 * The MIT License (MIT)
 *
 * Copyright (c) 2015 C. Wayne Brown
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

"use strict";

// Global definitions used in this code:
var Learn_webgl_matrix, Learn_webgl_point4, Learn_webgl_vector3;

//-------------------------------------------------------------------------
// Build, create, copy and render 3D objects specific to a particular
// model definition and particular WebGL shaders.
//-------------------------------------------------------------------------
window.SurfaceAndLightRender = function (learn, vshaders_dictionary,
                                fshaders_dictionary, models, controls) {

// Private variables
  var self = this;
  var canvas_id = learn.canvas_id;
  var out = learn.out;

var gl = null;
  var program;
  var ray_program;
  var render_models = {};
  var up_ray;
  var ray_scale = 2;

var matrix = new window.Learn_webgl_matrix();
  var transform = matrix.create();
  var base = matrix.create();

var translate = matrix.create();
  matrix.translate(translate, -1, -2, -2.0);

// Camera transform and parameters
  var camera_transform = matrix.create();
  var camera_distance = 30;
  var ex = 0;
  var ey = 0;
  var ez = 10;
  self.angle_x = 0.0;
  self.angle_y = 0.0;

// The virtual_camera is the camera we are using to get a specific view of
  // the scene. It is used to render the right canvas window.
  var virtual_camera = matrix.create();
  matrix.lookAt(virtual_camera, 0, 0, 5, 0, 0, 0, 0, 1, 0);
  var center_point_translate = matrix.create();
  var center_point_scale = matrix.create();
  matrix.scale(center_point_scale, 0.1, 0.1, 0.1);

var axes_scale = matrix.create();
  matrix.scale(axes_scale, 2, 2, 2);

// The "camera" is the camera we are using in the left window to
  // view everything -- including the scene_camera.
  var camera = matrix.create();

var projection = matrix.createPerspective(30.0, 1.0, 0.5, 100.0);
  //var projection = matrix.createOrthographic(-6, 6, -6, 6, -100, 100);

var cube_model_names = ["textz", "texty", "textx", "cubey", "cubex", "cubez", "cube_center"];
  var camera_model_names = ["Camera_lens", "Camera", "Camera_body", "u_axis", "v_axis", "n_axis"];
  var axes_model_names = ["xaxis", "yaxis", "zaxis"];

// Public variables that will possibly be used or changed by event handlers.
  self.canvas = null;

self.eyex = 0;
  self.eyey = 0;
  self.eyez = 5;

self.centerx = 0;
  self.centery = 0;
  self.centerz = 0;

self.upx = 0;
  self.upy = 1;
  self.upz = 0;

// To render the light position
  var light_position_translate = matrix.create();
  var light_position_scale = matrix.create();
  matrix.scale(light_position_scale, 0.2, 0.2, 0.2);

// Light model
  var P4 = new window.Learn_webgl_point4();
  var V = new window.Learn_webgl_vector3();
  self.light_position = P4.create(2,0,5,1);
  self.light_color = V.create(1,1,1); // white light
  self.shininess = 30;
  self.ambient_color = V.create(0.2,0.2,0.2); // low level white light
  var light_in_camera_space = P4.create();

var pvm_transform = matrix.create();
  var vm_transform = matrix.create();

// Scene 2 models
  var cube_center = null;
  var cube_x = null;
  var cube_y = null;
  var cube_z = null;
  var text_x = null;
  var text_y = null;
  var text_z = null;

//-----------------------------------------------------------------------
  self.render = function () {
    var j, dist;

gl.viewport(0,0,self.canvas.width,self.canvas.height);

// Clear the entire canvas window background with the clear color
    // out.display_info("Clearing the screen");
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// Calculate and set the camera for the entire rendering
    ex = Math.sin(self.angle_x) * camera_distance;
    ez = Math.cos(self.angle_x) * camera_distance;
    ey = Math.sin(self.angle_y) * camera_distance;
    dist = Math.sqrt( ex*ex + ey*ey + ez*ez);
    ex = (ex / dist) * camera_distance;
    ey = (ey / dist) * camera_distance;
    ez = (ez / dist) * camera_distance;
    matrix.lookAt(camera, ex, ey, ez, 0, 0, 0, 0, 1, 0);

// Create the base transform which is built upon for all other transforms
    matrix.multiplySeries(base, projection, camera);

//  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    // Render axes
    matrix.multiplySeries(transform, base, axes_scale);

// Draw each global axes
    for (j = 0; j < axes_model_names.length; j += 1) {
      render_models[axes_model_names[j]].render(transform);
    }

//  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    // Render model
    matrix.copy(transform, base);

// Draw each model
    for (j = 0; j < cube_model_names.length; j += 1) {
      render_models[cube_model_names[j]].render(transform);
    }

//  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    // Render the up vector for the camera
    up_ray.set(self.eyex, self.eyey, self.eyez,
               self.eyex + self.upx*ray_scale,
               self.eyey + self.upy*ray_scale,
               self.eyez + self.upz*ray_scale);
    up_ray.render(transform);

//  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    // Render the "center point" of the virtual camera as a small sphere
    matrix.translate(center_point_translate, self.centerx, self.centery, self.centerz);
    matrix.multiplySeries(transform, base, center_point_translate, center_point_scale);
    render_models.Sphere.render(transform);

//  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    // Render virtual camera
    // Calculate the virtual camera transform
    matrix.lookAt(virtual_camera, self.eyex, self.eyey, self.eyez,
                                  self.centerx, self.centery, self.centerz,
                                  self.upx, self.upy, self.upz);
    matrix.copy(camera_transform, virtual_camera);
    matrix.transpose(camera_transform);
    //matrix.print("transposed", camera_transform);
    camera_transform[3] = 0;
    camera_transform[7] = 0;
    camera_transform[11] = 0;
    camera_transform[12] = self.eyex;
    camera_transform[13] = self.eyey;
    camera_transform[14] = self.eyez;

matrix.multiplySeries(transform, base, camera_transform);

// Draw the camera
    for (j = 0; j < camera_model_names.length; j += 1) {
      render_models[camera_model_names[j]].render(transform);
    }

//  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    // Render the position of the light source
    matrix.translate(light_position_translate, self.light_position[0],
                                               self.light_position[1],
                                               self.light_position[2]);
    matrix.multiplySeries(transform, base, light_position_translate, light_position_scale);
    render_models.Sphere.render(transform);

// Render the other window that shows what the camera sees.
    self.render2();
  };

//-----------------------------------------------------------------------
  self.render2 = function () {

// Clear the entire canvas window background with the clear color
    gl2.clear(gl2.COLOR_BUFFER_BIT | gl2.DEPTH_BUFFER_BIT);

//  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    // Use the "cube_program" shader to render the 4 cubes.
    gl2.useProgram( cube_program );

// Transform the light position by the camera
    matrix.multiplyP4(light_in_camera_space, virtual_camera, self.light_position);

// Set the location of the light source
    gl2.uniform3f(cube_program.u_Light_position, light_in_camera_space[0],
                                                 light_in_camera_space[1],
                                                 light_in_camera_space[2]);
    gl2.uniform3fv(cube_program.u_Light_color, self.light_color);
    gl2.uniform3fv(cube_program.u_Ambient_color, self.ambient_color);
    gl2.uniform1f(cube_program.u_Shininess, self.shininess);

// Render the cubes using the "cube_program" shader
    matrix.copy(vm_transform, virtual_camera);
    matrix.multiplySeries(pvm_transform, projection, virtual_camera);

cube_center.render(pvm_transform, vm_transform);
    cube_x.render(pvm_transform, vm_transform);
    cube_y.render(pvm_transform, vm_transform);
    cube_z.render(pvm_transform, vm_transform);

//  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    // Use the "text_program" shader to render the letters on the cubes.
    gl2.useProgram( text_program );

// Set the location of the light source in the "text_program" shader
    gl2.uniform3f(text_program.u_Light_position, light_in_camera_space[0],
                                             light_in_camera_space[1],
                                             light_in_camera_space[2]);
    gl2.uniform3fv(text_program.u_Light_color, self.light_color);
    gl2.uniform3fv(text_program.u_Ambient_color, self.ambient_color);
    gl2.uniform1f(text_program.u_Shininess, self.shininess);

// Render the letters
    text_x.render(pvm_transform, vm_transform);
    text_y.render(pvm_transform, vm_transform);
    text_z.render(pvm_transform, vm_transform);
  };

//-----------------------------------------------------------------------
  self.delete = function () {
    var j, name;

// Clean up shader programs
    gl.deleteShader(program.vShader);
    gl.deleteShader(program.fShader);
    gl.deleteProgram(program);

gl2.deleteShader(cube_program.vShader);
    gl2.deleteShader(cube_program.fShader);
    gl2.deleteProgram(cube_program);

gl2.deleteShader(text_program.vShader);
    gl2.deleteShader(text_program.fShader);
    gl2.deleteProgram(text_program);

// Delete each model's VOB
    for (j = 0; j < models.number_models; j += 1) {
      name = models[j].name;
      render_models[name].delete(gl);
    }

// Delete each model's VOB
    cube_center.delete(gl2);
    cube_x.delete(gl2);
    cube_y.delete(gl2);
    cube_z.delete(gl2);
    text_x.delete(gl2);
    text_y.delete(gl2);
    text_z.delete(gl2);

// Remove all event handlers
    var id = '#' + canvas_id;
    $( id ).unbind( "mousedown", events.mouse_drag_started );
    $( id ).unbind( "mouseup", events.mouse_drag_ended );
    $( id ).unbind( "mousemove", events.mouse_dragged );
    events.removeAllEventHandlers();

// Disable any animation
    self.animate_active = false;
  };

//-----------------------------------------------------------------------
  // Object constructor. One-time initialization of the scene.

// Get the rendering context for the canvas
  self.canvas = learn.getCanvas(canvas_id);
  if (self.canvas) {
    gl = learn.getWebglContext(self.canvas);
  }
  if (!gl) {
    return;
  }

// Set up the rendering program and set the state of webgl
  program = learn.createProgram(gl, vshaders_dictionary.shader05, fshaders_dictionary.shader05);
  ray_program = learn.createProgram(gl, vshaders_dictionary.shader01a, fshaders_dictionary.shader01);

gl.enable(gl.DEPTH_TEST);

gl.clearColor(1.0, 1.0, 1.0, 1.0);

// Create Vertex Object Buffers for the models
  var j, name;
  for (j = 0; j < models.number_models; j += 1) {
    name = models[j].name;
    render_models[name] = new Learn_webgl_model_render_05(gl, program, models[name], out);
  }

up_ray = new Create_ray_manually(gl, ray_program, 0, 0, 0, 1, 0, 0, [0,0,0,1]);

// Set up callbacks for user and timer events
  var events;
  events = new SurfaceAndLightEvents(self, controls);

var id = '#' + canvas_id;
  $( id ).mousedown( events.mouse_drag_started );
  $( id ).mouseup( events.mouse_drag_ended );
  $( id ).mousemove( events.mouse_dragged );

//-----------------------------------------------------------------------
  // Initialization of second canvas rendering
  // Private variables
  var canvas_id2 = learn.canvas_id + "_b";

var gl2 = null;
  var cube_program;
  var text_program;
  var render_models2 = {};

var translate2 = matrix.create();
  matrix.translate(translate2, -1, -1, -2.0);

// Public variables that will possibly be used or changed by event handlers.
  // Get the rendering context for the canvas
  self.canvas2 = learn.getCanvas(canvas_id2);
  if (self.canvas2) {
    gl2 = learn.getWebglContext(self.canvas2);
  }
  if (!gl2) {
    return;
  }

// Set up the rendering program and set the state of webgl
  cube_program = learn.createProgram(gl2, vshaders_dictionary.shader38, fshaders_dictionary.shader38);
  text_program = learn.createProgram(gl2, vshaders_dictionary.shader38, fshaders_dictionary.shader39);

gl2.useProgram(cube_program);

gl2.enable(gl2.DEPTH_TEST);

gl2.clearColor(0.9, 0.9, 0.9, 1.0);

// Create Vertex Object Buffers for the models
  cube_center = new Learn_webgl_model_render_38(gl2, cube_program, models.cube_center, out);
  cube_x = new Learn_webgl_model_render_38(gl2, cube_program, models.cubex, out);
  cube_y = new Learn_webgl_model_render_38(gl2, cube_program, models.cubey, out);
  cube_z = new Learn_webgl_model_render_38(gl2, cube_program, models.cubez, out);

text_x = new Learn_webgl_model_render_38(gl2, text_program, models.textx, out);
  text_y = new Learn_webgl_model_render_38(gl2, text_program, models.texty, out);
  text_z = new Learn_webgl_model_render_38(gl2, text_program, models.textz, out);
};

// Vertex Shader
precision mediump int;
precision mediump float;

// Scene transformations
uniform mat4 u_PVM_transform; // Projection, view, model transform
uniform mat4 u_VM_transform;     // View, model transform

// Light model
uniform vec3 u_Light_position;
uniform vec3 u_Light_color;
uniform float u_Shininess;
uniform vec3 u_Ambient_color;

// Original model data
attribute vec3 a_Vertex;
attribute vec3 a_Color;
attribute vec3 a_Vertex_normal;
attribute vec2 a_Texture_coordinate;

// Data (to be interpolated) that is passed on to the fragment shader
varying vec3 v_Vertex;
varying vec4 v_Color;
varying vec3 v_Normal;
varying vec2 v_Texture_coordinate;

void main() {

// Perform the model and view transformations on the vertex and pass this
  // location to the fragment shader.
  v_Vertex = vec3( u_VM_transform * vec4(a_Vertex, 1.0) );

// Perform the model and view transformations on the vertex's normal vector
  // and pass this normal vector to the fragment shader.
  v_Normal = vec3( u_VM_transform * vec4(a_Vertex_normal, 0.0) );

// Pass the vertex's color to the fragment shader.
  v_Color = vec4(a_Color, 1.0);

// Pass the vertex's texture coordinate to the fragment shader.
  v_Texture_coordinate = a_Texture_coordinate;

// Transform the location of the vertex for the rest of the graphics pipeline
  gl_Position = u_PVM_transform * vec4(a_Vertex, 1.0);
}

//=========================================================================
// Source: https://raw.githubusercontent.com/ashima/webgl-noise/master/src/classicnoise2D.glsl
//
// GLSL textureless classic 2D noise "cnoise",
// with an RSL-style periodic variant "pnoise".
// Author:  Stefan Gustavson (stefan.gustavson@liu.se)
// Version: 2011-08-22
//
// Many thanks to Ian McEwan of Ashima Arts for the
// ideas for permutation and gradient selection.
//
// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
// Distributed under the MIT license. See LICENSE file.
// https://github.com/ashima/webgl-noise
//

precision mediump int;
precision mediump float;

vec4 mod289(vec4 x)
{
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 permute(vec4 x)
{
  return mod289(((x*34.0)+1.0)*x);
}

vec4 taylorInvSqrt(vec4 r)
{
  return 1.79284291400159 - 0.85373472095314 * r;
}

vec2 fade(vec2 t) {
  return t*t*t*(t*(t*6.0-15.0)+10.0);
}

// Classic Perlin noise
float cnoise(vec2 P)
{
  vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
  vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
  Pi = mod289(Pi); // To avoid truncation effects in permutation
  vec4 ix = Pi.xzxz;
  vec4 iy = Pi.yyww;
  vec4 fx = Pf.xzxz;
  vec4 fy = Pf.yyww;

vec4 i = permute(permute(ix) + iy);

vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ;
  vec4 gy = abs(gx) - 0.5 ;
  vec4 tx = floor(gx + 0.5);
  gx = gx - tx;

vec2 g00 = vec2(gx.x,gy.x);
  vec2 g10 = vec2(gx.y,gy.y);
  vec2 g01 = vec2(gx.z,gy.z);
  vec2 g11 = vec2(gx.w,gy.w);

vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)));
  g00 *= norm.x;
  g01 *= norm.y;
  g10 *= norm.z;
  g11 *= norm.w;

float n00 = dot(g00, vec2(fx.x, fy.x));
  float n10 = dot(g10, vec2(fx.y, fy.y));
  float n01 = dot(g01, vec2(fx.z, fy.z));
  float n11 = dot(g11, vec2(fx.w, fy.w));

vec2 fade_xy = fade(Pf.xy);
  vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
  float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
  return 2.3 * n_xy;
}

//=========================================================================
// Fragment shader
// By: Dr. Wayne Brown, Spring 2016

// Light model
uniform vec3 u_Light_position;
uniform vec3 u_Light_color;
uniform float u_Shininess;
uniform vec3 u_Ambient_color;

// Data coming from the vertex shader
varying vec3 v_Vertex;
varying vec4 v_Color;
varying vec3 v_Normal;
varying vec2 v_Texture_coordinate;

//-------------------------------------------------------------------------
float my_texture(vec2 texture_coordinates) {
  float percent;
  float s = texture_coordinates.s;
  float t = texture_coordinates.t;

// Scale the texture coordinates and get a random noise value from the
  // texture coordinates.
  percent = cnoise(5.0 * texture_coordinates);

// Make the pattern periodic, but at a large scale.
  percent = sin(percent * 100.0);

// Modify the percent from a range of [-1,+1] to a range of [0,+1]
  percent = (percent + 1.0) * 0.5;

return percent;
}

//-------------------------------------------------------------------------
vec3 light_reflection(vec3 color, vec3 vertex_normal) {

vec3 to_light;
  vec3 reflection;
  vec3 to_camera;
  float cos_angle;
  vec3 diffuse_color;
  vec3 specular_color;
  vec3 ambient_color;

// Calculate the ambient color as a percentage of the surface color
  ambient_color = u_Ambient_color * color;

// Calculate a vector from the fragment location to the light source
  to_light = u_Light_position - v_Vertex;
  to_light = normalize( to_light );

// Calculate the cosine of the angle between the vertex's normal vector
  // and the vector going to the light.
  cos_angle = dot(vertex_normal, to_light);
  cos_angle = clamp(cos_angle, 0.0, 1.0);

// Scale the color of this fragment based on its angle to the light.
  diffuse_color = color * cos_angle;

// Calculate the reflection vector
  reflection = 2.0 * dot(vertex_normal,to_light) * vertex_normal - to_light;

// Calculate a vector from the fragment location to the camera.
  // The camera is at the origin, so negating the vertex location gives the vector
  to_camera = -1.0 * v_Vertex;

// Calculate the cosine of the angle between the reflection vector
  // and the vector going to the camera.
  reflection = normalize( reflection );
  to_camera = normalize( to_camera );
  cos_angle = dot(reflection, to_camera);
  cos_angle = clamp(cos_angle, 0.0, 1.0);
  cos_angle = pow(cos_angle, u_Shininess);

// The specular color is from the light source, not the object
  if (cos_angle > 0.0) {
    specular_color = u_Light_color * cos_angle;
    diffuse_color = diffuse_color * (1.0 - cos_angle);
  } else {
    specular_color = vec3(0.0, 0.0, 0.0);
  }

color = ambient_color + diffuse_color + specular_color;

return color;
}

//-------------------------------------------------------------------------
void main() {

vec3 vertex_normal;
  float percent;
  vec3 color;
  vec3 opposite_color;

// Step 1: Set the surface's color.
  // For this shader use the surface's color property, a procedural
  // texture, and a gradient to white
  percent = my_texture(v_Texture_coordinate);
  color = vec3(v_Color);
  color = percent * color  + (1.0 - percent) * vec3(1.0, 1.0, 1.0);

// Step 2: Set the surface's normal vector.
  // For this shader use the surface's normal vector.
  // The vertex's normal vector is being interpolated across the primitive
  // which can make it un-normalized. So normalize the vertex's normal vector.
  vertex_normal = normalize( v_Normal );

// Step 3: Modify the color based on light reflection
  color = light_reflection(color, vertex_normal);

// Set the fragment's color, using the surface's color alpha value unchanged.
  gl_FragColor = vec4(color, v_Color.a);
}

//=========================================================================
// Fragment shader
// By: Dr. Wayne Brown, Spring 2016

precision mediump int;
precision mediump float;

// Light model
uniform vec3 u_Light_position;
uniform vec3 u_Light_color;
uniform float u_Shininess;
uniform vec3 u_Ambient_color;

// The texture unit to use for the color lookup
uniform sampler2D u_Sampler;