programming with opengl part 2: complete programs ed angel professor of emeritus of computer science...

Programming with OpenGLPart 2: Complete Programs

Ed Angel

Professor of Emeritus of Computer Science

University of New Mexico

Objectives

•Build a complete first program Introduce shaders

Introduce a standard program structure

•Simple viewing Two-dimensional viewing as a special case of

three-dimensional viewing

• Initialization steps and program structure

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

Square Program


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)


square.html

<!DOCTYPE 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, 1.0, 1.0, 1.0 );}</script>Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

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 vector type vec2•Must set precision in fragment shader


square.html (cont)

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

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


Files

•../Common/webgl-utils.js: Standard utilities for setting up WebGL context in Common directory on website•../Common/initShaders.js: contains JS and WebGL code for reading, compiling and linking the shaders •../Common/MV.js: our matrix-vector package•square.js: the application file


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

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


Notes

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

•canvas gets WebGL context from HTML file• vertices use vec2 type in MV.js• JS array is not the same as a C or Java array

object with methods

vertices.length // 4

•Values in clip coordinatesAngel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

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

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

// 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 ); Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Notes

•initShaders used to load, compile and link shaders to form a program object

• Load data onto GPU by creating a vertex buffer object on the GPU

Note use of flatten() to convert JS array to an array of float32’s

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

need name, type, location in buffer


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


programming with opengl part 2: complete programs ed angel professor of emeritus of computer science...

Documents