Introduction to Computer Graphics with WebGLbackspaces.net/temp/WebGLMoocSlidePDFs/week1.pdf2 4 References Angel and Shreiner, Interactive Computer Graphics (7th Edition), Pearson

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


Ed Angel

A Simple Example


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


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


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>


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>


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 );


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 );


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 ); }


1

1


Ed Angel

Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and

Science Laboratory UNM Presidential Teaching Fellow

University of New Mexico


2

Ed Angel

[email protected] www.cs.unm.edu/~angel


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


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


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


The Progression


1

1


Ed Angel

Prerequisites and References


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


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


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


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


1

1


Ed Angel

Getting Started


Getting Started

• Model graphics process - Synthetic Camera - Graphics System

• Graphics Software - OpenGL API - Shader-based OpenGL - WebGL

• Working in a browser - HTML -  JavaScript


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


2

Rendering

B

CD

A


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


6

Synthetic Camera Model

center of projection

image plane

projector

p

projection of p


3

Software

• Application must - describe geometry - describe camera


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


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


1

1


Ed Angel

OpenGL and WebGL


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


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


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


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


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


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


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


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


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


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


1

1


Ed Angel

HTML and Browsers


Execution in Browser


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>


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>


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


HTML Issues

• Execution model is different • HTML Canvas element • Packages and interaction • Security issues


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


1

1


Ed Angel

JavaScript


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


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


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


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


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


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


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


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


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


Documents

Introduction to Computer Graphics with WebGLbackspaces.net/temp/WebGLMoocSlidePDFs/week1.pdf2 4 References Angel and Shreiner, Interactive Computer Graphics (7th Edition), Pearson