OpenGL ES 3.0 스터디 2주차 공부자료

2. Hello Triangle

 

 

0.기본 단계

• EGL로 on-screen render surface 제작
• vertex, fragment shaders 로드
• program object 생성, vertex+fragment shaders 연결, program object와 해당 셰이더 연결
• viewport 설정
• 색상 버퍼 지우기
• 간단한 primitive rendering
• 색상 버퍼의 내용 EGL 창 표면에 표시

 

 

1. 코드 예제

(desktop OpenGL과 달리 OpenGL ES 3.0은 완전한 셰이더 기반이므로 적절한 셰이러 로드+바인딩하지 않고는 현상 그리기 불가.

fixed-function processing 사용하는 desktop OpenGL보다 렌더링에 더 많은 setup code 필요.)

// The MIT License (MIT)
//
// Copyright (c) 2013 Dan Ginsburg, Budirijanto Purnomo
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

//
// Book:      OpenGL(R) ES 3.0 Programming Guide, 2nd Edition
// Authors:   Dan Ginsburg, Budirijanto Purnomo, Dave Shreiner, Aaftab Munshi
// ISBN-10:   0-321-93388-5
// ISBN-13:   978-0-321-93388-1
// Publisher: Addison-Wesley Professional
// URLs:      <http://www.opengles-book.com>
//            <http://my.safaribooksonline.com/book/animation-and-3d/9780133440133>
//
// Hello_Triangle.c
//
//    This is a simple example that draws a single triangle with
//    a minimal vertex/fragment shader.  The purpose of this
//    example is to demonstrate the basic concepts of
//    OpenGL ES 3.0 rendering.
#include "esUtil.h"

typedef struct
{
   // Handle to a program object
   GLuint programObject;

} UserData;

///
// Create a shader object, load the shader source, and
// compile the shader.
//
GLuint LoadShader ( GLenum type, const char *shaderSrc )
{
   GLuint shader;
   GLint compiled;

   // Create the shader object
   shader = glCreateShader ( type );

   if ( shader == 0 )
   {
      return 0;
   }

   // Load the shader source
   glShaderSource ( shader, 1, &shaderSrc, NULL );

   // Compile the shader
   glCompileShader ( shader );

   // Check the compile status
   glGetShaderiv ( shader, GL_COMPILE_STATUS, &compiled );

   if ( !compiled )
   {
      GLint infoLen = 0;

      glGetShaderiv ( shader, GL_INFO_LOG_LENGTH, &infoLen );

      if ( infoLen > 1 )
      {
         char *infoLog = malloc ( sizeof ( char ) * infoLen );

         glGetShaderInfoLog ( shader, infoLen, NULL, infoLog );
         esLogMessage ( "Error compiling shader:\\n%s\\n", infoLog );

         free ( infoLog );
      }

      glDeleteShader ( shader );
      return 0;
   }

   return shader;

}

///
// Initialize the shader and program object
//
int Init ( ESContext *esContext )
{
   UserData *userData = esContext->userData;
   char vShaderStr[] =
      "#version 300 es                          \\n"
      "layout(location = 0) in vec4 vPosition;  \\n"
      "void main()                              \\n"
      "{                                        \\n"
      "   gl_Position = vPosition;              \\n"
      "}                                        \\n";

   char fShaderStr[] =
      "#version 300 es                              \\n"
      "precision mediump float;                     \\n"
      "out vec4 fragColor;                          \\n"
      "void main()                                  \\n"
      "{                                            \\n"
      "   fragColor = vec4 ( 1.0, 0.0, 0.0, 1.0 );  \\n"
      "}                                            \\n";

   GLuint vertexShader;
   GLuint fragmentShader;
   GLuint programObject;
   GLint linked;

   // Load the vertex/fragment shaders
   vertexShader = LoadShader ( GL_VERTEX_SHADER, vShaderStr );
   fragmentShader = LoadShader ( GL_FRAGMENT_SHADER, fShaderStr );

   // Create the program object
   programObject = glCreateProgram ( );

   if ( programObject == 0 )
   {
      return 0;
   }

   glAttachShader ( programObject, vertexShader );
   glAttachShader ( programObject, fragmentShader );

   // Link the program
   glLinkProgram ( programObject );

   // Check the link status
   glGetProgramiv ( programObject, GL_LINK_STATUS, &linked );

   if ( !linked )
   {
      GLint infoLen = 0;

      glGetProgramiv ( programObject, GL_INFO_LOG_LENGTH, &infoLen );

      if ( infoLen > 1 )
      {
         char *infoLog = malloc ( sizeof ( char ) * infoLen );

         glGetProgramInfoLog ( programObject, infoLen, NULL, infoLog );
         esLogMessage ( "Error linking program:\\n%s\\n", infoLog );

         free ( infoLog );
      }

      glDeleteProgram ( programObject );
      return FALSE;
   }

   // Store the program object
   userData->programObject = programObject;

   glClearColor ( 1.0f, 1.0f, 1.0f, 0.0f );
   return TRUE;
}

///
// Draw a triangle using the shader pair created in Init()
//
void Draw ( ESContext *esContext )
{
   UserData *userData = esContext->userData;
   GLfloat vVertices[] = {  0.0f,  0.5f, 0.0f,
                            -0.5f, -0.5f, 0.0f,
                            0.5f, -0.5f, 0.0f
                         };

   // Set the viewport
   glViewport ( 0, 0, esContext->width, esContext->height );

   // Clear the color buffer
   glClear ( GL_COLOR_BUFFER_BIT );

   // Use the program object
   glUseProgram ( userData->programObject );

   // Load the vertex data
   glVertexAttribPointer ( 0, 3, GL_FLOAT, GL_FALSE, 0, vVertices );
   glEnableVertexAttribArray ( 0 );

   glDrawArrays ( GL_TRIANGLES, 0, 3 );
}

void Shutdown ( ESContext *esContext )
{
   UserData *userData = esContext->userData;

   glDeleteProgram ( userData->programObject );
}

int esMain ( ESContext *esContext )
{
   esContext->userData = malloc ( sizeof ( UserData ) );

   esCreateWindow ( esContext, "Hello Triangle", 320, 240, ES_WINDOW_RGB );

   if ( !Init ( esContext ) )
   {
      return GL_FALSE;
   }

   esRegisterShutdownFunc ( esContext, Shutdown );
   esRegisterDrawFunc ( esContext, Draw );

   return GL_TRUE;
}

<실행 결과>

 

 

 

 

 

 

 

2. Using OpenGL ES 3.0 Framework

메인함수

int esMain( ESContext *esContext )

• userData: 각 app에 필요한 모든 데이터 저장.
• 기능
  • userData 할당, window 생성 및 그리기, callback function 초기화
• ESContext: user app에서만 읽을 수 있음.
  • window width and height, EGL context, callback function pointers 포함.

esContext->userData = malloc ( sizeof( UserData ) );
          esCreateWindow( esContext, "Hello Triangle", 320, 240,
                          ES_WINDOW_RGB );
          if ( !Init( esContext ) )
               return GL_FALSE;
          esRegisterDrawFunc(esContext, Draw);

• esCreateWindow: 해당 조건의 window 생성,
  • (전달할 데이터, window 이름, width, height, bit field)
    • bie field: 여기서는 RGB frame buffer.
  • EGL을 사용해서 창에 연결된 on-screen render surface 생성.
    • EGL: render surface, context를 생성하기 위한 플랫폼 독립적 API.
• Init 호출로 초기화 → 프레임 렌더링을 위한 Draw등록(callback function)
  • Draw, Update호출하는 메인 루프로 들어감.
  • Init함수: loading vShader, fShader

 

 

 

 

3. Creating a Simple Vertex and Fragment Shader

vShader

char vShaderStr[] =
   "#version 300 es                          \\n"
   "layout(location = 0) in vec4 vPosition;  \\n"
   "void main()                              \\n"
   "{
   "   gl_Position = vPosition;              \\n"
"}

• 줄에 따른 의미
  • 사용중 셰이더 버전(OpenGL ES Shading Language v3.00)
  • layout.. : 변수의 위치가 정점 속성 0. vShader가 출력할 위치 정의

++ vShader: vPosition(4개 구성 요소 벡터인 하나의 입력 속성 배열) 선언.

• 이후 draw에서 해당 변수에 배치될 정점의 위치 전송.

++ 셰이더의 본질: vPosition이란 입력 속성을 gl_Position이라는 특수 출력 변수에 복사.

= 모든 vShader는 gl_Position 변수에 위치 출력해야 함.

fShader

char fShaderStr[] =
   "#version 300 es                                \\n"
   "precision mediump float;                       \\n"
   "out vec4 fragColor;                            \\n"
   "void main()                                    \\n"
"{
"   fragColor = vec4 ( 1.0, 0.0, 0.0, 1.0 );    \\n"
"}
\\n";

• 줄에 따른 의미
  • 사용중 셰이더 버전
  • 셰이더의 float variables에 대한 default precision 선언.

++ fShader: fragColor 선언.(4개 구성 요소의 벡터인 단일 출력 변수)

= color buffer에 사용됨. (해당 경우는 red)

++ app은 해당 방식으로 셰이더 소스 문자열을 inline으로 배치하지 않음.

= 대부분 : text/data file에서 로드된 다음 api로 로드.

= 현재: simplicity + example program self-contained를 위해 셰이더 소스 문자열을 프로그램 코드에 직접 적용.

 

 

 

 

4. Compiling and Loading the Shaders

LoadShader() : 셰이더 소스 코드 로드+컴파일+오류 확인+셰이더 객체 반환(OpenGL)

GLuint LoadShader(GLenum type, const char *shaderSrc)
{
   GLuint shader;
   GLint compiled;
   // Create the shader object
   shader = glCreateShader(type);
   if(shader == 0)
      return 0;

// Load the shader source
// 셰이더 소스는 해당 함수를 이용해 객체에 로드.
    glShaderSource(shader, 1, &shaderSrc, NULL);
    // Compile the shader
    glCompileShader(shader);

// Check the compile status
// 컴파일 상태 결정 및 생성된 오류들 출력.
    glGetShaderiv(shader, GL_COMPILE_STATUS, &compiled);
    if(!compiled)
    {
       GLint infoLen = 0;
       glGetShaderiv(shader, GL_INFO_LOG_LENGTH, &infoLen);
       if(infoLen > 1)
       {
          char* infoLog = malloc(sizeof(char) * infoLen);
          glGetShaderInfoLog(shader, infoLen, NULL, infoLog);
          esLogMessage("Error compiling shader:\\n%s\\n", infoLog);
}
      free(infoLog);
   }
   glDeleteShader(shader);
return 0; }
return shader;
}

//성공적으로 컴파일되면 프로그램에 연결된 새 셰이더 객체 반환.

5. Creating a Program Object and Linking the Shaders

셰이더 객체 생성 후 프로그램 객체 생성하기.

(프로그램 객체=linking된 최종 프로그램)

셰이더 → 셰이더 객체로 컴파일 → 프로그램 객체에 연결 → draw

// Create the program object
          programObject = glCreateProgram();
          if(programObject == 0)
             return 0;
//linking vShader, fShader
          glAttachShader(programObject, vertexShader);
          glAttachShader(programObject, fragmentShader);

// Link the program
          glLinkProgram(programObject);
          // Check the link status
          glGetProgramiv(programObject, GL_LINK_STATUS, &1inked);
          if(!linked)
          {
             GLint infoLen = 0;
             glGetProgramiv(programObject, GL_INFO_LOG_LENGTH,&infoLen);
             if(infoLen > 1)
             {
							char* infoLog = malloc(sizeof(char) * infoLen);
				      glGetProgramInfoLog(programObject, infoLen, NULL,infoLog);
				      esLogMessage("Error linking program:\\n%s\\n", infoLog);
				      free(infoLog) ;
					   }
					   glDeleteProgram(programObject) ;
					   return FALSE;
					}
					// Store the program object
userData->programObject = programObject;

//program object를 렌더링에 사용하기 위해 바인딩.
// Use the program object
glUseProgram(userData->programObject);

//이후 모든 후속 렌더링=program object에 연결된 vShader, fShader를 사용.

1. Setting the Viewport and Clearing the Color Buffer

~EGL로 렌더링 표면 만들기+셰이더 초기화 및 로드 = draw 준비.

draw callback function 시작.

// Set the viewport
/*
모든 OpenGL ES rendering이 궁극적으로 표시되는 2d 사각형
viewport = origin(x,y) + width + height
좌표계, 클리핑은 7장 참조.
*/
// OpenGL ES에 그려질 2d renderer surface origin, width, height
glviewport(0, 0, esContext->width, esContext->height);

// Clear the color buffer
/*
OpenGL ES에서 drawing: color, depth, stencil.
*/
// 각 프레임 시작 부분에서 색상 버퍼 지움.
/*
Init()에서 (1.0, 1.0, 1.0, 1.0) = white로 설정.
명확한 색상은 glClear 호출 전 app에서 설정해야 함.
*/
glClear(GL_COLOR_BUFFER_BIT);

1. Loading the Geometry and Drawing a Primitive

~색상 버퍼 지우기, 뷰포트 설정, 프로그램 객체 로드 → 삼각형 형상 지정.

//삼각형 꼭짓점 x, y, z로 지정.
GLfloat vVertices[] = { O.Of,
                       -0.5f,
                        0.5f,
 0.5f,   O.Of,
-0.5f,   O.Of,
-0.5f,   O.Of};
...
/*
vertex position : GL에 로드됨->vShader의 vPosition에 연결.
vPosition = 입력 속성 위치 0에 바인딩.
vShader의 속성=unsigned int로 고유하게 식별되는 위치 존재.
*/
//해당 Position에 데이터 로드하기 위해 glVertexAttribPointer 호출.
// Load the vertex data
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, vVertices); glEnableVertexAttribArray(O) ;

//draw last step : primitive 그리도록 지시.
glDrawArrays(GL_TRIANGLES, 0, 3);

1. Display the Back buffer

~ 삼각형이 프레임 버퍼에 그려짐 → 화면에 프레임 버퍼 표시.

//double buffering EGL function
//Draw callback 함수 호출 뒤 프레임워크에서 호출.
//argument : EGL display, surface (물리적 디스플레이+렌더링 표면)
eglSwapBuffers(esContext->eglDisplay, esContext->eglSurface);

++ double buffering?

= 프레임 버퍼는 픽셀 데이터의 2차원 배열로 표시됨.

→ displaying img : 보이는 프레임 버퍼의 픽셀 데이터 업데이트.

→ 디스플레이 가능한 버퍼에서 직접 픽셀 업데이트는 문제.

→ 일반적인 디스플레이 시스템에서 physical screen : 고정된 속도로 프레임 버퍼 메모리에서 업데이트.

→ 프레임 버퍼에 직접 그릴 경우 유저는 artifacts(프레임 버퍼에 대한 부분 업데이트) 볼 수 있음.

(** 이게 문제인 이유 찾아보기..)

→ 해결 방안 : double buffering.

= front buffer + back buffer.

→ 모든 렌더링은 화면에 보이지 않는 back buffer에서 발생.

→ 모든 렌더링 완료되면 back buffer → front buffer로 교환됨.

→ 이전 front buffer = 다음 프레임의 back buffer.

→ 프레임에 대한 모든 렌더링이 완료될 때까지 보이는 화면 표시하지 않음.