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

Announcement

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

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)

Synthetic Camera Model

center of projection

image plane

projector

projection of p

Programming with OpenGLPart 1: Background

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

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

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

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

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

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></head><body>

</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.

Example 3: triangle.html

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

Elements<html><head>

</head><body>

</body></html>

HTML File (triangle.html)

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

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

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

triangle.js (cont)

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

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

AutoCAD

Blender

3D Contents

• Geometry– Vertices– Triangles or polygons– Curves

• Materials– Colors– Textures (images and bumps)

• Scene description & transformation

Drawing cube from faces

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()?

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

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

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

• glmReadOBJ( char* filename );

• struct GLMmodel– vertices– triangles

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;

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

opengl shaders

Наложение видеоэффектов с opengl es...

opengl on ios & osx - nathanael...

learning opengl and shader programmingkeywords: opengl,...

introduction to the opengl shading language...

amcs / cs 247 – scientific visualization lecture 12...

opengl sc - kdab · kdab | the qt, opengl and c++ experts 2...

shaders and glsl - computer...

opengl compute shaders - acm...

khronos template 2015 - world wide web consortium...evolved...

opengl and webgl patrick cozzi university of pennsylvania...

opengl compute shaders - acm...

opengl and webgl

we will use webgl 1.0. webgl 2.0 is now being supported by...

michael robertson yuta takayama. webgl is opengl on a web...

introduction to the opengl shading language...

real-time rendering graphics programming · 2000 opengl...

introduction to opengl - penn...

how to use and teach opengl compute shaders · pdf filehow...

texture shaders -...