cosc 5/4730

Cosc 5/4730

OpenGLBasics

Basics

• First our program describes some geometry and information on handling lighting, colors, materials, and textures.

– This data goes into the pipeline

Basics (2)

• Next the data is moved, scaled, and rotated.– Then for each object lighting is calculated and stored.

• Example: A solar system– we may move, rotate and scale the model (not the

planets, that’s the animation)– Based on our viewpoint, which is based on

“rectangular cone” that is limits the scene to a manageable level.

Basics (3)

• Next the scene is clipped, so that only the objects that are likely to be visible are processed.– Culling out objects as soon as possible saves

processing time.– Continuing the example, if the moon is behind the

earth, then we don’t process the moon.• Other planets and moons would also be culled as

needed. This also includes “backsides” and “insides” of objects that can be seen as well.

Basics (4)

• Next the remaining objects are now “projected” against the “viewport”

• The viewport again is cone

• Now rasterization takes place, which creates fragments that could be single pixels.

• Fragments can have textures and fog effects– More culling may take place for fog that obscures

objects.

Basics (5)

• And finally any surviving fragments are written to the frame buffer.– Some last minute operations take place as well– Fragment’s values are applied for translucency– Depth tests to ensure closer fragments are written

“in front” of further ones

• And now you “see” the data.

2D

• Well start with 2D drawing

• Later on we get to 3D objects.

Geometry and describing objects

• Let’s start simple and describe a square.– First we describe the object around center point

of 0,0float vertices[] = {

-1.0f, 1.0f,-1.0f, -1.0f,1.0f, -1.0f, 1.0f, 1.0f,

};

Primitives to render

• OpenGL has a lot more primitives, but ES only has the following.

• GL_POINTS– Draw individual points to the screen.

• GL_LINE_STRIP– Series of connected line segments– Same, with a segment addedfirst and last vertices

Primitives to render (2)

• GL_LINES– Pears of vertices are interpreted as– Individual line segments

• GL_TRIANGLES– Triples of vertices interpreted as triangles.

Primitives to render (3)

• GL_TRIANGLE_STRIP– Draws a series of triangles (three-sided polygons)

using vertices v0, v1, v2, then v2, v1, v3 (note the order), then v2, v3, v4, and so on. The ordering is to ensure that the triangles are all drawn with the same orientation so that the strip can correctly form part of a surface.

Primitives to render (4)

• GL_TRIANGLE_FAN– Same as GL_TRIANGLE_STRIP, except that the

vertices are drawn v0, v1, v2, then v0, v2, v3, then v0, v3, v4, and so on.

Geometry and describing objects (2)

• I want a colored square, so I’m going to use GL_TRIANGLES

• So we need to match up the vertices in triples. • private short[] indices = {

0, 1, 2, 0, 2, 3

};

Geometry and describing objects (3)

• Order also matters, normally you should describe the object in counter clockwise (or clockwise, but always the same direction) for performance reasons and facing

Add some color.

• there are four components: red, green, blue, and alpha (transparency)

• These map directory to our 4 vertices in the square.– In this case, I’ll make it red and opiate. byte colors[] = {255, 0, 0, 255,255, 0,0, 255,255,0,0,255,255,0,0,255};

In OpenGLDemo1, you can play with color or use very colorful square as well.

Lastly• Now matches up everything, converts their internal java formats to the

OpenGL– mainly makes sure the ordering of the bytes is correctly, otherwise depending on

hardware, they might get reversed.mFVertexBuffer = vbb.asFloatBuffer();mFVertexBuffer.put(vertices);mFVertexBuffer.position(0);

mColorBuffer = ByteBuffer.allocateDirect(colors.length);mColorBuffer.put(colors);mColorBuffer.position(0);

mIndexBuffer = ByteBuffer.allocateDirect(indices.length);mIndexBuffer.put(indices);mIndexBuffer.position(0);

Drawing• tell openGL how the vertices are ordering their faces. This is both for efficiently so

openGL can ignore the "backside" and not attempt to draw it.gl.glFrontFace(GL11.GL_CCW); //counter clockwise, so any clockwise triangles are ignored.• send the buffers to the renderer. specify the number of elements per vertex, which

there are 2.gl.glVertexPointer(2, GL11.GL_FLOAT, 0, mFVertexBuffer); • color buffer is added, with the size of the 4 elementsgl.glColorPointer(4, GL11.GL_UNSIGNED_BYTE, 0, mColorBuffer); • finally draw the element, we the connectivity array, using triangles• could also be triangle lists, points or linesgl.glDrawElements(GL11.GL_TRIANGLES, 6, GL11.GL_UNSIGNED_BYTE, mIndexBuffer);• return the openGL back to the default value, we didn’t change it from default, but a

good idea none the less.gl.glFrontFace(GL11.GL_CCW);

Example

• In the OpenGLDemo1.zip– Includes the above code

– It also makes the square move.• It uses a glTranslatef method to move where the

triangle will be drawn.• This is done the SquareRender in the onDrawFrame

method.

Circles?

• Say we wanted to draw a circle. – How?

– A circle outline • Likely use a GL_LINE_STRIP

– Shaded circle• Use a GL_TRIANGLE_FAN

– Include the first vertex again as the last vertex

Some more complex

• Let try a simple stick figure.

3D

• Adding another dimension.• Note: • OpenGL coordinates0,0,0 is in the “middle”+y goes up, +x goes right+z is pointing toward you

Viewing Frustum and Projection Matrix

Cube• Using the square from before, now we need to add a z space to it, creating a

cube. Plus add the another plane.• float vertices[] = {

-1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f,1.0f, -1.0f, 1.0f,-1.0f, -1.0f, 1.0f,

-1.0f, 1.0f,-1.0f,1.0f, 1.0f,-1.0f,1.0f, -1.0f,-1.0f,1.0f, -1.0f,-1.0f

};

We also need to add to the extra plane to the color matrix as well.

connecting the vertices

• We can use a two triangle fans to connect everything.

byte tfan1[] = { byte tfan2[] = {1,0,3, 7,4,5,1,3,2, 7,5,6,1,2,6, 7,6,2,1,6,5, 7,2,3,1,5,4, 7,3,0,1,4,0 7,0,4}; };The first incorporates the front, right, and top faces, while the second incorporates theback, bottom, and left faces

drawing

gl.glVertexPointer(3, GL11.GL_FLOAT, 0, mFVertexBuffer);gl.glColorPointer(4, GL11.GL_UNSIGNED_BYTE, 0, mColorBuffer);• draw the fan, 6*3 is 6 fans of 3 triangles gl.glDrawElements( gl.GL_TRIANGLE_FAN, 6 * 3, gl.GL_UNSIGNED_BYTE, mTfan1);gl.glDrawElements( gl.GL_TRIANGLE_FAN, 6 * 3, gl.GL_UNSIGNED_BYTE, mTfan2);

onDrawFrame

• The onDrawFrame is basically unchanged.• We call mCube.draw • Also the example has a

glClearColor(0.0f,0.5f,0.5f,1.0f);– So the background will be teal blue.

frustum code• We need to add code for the frustum information float aspectRatio; float zNear =.1f; float zFar =1000;//The field of 30 degrees is converted to radians as the Java Math libraries require float fieldOfView = 30.0f/57.3f; float size; gl.glEnable(GL10.GL_NORMALIZE);//ensure the aspect raitio is correct, otherwise the objects will look squashed aspectRatio=(float)width/(float)height;

frustum code (2)

gl.glMatrixMode(GL10.GL_PROJECTION); • calculating a size value needed to specify the left/right

and top/bottom limits of the viewing volume size = zNear * (float)(Math.tan((double)(fieldOfView/2.0f))); • feed those numbers into gl.glFrustum(),gl.glFrustumf(-size, size, -size /aspectRatio, size /aspectRatio, zNear, zFar);

BouncyCube example.

• BouncyCube.zip is code from the previous example.

• The comments are pretty much missing in the example code– Which comes from the Apress book listed in the

reference section of the lecture.

Solar System example

• There is also a solarSystem.zip example from the apress book.– It has a bouncing ball that rotates.

– You may want to take a look at the code and well come back to it when we look at light sources.

References

• Much of this lecture and examples are taken from– Apress, Pro OpenGL ES for Android, 2012

• http://blog.jayway.com/2009/12/04/opengl-es-tutorial-for-android-%E2%80%93-part-ii-building-a-polygon/

Transformations

• A good look at transformations with lots of pictures and diagrams can be found here.– how to understand the coordinate system– moving, scaling, and rotating.

• http://blog.jayway.com/2010/01/01/opengl-es-tutorial-for-android-%E2%80%93-part-iii-%E2%80%93-transformations/

• Part IV is about colors, which is also a very good read.

QA&