am 5b93d259: Merge "docs: code fixes for OpenGL ES training" into klp-docs
* commit '5b93d259b8df98b011ac7f915b2c6602bc63f9fe': docs: code fixes for OpenGL ES training
This commit is contained in:
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 11 KiB |
@@ -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>
|
get created once and then cached for later use.</p>
|
||||||
|
|
||||||
<pre>
|
<pre>
|
||||||
public Triangle() {
|
public class Triangle() {
|
||||||
...
|
...
|
||||||
|
|
||||||
int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
|
int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
|
||||||
|
|||||||
@@ -92,7 +92,7 @@ also add a {@link android.opengl.GLSurfaceView}.</p>
|
|||||||
{@link android.opengl.GLSurfaceView} as its primary view:</p>
|
{@link android.opengl.GLSurfaceView} as its primary view:</p>
|
||||||
|
|
||||||
<pre>
|
<pre>
|
||||||
public class OpenGLES20 extends Activity {
|
public class OpenGLES20Activity extends Activity {
|
||||||
|
|
||||||
private GLSurfaceView mGLView;
|
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>
|
gray background in the {@link android.opengl.GLSurfaceView}:</p>
|
||||||
|
|
||||||
<pre>
|
<pre>
|
||||||
public class MyGL20Renderer implements GLSurfaceView.Renderer {
|
public class MyGLRenderer implements GLSurfaceView.Renderer {
|
||||||
|
|
||||||
public void onSurfaceCreated(GL10 unused, EGLConfig config) {
|
public void onSurfaceCreated(GL10 unused, EGLConfig config) {
|
||||||
// Set the background frame color
|
// 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) {
|
public void onDrawFrame(GL10 unused) {
|
||||||
|
|||||||
@@ -53,16 +53,20 @@ camera view transformation matrices:</p>
|
|||||||
private float[] mRotationMatrix = new float[16];
|
private float[] mRotationMatrix = new float[16];
|
||||||
public void onDrawFrame(GL10 gl) {
|
public void onDrawFrame(GL10 gl) {
|
||||||
...
|
...
|
||||||
|
float[] scratch = new float[16];
|
||||||
|
|
||||||
// Create a rotation transformation for the triangle
|
// Create a rotation transformation for the triangle
|
||||||
long time = SystemClock.uptimeMillis() % 4000L;
|
long time = SystemClock.uptimeMillis() % 4000L;
|
||||||
float angle = 0.090f * ((int) time);
|
float angle = 0.090f * ((int) time);
|
||||||
Matrix.setRotateM(mRotationMatrix, 0, angle, 0, 0, -1.0f);
|
Matrix.setRotateM(mRotationMatrix, 0, angle, 0, 0, -1.0f);
|
||||||
|
|
||||||
// Combine the rotation matrix with the projection and camera view
|
// 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
|
// Draw triangle
|
||||||
mTriangle.draw(mMVPMatrix);
|
mTriangle.draw(scratch);
|
||||||
}
|
}
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
@@ -82,8 +86,9 @@ android.opengl.GLSurfaceView} container:</p>
|
|||||||
<pre>
|
<pre>
|
||||||
public MyGLSurfaceView(Context context) {
|
public MyGLSurfaceView(Context context) {
|
||||||
...
|
...
|
||||||
// Render the view only when there is a change in the drawing data
|
// Render the view only when there is a change in the drawing data.
|
||||||
//setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY); // comment out for auto-rotation
|
// To allow the triangle to rotate automatically, this line is commented out:
|
||||||
|
<strong>//setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);</strong>
|
||||||
}
|
}
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|||||||
@@ -79,12 +79,12 @@ public void onSurfaceChanged(GL10 unused, int width, int height) {
|
|||||||
|
|
||||||
// this projection matrix is applied to object coordinates
|
// this projection matrix is applied to object coordinates
|
||||||
// in the onDrawFrame() method
|
// 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>
|
</pre>
|
||||||
|
|
||||||
<p>This code populates a projection matrix, {@code mProjMatrix} which you can then combine with a
|
<p>This code populates a projection matrix, {@code mProjectionMatrix} which you can then combine
|
||||||
camera view transformation in the {@link android.opengl.GLSurfaceView.Renderer#onDrawFrame
|
with a camera view transformation in the {@link android.opengl.GLSurfaceView.Renderer#onDrawFrame
|
||||||
onDrawFrame()} method, which is shown in the next section.</p>
|
onDrawFrame()} method, which is shown in the next section.</p>
|
||||||
|
|
||||||
<p class="note"><strong>Note:</strong> Just applying a projection transformation to your
|
<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>
|
|||||||
@Override
|
@Override
|
||||||
public void onDrawFrame(GL10 unused) {
|
public void onDrawFrame(GL10 unused) {
|
||||||
...
|
...
|
||||||
|
|
||||||
// Set the camera position (View matrix)
|
// 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
|
// Calculate the projection and view transformation
|
||||||
Matrix.multiplyMM(mMVPMatrix, 0, mProjMatrix, 0, mVMatrix, 0);
|
Matrix.multiplyMM(mMVPMatrix, 0, mProjectionMatrix, 0, mViewMatrix, 0);
|
||||||
|
|
||||||
// Draw shape
|
// Draw shape
|
||||||
mTriangle.draw(mMVPMatrix);
|
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
|
// get handle to shape's transformation matrix
|
||||||
mMVPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix");
|
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);
|
GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mvpMatrix, 0);
|
||||||
|
|
||||||
// Draw the triangle
|
// Draw the triangle
|
||||||
@@ -139,7 +138,7 @@ public void draw(float[] mvpMatrix) { // pass in the calculated transformation m
|
|||||||
}
|
}
|
||||||
</pre>
|
</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>
|
your graphic objects are drawn in correct proportions and should look like this:</p>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -50,16 +50,16 @@ efficiency, you write these coordinates into a {@link java.nio.ByteBuffer}, that
|
|||||||
OpenGL ES graphics pipeline for processing.</p>
|
OpenGL ES graphics pipeline for processing.</p>
|
||||||
|
|
||||||
<pre>
|
<pre>
|
||||||
class Triangle {
|
public class Triangle {
|
||||||
|
|
||||||
private FloatBuffer vertexBuffer;
|
private FloatBuffer vertexBuffer;
|
||||||
|
|
||||||
// number of coordinates per vertex in this array
|
// number of coordinates per vertex in this array
|
||||||
static final int COORDS_PER_VERTEX = 3;
|
static final int COORDS_PER_VERTEX = 3;
|
||||||
static float triangleCoords[] = { // in counterclockwise order:
|
static float triangleCoords[] = { // in counterclockwise order:
|
||||||
0.0f, 0.622008459f, 0.0f, // top
|
0.0f, 0.622008459f, 0.0f, // top
|
||||||
-0.5f, -0.311004243f, 0.0f, // bottom left
|
-0.5f, -0.311004243f, 0.0f, // bottom left
|
||||||
0.5f, -0.311004243f, 0.0f // bottom right
|
0.5f, -0.311004243f, 0.0f // bottom right
|
||||||
};
|
};
|
||||||
|
|
||||||
// Set color with red, green, blue and alpha (opacity) values
|
// 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>
|
OpenGL ES graphics pipeline how to draw these vertices. Here’s the code for this shape:</p>
|
||||||
|
|
||||||
<pre>
|
<pre>
|
||||||
class Square {
|
public class Square {
|
||||||
|
|
||||||
private FloatBuffer vertexBuffer;
|
private FloatBuffer vertexBuffer;
|
||||||
private ShortBuffer drawListBuffer;
|
private ShortBuffer drawListBuffer;
|
||||||
|
|
||||||
// number of coordinates per vertex in this array
|
// number of coordinates per vertex in this array
|
||||||
static final int COORDS_PER_VERTEX = 3;
|
static final int COORDS_PER_VERTEX = 3;
|
||||||
static float squareCoords[] = { -0.5f, 0.5f, 0.0f, // top left
|
static float squareCoords[] = {
|
||||||
-0.5f, -0.5f, 0.0f, // bottom left
|
-0.5f, 0.5f, 0.0f, // top left
|
||||||
0.5f, -0.5f, 0.0f, // bottom right
|
-0.5f, -0.5f, 0.0f, // bottom left
|
||||||
0.5f, 0.5f, 0.0f }; // top right
|
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
|
private short drawOrder[] = { 0, 1, 2, 0, 2, 3 }; // order to draw vertices
|
||||||
|
|
||||||
|
|||||||
@@ -75,7 +75,9 @@ public boolean onTouchEvent(MotionEvent e) {
|
|||||||
dy = dy * -1 ;
|
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();
|
requestRender();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -123,16 +125,20 @@ add {@code mAngle}, which contains the touch input generated angle:</p>
|
|||||||
<pre>
|
<pre>
|
||||||
public void onDrawFrame(GL10 gl) {
|
public void onDrawFrame(GL10 gl) {
|
||||||
...
|
...
|
||||||
|
float[] scratch = new float[16];
|
||||||
|
|
||||||
// Create a rotation for the triangle
|
// Create a rotation for the triangle
|
||||||
// long time = SystemClock.uptimeMillis() % 4000L;
|
// long time = SystemClock.uptimeMillis() % 4000L;
|
||||||
// float angle = 0.090f * ((int) time);
|
// float angle = 0.090f * ((int) time);
|
||||||
<strong>Matrix.setRotateM(mRotationMatrix, 0, mAngle, 0, 0, -1.0f);</strong>
|
<strong>Matrix.setRotateM(mRotationMatrix, 0, mAngle, 0, 0, -1.0f);</strong>
|
||||||
|
|
||||||
// Combine the rotation matrix with the projection and camera view
|
// 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
|
// Draw triangle
|
||||||
mTriangle.draw(mMVPMatrix);
|
mTriangle.draw(scratch);
|
||||||
}
|
}
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user