Programming with OpenGL Part 0: 3D API. For Further Reading Angel 7 th Ed: –2.2: JavaScript...

Programming with OpenGLPart 0: 3D API

For Further Reading

• Angel 7th Ed: – 2.2: JavaScript– 2.3: OpenGL & WebGL– 2.8: fragment & vertex shaders

• Beginning WebGL:– Chapter 1: blank canvas, vertex buffer– Appendix A: essential HTML5 and JavaScript

2

Announcement

• Schedule change for the 9/30 class.– Please fill out the questionnaire on Moodle.

3

4

Elements of Image Formation

• Objects

• Viewer

• Light source(s)

• Attributes that govern how light interacts with the materials in the scene

• Note the independence of the objects, viewer, and light source(s)

5

Synthetic Camera Model

center of projection

image plane

projector

p

projection of p

Programming with OpenGLPart 1: Background

9

Advantages• Separation of objects, viewer, light

sources

• Two-dimensional graphics is a special case of three-dimensional graphics

• Leads to simple software API– Specify objects, lights, camera, attributes– Let implementation determine image

• Leads to fast hardware implementation

10

SGI and GL

• Silicon Graphics (SGI) revolutionized the graphics workstation by implementing the pipeline in hardware (1982)

• To use the system, application programmers used a library called GL

• With GL, it was relatively simple to program three dimensional interactive applications

11

OpenGL

• The success of GL lead to OpenGL (1992), a platform-independent API that was – Easy to use– Close enough to the hardware to get excellent

performance– Focus on rendering– Omitted windowing and input to avoid window

system dependencies

12

OpenGL Evolution• Originally controlled by an Architectural Review

Board (ARB)– Members included SGI, Microsoft, Nvidia, HP,

3DLabs, IBM,…….– Now Khronos Group– Was relatively stable (through version 2.5)

• Backward compatible• Evolution reflected new hardware capabilities

– 3D texture mapping and texture objects

– Vertex and fragment programs

– Allows platform specific features through extensions

Khronos

13

OpenGL 3.1 (and Beyond)

• Totally shader-based– No default shaders– Each application must provide both a vertex

and a fragment shader

• No immediate mode

• Few state variables

• Most OpenGL 2.5 functions deprecated

• Backward compatibility not required

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 newer browsers

• OpenGL 4.1 and 4.2– Add geometry shaders and tessellator

Programming with OpenGLPart 2: HelloWorld in

WebGL

What Is WebGL?

•WebGL: JavaScript implementation of OpenGL ES 2.0

runs in all recent browsers (Chrome, Firefox, IE, Safari)system independent

application can be located on a remote server

rendering is done within browser using local hardware

uses HTML5 canvas element

integrates with standard Web packages and apps• CSS• jQuery

Example 1: Blank Canvas (source code)

<!doctype html><html><head>

<title>A blank canvas</title><style>

body{ background-color: grey; }canvas{ background-color: white; }

</style></head><body>

<canvas id="my-canvas" width="400" height="300">Your browser does not support the HTML5 canvas

element.</canvas>

</body></html>

Example 2: Blank Canvas with JS

(source code)<head>

<title>WebGL Context</title><style>

body{ background-color: grey; }canvas{ background-color: white; }

</style><script>

window.onload = setupWebGL;var gl = null;

function setupWebGL(){

var canvas = document.getElementById("my-canvas");

Example 2 (cont)try{

gl = canvas.getContext("experimental-webgl");

}catch(e){}

if(gl)

{//set the clear color to redgl.clearColor(1.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);

}else{

alert( "Error: Your browser does not appear to support WebGL.");}

}</script>

</head>

Elements<html><head>

<title>A blank canvas</title><style>

...</style>

<script>// written in Javascript

</script></head><body>

<canvas id="my-canvas" width="400" height="300"></canvas>

</body></html>

Exercise #1

• Run the above example from the class website.

• Save the HTML file to your computer and run it locally.

• Edit the code to change the canvas color to green.

22

Example 3: triangle.html

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

Elements<html><head>

<title> </title><style> </style>

<script id="vertex-shader" type="x-shader/x-vertex"> ... </script><script id="fragment-shader" type="x-shader/x-fragment"> ... </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="triangle.js"></script>

</head><body>

<canvas id=...></canvas>

</body></html>

HTML File (triangle.html)

25

<!DOCTYPE html><html><head><script id="vertex-shader" type="x-shader/x-vertex">

attribute vec4 vPosition;

void main(){

gl_Position = vPosition;

}</script>

precision mediump float;

void main(){

gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );

}</script>

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

HTML File (cont)

26

<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="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

27

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

// Three Verticesvar vertices = [ vec2( -1, -1 ), vec2( 0, 1 ), vec2( 1, -1 ) ];


triangle.js (cont)

28

// Configure WebGL // gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearColor( 1.0, 1.0, 1.0, 1.0 ); // 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, flatten(vertices), gl.STATIC_DRAW );


triangle.js (cont)

29

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


Exercise #2

•Run triangle.html from the class website

•Load the triangle.html and triangle.js to your computer and run them from there

•Edit the two files to change the color and display more than one triangle


JavaScript Notes

• Very few native types: numbers strings booleans

• Only one numerical type: 32 bit float var x = 1; var x = 1.0; // same potential issue in loops two operators for equality == and === (strict)

• Dynamic typing


Scoping

•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


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


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 I can run them from your URL


Programming with OpenGLPart 3: 3D Object File

Format

3D Modeling Programs

• Autodesk (commercial)– AutoCAD: for engineering plotting– 3D Studio MAX: for 3D modeling– Maya: for animation– Revit Architecture

• Blender 3D (free)

37

AutoCAD

38

Maya

39

Blender

40

3D Contents

• Geometry– Vertices– Triangles or polygons– Curves

• Materials– Colors– Textures (images and bumps)

• Scene description & transformation

41

Drawing cube from faces

42

0

5 6

2

4 7

1

3

void polygon(int a, int b, int c , int d) {

glBegin(GL_POLYGON);

glVertex3fv(vertices[a]);

glVertex3fv(vertices[b]);

glVertex3fv(vertices[c]);

glVertex3fv(vertices[d]);

glEnd(); }

void colorcube(void) {

polygon(0,3,2,1);

polygon(2,3,7,6);

polygon(0,4,7,3);

polygon(1,2,6,5);

polygon(4,5,6,7);

polygon(0,1,5,4); }

Cube Revisted

• Question #1: What is the size of the data file?– How many vertices?– How about the “topology” or connectivity

between vertices?

• Question #2: How many times did we call glVertex3fv()?

43

44

x0 y0 z0

x1 y1 z1

x2 y2 z2

x3 y3 z3

x4 y4 z4

x5 y5 z5.

x6 y6 z6

x7 y7 z7

P0P1P2P3P4P5

v0

v3

v2

v1

v2

v3

v7

v6topology geometry

A Simple Example -- OBJ

• Array of vertices

• Array of polygons

• Optional:– Normals– Textures– Groups

f 1 3 4f 4 2 1f 5 6 8f 8 7 5f 1 2 6f 6 5 1f 2 4 8f 8 6 2f 4 3 7f 7 8 4f 3 1 5f 5 7 3# 12 faces

v -0.5 -0.5 -0.6v 0.5 -0.5 -0.6v -0.5 -0.5 0.4v 0.5 -0.5 0.4v -0.5 0.5 -0.6v 0.5 0.5 -0.6v -0.5 0.5 0.4v 0.5 0.5 0.4# 8 vertices

GLm

• Programming interface (data types, functions) defined in glm.h

• glmReadOBJ( char* filename );

• struct GLMmodel– vertices– triangles

46

47

typedef struct { GLuint vindices[3]; /* array of triangle vertex indices */ GLuint nindices[3]; /* array of triangle normal indices */ GLuint tindices[3]; /* array of triangle texcoord indices*/ GLuint findex; /* index of triangle facet normal */} GLMtriangle;

typedef struct { ...

GLuint numvertices; /* number of vertices in model */ GLfloat* vertices; /* array of vertices */

...

GLuint numtriangles; /* number of triangles in model */ GLMtriangle* triangles; /* array of triangles */

...} GLMmodel;

48

v -0.5 -0.5 -0.6v 0.5 -0.5 -0.6v -0.5 -0.5 0.4v 0.5 -0.5 0.4v -0.5 0.5 -0.6v 0.5 0.5 -0.6v -0.5 0.5 0.4v 0.5 0.5 0.4# 8 verticesf 1 3 4f 4 2 1f 5 6 8f 8 7 5f 1 2 6f 6 5 1f 2 4 8f 8 6 2f 4 3 7f 7 8 4f 3 1 5f 5 7 3# 12 faces

A triangle made of vertices #1, #3, #4:GLMmodel::triangles[i].vindices[] contains {1,3,4}

vertex #1 coordinates is GLMmodel::vertices[1]

vertex #3 coordinates isGLMmodel::vertices[3]

Programming with OpenGL Part 0: 3D API. For Further Reading Angel 7 th Ed: –2.2: JavaScript...

Documents

Transcript of Programming with OpenGL Part 0: 3D API. For Further Reading Angel 7 th Ed: –2.2: JavaScript...