JavaScript Basics for Web Development
Explore the fundamentals of JavaScript for web development, covering topics such as variable declaration, loops, functions with parameters, and more. Discover how to integrate JavaScript into your web projects effectively.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Graphics CSCI 343, Fall 2023 Lecture 2 Introduction to WebGL Read Ch 2.1 2.8 1
Boiler plate <HTML> <HEAD> </HEAD> <BODY> <TITLE>My Home Page</TITLE> <H1>Welcome to my homepage!</H1> <P> Hi there! This is my very first web page! </HTML> </BODY> index.html 2
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. 3
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); } 4
Functions in JavaScript Functions: function functionname(parameter-list) { statements } Example: function sayHello( ) { alert("Hello there"); } 5
Functions with Parameters Because 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 = 2024; printStudent(studentName, gradYear); 6
Functions with return value Because 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); 7
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
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.) 9
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. 10
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. 11
WebGL primitives: Vertices Example: Draw two points //Create an array of vertices var points = [ vec2( 3, 2 ), vec2( 5, 6 ), ]; //vec2 function provided by textbook //MV.js library //Code here to load data into GPU buffer // ... (5, 6) (3, 2) 2D image plane gl.drawArrays( gl.POINTS, 0, points.length ); //gl.POINTS causes individual points to be rendered. 12
Rendering Objects gl.drawArrays( gl.POINTS, 0, points.length ); Starting position in data array render as points Number of points to render 13
Connecting the Dots gl.LINES connects pairs of points. (x2, y2) var points = [vec2(x1, y1)]; points.push(vec2(x2, y2)); points.push(vec2(x3, y3)); points.push(vec2(x4, y4)); (x1, y1) (x3, y3) //Code to send array to GPU... (x4, y4) gl.drawArrays( gl.LINES, 0, points.length ); 14
Other Drawing functions gl.LINE_STRIP: Connect each consecutive point with previous one. p1 p4 p2 p6 p5 p3 gl.LINE_LOOP: Same as line strip, except also connects last point with first point. p3 p2 p1 p4 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 p1 p4 15 p2 p3 p6
Polygons are made up of Triangles gl.TRIANGLES: Connects each set of 3 points to form individual triangles. p1 p4 p2 p3 p6 p5 gl.TRIANGLE_STRIP: Each new point makes a triangle with the previous two points. p2 p6 p4 p3 p1 p5 gl.TRIANGLE_FAN: Each new point makes a triangle with the previous point and the first point. p1 p2 p5 16 p3 p4
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. Add Watch Expressions to keep track of variable values. 17
Practice Download the CommonLinux.zip (or CommonWindows.zip for a PC) and the gasketLinux.zip (or gasketWindows.zip) files from the documentation page. Expand the folders and rename CommonWindows or CommonLinux to Common Open the gasket1.js in VSCode (or Notepad or BBEdit) and save it as triangle.js Open gasket1.html and save it as triangle.html Open gasket1.html and change the name of the script file from gasket1.js to triangle.js 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 18
More Practice Once your triangle works, save your code as square.js and square.html Modify the square.html file to name the script file square.js Modify square.js to draw a square with vertices at (-1, -1), (-1, 1), (1, 1) and (1, -1). Use gl.TRIANGLE_FAN If that works, move the code that pushes the vertices onto the points array into a function: function square(a, b, c, d) { } Inside the init function, just call square with the four vertices as parameters. 19
