Merge "docs: code fixes for OpenGL ES training" into klp-docs

docs/html/training/graphics/opengl/draw.jd

@@ -122,7 +122,7 @@ not know the content of your shaders at runtime, you should build your code such
 get created once and then cached for later use.</p>
 
 <pre>
-public Triangle() {
+public class Triangle() {
     ...
 
     int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);

docs/html/training/graphics/opengl/environment.jd

@@ -92,7 +92,7 @@ also add a {@link android.opengl.GLSurfaceView}.</p>
 {@link android.opengl.GLSurfaceView} as its primary view:</p>
 
 <pre>
-public class OpenGLES20 extends Activity {
+public class OpenGLES20Activity extends Activity {
 
     private GLSurfaceView mGLView;
 
@@ -190,11 +190,11 @@ the geometry of the view changes, for example when the device's screen orientati
 gray background in the {@link android.opengl.GLSurfaceView}:</p>
 
 <pre>
-public class MyGL20Renderer implements GLSurfaceView.Renderer {
+public class MyGLRenderer implements GLSurfaceView.Renderer {
 
     public void onSurfaceCreated(GL10 unused, EGLConfig config) {
         // Set the background frame color
-        GLES20.glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
+        GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
     }
 
     public void onDrawFrame(GL10 unused) {

docs/html/training/graphics/opengl/motion.jd

@@ -53,16 +53,20 @@ camera view transformation matrices:</p>
 private float[] mRotationMatrix = new float[16];
 public void onDrawFrame(GL10 gl) {
     ...
+    float[] scratch = new float[16];
+
     // Create a rotation transformation for the triangle
     long time = SystemClock.uptimeMillis() % 4000L;
     float angle = 0.090f * ((int) time);
     Matrix.setRotateM(mRotationMatrix, 0, angle, 0, 0, -1.0f);
 
     // Combine the rotation matrix with the projection and camera view
-    Matrix.multiplyMM(mMVPMatrix, 0, mRotationMatrix, 0, mMVPMatrix, 0);
+    // Note that the mMVPMatrix factor *must be first* in order
+    // for the matrix multiplication product to be correct.
+    Matrix.multiplyMM(scratch, 0, mMVPMatrix, 0, mRotationMatrix, 0);
 
     // Draw triangle
-    mTriangle.draw(mMVPMatrix);
+    mTriangle.draw(scratch);
 }
 </pre>
 
@@ -82,8 +86,9 @@ android.opengl.GLSurfaceView} container:</p>
 <pre>
 public MyGLSurfaceView(Context context) {
     ...
-    // Render the view only when there is a change in the drawing data
-    //setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY); // comment out for auto-rotation
+    // Render the view only when there is a change in the drawing data.
+    // To allow the triangle to rotate automatically, this line is commented out:
+    <strong>//setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);</strong>
 }
 </pre>
 

docs/html/training/graphics/opengl/projection.jd

@@ -79,12 +79,12 @@ public void onSurfaceChanged(GL10 unused, int width, int height) {
 
     // this projection matrix is applied to object coordinates
     // in the onDrawFrame() method
-    Matrix.frustumM(mProjMatrix, 0, -ratio, ratio, -1, 1, 3, 7);
+    Matrix.frustumM(mProjectionMatrix, 0, -ratio, ratio, -1, 1, 3, 7);
 }
 </pre>
 
-<p>This code populates a projection matrix, {@code mProjMatrix} which you can then combine with a
-camera view transformation in the {@link android.opengl.GLSurfaceView.Renderer#onDrawFrame
+<p>This code populates a projection matrix, {@code mProjectionMatrix} which you can then combine
+with a camera view transformation in the {@link android.opengl.GLSurfaceView.Renderer#onDrawFrame
 onDrawFrame()} method, which is shown in the next section.</p>
 
 <p class="note"><strong>Note:</strong> Just applying a projection transformation to your
@@ -104,12 +104,11 @@ are then passed to the drawn shape.</p>
 &#64;Override
 public void onDrawFrame(GL10 unused) {
     ...
-
     // Set the camera position (View matrix)
-    Matrix.setLookAtM(mVMatrix, 0, 0, 0, -3, 0f, 0f, 0f, 0f, 1.0f, 0.0f);
+    Matrix.setLookAtM(mViewMatrix, 0, 0, 0, -3, 0f, 0f, 0f, 0f, 1.0f, 0.0f);
 
     // Calculate the projection and view transformation
-    Matrix.multiplyMM(mMVPMatrix, 0, mProjMatrix, 0, mVMatrix, 0);
+    Matrix.multiplyMM(mMVPMatrix, 0, mProjectionMatrix, 0, mViewMatrix, 0);
 
     // Draw shape
     mTriangle.draw(mMVPMatrix);
@@ -130,7 +129,7 @@ public void draw(float[] mvpMatrix) { // pass in the calculated transformation m
     // get handle to shape's transformation matrix
     mMVPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix");
 
-    // Apply the projection and view transformation
+    // Pass the projection and view transformation to the shader
     GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mvpMatrix, 0);
 
     // Draw the triangle
@@ -139,7 +138,7 @@ public void draw(float[] mvpMatrix) { // pass in the calculated transformation m
 }
 </pre>
 
-<p>Once you have correctly calulated and applied the projection and camera view transformations,
+<p>Once you have correctly calculated and applied the projection and camera view transformations,
 your graphic objects are drawn in correct proportions and should look like this:</p>
 
 

docs/html/training/graphics/opengl/shapes.jd

@@ -50,16 +50,16 @@ efficiency, you write these coordinates into a {@link java.nio.ByteBuffer}, that
 OpenGL ES graphics pipeline for processing.</p>
 
 <pre>
-class Triangle {
+public class Triangle {
 
     private FloatBuffer vertexBuffer;
 
     // number of coordinates per vertex in this array
     static final int COORDS_PER_VERTEX = 3;
-    static float triangleCoords[] = { // in counterclockwise order:
-         0.0f,  0.622008459f, 0.0f,   // top
-        -0.5f, -0.311004243f, 0.0f,   // bottom left
-         0.5f, -0.311004243f, 0.0f    // bottom right
+    static float triangleCoords[] = {   // in counterclockwise order:
+             0.0f,  0.622008459f, 0.0f, // top
+            -0.5f, -0.311004243f, 0.0f, // bottom left
+             0.5f, -0.311004243f, 0.0f  // bottom right
     };
 
     // Set color with red, green, blue and alpha (opacity) values
@@ -112,17 +112,18 @@ defining the two coordinates shared by each triangle twice, use a drawing list t
 OpenGL ES graphics pipeline how to draw these vertices. Here’s the code for this shape:</p>
 
 <pre>
-class Square {
+public class Square {
 
     private FloatBuffer vertexBuffer;
     private ShortBuffer drawListBuffer;
 
     // number of coordinates per vertex in this array
     static final int COORDS_PER_VERTEX = 3;
-    static float squareCoords[] = { -0.5f,  0.5f, 0.0f,   // top left
-                                    -0.5f, -0.5f, 0.0f,   // bottom left
-                                     0.5f, -0.5f, 0.0f,   // bottom right
-                                     0.5f,  0.5f, 0.0f }; // top right
+    static float squareCoords[] = {
+            -0.5f,  0.5f, 0.0f,   // top left
+            -0.5f, -0.5f, 0.0f,   // bottom left
+             0.5f, -0.5f, 0.0f,   // bottom right
+             0.5f,  0.5f, 0.0f }; // top right
 
     private short drawOrder[] = { 0, 1, 2, 0, 2, 3 }; // order to draw vertices
 

docs/html/training/graphics/opengl/touch.jd

@@ -75,7 +75,9 @@ public boolean onTouchEvent(MotionEvent e) {
               dy = dy * -1 ;
             }
 
-            mRenderer.mAngle += (dx + dy) * TOUCH_SCALE_FACTOR;  // = 180.0f / 320
+            mRenderer.setAngle(
+                    mRenderer.getAngle() +
+                    ((dx + dy) * TOUCH_SCALE_FACTOR);  // = 180.0f / 320
             requestRender();
     }
 
@@ -123,16 +125,20 @@ add {@code mAngle}, which contains the touch input generated angle:</p>
 <pre>
 public void onDrawFrame(GL10 gl) {
     ...
+    float[] scratch = new float[16];
+
     // Create a rotation for the triangle
     // long time = SystemClock.uptimeMillis() % 4000L;
     // float angle = 0.090f * ((int) time);
     <strong>Matrix.setRotateM(mRotationMatrix, 0, mAngle, 0, 0, -1.0f);</strong>
 
     // Combine the rotation matrix with the projection and camera view
-    Matrix.multiplyMM(mMVPMatrix, 0, mRotationMatrix, 0, mMVPMatrix, 0);
+    // Note that the mMVPMatrix factor *must be first* in order
+    // for the matrix multiplication product to be correct.
+    Matrix.multiplyMM(scratch, 0, mMVPMatrix, 0, mRotationMatrix, 0);
 
     // Draw triangle
-    mTriangle.draw(mMVPMatrix);
+    mTriangle.draw(scratch);
 }
 </pre>