Introduction to Computer Graphics with Web GL Ed

Introduction to Computer Graphics with Web. GL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 1

Per Vertex and Per Fragment Shaders Ed Angel Professor Emeritus of Computer Science University of New Mexico Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 2

Vertex Lighting Shaders I // vertex shader attribute vec 4 v. Position; attribute vec 4 v. Normal; varying vec 4 f. Color; uniform vec 4 ambient. Product, diffuse. Product, specular. Product; uniform mat 4 model. View. Matrix; uniform mat 4 projection. Matrix; uniform vec 4 light. Position; uniform float shininess; void main() Angel{and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 3

Vertex Lighting Shaders II vec 3 pos = -(model. View. Matrix * v. Position). xyz; vec 3 light = light. Position. xyz; vec 3 L = normalize( light - pos ); vec 3 E = normalize( -pos ); vec 3 H = normalize( L + E ); // Transform vertex normal into eye coordinates vec 3 N = normalize( (model. View. Matrix*v. Normal). xyz); // Compute terms in the illumination equation Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 4

Vertex Lighting Shaders III // Compute terms in the illumination equation vec 4 ambient = Ambient. Product; float Kd = max( dot(L, N), 0. 0 ); vec 4 diffuse = Kd*Diffuse. Product; float Ks = pow( max(dot(N, H), 0. 0), Shininess ); vec 4 specular = Ks * Specular. Product; if( dot(L, N) < 0. 0 ) specular = vec 4(0. 0, 1. 0); gl_Position = Projection * Model. View * v. Position; color = ambient + diffuse + specular; color. a = 1. 0; } Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 5

Vertex Lighting Shaders IV // fragment shader precision mediump float; varying vec 4 f. Color; voidmain() { gl_Frag. Color = f. Color; } Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 6

Fragment Lighting Shaders I // vertex shader attribute vec 4 v. Position; attribute vec 4 v. Normal; varying vec 3 N, L, E; uniform mat 4 model. View. Matrix; uniform mat 4 projection. Matrix; uniform vec 4 light. Position; Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 7

Fragment Lighting Shaders II void main() { vec 3 pos = -(model. View. Matrix * v. Position). xyz; vec 3 light = light. Position. xyz; L = normalize( light - pos ); E = -pos; N = normalize( (model. View. Matrix*v. Normal). xyz); gl_Position = projection. Matrix * model. View. Matrix * v. Position; }; Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 8

Fragment Lighting Shaders III // fragment shader precision mediump float; uniform vec 4 ambient. Product; uniform vec 4 diffuse. Product; uniform vec 4 specular. Product; uniform float shininess; varying vec 3 N, L, E; void main() { Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 9

Fragment Lighting Shaders IV vec 4 f. Color; vec 3 H = normalize( L + E ); vec 4 ambient = ambient. Product; float Kd = max( dot(L, N), 0. 0 ); vec 4 diffuse = Kd*diffuse. Product; float Ks = pow( max(dot(N, H), 0. 0), shininess ); vec 4 specular = Ks * specular. Product; if( dot(L, N) < 0. 0 ) specular = vec 4(0. 0, 1. 0); f. Color = ambient + diffuse +specular; f. Color. a = 1. 0; gl_Frag. Color = f. Color; } Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 10