COM337 Computer Graphics
First Programs
Kurtuluş KÜLLÜ
Slides based on the slides by Prof. Ed Angel (author of
the textbook)
Overview
•
We will write a WebGL program that
will display a triangle inside a browser
window
•
There are two parts for the task
●
We need to define the web page
using HTML
●
And we will write the Javascript code
which will draw the graphics
Canvas
• One of the first things to do is to create a
canvas in the HTML file
<body>
<canvas id="glcanvas" width="512" height="512"></canvas>
</body>
• Canvas is the area on the page that will
display the output of our WebGL program
Script
function main() {
const canvas = [Link]("#glcanvas");
// Initialize the GL context
const gl = [Link]("webgl");
// Only continue if WebGL is available and working
if (!gl) {
alert("Unable to initialize WebGL. Your browser or machine may not support
it.");
return;
}
// Set clear color to black, fully opaque
[Link](0.0, 0.0, 0.0, 1.0);
// Clear the color buffer with specified clear color
[Link](gl.COLOR_BUFFER_BIT);
}
Where are the nice graphics?
It used to be easy
#include <GL/glut.h>
void mydisplay(){
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_QUAD; THIS IS OLD STYLE
OPENGL DRAWING
glVertex2f(-0.5, -0.5);
glVertex2f(-0,5, 0,5); WE ARE NOT
glVertex2f(0.5, 0.5); DOING THIS
glVertex2f(0.5, -0.5); ANYMORE
glEnd()
}
int main(int argc, char** argv){
glutCreateWindow("simple");
glutDisplayFunc(mydisplay);
glutMainLoop();
}
Shader-Based
• Unfortunately, our first program will
have some confusing extras at the
beginning
• But,
1) we don’t need to worry about the
details much, and
2) those extras will remain same for
a while
Shaders
• Shaders (vertex and fragment) are programs
written in GLSL (OpenGL Shading Language), a
C-like language with additional types and
graphics operations
• We write their code, pass them to WebGL to be
compiled and linked to create a shader program
• These are the codes that will be executed by the
GPU during vertex and fragment processing
A Simple Vertex Shader
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main(){
gl_Position = vPosition;
}
</script>
A Simple Fragment Shader
<script id="fragment-shader" type="x-shader/x-
fragment">
precision mediump float;
void main() {
gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
}
</script>
Shader Initialization
• To use shaders
1) For each of them
a) Load its source code, and
b) Compile
2) Create a program
3) Attach shaders to the program
4) Link program
Note: We do these from inside the Javascript code
Note 2: Don’t forget to handle possible problems such
as compilation errors.
Shader Initialization
var vertShdr;
var fragShdr;
var vertElem = [Link]( "vertex-
shader" );
if ( !vertElem ) {
alert( "Unable to load the vertex shader!" );
return -1;
}
else {
vertShdr = [Link]( gl.VERTEX_SHADER );
[Link]( vertShdr, [Link] );
[Link]( vertShdr );
if (  ) {
alert( "Vertex shader failed to compile!" );
return -1;
}
}
Shader Initialization
var fragElem =
[Link]( "fragment-shader" );
if ( !fragElem ) {
alert( "Unable to load fragment shader!" );
return -1;
}
else {
fragShdr =
[Link]( gl.FRAGMENT_SHADER );
[Link]( fragShdr, [Link] );
[Link]( fragShdr );
if (  ) {
alert( "Fragment shader failed to
compile!" );
return -1;
}
}
Shader Initialization
var program = [Link]();
[Link]( program, vertShdr );
[Link]( program, fragShdr );
[Link]( program );
if (  ) {
alert( "Shader program failed to
link!" );
return -1;
}
This may look confusing at the beginning but it is a very standard piece of
code
The book authors chose to create a function (initShaders) for this task which is
both useful and good for modularity
We will often make similar organizations to make the code easier to
understand
A Typical Application
• Think of the code in 3 principal parts:
initialization, geometry
arrangements, and rendering
• Initialization involves shader
initialization we’ve just seen, forming
necessary data structures on the
GPU, and setting up callback
functions (for interactive
applications).
Sending Data to GPU
var bufferId = [Link]();
[Link]( gl.ARRAY_BUFFER, bufferId );
We create a vertex buffer object (VBO) on the GPU.
We will put our data for the drawing in this buffer later.
Binding makes this buffer the current buffer to use.
Associating Shader
Variables
Enable the vertex attributes that are in the
shaders
And describe the form of the data in the vertx
array
// Associate out shader variables with our data buffer
var vPosition = [Link]( program, "vPosition" );
[Link]( vPosition, 2, [Link], false, 0, 0 );
[Link]( vPosition );