1

Graphics

CSCI 343, Fall 2015Lecture 5

Color in WebGL

2

Physical Color Visible light has wavelengths from 350 - 780 nm in the electromagnetic spectrum. Short wavelengths are perceived as blue. Long wavelengths are perceived as red. Light is reflected of surfaces, and some of that enters the eye and is detected by cells (photoreceptors). Reflected light has some function of intensities.

c()

350 780

3

Red, Green and Blue photoreceptors

Photoreceptors come in three types: Red, Green and Blue.Each is sensitive to light in a given range of wavelengths.

R()

G()

B()

Our color perception is based on the relative response magnitudes of these three types of photoreceptors.

4

Color Matching

To reproduce the appearance of any color, we need to stimulate the photoreceptors by the same amount as a given color stimulates them.

c()

350 780

Physical Color

Resp.

B G R

Photoreceptorresponse

c()

Matchingcolor

We can match the appearance of any color with the proper amount or red, green and blue light combined.

5

The Frame Buffer

The frame buffer stores the value of each pixel in the viewing window.

Each pixel has a given number of bits to encode the color. The number of bits is the bit depth.

Bit depth = 8 implies 256 possible colors.Bit depth = 32 implies millions of possible colors (232)

6

Indexed color

Problem: If the bit depth is small (<=8), you have a limited number of colors to work with.

Solution: Create a color table with 256 cells. Choose the colors that best represent the image to store in the cells.

Each number from 0 - 255 represents a color in the color table.

When displaying the image, the computer looks up the color associated with the number stored for a given pixel.

7

Color tables

8

RGB Color

If you have lots of memory, can use a bit depth of 24. This allows 8 bits to code for each of Red, Green and Blue values.

Color is often specified by Hexadecimal values (base 16):

#FF FF FF (What color is this?)

R G B

OpenGL: Don't want to depend on particular hardware or number of bits per pixel. Use generic color scale from between 0 and 1.0 for each R, G, B value.

9

WebGL Color specification

var pointColor = vec3(r, g, b); //r, g and b range between 0 and 1.0

pointColor = vec3(1.0, 0.0, 0.0); //What color is this?

pointColor = vec3(1.0, 0.0, 1.0);

pointColor = vec3(0.0, 1.0, 0.0);

The alpha channel is a fourth color parameter that specifies opacity vs. transparency (0 = transparent, 1 = opaque).

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

RGB white opaque

10

Specifying vertex color

•Colors are set for each vertex and fragment by the fragment shader.

•We can pass specific colors for each vertex to the shaders using a color data array.

•We can either pass one array containing both vertex location and vertex color,

•Or we can create two separate arrays, one for color and one for position.

11

Example: the color_square( ) function

var points = [ ];var colors = [ ];...function color_square( ){ var vertices = [ vec3(-1.0, -1.0, 0.0 ), vec3(-1.0, 1.0, 0.0 ), vec3( 1.0, 1.0, 0.0 ), vec3( 1.0, -1.0, 0.0) ];

// add colors and vertices for one triangle var baseColors = [ vec3(1.0, 0.0, 0.0), vec3(0.0, 1.0, 0.0), ];

12

More of the color_square( ) function

triangle(vertices[0], vertices[1], vertices[2], baseColors[0]);triangle(vertices[0], vertices[2], vertices[3], baseColors[1]);

} //end color square

function triangle(a, b, c, color) { colors.push( color ); //first vertex points.push( a ); colors.push( color ); //second vertex points.push( b ); colors.push( color ); //third vertex points.push( c );} //end triangle

13

In the init( ) function:

var cBuffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer ); gl.bufferData( gl.ARRAY_BUFFER, flatten(colors),

gl.STATIC_DRAW ); var vColor = gl.getAttribLocation( program, "vColor" ); gl.vertexAttribPointer( vColor, 3, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vColor );

Note: You still need to have the code for vPosition. The code for the two buffers is very similar.

14

Assigning Color in the Shaders

We use the keyword, attribute, to indicate variables whose values are input to the vertex shader from the graphics program.

We use the keyword, varying, to indicate variables that are output from the vertex shader and passed to the fragment shader.

15

The new vertex shader

<script id="vertex-shader" type="x-shader/x-vertex">attribute vec3 vPosition; //passed to vertex shader attribute vec3 vColor; //passed to vertex shadervarying vec4 color; //output to the fragment shader

void main(){ gl_Position = vec4(vPosition, 1.0); color = vec4(vColor, 1.0); //output to fragment shader}</script>

16

The new fragment shader

<script id="fragment-shader" type="x-shader/x-fragment">precision mediump float; varying vec4 color; //input from vertex shader

void main(){ gl_FragColor = color;}</script>