Google은 흑인 공동체를 위한 인종 간 평등을 진전시키기 위해 노력하고 있습니다. Google에서 어떤 노력을 하고 있는지 확인하세요.

투영 및 카메라 보기 적용

OpenGL ES 환경에서 투영과 카메라 보기를 사용하면 육안으로 실제 객체를 볼 때와 더 비슷한 방식으로 그린 객체를 표시할 수 있습니다. 이 실제 보기 시뮬레이션은 그린 객체의 좌표를 수학적으로 변환하여 구현합니다.

  • 투영 - 이 변환은 그린 객체가 표시되는 GLSurfaceView의 너비와 높이에 기반하여 객체의 좌표를 조정합니다. 이 계산이 없으면 보기 창의 비율이 맞지 않으므로 OpenGL ES에서 그린 객체가 기울어집니다. 일반적으로 투영 변환은 렌더기의 onSurfaceChanged() 메서드에서 OpenGL 뷰의 비율이 설정되거나 변경될 때만 계산해야 합니다. OpenGL ES 투영 및 좌표 매핑에 관한 자세한 내용은 그린 객체의 좌표 매핑을 참조하세요.
  • 카메라 보기 - 이 변환에서는 가상 카메라 위치를 기준으로 그릴 객체의 좌표를 조정합니다. OpenGL ES에서는 실제 카메라 객체를 정의하는 것이 아니라, 그린 객체의 표시를 변환하여 카메라를 시뮬레이션하는 유틸리티 메서드를 제공한다는 점을 기억하는 것이 중요합니다. 카메라 뷰 변환은 GLSurfaceView를 설정할 때 한 번만 계산하거나 사용자 작업 또는 애플리케이션의 기능에 기반하여 동적으로 변경할 수 있습니다.

이 과정에서는 투영과 카메라 뷰를 만들어 GLSurfaceView에 그린 도형에 적용하는 방법을 설명합니다.

투영 정의

투영 변환 데이터는 GLSurfaceView.Renderer 클래스의 onSurfaceChanged() 메서드에서 계산합니다. 다음 코드 예는 GLSurfaceView의 높이와 너비를 가져와서 Matrix.frustumM() 메서드를 사용하는 투영 변환 Matrix를 채우는 데 사용합니다.

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)
    }
    

자바

    // 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);
    }
    

이 코드는 투영 매트릭스 mProjectionMatrix를 채웁니다. 그러면 다음 섹션에 나온 것과 같이 onDrawFrame() 메서드에서 카메라 뷰 변환과 결합할 수 있습니다.

메모: 그린 객체에 투영 변환을 적용하기만 하면 일반적으로 빈 화면이 표시됩니다. 일반적으로 화면에 내용이 표시되려면 카메라 보기 변환도 적용해야 합니다.

카메라 보기 정의

렌더기에 그리기 프로세스의 일부로 카메라 보기 변환을 추가하면 그린 객체의 변환 프로세스가 완료됩니다. 다음 코드 예에서 카메라 뷰 변환은 Matrix.setLookAtM() 메서드를 사용하여 계산하고 이전에 계산된 투영 매트릭스와 결합됩니다. 그리고 나서 결합된 변환 매트릭스를 그린 도형에 전달합니다.

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)
    

자바

    @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);
    }
    

투영 및 카메라 변환 적용

미리보기 섹션에 나온 결합된 투영과 카메라 뷰 변환 매트릭스를 사용하려면 먼저 매트릭스 변수를 이전에 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

        ...
    }
    

자바

    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;

        ...
    }
    

다음으로 그래픽 객체의 draw() 메서드를 수정하여 결합된 변환 매트릭스를 허용하고 도형에 적용합니다.

Kotlin

    fun draw(mvpMatrix: FloatArray) { // pass in the calculated transformation matrix

        // get handle to shape's transformation matrix
        vPMatrixHandle = GLES20.glGetUniformLocation(program, "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)
    }
    

자바

    public void draw(float[] mvpMatrix) { // pass in the calculated transformation matrix
        ...

        // get handle to shape's transformation matrix
        vPMatrixHandle = GLES20.glGetUniformLocation(program, "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);
    }
    

투영 및 카메라 보기 변환을 제대로 계산하여 적용하고 나면 그래픽 객체가 올바른 비율로 그려져 다음과 같이 표시되어야 합니다.

그림 1. 투영 및 카메라 보기를 적용하여 그린 삼각형.

이제 올바른 비율로 도형을 표시하는 애플리케이션이 있으므로 도형에 모션을 추가해 보겠습니다.