[실시간 운영체제] Open GL draw house
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); //삼각형 두개 합쳐줌