introduction to computer graphics with webglbackspaces.net › temp › webglmoocslidepdfs ›...

1

1

Introduction to Computer Graphics with WebGL

Ed Angel

Square Program Part 1

Computer Graphics with WebGL © Ed Angel, 2014

2

A OpenGL Simple Program

Generate a square on a solid background


Execution in Browser

3Computer Graphics with WebGL © Ed Angel, 2014

2

4

Event Loop

• Remember that the sample program specifies a render function which is an event listener or callback function

- Every program should have a render function - For a static application we need only execute the

render function once -  In a dynamic application, the render function can

call itself recursively but each redrawing of the display must be triggered by an event

- other callbacks will allow us to get input from the mouse and keyboard and work with menus, sliders, buttons and other types of input


5

Lack of Object Orientation

• All versions of OpenGL are not object oriented so that there are multiple functions for a given logical function

• Example: sending values to shaders - gl.uniform3f - gl.uniform2i - gl.uniform3dv

• Underlying storage mode is the same


6

WebGL function format

gl.uniform3f(x,y,z)

belongs to WebGL context

function name

x,y,z are variables

gl.uniform3fv(p)

p is an array

dimension


3

7

WebGL constants

• Most constants are defined in the WebGL context -  In desktop OpenGL, they were in #include files

such as gl.h• Examples

- desktop OpenGL • glEnable(GL_DEPTH_TEST);

- WebGL • gl.enable(gl.DEPTH_TEST)• gl.clear(gl.COLOR_BUFFER_BIT)


1

1


Ed Angel



WebGL and GLSL

• WebGL requires shaders and is based less on a state machine model than a data flow model

• Most state variables, attributes and related pre 3.1 OpenGL functions have been deprecated

• Action happens in shaders

• Job of application is to get data to GPU


3

Execution Model

Vertex Shader

GPU

Primitive Assembly

Application Program

gl.drawArrays Vertex

Vertex data Shader Program

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

2

4

Simple Vertex Shader

attribute vec4 vPosition; void main(void) { gl_Position = vPosition; }


5

Execution Model

Fragment Shader

Application

Frame Buffer Rasterizer

Fragment Fragment Color

Shader Program


6

Simple Fragment Program

precision mediump float;

void main(void) { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }


3

GLSL

• OpenGL Shading Language • C-like with

- Matrix and vector types (2, 3, 4 dimensional) - Overloaded operators - C++ like constructors

• Similar to Nvidia’s Cg and Microsoft HLSL • Code sent to shaders as source code • WebGL functions compile, link and get information to

shaders


Program Organization • HTML file

- describe page -  contains shaders - gather resources - open a canvas for drawing

• JS file -  initial variables - establish a WebGL context -  read, compile and link shaders into a program object - define listeners -  compute and send data to GPU -  render


1

1


Ed Angel



Square Program

Computer Graphics with WebGL © Ed Angel, 2014 2

WebGL

• Five steps - Describe page (HTML file)

•  request WebGL Canvas •  read in necessary files

- Define shaders (HTML file) • could be done with a separate file (browser

dependent) - Compute or specify data (JS file) - Send data to GPU (JS file) - Render data (JS file)


2

square.html


<!DOCTYPE html> <html> <head>

<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="square.js"></script>

webgl-utils.js: Standard utilities for setting up WebGL context in Common directory on website

initShaders.js: JS and WebGL code for reading, compiling and linking the shaders

MV.js: our matrix-vector package

square.js: the application file

square.html (cont) <script id="vertex-shader" type="x-shader/x-vertex">

attribute vec4 vPosition; // vertex position from application 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, 1.0, 1.0, 1.0 ); // white and opaque } </script>


Shaders

• We assign names to the shaders that we can use in the JS file

• These are trivial pass-through (do nothing) shaders that which set the two required built-in variables

- gl_Position - gl_FragColor

• Note both shaders are full programs • Note GLSL vector type vec4 • Must set precision in fragment shader


3

square.html (cont)

<body> <canvas id="gl-canvas" width="512" height="512"> Oops ... your browser doesn't support the HTML5 canvas element </canvas> </body> </html>


•  canvas id needed for JS file to access •  height and width in pixels •  note canvas is just one element on the document

1

1


Ed Angel



square.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" ); }


onload: determines where to start execution when all code is loaded

gl gets canvas from HTML file using id assigned there gl gets WebGL context from utility read in by HTML file

square.js (cont)

•  JS array is not the same as a C or Java array •  object with methods •  vertices.length // 4

•  Values in clip coordinates •  square fits in default view volume

•  Alternative uses data types in MV.js that match GLSL Computer Graphics with WebGL © Ed Angel, 2014

3

// four vertices

var vertices = [ -0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5 ]; // alternative var vertices = [vec2(-0.5, -0.5), vec2(-0.5, 0.5), vec2(0.5, 0.5), vec2(0.5, 0.5)];

2

square.js (cont)

// Configure WebGL

gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearColor( 0.0, 0.0, 0.0, 1.0 );

// Load shaders and initialize attribute buffers

var program = initShaders( gl, "vertex-shader", "fragment-shader" ); gl.useProgram( program );


•  gl.viewport specifies area of canvas to use• initShaders used to load, compile and link shaders to form a program object •  program object is a container for shaders •  gl.useProgram selects current program object

square.js (cont) // Load the data into the GPU

var bufferId = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, bufferId ); gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );


•  Load data onto GPU by -  creating a vertex buffer object (VBO) on the GPU -  making it the current VBO -  loading data into it -  Note use of flatten() to convert JS array to an array of

float32’s •  Other VBOs can contain data such as colors and texture

coodinates

square.js (cont)

•  Finally we must connect each variable in program with corresponding variable in shader

-  need name, type, location in buffer


// Associate shader variables with variables in JS file

var vPosition = gl.getAttribLocation( program, "vPosition" ); gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vPosition );

3

square.js (cont)

render(); };

function render() { gl.clear( gl.COLOR_BUFFER_BIT ); gl.drawArrays( gl.TRIANGLE_FAN, 0, 4 ); }

0

1 2

3


Triangles, Fans or Strips

gl.drawArrays( gl.TRIANGLES, 0, 6 ); // 0, 1, 2, 0, 2, 3

0

1 2

3

gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 ); // 0, 1, 3, 2

gl.drawArrays( gl.TRIANGLE_FAN, 0, 4 ); // 0, 1 , 2, 3

0

1 2

3


1

1


Ed Angel



2

WebGLPrimitives


Why triangles?

• All triangles are -  simple: edges can’t cross -  flat: a triangle defines a unique plane -  convex: any line segment connecting two points in

the triangle is entirely in the triangle - easy to render - degenerate triangles in which all three vertices lie in

a line are not a problem for rasterizer


2

Coordinate Systems

•  The units in points are determined by the application and are called object, world, model or problem coordinates

•  Viewing specifications usually are also in object coordinates

•  Eventually pixels will be produced in window coordinates

•  WebGL also uses some internal representations that usually are not visible to the application but are important in the shaders

•  Most important is clip coordinates


Coordinate Systems and Shaders

•  Vertex shader must output in clip coordinates

•  Input to fragment shader from rasterizer is in window coordinates

•  Application can provide vertex data in any coordinate system but shader must eventually produce gl_Position in clip coordinates

•  Simple example uses clip coordinates


WebGL Camera

• WebGL places a camera at the origin in object space pointing in the negative z direction

• The default viewing volume is a box centered at the origin with sides of length 2


3

Orthographic Viewing

z=0

z=0

In the default orthographic view, points are projected forward along the z axis onto the plane z=0


Viewports

•  Do not have use the entire window for the image: gl.viewport(x,y,w,h)

•  Values in pixels (window coordinates)


Transformations and Viewing

•  In WebGL, we usually carry out projection using a projection matrix (transformation) before rasterization

•  Transformation functions are also used for changes in coordinate systems

•  Pre 3.1 OpenGL had a set of transformation functions which have been deprecated

•  Three choices in WebGL -  Application code -  GLSL functions -  MV.js


1

1


Ed Angel

First Assignment Tessellation and Twist


2

Rotation (2D)

Consider rotation about the origin by θ degrees -  radius stays the same, angle increases by θ

x’= x cos θ –y sin θy’ = x sin θ + y cos θ

x = r cos φy = r sin φ

x’ = r cos (φ + θ)y’ = r sin (φ + θ)


Twist

• Now let amount of rotation depend on distance from origin giving us twist

€

x'= x cos(dθ ) − y sin(dθ )y'= x sin(dθ ) + y cos(dθ )

d ∝ 2x + 2y


2

Example

triangle tessellated triangle

twist without tessellation twist after tessellation


Tessellation

• Tessellation: dividing object, a curve, a surface or a volume, into smaller parts, each of which can be be rendered independently

• Two choices for triangle - Compute location of vertices for all the smaller

triangles - Recursive subdivision


Assignment 1

• Display a twisted triangle • You may set all parameters in the JS file

-  vertices of triangle - amount of twist - degree of tessellation

• Options - use buttons, menus or sliders to set parameters -  twist other shapes


1

1


Ed Angel

Fractals and Recursive Subdivision


2

Sierpinski Gasket (2D)

• Start with a triangle

• Connect bisectors of sides and remove central triangle

• Repeat


3

Example

• Five subdivisions


2

4

The gasket as a fractal

• Consider the filled area (black) and the perimeter (the length of all the lines around the filled triangles)

• As we continue subdividing -  the area goes to zero - but the perimeter goes to infinity

• This is not an ordinary geometric object -  It is neither two- nor three-dimensional

•  It is a fractal (fractional dimension) object


Gasket Program

• HTML file - Same as in other examples - Pass through vertex shader - Fragment shader sets color - Read in JS file

5Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

6

Gasket Program

var points = [];var NumTimesToSubdivide = 5;

/* initial triangle */

var vertices = [ vec2(-1, -1 ), vec2( 0, 1 ), vec2( 1, -1 ) ];

divideTriangle( vertices[0],vertices[1], vertices[2], NumTimesToSubdivide);


3

7

Draw one triangle

/* display one triangle */

function triangle( a, b, c ){ points.push( a, b, c );}


8

Triangle Subdivision

function divideTriangle( a, b, c, count ){ // check for end of recursion if ( count === 0 ) { triangle( a, b, c ); } else {//bisect the sides var ab = mix( a, b, 0.5 ); var ac = mix( a, c, 0.5 ); var bc = mix( b, c, 0.5 ); --count; // three new triangles divideTriangle( a, ab, ac, count-1 ); divideTriangle( c, ac, bc, count-1 ); divideTriangle( b, bc, ab, count-1 ); }}Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

a

c

b

9

init()

var program = initShaders( gl, "vertex-shader", "fragment-shader" );gl.useProgram( program );var bufferId = gl.createBuffer();gl.bindBuffer( gl.ARRAY_BUFFER, bufferId);gl.bufferData( gl.ARRAY_BUFFER, flatten(points) gl.STATIC_DRAW );

var vPosition = gl.getAttribLocation( program, "vPosition" );gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );gl.enableVertexAttribArray( vPosition );

render();


4

10

Render Function

function render(){ gl.clear( gl.COLOR_BUFFER_BIT ); gl.drawArrays( gl.TRIANGLES, 0, points.length );}


1

1


Ed Angel

Moving to 3D


2

Three-dimensional Applications

•  In WebGL, two-dimensional applications are a special case of three-dimensional graphics

•  Going to 3D -  Not much changes -  Use vec3, gl.uniform3f -  Have to worry about the order in which primitives are rendered

or use hidden-surface removal


3

A Tetrahedron

• We can easily make the program three-dimensional by using three dimensional points and starting with a tetrahedron

var vertices = [ vec3( 0.0000, 0.0000, -1.0000 ), vec3( 0.0000, 0.9428, 0.3333 ), vec3( -0.8165, -0.4714, 0.3333 ), vec3( 0.8165, -0.4714, 0.3333 )

]; subdivide each face


2

4

3D Gasket

• We can subdivide each of the four faces

• Appears as if we remove a solid tetrahedron from the center leaving four smaller tetrahedra

• Code almost identical to 2D example


5

Almost Correct

• Because the triangles are drawn in the order they are specified in the program, the front triangles are not always rendered in front of triangles behind them

get this

want this


6

Hidden-Surface Removal

• We want to see only those surfaces in front of other surfaces

• OpenGL uses a hidden-surface method called the z-buffer algorithm that saves depth information as objects are rendered so that only the front objects appear in the image


3

7

Using the z-buffer algorithm

• The algorithm uses an extra buffer, the z-buffer, to store depth information as geometry travels down the pipeline

• Depth buffer is required to be available in WebGL • It must be

- Enabled • gl.enable(gl.DEPTH_TEST)

- Cleared in for each render • gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)


8

Surface vs Volume Subdvision

•  In our example, we divided the surface of each face • We could also divide the volume using the same

midpoints • The midpoints define four smaller tetrahedrons, one

for each vertex • Keeping only these tetrahedrons removes a volume in

the middle • See text for code


Subdivided Tetrahedron


without HSR with HSR

introduction to computer graphics with webglbackspaces.net › temp › webglmoocslidepdfs ›...

Documents