Scribd
Upload
100 views

CSE4204 - Computer Graphics Lab - 1

The document discusses computer graphics and WebGL. It introduces the basic graphics pipeline, which includes vertex and fragment shaders. Vertex shaders run once per vertex and set the vertex position, while fragment shaders run once per pixel and set the pixel color. WebGL is a version of OpenGL for the web that uses shaders. Drawing with WebGL requires linking a vertex shader and fragment shader into a shader program. The document provides examples of simple vertex and fragment shaders.

Uploaded by

আনিকা সিদ্দিকা
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
100 views

CSE4204 - Computer Graphics Lab - 1

The document discusses computer graphics and WebGL. It introduces the basic graphics pipeline, which includes vertex and fragment shaders. Vertex shaders run once per vertex and set the vertex position, while fragment shaders run once per pixel and set the pixel color. WebGL is a version of OpenGL for the web that uses shaders. Drawing with WebGL requires linking a vertex shader and fragment shader into a shader program. The document provides examples of simple vertex and fragment shaders.

Uploaded by

আনিকা সিদ্দিকা
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

CSE4204 : Computer

Graphics Lab
Mohammad Imrul Jubair
LAB - 1
We will learn...
● Basic graphics pipeline
● Introduction to WebGL
● Drawing a point
Rasterization
The Graphics Pipeline
● The programs are called shaders.
● A vertex shader: called once for each vertex in a primitive
● A fragment shader: called once for each pixel in the primitive
OpenGL
● Computer graphics APIs
○ implemented in many graphics hardware devices.
● Versions of OpenGL:
○ For embedded systems such as mobile phones are known as OpenGL ES.
○ WebGL is a version for use on Web pages.
● OpenGL can be used for 2D as well as for 3D graphics, but it is most
commonly associated with 3D.
WebGL
● The version of OpenGL for the Web.
● Three.js, a higher-level API for 3D web graphics, uses WebGL for 3D
graphics.
● It is more difficult to use WebGL directly
○ But doing so gives you full control over the graphics hardware.
○ And learning it will be a good introduction to modern graphics programming.
The WebGL Graphics Context
● The graphics context is a JavaScript object whose methods implement the
JavaScript side of the WebGL API.
○ gl = canvas.getContext("webgl");
● Example:
○ var prog = gl.createProgram();
Shader Program
● Drawing with WebGL requires a shader program
○ consists of a vertex shader and a fragment shader.
● Shaders are written GLSL
○ based on C.
● The vertex shader and fragment shader are separate programs
○ each with its own main() function.
● The two shaders are compiled separately
● Then "linked" to produce a complete shader program.
● The JavaScript API for WebGL includes functions for compiling the shaders
and then linking them.
Vertex Shader
● A shader program that will be executed once for each vertex in a primitive.
● A vertex shader must compute the vertex coordinates in the clip coordinate
system
● As one of its outputs:
○ gl_Position: Specify the coordinates of the vertex in the clip coordinate system
Fragment Shader
● A shader program that will be executed once for each pixel in a primitive.
● A fragment shader must compute a color for the pixel, or discard it.
● Fragment shaders are also called pixel shaders.
● Output:
○ gl_FragColor: Simply to specify a color for the pixel.
Drawing Primitives
● gl.POINT, gl.LINES, gl.LINE_STRIP, gl.LINE_LOOP, gl.TRIANGLES,
gl.TRIANGLE_STRIP, and gl.TRIANGLE_FAN,
○ where gl is a WebGL graphics context.
Basic Data Flow in the Pipeline
● Attribute Variables:
○ input to the vertex shader
○ can take different value for each vertex in a
primitive. such as vertex coordinates, texture
coordinate data, or vertex color data.
● Uniform Variables:
○ Input to a shader program (both vertex and
fragment)
○ A uniform variable has the same value at every
vertex and at every pixel.
Example of Vertex Shader
attribute vec3 a_coords;
void main() {
gl_Position = vec4(a_coords, 1.0);
gl_PointSize = 10.0;
}
Example of Fragment Shader
void main() {
gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
}
Let’s do some coding

You might also like