webgl and glsl basics · webgl and glsl basics cs559 – fall 2016 lecture 14 october 24 2016 ....
TRANSCRIPT
![Page 1: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/1.jpg)
WebGL and GLSL Basics
CS559 – Fall 2016 Lecture 14
October 24 2016
![Page 2: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/2.jpg)
Review …
![Page 3: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/3.jpg)
Hardware Rasterization
For each point: Compute barycentric coords Decide if in or out
.7, .7, -‐.4 1.1, 0, -‐.1
.9,.05,.05
.33,.33,.33
![Page 4: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/4.jpg)
1988: The Personal Iris
![Page 5: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/5.jpg)
A Pipeline
transf light project raster shade write 1
![Page 6: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/6.jpg)
The pipeline (1988) Applica>on Program
Graphics Driver
Vertex Processing
(TCL)
Command Buffer (Triangle Queue)
Vertex
Que
ue
Vertex
Cache
Assembly
Triangle Processing Rasterize Pixel
Processing Pixel
Que
ue
Pixel Tests
Frame Buffer
Texture Memory Render to texture
Vertex shading
Geometry Shading
Pixel Shading
![Page 7: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/7.jpg)
The pipeline (2006-current) Applica>on Program
Graphics Driver
Vertex Processing
(TCL)
Command Buffer (Triangle Queue)
Vertex
Que
ue
Vertex
Cache
Assembly
Triangle Processing Rasterize Pixel
Processing Pixel
Que
ue
Pixel Tests
Frame Buffer
Texture Memory Render to texture
Vertex shading
Geometry Shading
Pixel Shading
![Page 8: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/8.jpg)
The parts you have to program 1988-2014 Now (in addition to above)
Applica>on Program
Graphics Driver
Vertex Processing
(TCL)
Command Buffer (Triangle Queue)
Vertex
Que
ue
Vertex
Cache
Assembly
Triangle Processing Rasterize Pixel
Processing Pixel
Que
ue
Pixel Tests
Frame Buffer
Texture Memory Render to texture
Vertex shading
Geometry Shading
Pixel Shading
![Page 9: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/9.jpg)
A Triangle’s Journey
![Page 10: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/10.jpg)
A Program to Draw a Triangle
The complete WebGL thing we need Doing each necessary steps Just one triangle… http://jsbin.com/fowoku/edit
![Page 11: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/11.jpg)
Just a Triangle
![Page 12: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/12.jpg)
HTML like you are used to
![Page 13: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/13.jpg)
A Lot of Code
![Page 14: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/14.jpg)
Look at the process inside-out
We’ll start with the end of the pipeline And work backwards…
![Page 15: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/15.jpg)
The parts you have to program 1988-2014 Now (in addition to above)
Applica>on Program
Graphics Driver
Vertex Processing
(TCL)
Command Buffer (Triangle Queue)
Vertex
Que
ue
Vertex
Cache
Assembly
Triangle Processing Rasterize Pixel
Processing Pixel
Que
ue
Pixel Tests
Frame Buffer
Texture Memory Render to texture
Vertex shading
Geometry Shading
Pixel Shading
![Page 16: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/16.jpg)
Applica>on Program
Graphics Driver
Vertex Processing
(TCL)
Command Buffer (Triangle Queue)
Vertex
Que
ue
Vertex
Cache
Assembly
Triangle Processing Rasterize Pixel
Processing Pixel
Que
ue
Pixel Tests
Frame Buffer
Texture Memory Render to texture
Vertex shading
Geometry Shading
Pixel Shading
I warned you: This step will get to be preXy exci>ng
![Page 17: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/17.jpg)
Applica>on Program
Graphics Driver
Vertex Processing
(TCL)
Command Buffer (Triangle Queue)
Vertex
Que
ue
Vertex
Cache
Assembly
Triangle Processing Rasterize Pixel
Processing Pixel
Que
ue
Pixel Tests
Frame Buffer
Texture Memory Render to texture
Vertex shading
Geometry Shading
Pixel Shading
We have to program this step! The program is called the:
Fragment Shader
![Page 18: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/18.jpg)
Applica>on Program
Graphics Driver
Vertex Processing
(TCL)
Command Buffer (Triangle Queue)
Vertex
Que
ue
Vertex
Cache
Assembly
Triangle Processing Rasterize Pixel
Processing Pixel
Que
ue
Pixel Tests
Frame Buffer
Texture Memory Render to texture
Vertex shading
Geometry Shading
Pixel Shading
Pixel in à Pixel out, each independent All we do is change its values
![Page 19: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/19.jpg)
Applica>on Program
Graphics Driver
Vertex Processing
(TCL)
Command Buffer (Triangle Queue)
Vertex
Que
ue
Vertex
Cache
Assembly
Triangle Processing Rasterize Pixel
Processing Pixel
Que
ue
Pixel Tests
Frame Buffer
Texture Memory Render to texture
Vertex shading
Geometry Shading
Pixel Shading
Coming aXrac>ons… This step will get to be preXy exci>ng
![Page 20: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/20.jpg)
The Pixel Shader
Given information about the pixel Compute color Optionally, compute other things
![Page 21: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/21.jpg)
How to program it
Use a Shading Language We’ll use a language called GLSL Compiler built into WebGL Language specifics as we go…
![Page 22: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/22.jpg)
A (boring) Fragment Shader
void main(void) {
gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0); }
![Page 23: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/23.jpg)
A (boring) Fragment Shader
void main(void) {
gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0); }
Shaders define a main func>on that take no arguments return no values
![Page 24: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/24.jpg)
A (boring) Fragment Shader
void main(void) {
gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0); }
GLSL Shaders operate by side effects on special variables (they look like globals)
![Page 25: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/25.jpg)
A (boring) Fragment Shader
void main(void) {
gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0); }
GLSL has types useful in graphics Like 4 vectors
This is opaque yellow (even colors are 4-‐vectors)
![Page 26: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/26.jpg)
Applica>on Program
Graphics Driver
Vertex Processing
(TCL)
Command Buffer (Triangle Queue)
Vertex
Que
ue
Vertex
Cache
Assembly
Triangle Processing Rasterize Pixel
Processing Pixel
Que
ue
Pixel Tests
Frame Buffer
Texture Memory Render to texture
Vertex shading
Geometry Shading
Pixel Shading
Vertex Processing We have to program this part too Also in GLSL
![Page 27: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/27.jpg)
Applica>on Program
Graphics Driver
Vertex Processing
(TCL)
Command Buffer (Triangle Queue)
Vertex
Que
ue
Vertex
Cache
Assembly
Triangle Processing Rasterize Pixel
Processing Pixel
Que
ue
Pixel Tests
Frame Buffer
Texture Memory Render to texture
Vertex shading
Geometry Shading
Pixel Shading
Process each vertex independently Transform – compute x’ and n’ Clip Light – compute c’
![Page 28: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/28.jpg)
What data about vertices?
Inputs: Position Other Stuff
Outputs:
Position Other Stuff
Vertex A/ributes from applica>on
varying proper>es to framgment Shaders (remember interpola>on)
![Page 29: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/29.jpg)
The simplest vertex shader
attribute vec3 pos; void main(void) { gl_Position = vec4(pos, 1.0); } }
![Page 30: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/30.jpg)
The simplest vertex shader
attribute vec3 pos; void main(void) { gl_Position = vec4(pos, 1.0); } }
Shaders define a main func>on that take no arguments return no values
![Page 31: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/31.jpg)
The simplest vertex shader
attribute vec3 pos; void main(void) { gl_Position = vec4(pos, 1.0); } }
Shaders output by side effects: seang special variables
![Page 32: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/32.jpg)
The simplest vertex shader
attribute vec3 pos; void main(void) { gl_Position = vec4(pos, 1.0); } }
Shaders get input by reading special variables
![Page 33: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/33.jpg)
Special Variables
Built in (magic) gl_Position – output of vertex shader gl_FragColor – output of frag shader
User Defined
attributes – inputs to vertex shader varying – output from vertex to fragment uniform – “constant” over triangle group
![Page 34: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/34.jpg)
The simplest vertex shader
attribute vec3 pos; void main(void) { gl_Position = vec4(pos, 1.0); } }
We are defining our own special variable
![Page 35: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/35.jpg)
The simplest vertex shader
attribute vec3 pos; void main(void) { gl_Position = vec4(pos, 1.0); } }
Cool GLSL feature: type conversions
![Page 36: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/36.jpg)
No Transformation?
I will assume the position is already in the right coordinate system. The rasterizer (and everything else) works in Normalized Device Coordinates (NDC) -1 to 1 in each dimension
![Page 37: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/37.jpg)
Applica>on Program
Graphics Driver
Vertex Processing
(TCL)
Command Buffer (Triangle Queue)
Vertex
Que
ue
Vertex
Cache
Assembly
Triangle Processing Rasterize Pixel
Processing Pixel
Que
ue
Pixel Tests
Frame Buffer
Texture Memory Render to texture
Vertex shading
Geometry Shading
Pixel Shading
Start here Setup modes (window, …) Setup transform, lights Draw a triangle Posi>on, color, normal
![Page 38: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/38.jpg)
In JavaScript using WebGL…
![Page 39: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/39.jpg)
The beginning
![Page 40: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/40.jpg)
The beginning
This should look like HTML5 Canvas You can have multiple contexts (draw “canvas” over WebGL)
![Page 41: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/41.jpg)
Now about those shaders…
Get them into strings Use a library to read them from resources
![Page 42: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/42.jpg)
Run the compiler!
![Page 43: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/43.jpg)
Error Checking
Here I checked for errors (since I often have syntax errors)
You should check for errors everywhere
![Page 44: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/44.jpg)
Run the compiler again!
Need to compile both shaders
![Page 45: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/45.jpg)
Link the shaders together…
Shaders always work in pairs Need to connect them
![Page 46: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/46.jpg)
Setup the special variables
Important to communicate with shaders
![Page 47: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/47.jpg)
The simplest vertex shader
attribute vec3 pos; void main(void) { gl_Position = vec4(pos, 1.0); } }
Javascript needs to connect to the “pos” variable
![Page 48: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/48.jpg)
Communicating an attribute
We give it an array of attributes Assign it to a position We have to ask which position
![Page 49: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/49.jpg)
OK, Now for our triangle
How do we get this data to the hardware? Need to do a block transfer
![Page 50: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/50.jpg)
Applica>on Program
Graphics Driver
Vertex Processing
(TCL)
Command Buffer (Triangle Queue)
Vertex
Que
ue
Vertex
Cache
Assembly
Triangle Processing Rasterize Pixel
Processing Pixel
Que
ue
Pixel Tests
Frame Buffer
Texture Memory Render to texture
Vertex shading
Geometry Shading
Pixel Shading
Need to get the ver>ces to the hardware fast! (normally more than 3)
![Page 51: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/51.jpg)
Key Idea: Buffer
Create a buffer buffer = a block of memory on the GPU
Copy the data into the buffer Must be a special JavaScript object:
Float32Array (array of fixed types)
![Page 52: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/52.jpg)
Now to draw
First we have to clear the screen Notice that color is a 4-vector I don’t really need the z-buffer
![Page 53: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/53.jpg)
Now we actually draw the triangle
Notice that we use the shaders and the buffer
![Page 54: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/54.jpg)
All that for a triangle!
![Page 55: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/55.jpg)
Is it really 100 lines of code?
Not really – lots of comments Build wrappers to be more concise
you do the same thing over and over But there are lots of steps
and you should understand them
![Page 56: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/56.jpg)
Two triangles…
Can you see where these triangles will go? (remember they are in NDC)
![Page 57: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/57.jpg)
Change the array sizes
![Page 58: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/58.jpg)
Two triangles
![Page 59: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/59.jpg)
How do we color them differently?
![Page 60: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/60.jpg)
Color per vertex
Add an attribute for each vertex so we can pass a color for each
Have the vertex shader output the color
varying variable for fragment shader Have the fragment shader input the color
![Page 61: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/61.jpg)
A (boring) Fragment Shader
void main(void) {
gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0); }
![Page 62: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/62.jpg)
A (less boring) Fragment Shader
precision highp float; varying vec3 outColor; void main(void) {
gl_FragColor = vec4(outColor, 1.0); }
Our own magic variable!
![Page 63: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/63.jpg)
A (less boring) Fragment Shader
precision highp float; varying vec3 outColor; void main(void) {
gl_FragColor = vec4(outColor, 1.0); }
Required so the shaders can talk
![Page 64: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/64.jpg)
Connecting Shaders
varying variables connect shaders the output of a vertex shader becomes the input to a fragment shader The 3 vertices of a triangle are interpolated
![Page 65: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/65.jpg)
The simplest vertex shader
attribute vec3 pos; void main(void) { gl_Position = vec4(pos, 1.0); } }
![Page 66: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/66.jpg)
The (almost) simplest vertex shader
attribute vec3 pos; varying vec3 outColor; void main(void) { gl_Position = vec4(pos, 1.0); } outColor = vec3(1.0,0.0,1.0); }
![Page 67: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/67.jpg)
Two purple triangles
hXp://jsbin.com/wecaci/edit?js,output
![Page 68: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/68.jpg)
Make color an input as well
attribute vec3 pos; attribute vec3 inColor; varying vec3 outColor; void main(void) { gl_Position = vec4(pos, 1.0); } outColor = inColor; }
![Page 69: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/69.jpg)
Remember…
We can’t pass values directly to a fragment we don’t even know what they will be!
We pass attributes of vertices
which can then pass them to fragments
![Page 70: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/70.jpg)
Now to connect to JavaScript…
![Page 71: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/71.jpg)
Colors per vertex
![Page 72: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/72.jpg)
Put them in a buffer
![Page 73: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/73.jpg)
When we draw, use 2 buffers
![Page 74: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/74.jpg)
Two triangles…
hXp://jsbin.com/digupi/edit?js,output
![Page 75: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/75.jpg)
Apply a transformation
One transformation for the triangle group It is constant over the “drawArrays” call This is a uniform variable
hXp://jsbin.com/>rapu/19/edit?js,output
![Page 76: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/76.jpg)
Simplifying the Code
There is stuff you do over and over and … Write it once and use it often Or let someone else write it once… This is where twgl comes in
![Page 77: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/77.jpg)
Compile two vertex programs
For each… run the compiler check for errors
Link them together Attach to the attributes Set up to specify the uniforms
![Page 78: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/78.jpg)
Do it by hand… Do it with twgl var shaders = twgl.createProgramInfo(gl, ["vs", "fs"]);
Yes, one line… And it grabs the string from script tags so they are separate from your JS program. But the documentation is terrible.
![Page 79: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/79.jpg)
How about those shaders…
They do very specific things you need to understand the pipeline
They have 3 kinds of weird variables you need to understand the model
They are written in a cool language you’ll pick it up quickly
The language has a bunch of useful stuff look at the quick reference card
![Page 80: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/80.jpg)
Learning Shader Programming
Connecting your program to shaders is hard So, don’t bother… (yet) Use a Shader IDE that lets you focus on shaders Gives you an object, a program, …
![Page 81: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/81.jpg)
Some things about GLSL
Very strongly typed float x = 1; // error! integer and float
Cool “sub-vector” access: vec3 v; v.xy (a 2-vector) vec4(v,1) (a 4-vector) vec4(v.xy, v.zx)
![Page 82: WebGL and GLSL Basics · WebGL and GLSL Basics CS559 – Fall 2016 Lecture 14 October 24 2016 . Review … Hardware Rasterization For each point: Compute barycentric coords Decide](https://reader034.vdocument.in/reader034/viewer/2022052101/603b4eab8e91d72254057b55/html5/thumbnails/82.jpg)
More cool stuff about GLSL
Lots of handy math functions They know it’s for graphics!
Limited control structures
parallel execution means all the same Conditional functions
step, softstep, …