Embed Size (px)
Citation preview
1
Graphics
CSCI 343, Fall 2015Lecture 2
Introduction to HTML, JavaScript and WebGL
2
Hypertext Markup Language
• Web authors use a the hypertext markup language(html) to create their pages.
• This information is sent to your computer as anordinary text file.
3
Introduction to HTML
HTML uses "tags" to specify how the browser should display the page.
The tags are contained in angle brackets, for example:
<B> indicates the text will be displayed as bold face
</B> indicates the end of the bold face text.
Comment tags allow us to place text in the file that is not displayed on the webpage. For example:
<!-- This is an HTML comment -->
4
Boiler plate
<HTML><HEAD>
<TITLE>My Home Page</TITLE></HEAD><BODY>
<H1>Welcome to my homepage!</H1>
<P>Hi there! This is my very first web page!
</BODY></HTML>
index.html
Boiler plate for WebGL<html> <head> <title>My Graphics Program</title> <script id="vertex-shader" type="x-shader/x-vertex"> <!-- Code for vertex shader goes here --> </script> <script id="fragment-shader" type="x-shader/x-fragment"> <!-- Code for fragment shader goes here --> </script> <script type="text/javascript" src="../Common/webgl-utils.js"></script> <script type="text/javascript" src="../Common/initShaders.js"></script> <script type="text/javascript" src="../Common/MV.js"></script> <script type="text/javascript" src="gasket1.js"></script> </head> <body> <canvas id="gl-canvas" width="512" height="512"> Oops ... your browser doesn't support the HTML5 canvas element </canvas> </body></html>
Shader programs
Library files
Your program file
Graphics region
6
Use a plain text editor
HTML and JavaScript files are written in plain text, so you must use a plain text editor.
Windows: Notepad works well.
Macs: TextWrangler works well, is free and is easy to use.TextEdit needs to have the correct settings to work.
DEMO
7
JavaScript
JavaScript is an interpreted language. It is not compiled.The browser interprets each line sequentially.
The browser will not generate error messages. You must use debugging tools or print statements to find errors.
JavaScript is inserted into a webpage using a <script> tag.
JavaScript variables are untyped.
JavaScript syntax is similar to C++. Loops, conditionals and functions will all look very familiar.
8
Hello World!<html>
<body><script language="javascript" type="text/javascript"> <!--
document.write("Hello World!"); //--> </script>
</body></html>
Notes: •The JavaScript code is inside an HTML comment.•Semicolons are optional (except when they aren't)•document.write( ) writes onto the browser window.
It's useful for debugging.
9
Some basic JavaScript
Declaring a variable:var myVar;var another = "yes";myVar = 9;
Conditional, Switch, While loop, for loop:Same syntax as C++
Example:var count;for (count = 0; count < 10; count++) {
document.write(count);}
10
Functions in JavaScript
Functions:function functionname(parameter-list){ statements }
Example:function sayHello( ) { alert("Hello there"); }
11
Functions with ParametersBecause JavaScript is untyped, the parameter list does not have types:
function printStudent(name, year) {
document.write (name + " is in class of " + year);
} We would call this function with:
var studentName = "Alice";var gradYear = 2019;printStudent(studentName, gradYear);
12
Functions with return valueBecause JavaScript is untyped, we do not specify return type in the header:
function cube(number) {
return number*number*number; }
We would call this function with:
var num = 5;var result;result = cube(num);document.write(result);
13
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.)
14
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.
15
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.
16
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
17
Rendering Objects
gl.drawArrays( gl.POINTS, 0, points.length );
render as points Starting position in data array Number of points
to render
18
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)
19
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
20
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.
