실시간 운영체제

[실시간 운영체제] Open GL draw house

이숩숩 2023. 6. 14. 21:32

Open GL의 기본적인 코드는

https://developer.android.com/develop/ui/views/graphics/opengl

위 사이트에 공개된 코드를 사용하였다.

 


 

 

MainActivity.java

package com.example.open_gl_draw_house;

import androidx.appcompat.app.AppCompatActivity;

import android.opengl.GLSurfaceView;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    private GLSurfaceView gLView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Create a GLSurfaceView instance and set it
        // as the ContentView for this Activity.
        gLView = new MyGLSurfaceView(this);
        setContentView(gLView);
    }
}

 

 

MyGLSurfaceView.java

package com.example.open_gl_draw_house;

import android.content.Context;
import android.opengl.GLSurfaceView;

class MyGLSurfaceView extends GLSurfaceView {

    private final MyGLRenderer renderer;

    public MyGLSurfaceView(Context context){
        super(context);

        // Create an OpenGL ES 2.0 context
        setEGLContextClientVersion(2);

        renderer = new MyGLRenderer();

        // Set the Renderer for drawing on the GLSurfaceView
        setRenderer(renderer);
    }
}

 

 

MyGLRanderer.java

package com.example.open_gl_draw_house;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

import android.opengl.GLES20;
import android.opengl.GLSurfaceView;
import android.opengl.Matrix;

public class MyGLRenderer implements GLSurfaceView.Renderer {

    // 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];

    private house mhouse;

    public void onSurfaceCreated(GL10 unused, EGLConfig config) {
        // Set the background frame color
        //GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

        //backgroound / 배경색을 하얀색을 바꿔줌
        GLES20.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

        mhouse = new house();
    }

    public void onDrawFrame(GL10 unused) {
        // Redraw background color
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);

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

        mhouse.draw(vPMatrix);
    }

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

    }

    public static int loadShader(int type, String shaderCode){

        // create a vertex shader type (GLES20.GL_VERTEX_SHADER)
        // or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)
        int shader = GLES20.glCreateShader(type);

        // add the source code to the shader and compile it
        GLES20.glShaderSource(shader, shaderCode);
        GLES20.glCompileShader(shader);

        return shader;
    }
}

 

 

house.java

package com.example.open_gl_draw_house;


import android.opengl.GLES20;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

public class house {

    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;

    private FloatBuffer vertexBuffer;

    private final int mProgram;

    private int positionHandle;
    private int colorHandle;

    //private final int vertexCount = Vertec_coor.length / COORDS_PER_VERTEX;
    private final int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex

    // number of coordinates per vertex in this array
    static final int COORDS_PER_VERTEX = 3;

    static float Vertec_coor[] = {   // in counterclockwise order:

            0.6f,  0.3f, 0.0f, // 지붕 v0
            -0.6f, 0.3f, 0.0f, // v1
            0.0f, 0.6f, 0.0f,  // v2
            0.45f, 0.3f, 0.0f, //벽면 v3
            0.45f, -0.3f, 0.0f, //v4
            -0.45f, 0.3f, 0.0f, //v6 => v5 (strip 사용하면서 사각형만드려면 점 위치 바꿔줘야함)
            -0.45f, -0.3f, 0.0f, //v5 => v6

            0.0f, 0.2f, 0.0f, // 창틀 v7
            -0.35f, 0.2f, 0.0f, //v8
            0.0f, -0.05f, 0.0f, //v9
            -0.35f, -0.05f, 0.0f, //v10

            -0.02f, 0.18f, 0.0f, // 창문 v11
            -0.33f, 0.18f, 0.0f, //v12
            -0.02f, -0.03f, 0.0f, //v13
            -0.33f, -0.03f, 0.0f, //v14

            -0.16f, 0.18f, 0.0f, // 창문 중간선 v15
            -0.18f, 0.18f, 0.0f, //v16
            -0.16f, -0.03f, 0.0f, //v17
            -0.18f, -0.03f, 0.0f, //v18

            0.35f, 0.2f, 0.0f, // 문 v19
            0.15f, 0.2f, 0.0f, //v20
            0.35f, -0.2f, 0.0f, //v21
            0.15f, -0.2f, 0.0f, //v22

            0.33f, 0.18f, 0.0f, // 창문 v23
            0.17f, 0.18f, 0.0f, //v24
            0.33f, 0.05f, 0.0f, //v25
            0.17f, 0.05f, 0.0f, //v26

    }; //집 만들기

    // Set color with red, green, blue and alpha (opacity) values
    float color[] = { 0.63671875f, 0.76953125f, 0.22265625f, 1.0f };

    //지붕 색 정하기 (rgb값/255.0f)
    float roof_color[] = {160/255.0f, 160/255.0f, 160/255.0f, 1.0f };

    float wall_color[] = {224/255.0f, 224/255.0f, 224/255.0f, 1.0f };

    float wood_color[] = {105/255.0f, 51/255.0f, 0/255.0f, 1.0f };

    float window_color[] = {204/255.0f, 229/255.0f, 255/255.0f, 1.0f };

    public house() {
        // initialize vertex byte buffer for shape coordinates
        ByteBuffer bb = ByteBuffer.allocateDirect(
                // (number of coordinate values * 4 bytes per float)
                Vertec_coor.length * 4);
        // use the device hardware's native byte order
        bb.order(ByteOrder.nativeOrder());

        // create a floating point buffer from the ByteBuffer
        vertexBuffer = bb.asFloatBuffer();
        // add the coordinates to the FloatBuffer
        vertexBuffer.put(Vertec_coor);
        // set the buffer to read the first coordinate
        vertexBuffer.position(0);

        int vertexShader = MyGLRenderer.loadShader(GLES20.GL_VERTEX_SHADER,
                vertexShaderCode);
        int fragmentShader = MyGLRenderer.loadShader(GLES20.GL_FRAGMENT_SHADER,
                fragmentShaderCode);

        // create empty OpenGL ES Program
        mProgram = GLES20.glCreateProgram();

        // add the vertex shader to program
        GLES20.glAttachShader(mProgram, vertexShader);

        // add the fragment shader to program
        GLES20.glAttachShader(mProgram, fragmentShader);

        // creates OpenGL ES program executables
        GLES20.glLinkProgram(mProgram);
    }

    public void draw(float[] mvpMatrix) {

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

        // Add program to OpenGL ES environment
        GLES20.glUseProgram(mProgram);

        // get handle to vertex shader's vPosition member
        positionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");

        // Enable a handle to the triangle vertices
        GLES20.glEnableVertexAttribArray(positionHandle);

        // Prepare the triangle coordinate data
        GLES20.glVertexAttribPointer(positionHandle, COORDS_PER_VERTEX,
                GLES20.GL_FLOAT, false,
                vertexStride, vertexBuffer);

        // get handle to fragment shader's vColor member
        colorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");

        // Set color for drawing the triangle (지붕 만드는 삼각형, 바꾼 색 넣어줌)
        GLES20.glUniform4fv(colorHandle, 1, roof_color, 0);
        // Draw the roof (지붕 그리기)
        GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3);

        // Draw the wall (벽면 그리기)
        GLES20.glUniform4fv(colorHandle, 1, wall_color, 0); //여기서 색 안바꿔주면 앞에서 지정한 색으로 만들어짐
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 3, 4); //삼각형 두개 합쳐줌
        //3 4 5 하나, 3 5 6 하나 만들어짐 -> GL_TRIANGLE_FAN

        // Draw the wood (창틀 그리기)
        GLES20.glUniform4fv(colorHandle, 1, wood_color, 0);
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 7, 4); //삼각형 두개 합쳐줌

        // Draw the windom (창문 그리기)
        GLES20.glUniform4fv(colorHandle, 1, window_color, 0);
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 11, 4); //삼각형 두개 합쳐줌

        // Draw the wood (중간 창틀 그리기)
        GLES20.glUniform4fv(colorHandle, 1, wood_color, 0);
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 15, 4); //삼각형 두개 합쳐줌

        // Draw the door (문 그리기)
        GLES20.glUniform4fv(colorHandle, 1, wood_color, 0);
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 19, 4); //삼각형 두개 합쳐줌

        // Draw the window for door (문에 있는 창문 그리기)
        GLES20.glUniform4fv(colorHandle, 1, window_color, 0);
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 23, 4); //삼각형 두개 합쳐줌


        // Disable vertex array
        GLES20.glDisableVertexAttribArray(positionHandle);
    }


    private final String fragmentShaderCode =
            "precision mediump float;" +
                    "uniform vec4 vColor;" +
                    "void main() {" +
                    "  gl_FragColor = vColor;" +
                    "}";
}

 

먼저 도형을 그리기 위해 대부분 GL_TRIANGLE_STRIP을 이용하였는데, 이는 "삼각형"을 그리는 코드라는 것을 유의해야한다.

static float Vertec_coor[] = {   // in counterclockwise order:

        0.6f,  0.3f, 0.0f, // 지붕 v0
        -0.6f, 0.3f, 0.0f, // v1
        0.0f, 0.6f, 0.0f,  // v2
        0.45f, 0.3f, 0.0f, //벽면 v3
        0.45f, -0.3f, 0.0f, //v4
        -0.45f, 0.3f, 0.0f, //v6 => v5 (strip 사용하면서 사각형만드려면 점 위치 바꿔줘야함)
        -0.45f, -0.3f, 0.0f, //v5 => v6

        0.0f, 0.2f, 0.0f, // 창틀 v7
        -0.35f, 0.2f, 0.0f, //v8
        0.0f, -0.05f, 0.0f, //v9
        -0.35f, -0.05f, 0.0f, //v10

        -0.02f, 0.18f, 0.0f, // 창문 v11
        -0.33f, 0.18f, 0.0f, //v12
        -0.02f, -0.03f, 0.0f, //v13
        -0.33f, -0.03f, 0.0f, //v14

        -0.16f, 0.18f, 0.0f, // 창문 중간선 v15
        -0.18f, 0.18f, 0.0f, //v16
        -0.16f, -0.03f, 0.0f, //v17
        -0.18f, -0.03f, 0.0f, //v18

        0.35f, 0.2f, 0.0f, // 문 v19
        0.15f, 0.2f, 0.0f, //v20
        0.35f, -0.2f, 0.0f, //v21
        0.15f, -0.2f, 0.0f, //v22

        0.33f, 0.18f, 0.0f, // 창문 v23
        0.17f, 0.18f, 0.0f, //v24
        0.33f, 0.05f, 0.0f, //v25
        0.17f, 0.05f, 0.0f, //v26

}; //집 만들기

집을 그리기 위한 각 좌표들을 미리 전부 지정해두었다.

 

 

colors calculator: https://www.rapidtables.com/web/color/RGB_Color.html

 

RGB Color Codes Chart 🎨

RGB Color Codes Chart RGB color picker | RGB color codes chart | RGB color space | RGB color format and calculation | RGB color table RGB color picker RGB color codes chart Hover with cursor on color to get the hex and decimal color codes below: RGB color

www.rapidtables.com

앞선 글에서 사용했던 사이트를 이용해 색의 RGB 값을 추출하였다. 

// Set color with red, green, blue and alpha (opacity) values
float color[] = { 0.63671875f, 0.76953125f, 0.22265625f, 1.0f };

//지붕 색 정하기 (rgb값/255.0f)
float roof_color[] = {160/255.0f, 160/255.0f, 160/255.0f, 1.0f };

float wall_color[] = {224/255.0f, 224/255.0f, 224/255.0f, 1.0f };

float wood_color[] = {105/255.0f, 51/255.0f, 0/255.0f, 1.0f };

float window_color[] = {204/255.0f, 229/255.0f, 255/255.0f, 1.0f };

 

 

그리려는 도형의 색을 바꿔주기 위해서 glUniform4fv를 사용해 미리 정해둔 color를 넣어준 후,

glDrawArrays 코드를 작성해 원하는 색으로 도형을 그려준다.

// Set color for drawing the triangle (지붕 만드는 삼각형, 바꾼 색 넣어줌)
GLES20.glUniform4fv(colorHandle, 1, roof_color, 0);
// Draw the roof (지붕 그리기)
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3);

 

삼각형을 그릴 땐, glDrawArrays의 변수로 3을

사각형을 그릴 땐, glDrawArrays의 변수로 4를 넣어주면

원하는 도형을 그릴 수 있다.

// Draw the wall (벽면 그리기)
GLES20.glUniform4fv(colorHandle, 1, wall_color, 0); //여기서 색 안바꿔주면 앞에서 지정한 색으로 만들어짐
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 3, 4); //삼각형 두개 합쳐줌