Date post: | 17-Jun-2018 |
Category: |
Documents |
Upload: | nguyenquynh |
View: | 228 times |
Download: | 0 times |
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Outline via Examples
Computer Graphics with WebGL © Ed Angel, 2014
The Progression
• Generate triangle • Generate a square • Add interaction • Generate three dimensional objects • Add lighting • Add texture • Use the GPU
2Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
A Simple Example
Computer Graphics with WebGL © Ed Angel, 2014
A Really Simple Example
• Generate one red triangle • Has all the elements of a more complex application
• vertex shader • fragment shader • HTML canvas
• www.cs.unm.edu/~angel/WebGL/COURSERA/triangle.html
2Computer Graphics with WebGL © Ed Angel, 2014
Tasks
• HTML file - describe page layout including canvas element - read in utility and application JS files - contain vertex and fragment shaders
• JS file - set up WebGL context - set up buffers in GPU - compile and link shaders with application - generate data and place on GPU - render data
3Computer Graphics with WebGL © Ed Angel, 2014
2
triangle.html <html> <head> <script id="vertex-shader" type="x-shader/x-vertex"> attribute vec4 vPosition; void main() { gl_Position = vPosition; } </script> <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>
4Computer Graphics with WebGL © Ed Angel, 2014
triangle.html
<script type="text/javascript” src="../Common/webgl-utils.js"></script> <script type="text/javascript” src="../Common/initShaders.js"></script> <script type="text/javascript” src="triangle.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>
5Computer Graphics with WebGL © Ed Angel, 2014
triangle.js var gl; var points;
window.onload = function init() { var canvas = document.getElementById( "gl-canvas" ); gl = WebGLUtils.setupWebGL( canvas ); if ( !gl ) { alert( "WebGL isn't available" ); }
var vertices = new Float32Array([-1, -1, 0, 1, 1, -1]);
// Configure WebGL
gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
6Computer Graphics with WebGL © Ed Angel, 2014
3
triangle.js // Load shaders and initialize attribute buffers
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
// Load the data into the GPU
var bufferId = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, bufferId ); gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW );
7Computer Graphics with WebGL © Ed Angel, 2014
triangle.js
// Associate out shader variables with our data buffer
var vPosition = gl.getAttribLocation( program, "vPosition" ); gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vPosition );
render(); };
function render() { gl.clear( gl.COLOR_BUFFER_BIT ); gl.drawArrays( gl.TRIANGLES, 0, 3 ); }
8Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and
Science Laboratory UNM Presidential Teaching Fellow
University of New Mexico
Computer Graphics with WebGL © Ed Angel, 2014
2
Ed Angel
[email protected] www.cs.unm.edu/~angel
Computer Graphics with WebGL © Ed Angel, 2014
3
Course Overview • These lectures provide an introduction to interactive
three-dimensional computer graphics using WebGL
• WebGL is supported under the HTML5 canvas element in all recent Web browsers which allows integration with other Web applications
• The lectures are derived from the new textbook: Ed Angel and Dave Shreiner, Interactive Computer Graphics, A Top-down Approach with WebGL (Seventh Edition), Pearson Education, 2015
Computer Graphics with WebGL © Ed Angel, 2014
2
Why This Course? • 3D Graphics is everywhere • There are lots of courses in 3D graphics
- High-level - Low level - This one
• It’s all about the Web - Run locally from a remote server - Platform independent
• It’s also about making use of the graphics processing unit (GPU) on your computer
4Computer Graphics with WebGL © Ed Angel, 2014
What You Will Learn?
• Let’s go through topics via examples on my website www.cs.unm.edu/~angel/WebGL/7E
• You will be able to create these and much more complex applications
• We’ll do an outline by going through some examples
5Computer Graphics with WebGL © Ed Angel, 2014
The Progression
6Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Prerequisites and References
Computer Graphics with WebGL © Ed Angel, 2014
2
Prerequisites
• Good programming skills in an object-oriented language (Java, C++)
• We will use JavaScript (JS) but it is not a prerequisite • Basic Data Structures
- Linked lists - Arrays
• Geometry • Simple Linear Algebra
Computer Graphics with WebGL © Ed Angel, 2014
3
Coding in WebGL
• Can run WebGL on any recent browser - Chrome - Firefox - Safari - IE
• Code written in JavaScript • JS runs within browser
- Uses local resources for graphics
Computer Graphics with WebGL © Ed Angel, 2014
2
4
References Angel and Shreiner, Interactive Computer Graphics (7th
Edition), Pearson
Munshi, Ginsburg and Shreiner, OpenGL ES 2.0 Programming Guide, Addison-Wesley
Matsuda and Lea, WebGL Programming Guide, Addison-Wesley
Cantor and Jones, WebGL Beginner’s Guide, PACKT Publishing
Parisi, WebGL: Up and Running, O’Reilly Computer Graphics with WebGL © Ed Angel, 2014
5
Web Resources and Examples
• www.cs.unm.edu/~angel/ • www.cs.unm.edu/~angel/WebGL/7E • www.opengl.org • get.webgl.com • www.kronos.org/webgl • www.chromeexperiments.com/webgl • www.webgl.com • learningwebgl.com
Computer Graphics with WebGL © Ed Angel, 2014
Before the Next Lecture
• Test your browser at get.webgl.com - You should see a rotating cube
• Try some of my examples - www.cs.unm.edu/~angel/WebGL/7E - Click on any html file
6Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
Getting Started
Computer Graphics with WebGL © Ed Angel, 2014
Getting Started
• Model graphics process - Synthetic Camera - Graphics System
• Graphics Software - OpenGL API - Shader-based OpenGL - WebGL
• Working in a browser - HTML - JavaScript
2Computer Graphics with WebGL © Ed Angel, 2014
Modeling and Rendering
• The prime concern of computer graphics has been displaying geometry
• There are two primary parts - Building geometric models - Rendering (displaying the models)
3
Modeler Renderer Geometry
Computer Graphics with WebGL © Ed Angel, 2014
2
Rendering
B
CD
A
4Computer Graphics with WebGL © Ed Angel, 2014
Building a Software Model
5
• Object oriented - shouldn’t have to worry about details of output
device - want to work in 3D
• Synthetic Camera Model - mimic image formation by optical devices - human visual system - camera
Computer Graphics with WebGL © Ed Angel, 2014
6
Synthetic Camera Model
center of projection
image plane
projector
p
projection of p
Computer Graphics with WebGL © Ed Angel, 2014
3
Software
• Application must - describe geometry - describe camera
7Computer Graphics with WebGL © Ed Angel, 2014
Global vs Local Rendering
• Ray Tracing - emulate the physics - can handle global effects such as shadows and
reflections - need all objects available to render any object - not a real-time strategy yet
• Pipeline Model - render one object at a time - use tricks to get global effects - leads to real-time rendering
8Computer Graphics with WebGL © Ed Angel, 2014
Pipeline Model • Application program (or a higher level package) produces geometry
• Geometry in the form of vertices • two vertices: line • three vertices: triangle
• Clipping: decide what can be seen • Rasterizer: produces potential pixels (fragments)
9
vertex processor
clipper and primitive assembly rasterizer fragment
processor vertices pixels
application display
Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
OpenGL and WebGL
Computer Graphics with WebGL © Ed Angel, 2014
OpenGL
• Developed at SGI based on pipeline model • Used their VLSI pipeline • Released 1994 • Originally fixed function • Immediate mode graphics
2
Primitive Setup and
Rasterization
Fragment Coloring and
Texturing Blending
Vertex Data
Pixel Data
Vertex Transform and
Lighting
Texture Store
Computer Graphics with WebGL © Ed Angel, 2014
OpenGL Evolution • OpenGL 2.0 added programmable shaders
- vertex shading augmented the fixed-function transform and lighting stage
- fragment shading augmented the fragment coloring stage
• However, the fixed-function pipeline was still available
Primitive Setup and
Rasterization
Fragment Coloring and
Texturing Blending
Vertex Data
Pixel Data
Vertex Transform and Lighting
Texture Store
3Computer Graphics with WebGL © Ed Angel, 2014
2
Immediate Mode Graphics
• Geometry specified by vertices - Locations in space( 2 or 3 dimensional) - Points, lines, circles, polygons, curves, surfaces
• Immediate mode - Each time a vertex is specified in the application, its
location is sent to the GPU - Old OpenGL style uses glBegin, glVertex,glEnd - Creates bottleneck between CPU and GPU - Removed from OpenGL 3.1 and OpenGL ES 2.0
4Computer Graphics with WebGL © Ed Angel, 2014
Modern OpenGL
• Performance is achieved by using GPU rather than CPU
• Control GPU through programs called shaders • Application’s job is to send data to GPU • GPU does all rendering • Immediate mode replaced by retained mode • As of OpenGL 3.1, all applications must provide shaders
5Computer Graphics with WebGL © Ed Angel, 2014
Retained Mode Graphics
• Put all vertex attribute data in array
• Send array to GPU to be rendered immediately
• Almost OK but problem is we would have to send array over each time we need another render of it
• Better to send array over and store on GPU for multiple renderings
6Computer Graphics with WebGL © Ed Angel, 2014
3
OpenGL 3.1 • Totally shader-based
- No default shaders - Each application must provide both a vertex and a
fragment shader written in OpenGL Shading Language (GLSL)
• No immediate mode • Few state variables • Most 2.5 functions deprecated • Backward compatibility not required
- Exists a compatibility extension
7Computer Graphics with WebGL © Ed Angel, 2014
Other Versions
• OpenGL ES - Embedded systems - Version 1.0 simplified OpenGL 2.1 - Version 2.0 simplified OpenGL 3.1
• Shader based
• WebGL - Javascript implementation of ES 2.0 - Supported on all recent browsers
• OpenGL 4.1, 4.2, ….. - Add geometry, tessellation, compute shaders
8Computer Graphics with WebGL © Ed Angel, 2014
Why WebGL?
• Advantages of desktop OpenGL - rendering code independent of platform - simple but close to hardware - makes use of GPU features - relatively stable
• Disadvantages of desktop OpenGL - code must be recompiled for each platform - no interaction or input functions - can’t run from a remote site
9Computer Graphics with WebGL © Ed Angel, 2014
4
Why WebGL?
• All recent browsers run HTML5 and JavaScript - no system dependencies - code interpreted
• Code located remotely but run locally - uses local GPU
• Availability of many packages - WebGL compatible with CSS, jQuery and others for
interaction and style
10Computer Graphics with WebGL © Ed Angel, 2014
Potential Issues with WebGL
• JS is an interpreted language - slower (maybe)
• Lacks some of the latest features of desktop OpenGL • geometry shaders • tessellation shaders • compute shaders • no core profile
• Potential security issues
11Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
HTML and Browsers
Computer Graphics with WebGL © Ed Angel, 2014
Execution in Browser
2Computer Graphics with WebGL © Ed Angel, 2014
HTML5
• Hypertext Markup Language • Describes page
- Consists of tags and attributes - Can read in files
• Example
3
<html> <script type="text/javascript" src="cube.js"></script> </html>
Computer Graphics with WebGL © Ed Angel, 2014
2
HTML tags
• <HTML></HTML> • <HEAD></HEAD> • <BODY></BODY> • <SCRIPT></SCRIPT>
- <script id="vertex-shader" type="x-shader/x-vertex"> - <script type="text/javascript" src="cube.js"></script>
• <canvas id="gl-canvas" width="512"" height="512">Oops ... your browser doesn't support the HTML5 canvas element</canvas>
4Computer Graphics with WebGL © Ed Angel, 2014
more HTML tags
• <P>text</P> • <H1>text</H1> also <H2> <H3>….. • text outside tags copied to page • <A HREF = “file”> text </A> • <IMAGE> • <BUTTON> and other widgets
5Computer Graphics with WebGL © Ed Angel, 2014
HTML Issues
• Execution model is different • HTML Canvas element • Packages and interaction • Security issues
6Computer Graphics with WebGL © Ed Angel, 2014
3
Our Approach
• Only HTML5 and JS • Separate HTML and JS files
- HTML file describes page and brings in necessary resources
- JS file contains graphics part of code including all WebGL function calls
• Embed shader programs in HTML file - can also load as separate files
7Computer Graphics with WebGL © Ed Angel, 2014
1
1
Introduction to Computer Graphics with WebGL
Ed Angel
JavaScript
Computer Graphics with WebGL © Ed Angel, 2014
JavaScript Notes
• JavaScript (JS) is the language of the Web - All browsers will execute JS code - JavaScript is an interpreted object-oriented language - JavaScript is not related to Java but contains elements from
many languages
• References - Flanagan, JavaScript: The Definitive Guide, O’Reilly - Crockford, JavaScript, The Good Parts, O’Reilly - Many Web tutorials
2Computer Graphics with WebGL © Ed Angel, 2014
Executing JS Code
• In browser - embed in HTML page
• Download an application such as node.js and run inside a window
3
<html> <script type = text/javascript> console.log(“hello world”); </script> </html>
>node myfile.js
Computer Graphics with WebGL © Ed Angel, 2014
2
JS Notes
• Is JS slow? - JS engines in browsers are getting much faster - Not a key issues for graphics since once we get the data to
the GPU it doesn’t matter how we got the data there
• JS is a (too) big language - We don’t need to use it all - Choose parts we want to use - Don’t try to make your code look like C or Java
4Computer Graphics with WebGL © Ed Angel, 2014
JS Notes
• Only three native types: - numbers - strings - booleans
• Only one numerical type: 32 bit float - var x = 1; - var x = 1.0; // same - two operators for equality == and ===
• 1==‘1’ //true • 1===‘1’ //false
• Everything else is an object • Dynamic typing
5Computer Graphics with WebGL © Ed Angel, 2014
JS Objects
• There are many ways to define objects in JS including methods similar to Java and C++
• All objects inherit attributes and methods from a prototype which itself may have a prototype
• We will consider arrays as an example and because we need them for our applications
6Computer Graphics with WebGL © Ed Angel, 2014
3
Scope
• Different from other languages • Function scope • variables are hoisted within a function
- can use a variable before it is declared
• Note functions are first class objects in JS x = 1 //legal statement but dangerous use var x = 1; • Also note that both window and canvas are defined
outside of our application and are globals in our code
7Computer Graphics with WebGL © Ed Angel, 2014
JS Arrays
• JS arrays are objects - inherit methods - var a = [1, 2, 3]; is not the same as in C++ or Java - a.length // 3 - a.push(4); // length now 4 - a.pop(); // 4 - avoids use of many loops and indexing - Problem for WebGL which expects C-style arrays
8Computer Graphics with WebGL © Ed Angel, 2014
Typed Arrays
JS has typed arrays that are like C arrays
var a = new Float32Array(3) var b = new Uint8Array(3)
Generally, we prefer to work with standard JS arrays and convert to typed arrays only when we need to send data to the GPU with the flatten() function in MV.js
When working with a 4 x 4 array, WebGL (and all versions of OpenGL) expect to see a sixteen element array with data in column major order
9Computer Graphics with WebGL © Ed Angel, 2014
4
A Minimalist Approach
• We will use only core JS and HTML - no extras or variants
• No additional packages - CSS - JQuery
• Focus on graphics - examples may lack beauty
• You are welcome to use other variants as long as others can run them from your URL
10Computer Graphics with WebGL © Ed Angel, 2014