Áp dụng phép chiếu và khung hiển thị camera
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Trong môi trường OpenGL ES, phép chiếu và khung hiển thị máy ảnh cho phép bạn hiển thị các đối tượng được vẽ trong
theo cách giống với cách bạn nhìn thấy các vật thể bằng mắt. Phần mô phỏng này về
quá trình xem thực được thực hiện bằng các phép biến đổi toán học của toạ độ đối tượng được vẽ:
- Phiếu – Quy tắc chuyển đổi này điều chỉnh toạ độ của các đối tượng được vẽ dựa trên
chiều rộng và chiều cao của
GLSurfaceView
, nơi chúng được hiển thị. Không có
trong phép tính này, các đối tượng do OpenGL ES vẽ bị lệch bởi tỷ lệ hình ảnh không bằng nhau
cửa sổ. Phép biến đổi phép chiếu thường chỉ phải được tính toán khi tỷ lệ của
Khung hiển thị OpenGL được thiết lập hoặc thay đổi trong phương thức onSurfaceChanged()
của trình kết xuất. Để biết thêm thông tin về phép chiếu OpenGL ES và
lập bản đồ toạ độ, xem
Ánh xạ toạ độ cho bản vẽ
đối tượng.
- Chế độ xem máy ảnh – Quy tắc chuyển đổi này điều chỉnh toạ độ của các đối tượng được vẽ dựa trên
vị trí của máy ảnh ảo. Điều quan trọng cần lưu ý là OpenGL ES không xác định máy ảnh thực
mà thay vào đó cung cấp các phương thức tiện ích mô phỏng camera bằng cách biến đổi màn hình
các đối tượng được vẽ. Chỉ có thể tính toán một lượt chuyển đổi chế độ xem camera một lần khi bạn thiết lập
GLSurfaceView
hoặc có thể thay đổi linh hoạt dựa trên thao tác của người dùng hoặc
chức năng của ứng dụng.
Bài học này mô tả cách tạo một phép chiếu và khung hiển thị máy ảnh, cũng như áp dụng khung hiển thị đó cho các hình dạng được vẽ
GLSurfaceView
của bạn.
Xác định một phép chiếu
Dữ liệu của phép biến đổi phép chiếu được tính trong onSurfaceChanged()
của lớp GLSurfaceView.Renderer
. Mã ví dụ sau đây
lấy chiều cao và chiều rộng của GLSurfaceView
rồi sử dụng nó để điền sẵn
biến đổi phép chiếu Matrix
bằng phương thức Matrix.frustumM()
:
Kotlin
// vPMatrix is an abbreviation for "Model View Projection Matrix"
private val vPMatrix = FloatArray(16)
private val projectionMatrix = FloatArray(16)
private val viewMatrix = FloatArray(16)
override fun onSurfaceChanged(unused: GL10, width: Int, height: Int) {
GLES20.glViewport(0, 0, width, height)
val ratio: Float = width.toFloat() / height.toFloat()
// this projection matrix is applied to object coordinates
// in the onDrawFrame() method
Matrix.frustumM(projectionMatrix, 0, -ratio, ratio, -1f, 1f, 3f, 7f)
}
Java
// vPMatrix is an abbreviation for "Model View Projection Matrix"
private final float[] vPMatrix = new float[16];
private final float[] projectionMatrix = new float[16];
private final float[] viewMatrix = new float[16];
@Override
public void onSurfaceChanged(GL10 unused, int width, int height) {
GLES20.glViewport(0, 0, width, height);
float ratio = (float) width / height;
// this projection matrix is applied to object coordinates
// in the onDrawFrame() method
Matrix.frustumM(projectionMatrix, 0, -ratio, ratio, -1, 1, 3, 7);
}
Mã này sẽ điền sẵn ma trận chiếu mProjectionMatrix
mà sau đó bạn có thể kết hợp
với sự biến đổi khung hiển thị camera trong phương thức onDrawFrame()
, như minh hoạ trong phần tiếp theo.
Lưu ý: Chỉ áp dụng phép biến đổi phép chiếu cho
đối tượng vẽ thường dẫn đến màn hình rất trống. Nói chung, bạn cũng phải sử dụng máy ảnh
chuyển đổi khung hiển thị để mọi thứ đều xuất hiện trên màn hình.
Xác định chế độ xem camera
Hoàn tất quá trình biến đổi các đối tượng đã vẽ bằng cách thêm biến đổi chế độ xem camera dưới dạng
của quá trình vẽ trong trình kết xuất. Trong mã ví dụ sau, chế độ xem camera
phép biến đổi được tính bằng phép biến đổi Matrix.setLookAtM()
rồi kết hợp với ma trận chiếu được tính toán trước đó. Các biến thể kết hợp
sau đó, các ma trận biến đổi được truyền đến hình dạng đã vẽ.
Kotlin
override fun onDrawFrame(unused: GL10) {
...
// Set the camera position (View matrix)
Matrix.setLookAtM(viewMatrix, 0, 0f, 0f, 3f, 0f, 0f, 0f, 0f, 1.0f, 0.0f)
// Calculate the projection and view transformation
Matrix.multiplyMM(vPMatrix, 0, projectionMatrix, 0, viewMatrix, 0)
// Draw shape
triangle.draw(vPMatrix)
Java
@Override
public void onDrawFrame(GL10 unused) {
...
// Set the camera position (View matrix)
Matrix.setLookAtM(viewMatrix, 0, 0, 0, 3, 0f, 0f, 0f, 0f, 1.0f, 0.0f);
// Calculate the projection and view transformation
Matrix.multiplyMM(vPMatrix, 0, projectionMatrix, 0, viewMatrix, 0);
// Draw shape
triangle.draw(vPMatrix);
}
Để sử dụng ma trận biến đổi phép chiếu và chế độ xem máy ảnh kết hợp hiển thị trong
để xem trước các phần, trước tiên hãy thêm một biến ma trận vào trình đổ bóng đỉnh đã xác định trước đó
trong lớp Triangle
:
Kotlin
class Triangle {
private val vertexShaderCode =
// This matrix member variable provides a hook to manipulate
// the coordinates of the objects that use this vertex shader
"uniform mat4 uMVPMatrix;" +
"attribute vec4 vPosition;" +
"void main() {" +
// the matrix must be included as a modifier of gl_Position
// Note that the uMVPMatrix factor *must be first* in order
// for the matrix multiplication product to be correct.
" gl_Position = uMVPMatrix * vPosition;" +
"}"
// Use to access and set the view transformation
private var vPMatrixHandle: Int = 0
...
}
Java
public class Triangle {
private final String vertexShaderCode =
// This matrix member variable provides a hook to manipulate
// the coordinates of the objects that use this vertex shader
"uniform mat4 uMVPMatrix;" +
"attribute vec4 vPosition;" +
"void main() {" +
// the matrix must be included as a modifier of gl_Position
// Note that the uMVPMatrix factor *must be first* in order
// for the matrix multiplication product to be correct.
" gl_Position = uMVPMatrix * vPosition;" +
"}";
// Use to access and set the view transformation
private int vPMatrixHandle;
...
}
Tiếp theo, hãy sửa đổi phương thức draw()
của các đối tượng đồ hoạ để chấp nhận kiểu kết hợp
và áp dụng ma trận biến đổi vào hình dạng:
Kotlin
fun draw(mvpMatrix: FloatArray) { // pass in the calculated transformation matrix
...
// get handle to shape's transformation matrix
vPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix")
// Pass the projection and view transformation to the shader
GLES20.glUniformMatrix4fv(vPMatrixHandle, 1, false, mvpMatrix, 0)
// Draw the triangle
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount)
// Disable vertex array
GLES20.glDisableVertexAttribArray(positionHandle)
}
Java
public void draw(float[] mvpMatrix) { // pass in the calculated transformation matrix
...
// get handle to shape's transformation matrix
vPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix");
// Pass the projection and view transformation to the shader
GLES20.glUniformMatrix4fv(vPMatrixHandle, 1, false, mvpMatrix, 0);
// Draw the triangle
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);
// Disable vertex array
GLES20.glDisableVertexAttribArray(positionHandle);
}
Khi bạn đã tính toán và áp dụng chính xác phép chiếu và các phép biến đổi khung hiển thị camera,
đối tượng đồ hoạ được vẽ theo tỷ lệ chính xác và sẽ có dạng như sau:
Hình 1. Hình tam giác được vẽ có áp dụng phép chiếu và khung hiển thị camera.
Giờ bạn đã có ứng dụng hiển thị các hình dạng theo tỷ lệ chính xác, đã đến lúc
thêm chuyển động vào hình dạng của bạn.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-07-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-07-27 UTC."],[],[],null,["# Apply projection and camera views\n\nIn the OpenGL ES environment, projection and camera views allow you to display drawn objects in a\nway that more closely resembles how you see physical objects with your eyes. This simulation of\nphysical viewing is done with mathematical transformations of drawn object coordinates:\n\n- *Projection* - This transformation adjusts the coordinates of drawn objects based on the width and height of the [GLSurfaceView](/reference/android/opengl/GLSurfaceView) where they are displayed. Without this calculation, objects drawn by OpenGL ES are skewed by the unequal proportions of the view window. A projection transformation typically only has to be calculated when the proportions of the OpenGL view are established or changed in the [onSurfaceChanged()](/reference/android/opengl/GLSurfaceView.Renderer#onSurfaceChanged(javax.microedition.khronos.opengles.GL10, int, int)) method of your renderer. For more information about OpenGL ES projections and coordinate mapping, see [Mapping coordinates for drawn\n objects](/develop/ui/views/graphics/opengl/about-opengl#coordinate-mapping).\n- *Camera View* - This transformation adjusts the coordinates of drawn objects based on a virtual camera position. It's important to note that OpenGL ES does not define an actual camera object, but instead provides utility methods that simulate a camera by transforming the display of drawn objects. A camera view transformation might be calculated only once when you establish your [GLSurfaceView](/reference/android/opengl/GLSurfaceView), or might change dynamically based on user actions or your application's function.\n\nThis lesson describes how to create a projection and camera view and apply it to shapes drawn in\nyour [GLSurfaceView](/reference/android/opengl/GLSurfaceView).\n\nDefine a projection\n-------------------\n\nThe data for a projection transformation is calculated in the [onSurfaceChanged()](/reference/android/opengl/GLSurfaceView.Renderer#onSurfaceChanged(javax.microedition.khronos.opengles.GL10, int, int))\nmethod of your [GLSurfaceView.Renderer](/reference/android/opengl/GLSurfaceView.Renderer) class. The following example code\ntakes the height and width of the [GLSurfaceView](/reference/android/opengl/GLSurfaceView) and uses it to populate a\nprojection transformation [Matrix](/reference/android/opengl/Matrix) using the [Matrix.frustumM()](/reference/android/opengl/Matrix#frustumM(float[], int, float, float, float, float, float, float)) method: \n\n### Kotlin\n\n```kotlin\n// vPMatrix is an abbreviation for \"Model View Projection Matrix\"\nprivate val vPMatrix = FloatArray(16)\nprivate val projectionMatrix = FloatArray(16)\nprivate val viewMatrix = FloatArray(16)\n\noverride fun onSurfaceChanged(unused: GL10, width: Int, height: Int) {\n GLES20.glViewport(0, 0, width, height)\n\n val ratio: Float = width.toFloat() / height.toFloat()\n\n // this projection matrix is applied to object coordinates\n // in the onDrawFrame() method\n Matrix.frustumM(projectionMatrix, 0, -ratio, ratio, -1f, 1f, 3f, 7f)\n}\n```\n\n### Java\n\n```java\n// vPMatrix is an abbreviation for \"Model View Projection Matrix\"\nprivate final float[] vPMatrix = new float[16];\nprivate final float[] projectionMatrix = new float[16];\nprivate final float[] viewMatrix = new float[16];\n\n@Override\npublic void onSurfaceChanged(GL10 unused, int width, int height) {\n GLES20.glViewport(0, 0, width, height);\n\n float ratio = (float) width / height;\n\n // this projection matrix is applied to object coordinates\n // in the onDrawFrame() method\n Matrix.frustumM(projectionMatrix, 0, -ratio, ratio, -1, 1, 3, 7);\n}\n```\n\nThis code populates a projection matrix, `mProjectionMatrix` which you can then combine\nwith a camera view transformation in the [onDrawFrame()](/reference/android/opengl/GLSurfaceView.Renderer#onDrawFrame(javax.microedition.khronos.opengles.GL10)) method, which is shown in the next section.\n\n**Note:** Just applying a projection transformation to your\ndrawing objects typically results in a very empty display. In general, you must also apply a camera\nview transformation in order for anything to show up on screen.\n\nDefine a camera view\n--------------------\n\nComplete the process of transforming your drawn objects by adding a camera view transformation as\npart of the drawing process in your renderer. In the following example code, the camera view\ntransformation is calculated using the [Matrix.setLookAtM()](/reference/android/opengl/Matrix#setLookAtM(float[], int, float, float, float, float, float, float, float, float, float))\nmethod and then combined with the previously calculated projection matrix. The combined\ntransformation matrices are then passed to the drawn shape. \n\n### Kotlin\n\n```kotlin\noverride fun onDrawFrame(unused: GL10) {\n ...\n // Set the camera position (View matrix)\n Matrix.setLookAtM(viewMatrix, 0, 0f, 0f, 3f, 0f, 0f, 0f, 0f, 1.0f, 0.0f)\n\n // Calculate the projection and view transformation\n Matrix.multiplyMM(vPMatrix, 0, projectionMatrix, 0, viewMatrix, 0)\n\n // Draw shape\n triangle.draw(vPMatrix)\n```\n\n### Java\n\n```java\n@Override\npublic void onDrawFrame(GL10 unused) {\n ...\n // Set the camera position (View matrix)\n Matrix.setLookAtM(viewMatrix, 0, 0, 0, 3, 0f, 0f, 0f, 0f, 1.0f, 0.0f);\n\n // Calculate the projection and view transformation\n Matrix.multiplyMM(vPMatrix, 0, projectionMatrix, 0, viewMatrix, 0);\n\n // Draw shape\n triangle.draw(vPMatrix);\n}\n```\n\nApply projection and camera transformations\n-------------------------------------------\n\nIn order to use the combined projection and camera view transformation matrix shown in the\npreviews sections, first add a matrix variable to the *vertex shader* previously defined\nin the `Triangle` class: \n\n### Kotlin\n\n```kotlin\nclass Triangle {\n\n private val vertexShaderCode =\n // This matrix member variable provides a hook to manipulate\n // the coordinates of the objects that use this vertex shader\n \"uniform mat4 uMVPMatrix;\" +\n \"attribute vec4 vPosition;\" +\n \"void main() {\" +\n // the matrix must be included as a modifier of gl_Position\n // Note that the uMVPMatrix factor *must be first* in order\n // for the matrix multiplication product to be correct.\n \" gl_Position = uMVPMatrix * vPosition;\" +\n \"}\"\n\n // Use to access and set the view transformation\n private var vPMatrixHandle: Int = 0\n\n ...\n}\n```\n\n### Java\n\n```java\npublic class Triangle {\n\n private final String vertexShaderCode =\n // This matrix member variable provides a hook to manipulate\n // the coordinates of the objects that use this vertex shader\n \"uniform mat4 uMVPMatrix;\" +\n \"attribute vec4 vPosition;\" +\n \"void main() {\" +\n // the matrix must be included as a modifier of gl_Position\n // Note that the uMVPMatrix factor *must be first* in order\n // for the matrix multiplication product to be correct.\n \" gl_Position = uMVPMatrix * vPosition;\" +\n \"}\";\n\n // Use to access and set the view transformation\n private int vPMatrixHandle;\n\n ...\n}\n```\n\nNext, modify the `draw()` method of your graphic objects to accept the combined\ntransformation matrix and apply it to the shape: \n\n### Kotlin\n\n```kotlin\nfun draw(mvpMatrix: FloatArray) { // pass in the calculated transformation matrix\n ...\n\n // get handle to shape's transformation matrix\n vPMatrixHandle = GLES20.glGetUniformLocation(mProgram, \"uMVPMatrix\")\n\n // Pass the projection and view transformation to the shader\n GLES20.glUniformMatrix4fv(vPMatrixHandle, 1, false, mvpMatrix, 0)\n\n // Draw the triangle\n GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount)\n\n // Disable vertex array\n GLES20.glDisableVertexAttribArray(positionHandle)\n}\n```\n\n### Java\n\n```java\npublic void draw(float[] mvpMatrix) { // pass in the calculated transformation matrix\n ...\n\n // get handle to shape's transformation matrix\n vPMatrixHandle = GLES20.glGetUniformLocation(mProgram, \"uMVPMatrix\");\n\n // Pass the projection and view transformation to the shader\n GLES20.glUniformMatrix4fv(vPMatrixHandle, 1, false, mvpMatrix, 0);\n\n // Draw the triangle\n GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);\n\n // Disable vertex array\n GLES20.glDisableVertexAttribArray(positionHandle);\n}\n```\n\nOnce you have correctly calculated and applied the projection and camera view transformations,\nyour graphic objects are drawn in correct proportions and should look like this:\n\n\n**Figure 1.** Triangle drawn with a projection and camera view applied.\n\nNow that you have an application that displays your shapes in correct proportions, it's time to\nadd motion to your shapes."]]