1 graphics csci 343, fall 2015 lecture 3 introduction to webgl
TRANSCRIPT
![Page 1: 1 Graphics CSCI 343, Fall 2015 Lecture 3 Introduction to WebGL](https://reader036.vdocuments.us/reader036/viewer/2022082518/5697bfdd1a28abf838cb1895/html5/thumbnails/1.jpg)
1
Graphics
CSCI 343, Fall 2015Lecture 3
Introduction to WebGL
![Page 2: 1 Graphics CSCI 343, Fall 2015 Lecture 3 Introduction to WebGL](https://reader036.vdocuments.us/reader036/viewer/2022082518/5697bfdd1a28abf838cb1895/html5/thumbnails/2.jpg)
2
High Level Graphics API's
Properties of a Graphics API (Application Programmer Interface):
1) A set of primitives for defining objects.2) Primitives can take on attributes (Color, fill pattern, etc.)3) A way to manipulate viewing (Camera position, orientation,
etc.)4) A way to carry out transformations (Translations, Rotations)5) Input mechanisms (for user interface)6) Control system (for communicating with the window system,
initializing programs, etc.)
![Page 3: 1 Graphics CSCI 343, Fall 2015 Lecture 3 Introduction to WebGL](https://reader036.vdocuments.us/reader036/viewer/2022082518/5697bfdd1a28abf838cb1895/html5/thumbnails/3.jpg)
3
The OpenGL/WebGL model
The synthetic camera model:
1) Define the 3D object(s) in space.2) Specify camera properties (position, orientation, projection system, etc).
3) Imaging process:
i) Transformation: Put the object in the camera's coordinate system.
ii) Clipping: Eliminate points outside the camera's field of view.
iii) Projection: Convert from 3D to 2D coordinates.iv) Rasterization: Projected objects represented as
pixels in the frame buffer.
![Page 4: 1 Graphics CSCI 343, Fall 2015 Lecture 3 Introduction to WebGL](https://reader036.vdocuments.us/reader036/viewer/2022082518/5697bfdd1a28abf838cb1895/html5/thumbnails/4.jpg)
4
WebGL primitives: Vertices
WebGL defines everything in terms of vertices (points).
• 2D triangles are defined by vertices.
• 2D polygons are made up of triangles.
• General 2D shapes are made up of polygons.
• 3D shapes are groups of polygons.
![Page 5: 1 Graphics CSCI 343, Fall 2015 Lecture 3 Introduction to WebGL](https://reader036.vdocuments.us/reader036/viewer/2022082518/5697bfdd1a28abf838cb1895/html5/thumbnails/5.jpg)
5
WebGL primitives: Vertices
Example: Draw two points//Create an array of verticesvar points = [ vec2( 3, 2 ), vec2( 5, 6 ), ]; //vec2 function provided by textbook //MV.js library//Code here to load data into GPU buffer// ...
gl.drawArrays( gl.POINTS, 0, points.length );//gl.POINTS causes individual points to be rendered.
(3, 2)
(5, 6)
2D image plane
![Page 6: 1 Graphics CSCI 343, Fall 2015 Lecture 3 Introduction to WebGL](https://reader036.vdocuments.us/reader036/viewer/2022082518/5697bfdd1a28abf838cb1895/html5/thumbnails/6.jpg)
6
Rendering Objects
gl.drawArrays( gl.POINTS, 0, points.length );
render as points Starting position in data array Number of points
to render
![Page 7: 1 Graphics CSCI 343, Fall 2015 Lecture 3 Introduction to WebGL](https://reader036.vdocuments.us/reader036/viewer/2022082518/5697bfdd1a28abf838cb1895/html5/thumbnails/7.jpg)
7
Connecting the Dots
gl.LINES connects pairs of points.
var points = [vec2(x1, y1)];points.push(vec2(x2, y2));points.push(vec2(x3, y3));points.push(vec2(x4, y4));
//Code to send array to GPU...
gl.drawArrays( gl.LINES, 0, points.length );
(x1, y1)
(x2, y2)
(x3, y3)
(x4, y4)
![Page 8: 1 Graphics CSCI 343, Fall 2015 Lecture 3 Introduction to WebGL](https://reader036.vdocuments.us/reader036/viewer/2022082518/5697bfdd1a28abf838cb1895/html5/thumbnails/8.jpg)
8
Other Drawing functions
gl.LINE_STRIP: Connect each consecutive point with previous one. p1 p2
p3
p4
p5
p6
p1 p2p3
p4
p1
p2 p3
p4
gl.LINE_LOOP: Same as line strip, except also connects last point with first point.
gl.TRIANGLES: Each set of three vertices define the vertices of a triangle. Triangles have special properties that differ from line loops (e.g. you can fill in a triangle). p5
p6
![Page 9: 1 Graphics CSCI 343, Fall 2015 Lecture 3 Introduction to WebGL](https://reader036.vdocuments.us/reader036/viewer/2022082518/5697bfdd1a28abf838cb1895/html5/thumbnails/9.jpg)
9
Polygons are made up of Triangles
gl.TRIANGLES: Connects each set of 3 points to form individual triangles.
p1
p2
p3 p4
p5
p1
p2 p3
p4
p5p6
p1
p2
p3p4
p5
p6
gl.TRIANGLE_STRIP: Each new point makes a triangle with the previous two points.
gl.TRIANGLE_FAN: Each new point makes a triangle with the previous point and the first point.
![Page 10: 1 Graphics CSCI 343, Fall 2015 Lecture 3 Introduction to WebGL](https://reader036.vdocuments.us/reader036/viewer/2022082518/5697bfdd1a28abf838cb1895/html5/thumbnails/10.jpg)
10
JavaScript Debugger
For Firefox:• Open the debugger from the Tools/Web Developer menu• Click on the Console tab to see syntax errors• Choose your javascript file in the lefthand pane to see your source-code.• Set break-points by clicking on the number next to the line where you want to break.• Use the three buttons in the upper left to step through the code.• Click on "expand panes" button in the upper right to see variables' values.• Click on a variable in the variables pane to see its value
![Page 11: 1 Graphics CSCI 343, Fall 2015 Lecture 3 Introduction to WebGL](https://reader036.vdocuments.us/reader036/viewer/2022082518/5697bfdd1a28abf838cb1895/html5/thumbnails/11.jpg)
11
Practice•Download the Common folder and the gasket folder from the documentation page of the course website.• Open the gasket1.js and save it as triangle.js• Open gasket1.html and save it as triangle.html• Delete the code to create the Sierpinski gasket points• Add your own code to draw a triangle with vertices at: (-1, -1), (1, -1), and (0, 1)• Use gl.TRIANGLES
• If that works, save your code as square.js and square.html• Modify it to draw a square with vertices at (-1, -1), (-1, 1), (1, 1) and (1, -1).• Use gl.TRIANGLE_FAN