CISC 3620 Lecture 2 GLSL and Shaders - Michael I...
Transcript of CISC 3620 Lecture 2 GLSL and Shaders - Michael I...
![Page 1: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/1.jpg)
CISC 3620 Lecture 2GLSL and Shaders
Topics:
Models and ArchitecturesWebGL Overview
Shaders and GLSLColor and attributes
More GLSL
![Page 2: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/2.jpg)
Models and Architectures
![Page 3: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/3.jpg)
3
Models and Architectures: Objectives
● Learn the basic design of a graphics system● Introduce pipeline architecture● Examine software components for an
interactive graphics system
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 4: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/4.jpg)
4
Image Formation Revisited
● Can we mimic the synthetic camera model to design graphics hardware software?
● Application Programmer Interface (API)– Need only specify
● Objects● Materials● Viewer● Lights
● But how is the API implemented?
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 5: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/5.jpg)
5
Object Specification
● Most APIs support a limited set of primitives including– Points (0D object)– Line segments (1D objects)– Polygons (2D objects)– Some curves and surfaces
● Quadrics● Parametric polynomials
● All are defined through locations in space or vertices
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 6: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/6.jpg)
6
Camera Specification
● Six degrees of freedom for lens position– Position of center of lens– Orientation
● Lens parameters: type, focal length
● Film size: 2D● Orientation of film plane:
another 6D
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 7: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/7.jpg)
7
Lights and Materials
● Types of lights– Point sources vs distributed sources– Spot lights– Near and far sources– Color properties
● Material properties– Absorption: color properties– Scattering
● Diffuse● Specular
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
https://bensimonds.com/2010/08/27/plausiblematerials/
![Page 8: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/8.jpg)
8
Physical Approaches● Ray tracing: follow rays of
light from center of projection until they either are absorbed by objects or go off to infinity– Can handle global effects
● Multiple reflections● Translucent objects
– Slow– Must have all objects and lights
available for rendering anything
● Radiosity: Approximation to ray tracing for opaque but diffuse objects – still slow
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
https://commons.wikimedia.org/w/index.php?curid=1729662
![Page 9: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/9.jpg)
9
Practical Approach
● Process objects one at a time in the order they are generated by the application– Can consider only local lighting
● Pipeline architecture
● All steps can be implemented in hardware on the graphics card
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html
![Page 10: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/10.jpg)
10
Vertex Processing
● Much of the work in the pipeline is in converting object representations from one coordinate system to another– Object coordinates– Camera (eye) coordinates– Screen coordinates
● Every change of coordinates is equivalent to a matrix transformation
● Vertex processor also computes vertex colors
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html
![Page 11: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/11.jpg)
11
Vertext Processing: Projection
● Projection is the process that combines the 3D viewer with the 3D objects to produce the 2D image– Perspective projections: all projectors meet at the center
of projection– Parallel projection: projectors are parallel, center of
projection is replaced by a direction of projection
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html
![Page 12: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/12.jpg)
12
Vertext Processing:Primitive Assembly
Vertices must be collected into geometric objects before clipping and rasterization can take place
– Line segments– Polygons– Curves and surfaces
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html
![Page 13: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/13.jpg)
13
Vertex Processing:Clipping
Just as a real camera cannot “see” the whole world, the virtual camera can only see part of the world or object space
– Objects that are not within this volume are said to be clipped out of the scene
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 14: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/14.jpg)
14
Rasterization
● If an object is not clipped out, the appropriate pixels in the frame buffer must be assigned colors
● Rasterizer produces a set of fragments for each object● Fragments are “potential pixels”
– Have a location in frame bufffer– Color and depth attributes
● Vertex attributes are interpolated over objects by the rasterizer
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html
![Page 15: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/15.jpg)
15
Fragment Processing
● Fragments are processed to determine the color of the corresponding pixel in the frame buffer
● Colors can be determined by texture mapping or interpolation of vertex colors
● Fragments may be blocked by other fragments closer to the camera – Hidden-surface removal
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html
![Page 16: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/16.jpg)
Programming with WebGL:Shader overview
![Page 17: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/17.jpg)
All WebGL programs need two programmed shaders
● Vertex shader – Vertex processor– Processes each vertex independently– Outputs final position
● Fragment shader – Fragment processor– Processes each pixel independently (interpolated by rasterizer)– Outputs final color
https://www.ntu.edu.sg/home/ehchua/programming/opengl/CG_BasicsTheory.html
![Page 18: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/18.jpg)
18
Vertex Shader Applications
● Moving vertices– Mainly coordinate transformations, projections– But also: Morphing, Wave motion, Fractals
● Lighting– More realistic models– Cartoon shaders
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 19: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/19.jpg)
19
Fragment Shader Applications
Per fragment lighting calculations
per vertex lighting per fragment lighting
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 20: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/20.jpg)
20
Fragment Shader Applications
Texture mapping
smooth shading environment mapping
bump mapping
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 21: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/21.jpg)
21
Writing Shaders
● First programmable shaders were programmed in an assembly-like manner
● OpenGL extensions added functions for vertex and fragment shaders
● Cg (C for graphics) C-like language for programming shaders Works with both OpenGL and DirectX Interface to OpenGL complex
● OpenGL Shading Language (GLSL)
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 22: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/22.jpg)
22
GLSL
● OpenGL Shading Language● Part of OpenGL 2.0 and up● High level C-like language● New data types
– Matrices– Vectors– Samplers
● As of OpenGL 3.1, application must provide shaders
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 23: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/23.jpg)
23
Simple Vertex Shader
attribute vec4 vPosition;
void main(void)
{
gl_Position = vPosition;
}
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 24: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/24.jpg)
24
Execution Model
VertexShader
GPU
PrimitiveAssembly
ApplicationProgram
gl.drawArrays Vertex
Vertex dataShader Program
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 25: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/25.jpg)
25
Simple Fragment Shader
precision mediump float;void main(void){ gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 26: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/26.jpg)
26
Execution Model
FragmentShader
Application
Frame BufferRasterizerFragment Fragment
Color
Shader Program
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 27: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/27.jpg)
Revisit: JSFiddle triangle
27Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 28: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/28.jpg)
Programming with WebGL:Shader details
![Page 29: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/29.jpg)
29
Data Types
● C types: int, float, bool● Vectors: float vec2, vec3, vec4 Also int (ivec) and boolean (bvec)
● Matrices: mat2, mat3, mat4 Stored by columns Standard referencing m[row][column]
● C++ style constructors vec3 a =vec3(1.0, 2.0, 3.0) vec2 b = vec2(a)
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 30: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/30.jpg)
30
No Pointers
● There are no pointers in GLSL● We can use C structs which can be copied back
from functions● Because matrices and vectors are basic types
they can be passed into and output from GLSL functions, e.g.
mat3 func(mat3 a)● variables passed by copying
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 31: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/31.jpg)
31
Qualifiers
● GLSL has many of the same qualifiers such as const as C/C++
● Need others due to the nature of the execution model● Variables can change
– Once per primitive – “uniform”
– Once per vertex – “attribute”
– Once per fragment – “varying”
– At any time in the application● Vertex attributes are interpolated by the rasterizer into
fragment attributes
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 32: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/32.jpg)
32
“uniform” Qualifier
● Variables that are constant for an entire primitive● Can be changed in application and sent to shaders● Cannot be changed in shader● Used to pass information to shader such as the time
or a bounding box of a primitive or transformation matrices
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 33: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/33.jpg)
33
“attribute” Qualifier
● Attribute-qualified variables can change at most once per vertex
● There are a few built in variables such as gl_Position but most have been deprecated
● User defined (in application program) attribute float temperatureattribute vec3 velocityrecent versions of GLSL use in and out qualifiers to get to
and from shaders
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 34: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/34.jpg)
34
“varying” Qualifier
● Variables that are passed from vertex shader to fragment shader
● Automatically interpolated by the rasterizer● With WebGL, GLSL uses the varying qualifier in both shadersvarying vec4 fColor;
● More recent versions of WebGL use out in vertex shader and in in the fragment shaderout vec4 fColor; //vertex shader
in vec4 fColor; // fragment shader
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 35: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/35.jpg)
Our Naming Convention
● Attributes passed to vertex shader have names beginning with v (v Position, vColor) in both the application and the shader– Note that these are different entities with the same name
● Varying variables begin with f (fColor) in both shaders– must have same name in both shaders
● Uniform variables are unadorned and can have the same name in application and shaders
35Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 36: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/36.jpg)
36
Example: Vertex Shader
attribute vec4 vColor;varying vec4 fColor;void main(){ gl_Position = vPosition; fColor = vColor;}
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 37: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/37.jpg)
37
Corresponding Fragment Shader
precision mediump float;
varying vec4 fColor;void main(){ gl_FragColor = fColor;}
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 38: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/38.jpg)
Sending Colors from Application
38Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
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 );
![Page 39: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/39.jpg)
Sending a Uniform Variable
39Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
// in applicationvar color = vec4(1.0, 0.0, 0.0, 1.0);colorLoc = gl.getUniformLocation( program, ”color" ); gl.uniform4fv( colorLoc, color);
// in fragment shader (similar in vertex shader)uniform vec4 color;void main(){ gl_FragColor = color;
}
![Page 40: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/40.jpg)
In-class exercisePut color of triangle in “uniform”
40Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 41: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/41.jpg)
41
Operators and Functions
● Standard C functions– Trigonometric– Arithmetic– Normalize, reflect, length
● Overloading of vector and matrix typesmat4 a;vec4 b, c, d;c = b*a; // column vector stored as 1d arrayd = a*b; // row vector stored as 1d array
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 42: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/42.jpg)
42
Swizzling and Selection
● Can refer to array elements using [] or selection (.) operator with x, y, z, w r, g, b, a s, t, p, qa[2], a.b, a.z, a.p are the same
● Swizzling operator lets us index multiple components in ordervec4 a, b;a.yz = vec2(1.0, 2.0, 3.0, 4.0);b = a.yxzw;
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 43: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/43.jpg)
43
Functions named by type
● All versions of OpenGL do no use function overloading
● So that there are multiple versions for a given logical function
● Example: sending values to shadersgl.uniform3f – 3D floats gl.uniform2i – 2D integersgl.uniform3dv – 3D double vectors
● Underlying storage mode is the same
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 44: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/44.jpg)
44
WebGL function format
gl.uniform3f(x,y,z)
belongs to WebGL canvas
function name
x,y,z are variables
gl.uniform3fv(p)
p is an array
dimension
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 45: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/45.jpg)
Programming with WebGL:Color and attributes
![Page 46: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/46.jpg)
46
Color and attributes: Objectives
● WebGL primitives● Adding color● Vertex attributes
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 47: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/47.jpg)
47
WebGLPrimitives
GL_TRIANGLE_STRIPGL_TRIANGLE_STRIP GL_TRIANGLE_FANGL_TRIANGLE_FAN
GL_POINTSGL_POINTS
GL_LINESGL_LINES
GL_LINE_LOOPGL_LINE_LOOP
GL_LINE_STRIPGL_LINE_STRIP
GL_TRIANGLESGL_TRIANGLES
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 48: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/48.jpg)
48
WebGL only uses triangles
● Triangles– Simple: edges cannot cross
– Convex: All points on line segment between two points in a polygon are also in the polygon
– Flat: all vertices are in the same plane● Application program must tessellate a polygon into triangles
(triangulation)● OpenGL 4.1 contains a tessellator but not WebGL
nonsimple polygonnonconvex polygon
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 49: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/49.jpg)
Polygon Testing
● Conceptually simple to test for simplicity and convexity – but time consuming
● Earlier versions assumed both – and left testing to the application
● Present version only renders triangles● Need algorithm to triangulate an arbitrary
polygon – Will discuss later in course
49Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 50: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/50.jpg)
50
Attributes
● Attributes determine the appearance of objects– Color (points, lines, polygons)– Size and width (points, lines)– Stipple pattern (lines, polygons)– Polygon mode
● Display as filled: solid color or stipple pattern● Display edges● Display vertices
● Only a few (gl_PointSize) are supported by WebGL functions
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 51: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/51.jpg)
51
RGB color
● Each color component is stored separately in the frame buffer
● Usually 8 bits per component in buffer● Color values can range from 0.0 (none) to 1.0 (all) using
floats or over the range from 0 to 255 using unsigned bytes
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 52: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/52.jpg)
52
Indexed Color
● Colors are indices into tables of RGB values● Requires less memory indices usually 8 bits not as important now• Memory inexpensive• Need more colors for shading
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 53: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/53.jpg)
53
Smooth Color
● Default is smooth shading– Rasterizer interpolates vertex colors across visible
polygons
● Alternative is flat shading– Color of first vertex
● determines fill color– Handle in shader
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 54: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/54.jpg)
Setting Colors
● Colors are ultimately set in the fragment shader but can be determined in either shader or in the application
● Application color: pass to vertex shader as a uniform variable or as a vertex attribute
● Vertex shader color: pass to fragment shader as varying variable
● Fragment color: can alter via shader code
54Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 55: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/55.jpg)
In-class exercisePut color of triangle in “varying”
55Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 56: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/56.jpg)
Programming with WebGL:More GLSL
![Page 57: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/57.jpg)
More GLSL: Objectives
● Coupling shaders to applications– Reading– Compiling– Linking
● Vertex Attributes● Setting up uniform variables● Example applications
57Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 58: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/58.jpg)
Linking Shaders with Application
● Read shaders● Compile shaders● Create a program object● Link everything together● Link variables in application with variables in
shaders– Vertex attributes– Uniform variables
58Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 59: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/59.jpg)
Program Object
● Container for shaders – Can contain multiple shaders– Other GLSL functions
var program = gl.createProgram();
gl.attachShader( program, vertShdr ); gl.attachShader( program, fragShdr ); gl.linkProgram( program );
59Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 60: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/60.jpg)
Reading a Shader
● Shaders are added to the program object and compiled
● Usual method of passing a shader is as a null-terminated string using the function
gl.shaderSource( fragShdr, fragElem.text );● If shader is in HTML file, we can get it into
application by getElementById method● If the shader is in a file, we can write a reader to
convert the file to a string
60Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 61: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/61.jpg)
Adding a Vertex Shader
var vertShdr;var vertElem = document.getElementById( vertexShaderId );
vertShdr = gl.createShader( gl.VERTEX_SHADER );
gl.shaderSource( vertShdr, vertElem.text );gl.compileShader( vertShdr );
// after program object createdgl.attachShader( program, vertShdr );
61Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 62: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/62.jpg)
Shader Reader
● Following code may be a security issue with some browsers if you try to run it locally– Cross Origin Request
62
function getShader(gl, shaderName, type) { var shader = gl.createShader(type); shaderScript = loadFileAJAX(shaderName); if (!shaderScript) { alert("Could not find shader source: "+shaderName); }}
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 63: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/63.jpg)
Precision Declaration
● In GLSL for WebGL we must specify desired precision in fragment shaders– artifact inherited from OpenGL ES– ES must run on very simple embedded devices that
may not support 32-bit floating point– All implementations must support mediump– No default for float in fragment shader
● Can use preprocessor directives (#ifdef) to check if highp supported and, if not, default to mediump
63Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 64: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/64.jpg)
Pass Through Fragment Shader
64Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
#ifdef GL_FRAGMENT_SHADER_PRECISION_HIGH precision highp float;#else precision mediump float;#endif
varying vec4 fcolor;void main(void){ gl_FragColor = fcolor;}
![Page 65: CISC 3620 Lecture 2 GLSL and Shaders - Michael I Mandelm.mr-pc.org/t/cisc3620/2019sp/lecture02.pdfGLSL has many of the same qualifiers such as const as C/ C++ Need others due to the](https://reader033.fdocuments.net/reader033/viewer/2022041917/5e6a3a4f01787812d47e24d3/html5/thumbnails/65.jpg)
Summary
● Models and Architectures● WebGL Overview● Shaders and GLSL● Color and attributes● More GLSL