CSC 4356 Computer Graphics WebGL Study Set #9

Canvas

Is the only HTML5 element that can render WebGL graphics.

GLSL Program

• init( ) sets up the data for later use in the program. Specify positions for objects to be rendered. Specify shaders to be used in the program. Use LoadShaders( ) routine for preparing shaders. Associate the data in the application with variables in the shader program. • display( ) does the rendering. Clear the window by calling glClear. Issue OpenGL calls required to render the geometric object. • main() does the heavy lifting (make the use of GLUT). Create a window. Call init, DisplayFunc. Enters into the event loop.

Programmable Pipeline

API provides "hooks" to replace the built-in functionality of certain stages through the use of shaders.

Vertex Shader

All vertex shaders require a position input or "attribute". Other attributes can be added. gl_Position is a built-in vertex shader output. Its value should always be set by the vertex shader. The simplest shaders just copy the position attribute (aPosition) straight to gl_Position.

Data Handling

Any data for shader program to access are provided to GPU. There are 4 ways a shader can receive data: • Buffers and Attributes: Buffers are arrays of binary data (positions, colors, normal, texture coordinates) upload to GPU. Attributes specify how to pull data out of buffers and provide them to shader. • Uniforms: Global variables we set before executing shader program. • Textures: Arrays of data for random access in shader program. • Varyings: A way for a vertex shader to pass data to a fragment shader. The values set on a varying by a vertex shader are interpolated while executing the fragment shader.

Shader Plumbing

Associate shader attribute with corresponding data buffer. Here we prepare the aPosition shader attribute entry point to receive vertex positions from the vertex buffer.

New OpenGL Pipeline

Associated with Version 4.3, evolved considerably since its introduction, and it is now programmable for both vertex and fragment processing.

Attribute and Varying Qualifier

Attribute-qualified variables can change at most once per vertex (unlike at anytime in the application). User defined variables: • GLSL uses attribute and varying qualifiers to get to and from shaders. • attribute vec4 aPosition • varying vec3 vColor; Varying-qualified variables are passed from vertex shader to fragment shader. Automatically interpolated by the rasterizer.

Naming Convention

Attributes passed to vertex shader have names beginning with a (aPosition, aColor) in both the application and the shader). Varying variables begin with v (vColor) are defined in the vertex shader. Varying variables begin with f (fColor) are defined in the fragment shader. Uniform variables begin with u (uColor) and can have the same name in application and shaders. There are a few built in variables: • gl_Position • gl_FragColor

Render Function

Clear the screen screen to the clear color. Actually, the WebGL automatically clears the screen before drawing to the default color if gl.clear is not called. Draw the data from the buffers currently associated with shader variables. Triangle has three vertices that start at the beginning of the buffer.

Color Setting

Colors are ultimately set in the fragment shader but can be determined in either shader or in the application. • Application color: Specify color array. var colors = [0,0,0, 1,0,0, 0,1,0, 0,0,1]; and pass to vertex shader as attribute aColor. • Vertex shader color: Set varying and pass to fragment. attribute vec3 aColor; varying vec3 vColor; vColor = aColor; • Fragment color: Can alter via shader code. varying vec3 vColor; gl_FragColor = vec4(vColor, 1.0);

Shader Program

Create program object and attach the both vertex and fragment shader objects: var program = initShaders(gl, "vertex-shader", "fragment-shader"); Involves multiple function calls (discussed later) Activate the shader program. Tell WebGL to use the program which consists of two shaders: gl.useProgram(program);

OpenGL Pipeline

Fixed function rendering, API provides a standardized interface to the hardware. Internally, API processes all primitives and attribute requests by the programmer in a fixed way.

Fragment Shader

Input to fragment shader from rasterizer is in window coordinates. Runs on each pixel of every transformed position passed in. Gets the appropriate pixel from the texture, adjusts its lighting, and outputs the pixel. Provides the color.

Shaders

Involve a series of steps: Create two shaders: Vertex shader and fragment shader. Return a handle that is associated with each shader object. Attach the source for each shader to the shader object. The shader source code is put into text file from which it is read into the program as single string. Compile the shaders. Create a program object. Allocate a program object and return its handle. Attached the shader objects to the program object. Link the program.

WebGL

Is a cross-platform API based on OpenGL ES to create 2D and 3D graphics in a Web Browser. Uses OpenGL shading language (GLSL). Runs on GPU. Has integration with Document Object Model interfaces. Can be used from a DOM compatible language like JavaScript. Runs in the HTML5 Canvas element (within the browser).

WebGL Shaders

Nothing happens in WebGL without shaders. Shaders take geometry data and convert them into pixels. Need to define two shaders when using GLSL. WebGL cares about two items: Clip-space coordinates and colors.

Vertex Shader

Runs on each vertex. Transforms the points, passes along the texture coordinates, and uses the normals to compute a lighting factor. Must output in clip coordinates.

Uniform Matrix Variable

Sending a uniform 4 x 4 matrix variable from application to vertex shader.

GLSL

Shader program uses both vertex and fragment shaders to render objects. Besides the use of OpenGL functions, the program also uses additional software libraries for window management, helper functions, and C/C++ structures. Include header files. Declare global variables and other useful programming constructs.

Shader Compilation Sequence

To use each shader program in our application, we need do a sequence of steps. For each GLSL shader object. Create a shader object. Compile your shader source into the object. To link multiple shader objects into an executable shader program. Create a shader program. Attach the appropriate shader objects to the shader program. Link the shader program. Use the shader for vertex or fragment processing.

Uniform Qualified

Variables that are constant for an entire primitive. For instance, a translation operation affects all vertices of the primitive in the same way. Are specified (and can be changed) in application and sent to shaders. Cannot be changed in shader. Are used to pass information to shader, such as transformation vectors and matrices: • uniform vec4 uTranslate; • uniform mat4 uScale;

Fragment Shader

gl_FragColor is a built-in fragment shader output. Since fragment shaders have no default precision, we set the precision either to lowp and mediump.

Program Object

• Create shader program object, container for shaders. • Attach two shaders. • Link to them.

Fragment Shader

• Read fragment source code as string. • Create fragment shader object. • Attach source string to fragment shader object. • Compile fragment shader.

Vertex Shader Code

• Read vertex source code as string. • Create vertex shader object. • Attach source string to the vertex shader object. • Compile the vertex shader.