1page.title=Applying Projection and Camera Views 2parent.title=Displaying Graphics with OpenGL ES 3parent.link=index.html 4 5trainingnavtop=true 6previous.title=Drawing Shapes 7previous.link=draw.html 8next.title=Applying Projection and Camera Views 9next.link=projection.html 10 11@jd:body 12 13<div id="tb-wrapper"> 14<div id="tb"> 15 16<h2>This lesson teaches you to</h2> 17<ol> 18 <li><a href="#projection">Define a Projection</a></li> 19 <li><a href="#camera-view">Define a Camera View</a></li> 20 <li><a href="#transform">Apply Projection and Camera Transformations</a></li> 21</ol> 22 23<h2>You should also read</h2> 24<ul> 25 <li><a href="{@docRoot}guide/topics/graphics/opengl.html">OpenGL</a></li> 26</ul> 27 28<div class="download-box"> 29 <a href="{@docRoot}shareables/training/OpenGLES.zip" 30class="button">Download the sample</a> 31 <p class="filename">OpenGLES.zip</p> 32</div> 33 34</div> 35</div> 36 37<p>In the OpenGL ES environment, projection and camera views allow you to display drawn objects in a 38way that more closely resembles how you see physical objects with your eyes. This simulation of 39physical viewing is done with mathematical transformations of drawn object coordinates:</p> 40 41<ul> 42 <li><em>Projection</em> - This transformation adjusts the coordinates of drawn objects based on 43the width and height of the {@link android.opengl.GLSurfaceView} where they are displayed. Without 44this calculation, objects drawn by OpenGL ES are skewed by the unequal proportions of the view 45window. A projection transformation typically only has to be calculated when the proportions of the 46OpenGL view are established or changed in the {@link 47android.opengl.GLSurfaceView.Renderer#onSurfaceChanged 48onSurfaceChanged()} method of your renderer. For more information about OpenGL ES projections and 49coordinate mapping, see <a 50href="{@docRoot}guide/topics/graphics/opengl.html#coordinate-mapping">Mapping Coordinates for Drawn 51Objects</a>.</li> 52 <li><em>Camera View</em> - This transformation adjusts the coordinates of drawn objects based on a 53virtual camera position. It’s important to note that OpenGL ES does not define an actual camera 54object, but instead provides utility methods that simulate a camera by transforming the display of 55drawn objects. A camera view transformation might be calculated only once when you establish your 56{@link android.opengl.GLSurfaceView}, or might change dynamically based on user actions or your 57application’s function.</li> 58</ul> 59 60<p>This lesson describes how to create a projection and camera view and apply it to shapes drawn in 61your {@link android.opengl.GLSurfaceView}.</p> 62 63 64<h2 id="projection">Define a Projection</h2> 65 66<p>The data for a projection transformation is calculated in the {@link 67android.opengl.GLSurfaceView.Renderer#onSurfaceChanged onSurfaceChanged()} 68method of your {@link android.opengl.GLSurfaceView.Renderer} class. The following example code 69takes the height and width of the {@link android.opengl.GLSurfaceView} and uses it to populate a 70projection transformation {@link android.opengl.Matrix} using the {@link 71android.opengl.Matrix#frustumM Matrix.frustumM()} method:</p> 72 73<pre> 74@Override 75public void onSurfaceChanged(GL10 unused, int width, int height) { 76 GLES20.glViewport(0, 0, width, height); 77 78 float ratio = (float) width / height; 79 80 // this projection matrix is applied to object coordinates 81 // in the onDrawFrame() method 82 Matrix.frustumM(mProjMatrix, 0, -ratio, ratio, -1, 1, 3, 7); 83} 84</pre> 85 86<p>This code populates a projection matrix, {@code mProjMatrix} which you can then combine with a 87camera view transformation in the {@link android.opengl.GLSurfaceView.Renderer#onDrawFrame 88onDrawFrame()} method, which is shown in the next section.</p> 89 90<p class="note"><strong>Note:</strong> Just applying a projection transformation to your 91drawing objects typically results in a very empty display. In general, you must also apply a camera 92view transformation in order for anything to show up on screen.</p> 93 94 95<h2 id="camera-view">Define a Camera View</h2> 96 97<p>Complete the process of transforming your drawn objects by adding a camera view transformation as 98part of the drawing process. In the following example code, the camera view transformation is 99calculated using the {@link android.opengl.Matrix#setLookAtM Matrix.setLookAtM()} method and then 100combined with the previously calculated projection matrix. The combined transformation matrices 101are then passed to the drawn shape.</p> 102 103<pre> 104@Override 105public void onDrawFrame(GL10 unused) { 106 ... 107 108 // Set the camera position (View matrix) 109 Matrix.setLookAtM(mVMatrix, 0, 0, 0, -3, 0f, 0f, 0f, 0f, 1.0f, 0.0f); 110 111 // Calculate the projection and view transformation 112 Matrix.multiplyMM(mMVPMatrix, 0, mProjMatrix, 0, mVMatrix, 0); 113 114 // Draw shape 115 mTriangle.draw(mMVPMatrix); 116} 117</pre> 118 119 120<h2 id="#transform">Apply Projection and Camera Transformations</h2> 121 122<p>In order to use the combined projection and camera view transformation matrix shown in the 123previews sections, modify the {@code draw()} method of your graphic objects to accept the combined 124transformation matrix and apply it to the shape:</p> 125 126<pre> 127public void draw(float[] mvpMatrix) { // pass in the calculated transformation matrix 128 ... 129 130 // get handle to shape's transformation matrix 131 mMVPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix"); 132 133 // Apply the projection and view transformation 134 GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mvpMatrix, 0); 135 136 // Draw the triangle 137 GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount); 138 ... 139} 140</pre> 141 142<p>Once you have correctly calulated and applied the projection and camera view transformations, 143your graphic objects are drawn in correct proportions and should look like this:</p> 144 145 146<img src="{@docRoot}images/opengl/ogl-triangle-projected.png"> 147<p class="img-caption"> 148<strong>Figure 1.</strong> Triangle drawn with a projection and camera view applied.</p> 149 150 151<p>Now that you have an application that displays your shapes in correct proportions, it's time to 152add motion to your shapes.</p> 153