OpenGL ES2.0 기초 강좌

Transcription

1 OpenGL ES2.0 기초강좌 나의별

2 소개글 OpenGL ES 2.0 의 Shader Programming 을이용하여, MFC 와 Android 용기초강좌 1. MFC EGL 구성 2. Android EGL 구성

3 목차 1 [GLES20] 01. Android 3D Programming을위한 MFC 프로젝트설정 4 2 [GLES20] 02. Android 3D Programming을위한 Android 프로젝트설정 12 3 [GLES20] 03. Color Shading 23 4 [GLES20] 04. Geometry Transform 32 5 [GLES20] 05. Vertex Position 처리 (1) 44 6 [GLES20] 06. Vertex Position 처리 - Obj 와 VBO (2) 53 7 [GLES20] 07. Parametric Surface 69 8 [GLES20] 08. 조명적용하기 - 확산광, Diffuse Vertex Light 77 9 [GLES20] 09. 조명적용하기 - 주변광, Ambient Vertex Light [GLES20] 10. 조명적용하기 - 경면광, Specular Vertex Light [GLES20] 11. 조명적용하기 - Pixel Light [GLES20] 12. 조명적용하기 - Flat Shading과 Smooth Shading [GLES20] 13. 조명적용하기 - Point Light와감쇠방정식 [GLES20] 14. 조명적용하기 - Spot Light [GLES20] 15. 조명적용하기 - Toon Shading [GLES20] 16. Q/A 몇가지와 FBO 사용시유의점정리 [GLES20] 17. 텍스쳐적용하기앞서서준비사항정리 [GLES20] 18. 텍스쳐적용하기 - 2D Texture 155

4 [GLES20] 01. Android 3D Programming 을위한 MFC 프로젝트설정 :20 OGLES20Template 네이버카페 3D Programming 의매니저이신바른생활님이 Android 용으로 GLSL 강좌를정리해보는것도좋을것같다는추천이있어 서한번도전해봅니다 ^^; 구성은바른생활님이 페이지에서만들고있는내용위주로진행할까생각중입니다. 중간중간 NeHe Tutorial 과 PowerVR SDK 의내용도추가해볼생각입니다. 이곳에정리하는내용은 3D의기본적인사항인 PROJECTION MATRIX, MODEL MATRIX, VIEW MATRIX, EULER/QUATERNION TRASFORMATION, FRAME BUFFER OBJECT, VERTEX BUFFER OBJECT, COLOR BUFFER ARRAY, DEPTH BUFFER ARRAY, STENCIL BUFFER ARRAY, VERTEX, TEXTURE, LIGHT, BLEND 등에대해서일일히서술하지는않도록하겠습니다. 위의내용은바른생활님 3D Programming 카페나기타다른 OpenGL ES 용도서를참고하셔서병행공부해나가면좋을것같습니다. 저는 OpenGL Super bible 과 iphone 3D Programming Developing Graphical Applications With OpenGL ES(Oreilly), OpenGLES 2.0 Programming Guide(Addison Wesley), OpenGL Shading Language 3/E(Addison Wesley) 등의 책을추천합니다. [GLES20] 01. Android 3D Programming 을위한 MFC 프로젝트설정 4

5 참고로제가구현한 Android Native Renderer 엔진은위의 iphone 3D Programming 책에서소개한 Native Renderer를기초로만들었으며, 차후혹여나상용화를하실경우라이센스상에문제가발생할수있습니다. ( 책에보면, 저자가소스에대해서 O'REILLY 출판사에권한이있음으로, 소스사용시문의는해달라는요청글등이있었던것같네요. ^^;) 들어가기에앞서서밝혀두지만, 저또한 3D 를마스터한상태는아닌 1 인이기때문에, 내용자체가저의주관적으로이해한것을바탕으로 정리될것입니다. 혹틀린부분이있다면바로바로지적해주십시요 ^^; 1. 폴더구성 기본적으로프로젝트를 Android Java 3D 가아닌, Native Renderer 로 3D 를구성할예정입니다. Java 로짤경우, Debugging 이쉬운장점이있지만, Native Renderer 보다속도가좀느리고, 아이폰이나윈모등다른플랫폼으로이식 하기에는어렸다는단점도있습니다. 이에 Native Renderer 를 C++ 로짜서 Android, ios, Windows Mobile 등에이식하게편하게만들어볼예정입니다. Native Renderer 의경우, Debugging 이어려운점이있지만, Renderer 부분은 MFC 로호환되게금해서 Visual Studio 로연계할예 정입니다. 프로젝트의기본구성은아래와같습니다. [GLES20] 01. Android 3D Programming 을위한 MFC 프로젝트설정 5

6 폴더설명 1. Builds : OpenGL, EGL Library 와 android ndk-r5b 에서사용할 stlport 등이있다. 향후추가적인 prebuilt library 등은이폴더에추가할예정이다. 2. Android : Android Project 폴더이다. 안드로이드로 App 개발시필요한 Activity 등이있으며, Native Renderer 용 JNI 도이곳에있다. 3. Windows : MFC Project 폴더이다. MFC 을구성하는 Frame, View, Document 파일등과 GLView, EGLView, Native Renderer Interface 등이있다. 4. Classes : Renderer 소스가있는폴더이다. 이폴더는 MFC 와 Android 에서공용으로사용한다. 5. Shaders : Shader Language 인 vertex shader 와 fragment shader 가있는폴더이다. 이폴더는 MFC 와 Android 에서공용으로사용한다. [GLES20] 01. Android 3D Programming 을위한 MFC 프로젝트설정 6

7 6. Utils : Renderer 를구성하는데필요한수학함수, 리소스매니저등과같은도우미모듈등이있는폴더이다. 이폴더는 MFC 와 Android 에서공용으로사용한다. 2. MFC 프로젝트구성 프로젝트패키지설명 1. Classes : 렌더링클래스가모여있다. 템플릿예제에서는 Grid 형의바닥과 X-Y-Z 축을그리고있다. 실제사용되는파일은 RenderingEngine.ES1.cpp와 RenderingEngine.ES2.cpp이며, EGLRenderer와 OGLRenderer는더이상사용되지는않는다. ( 렌더러모듈은 iphone 3D Programming 책내용과유사한구성을따르고있으며, 책의 1장내용과비교해서보시면됩니다.) 이폴더는 MFC와 Android에서공용으로사용한다. [GLES20] 01. Android 3D Programming 을위한 MFC 프로젝트설정 7

8 2. OpenGL.ES : MFC 에서사용할 EGLView 로서 libegl.lib 구현화한부분이다. EGView.cpp 는 MFC 의 CView 를상속받은 User View 이다. EGLSurface.cpp 는 EGL 을생성한 Surface 모듈이다. 3. Shaders : GLSL 용 Shader 파일들이있다. 이폴더는 MFC 와 Android 에서공용으로사용한다. 4. Utils : Renderer 를구성하는데필요한수학함수, 리소스매니저등과같은도우미모듈등이있다. 이폴더는 MFC 와 Android 에서공용으로사용한다. 5. 소스파일 : MFC 의 Frame, View, Document 의소스부분이다. 이중 NativeInterface.cpp 는 ResourceManager 에서 bmp 와 tga 파일을읽어올때거쳐가는 Bridge 역활을한다. 6. 헤더파일.gles : OpenGL ES 1.0 용 header 파일이다. 7. 헤더파일.gles2 : OpenGL ES 2.0 용 header 파일이다. 3. 실행결과 MFC 에서실행한결과는다음과같습니다. [GLES20] 01. Android 3D Programming 을위한 MFC 프로젝트설정 8

9 4. 예외사항정리 GLES 2.0 은 GLES1.0 의하위호환성을배제하고만들어졌습니다. 이때문에, GLES2.0 세서는기존 GLES1.0 에서지원하는 glmatrixmode, glpushmatrix, glpopmatrix, glrotatef, gltranslatef, glscalcef 등등등많은 API 가지원하지않습니다. 즉, 라이브러리에담겨있는 header 파일내의내용도서로다릅니다. 하나의 OGLES20Template 프로젝트내에 GLES1.0 과 GLES2.0 을담다보니서로충돌이나는문제가발생합니다. 이는 ios 개발시에도동일하며보통 Macro 처리를통해서컴파일시점에 GLES1.0 으로할지 GLES2.0 으로할지결정합니다. MFC 프로젝트에서는다음과같이수정해줘야두버전을사용할수있습니다. 4.1 GLES 2.0 으로빌드하기 프로젝트속성창의 " 링크 -> 입력 -> 추가종속성 " 탭에서 libglesv2.lib 를추가해줘야합니다. [GLES20] 01. Android 3D Programming 을위한 MFC 프로젝트설정 9

10 또한 EGLView.cpp 의 CEGLView::OnCreate() 에서렌더러생성을 RenderingEngine.ES2.cpp 로맞춰줘야합니다. 이부분은 iphone 3D Programming 책에서 GLView.mm 에서처리하는부분과유사하게처리하였습니다. 4.2 GLES 1.0 으로빌드하기 GLES1.0 으로빌드하기위해서는프로젝트속성창의 " 링크 -> 입력 -> 추가종속성 " 탭에서 libglesv2.lib 를삭제해준뒤에 또한 EGLView.cpp 의 CEGLView::OnCreate() 에서렌더러생성을 RenderingEngine.ES1.cpp 로맞춰줘야합니다. 이부분은 iphone 3D Programming 책에서 GLView.mm 에서처리하는부분과유사하게처리하였습니다. 다음에는 Android Project 설정에대해서다뤄보도록하겠습니다. 프로젝트는 16MB 정도로커져버려서, myastro google code 에올렸습니다. OGLES20 Template Application ported to mfc and android [GLES20] 01. Android 3D Programming 을위한 MFC 프로젝트설정 10

11 [GLES20] 01. Android 3D Programming 을위한 MFC 프로젝트설정 11

12 [GLES20] 02. Android 3D Programming 을위한 Android 프로젝트설정 :59 OGLES20Template 1. Android 프로젝트구성 [GLES20] 02. Android 3D Programming 을위한 Android 프로젝트설정 12

13 프로젝트패키지설명 1. com.myastro.gles.demo : Android App 의 Main Activity 이다. 2. com.myastro.gles : List Activity 이다. GLES20.Lesson 과 GLES10.Lesson 두가지 List Activity 가있다. 대체로 GLES20 에대해서다룰예정이지만, 시간여유가생기면, GLES10 용도업데이트할예정이다. 3. com.myastro.gles.view : EGL View용모듈이다. EGLView.java : GLSurfaceView를상속받은추상클래스 (abstract class) 이다. 또한 EGLView에는사용자로부터의이벤트도수신함으로 Touch 이벤트을통한 Gesture 기능구현은이곳에이루어져있다. EGLView20.java : EGLView를상속받아서 abstract method 들을구현한다. GLES20 용 EGL Configuration으로구성되어있다. [GLES20] 02. Android 3D Programming 을위한 Android 프로젝트설정 13

14 EGLView10.java : EGLView 를상속받아서 abstract method 들을구현한다. GLES10 용 EGL Configuration 으로구성되어있다. 4. com.myastro.main.jni : C++ 로구현한 NativeRenderer 와통신하는 Java native interface 이다. NativeRenderer.java : GLES10용 NativeRenderer.cpp와 GLES20용 NativeRender20.cpp를호출하기위한 native method로구성되어있다. CBJavaHandler.java : Java 단의 Main Activity Thread가아닌 Native 단의 NativeRenderer 로부터 Androd SDK내의 API를이용할때사용하기위한모듈이다. 이모듈에는 "utf-8 to ecu-kr" converting 함수, "bmp, png, jpg, tga" 등과같은이미지파일로딩을위한함수가있다.. 5. com.myastro.utils : TGA 이미지파일로딩클래스인 TGA.java(cocos2d java 버전에서가져옴 ) 와이미지로딩후 Integer 형을 Byte 형으로변환하기위한 ArrayCopy.java 클래스가있다. TGA.java : From cocos2d(zhouweikuan-cocos2d-2eb179b) 6. jni : Native Renderer를구성하는 Java Native Interface layer 이다. com_myastro_main_jni_nativerenderer.h : JNI의헤더파일이다.(Java Native Interface 참고 ) Anroid.mk : jni.gles10에있는 NativerRenderer.cpp 와앞장에서설명한 RenderingEngine.ES1.cpp 와 RenderingEngine.ES2.cpp를컴파일한다. 빌더는 ndk-r5b을이용하였으며, STL 라이브러리의경우, crystax 라이브러리가아닌 stlport 라이브러리를이용하였습니다. stlport library 는이전페이지에서언급했듯이 "OGLES20Application->Builds->Android->stlport" 폴더에있습니다. Application.mk : native module 생성파일로 ndk-r4b까지는그다지의미가없었지만, ndk-r5b에서는 stlport 를설정해주기도합니다.(APP_STL := stlport_static) 7. jni.gles10 : OpenGL ES 1.0 용 Native Renderer 이다. 8. jni.gles20 : OpenGL ES 2.0 용 Native Renderer 이다. 9. libs.armeabi : 빌드한 Shared Library 인 libnative.renderer.so 와 libnative.renderer20.so 가있다. 기본적으로 Android 프로젝트는위와같이구성되어있습니다. 그런데, Android 프로젝트에는 MFC 프로젝트에서설명했던 Renderer 클래스인 RenderingEngine.ES1.cpp와 RenderingEngine.ES2.cpp 등이보이지않습니다. 또한도우미라이브러리인 Interfaces.hpp, Matrix.hpp, Quaternion.hpp, Vector.hpp 등도보이지않습니다. 이프로젝트의구성을멀티플렛폼에맞춰서구성하다보니, 소스의위치를 Android Project 보다상위디렉토리레벨에배치하였습니다. [GLES20] 02. Android 3D Programming 을위한 Android 프로젝트설정 14

15 Eclipse 내에서프로젝트내에배치할경우, jni 폴더하위에두면되긴하지만, mfc 와 ios등과디렉토리레벨이틀어지기때문에현재와같이상위디렉토리레벨에배치하였습니다. 어차피 GDB을이용해서 native 단에서의 android debugging이쉽지않기때문에, mfc 에서디버깅할수있도록배치하였습니다. ( 이구성은 Imagination Technology 사의 PowerVR SDK 와유사한방식입니다.) 2. 실행결과 Android Galaxy Tab 에서실행하였으며, 결과는다음과같습니다. [GLES20] 02. Android 3D Programming 을위한 Android 프로젝트설정 15

16 Perspective Projection 으로 X 축 Red, Y 축 Green, Z 축 Blue 로표현되어있다. 3. 렌더러설명 제가여기에소개하는 Nativer Renderer 는기본적으로 iphone 3D Programming 책에설명이다나와있습니다. 그럼으로이책을사서보시는게이해는더빠르실거라생각됩니다. 또한렌더러설계에대해서는제블로그 에서한번소개했었습니다. 렌더링엔진구성은다음과같습니다. 제가 Android 3D 로포팅한렌더러엔진도 ios 프레임워크부분을 Android Java 프레임워크로변경하였을뿐위에있는구조와유 [GLES20] 02. Android 3D Programming 을위한 Android 프로젝트설정 16

17 사합니다. Classes/RenderingEngine.ES2.cpp 에있는 Render 함수의구성에대해서간단하게설명하도록하겠습니다. PROJECTION MATRIX if (width > height) ratio = (GLfloat)width / (GLfloat)height; else ratio = (GLfloat)height / (GLfloat)width; mat4 projectionmatrix = mat4::perspective(45.0f, ratio, 1.0f, 100.0f); gluniformmatrix4fv(m_simple.uniforms.projection, 1, 0, projectionmatrix.pointer()); CAMERA MATRIX /* Setting the camera */ vec3 eye(10, 10, 10); vec3 target(0, 0, 0); vec3 up(0, 1, 0); mat4 camera = mat4::lookat(eye, target, up); [GLES20] 02. Android 3D Programming 을위한 Android 프로젝트설정 17

18 틀릴수도있지만, 저는위의코드를아래와같이해석합니다. 카메라설정기능으로머리위인상향벡터 (up(0, 1,0 ) 로두었으며, 물체는원점 (target(0, 0, 0)) 으로설정되었고, 시점은 X, Y, Z 축으로 -10 만큼떨어져있다. 만약 3차원좌표계가아닌 2D 좌표계인 X-Y 기준으로보고싶다면, eye(0, 0, 10) 을하시면 X와 Y축만남게되고, Z축은시점에서정면이됩니다. VERTICES /* Draw Grid and Axis */ /* 20x20 의격자형바닥을그린다. */ GLfloat gridvertices[] = { -10.0f, 0.0f, 0.0f, 10.0f, 0.0f, 0.0f, 0.0f, 0.0f, -10.0f, 0.0f, 0.0f, 10.0f, ; /* X(Red)-Y(Green)-Z(Blue) 축을그린다. */ GLfloat axisvertices[] = { // x 0.0f, 0.0f, 0.0f, 6.0f, 0.0f, 0.0f, // y 0.0f, 0.0f, 0.0f, 0.0f, 4.0f, 0.0f, // z 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 6.0f, ; MODELVIEW MATRIX // 배경화면 Shader 인 Simple shader 프로그램바인딩. gluseprogram(m_simple.program); // GLES10에있는 glenableclientstate(gl_vertex_array) 를대체하는함수. glenablevertexattribarray(m_simple.attributes.position); // Draw Grid. // Grid Vertices Buffer Array 등록 [GLES20] 02. Android 3D Programming 을위한 Android 프로젝트설정 18

19 // GLES10에있는 glvertexpointer(3, GL_FLOAT, 0, gridvertices); glvertexattribpointer(m_simple.attributes.position, 3, GL_FLOAT, GL_FALSE, 0, gridvertices); gllinewidth(1.0f); GLint grid_axis_diffuse = m_simple.attributes.diffusematerial; // OGLES20에서는색을칠하는 Color Buffer Array 나 glcolor4f등의 API는지원하지않는다. // 이를대체하는방법으로 model에재질을입혀서색을표현해야한다. // diffuse material( 난반사재질 ) 색상을회색으로칠했다. vec3 grid_axis_material_dif = vec3(0.5f, 0.5f, 0.5f); glvertexattrib3fv(grid_axis_diffuse, grid_axis_material_dif.pointer()); mat4 grid_axis_modelview; for (int i = -10; i <= 10; ++i) { grid_axis_modelview = mat4::translate(0, 0, (GLfloat)i); grid_axis_modelview = grid_axis_modelview * camera; gluniformmatrix4fv(m_simple.uniforms.modelview, 1, 0, grid_axis_modelview.pointer()); gldrawarrays(gl_lines, 0, 2); for (int i = -10; i <= 10; ++i) { grid_axis_modelview = mat4::translate((glfloat)i, 0, 0); grid_axis_modelview = grid_axis_modelview * camera; gluniformmatrix4fv(m_simple.uniforms.modelview, 1, 0, grid_axis_modelview.pointer()); gldrawarrays(gl_lines, 2, 2); // Draw Axis. // Axis Vertices Buffer Array 등록 // GLES10에있는 glvertexpointer(3, GL_FLOAT, 0, axisvertices); 를대체하는함수. glvertexattribpointer(m_simple.attributes.position, 3, GL_FLOAT, GL_FALSE, 0, axisvertices); gllinewidth(1.5f); // Axis X // 빨간색난반사재질입히기 grid_axis_material_dif = vec3(1.0f, 0.0f, 0.0f); glvertexattrib3fv(grid_axis_diffuse, grid_axis_material_dif.pointer()); // gltranslatef() 를대체하는함수. grid_axis_modelview = mat4::translate(0.05f, 0.05f, 0.05f); [GLES20] 02. Android 3D Programming 을위한 Android 프로젝트설정 19

20 grid_axis_modelview = grid_axis_modelview * camera; gluniformmatrix4fv(m_simple.uniforms.modelview, 1, 0, grid_axis_modelview.pointer()); gldrawarrays(gl_lines, 0, 2); // Axis Y // 녹색난반사재질입히기 grid_axis_material_dif = vec3(0.0f, 1.0f, 0.0f); glvertexattrib3fv(grid_axis_diffuse, grid_axis_material_dif.pointer()); gldrawarrays(gl_lines, 2, 2); // Axis Z // 파란색난반사재질입히기 grid_axis_material_dif = vec3(0.0f, 0.0f, 1.0f); glvertexattrib3fv(grid_axis_diffuse, grid_axis_material_dif.pointer()); gldrawarrays(gl_lines, 4, 2); // GLES10 에있는 gldisableclientstate(gl_vertex_array) 를대체하는함수. gldisablevertexattribarray(m_simple.attributes.position); GLES20 용 RenderingEngine.ES2.cpp 와 GLES10 용 RenderingEngine.ES1.cpp 파일두개를비교해서보면, 양자간에 API 들의구성이어떻게변경되었는지이해하기편할것같습니다. 4. Shader Language 바른생활님이작성한 강좌플보면, EGLSL과달리 GLSL에서는 OpenGL 1.1 스펙에있는 API들과같이사용할수잇는것을볼수있습니다. 하지만, Embedded Graphic Library Shader Language 에서는임베디드용으로최적화되면, OpenGL 1.1 스펙에서 Shader 언어로처리할수있는 API 들에대해서는전부제거되었습니다. 이에대한스펙을이해하기위해서는앞장에서소개했던 OpenGL ES 2.0 Programming Guide 책을한번보시는것도좋습니다. 그런데이책에대한서평들을읽어보시면알겠지만, 너무않좋습니다. 저같은경우는원서로봤는데, 책이출판된시점이크로노스그룹에서 GLES2.0이만들어진지얼마되지않은시점에나와서그런지예제는아주많이부실하고왠지스펙문서를읽는듯한느낌이듭니다 ^^; [GLES20] 02. Android 3D Programming 을위한 Android 프로젝트설정 20

21 그래도한번쭉읽어보는것이도움이됨으로추천은합니다. ( 솔직히 OpenGL ES 2.0 관련된다른책이없어서추천할대체제가없습니다. 전돈주고샀지만인터넷에 PDF 파일이많음으로블랙마켓에서구해서보는것도... ㅠㅠ ) 각설하고,... 아래와같이배경화면그리는수준의 Shader 언어에서는별내용이없습니다. 이부분은바른생활님이설명하신 장과비교하시면서한번쭈욱보시면, 이해하실수있을겁니다. Simple.vert : Vertex Shader tatic const char* SimpleVertexShader = STRINGIFY( precision highp float; precision highp int; // Attributes attribute vec4 a_position;//position; attribute vec3 a_diffusematerial; uniform mat4 u_modelviewprojectionmatrix;//projection; uniform mat4 u_modelviewmatrix;//modelview; varying vec3 v_diffuse;//diffuse; void main(void) { v_diffuse = a_diffusematerial; gl_position = u_modelviewprojectionmatrix * u_modelviewmatrix * a_position; Simple.frag : Fragment Shader static const char* SimpleFragmentShader = STRINGIFY( varying lowp vec3 v_diffuse;//diffuse; void main(void) { gl_fragcolor = vec4(v_diffuse, 1.0); [GLES20] 02. Android 3D Programming 을위한 Android 프로젝트설정 21

22 이장은프로젝트설정부분임으로여기까지만소개하겠습니다. ^^; 다음장에서는 Model 에 Material 재질값을입히고색상을표현하는방법에대해서알아보도록하겠습니다. ( 솔직히이미아시는분들은알겠지만, 이글에서소개한정도만으로도 glcolor4f 를대체하는색상그리는방법은이해하실수있을 겁니다.) OGLES20 Template Application ported to mfc and android [GLES20] 02. Android 3D Programming 을위한 Android 프로젝트설정 22

23 [GLES20] 03. Color Shading :50 1. Color Shading 앞절에서간략하게설명한 RenderingEngine.ES2.cpp 에대해서좀더풀어서설명하도록하겠습니다. Classes/RenderingEngine.ES2.cpp 1. Create the GLSL program m_simple.program = BuildProgram(SimpleVertexShader, SimpleFragmentShader); BuildProgram 함수에서는 GLSL source 인 Vertex Shader text(simple.vert) 와 Fragment Shader text(simple.frag) 파일 을아래의 GLES 함수를이용해서컴파일합니다. Vertex Shader 생성 GLuint vertexshader= glcreateshader(gl_vertex_shader); glshadersource(vertexshader, 1, &source, 0); [GLES20] 03. Color Shading 23

24 glcompileshader(vertexshader); Fragment Shader 생성 GLuint fragmentshader= glcreateshader(gl_fragment_shader); glshadersource(fragmentshader, 1, &source, 0); glcompileshader(fragmentshader); Vertex Shader와 Fragment Shader 링크 GLuint programhandle = glcreateprogram(); glattachshader(programhandle, vertexshader); glattachshader(programhandle, fragmentshader); gllinkprogram(programhandle); 2. Program 선택 바탕화면이하나짜리를사용할경우에는아래와같이생성한 Program 한개를사용한다고 GLES 라이브러리에알립니다. gluseprogram(m_simple.program); 만약한개이상의 Program 을사용할경우에는필요할때마다 gluseprogram 을이용해서변경가능합니다. 이는 glpushmatrix()-glpopmatrix() 쌍으로묶여있는렌더러구성과유사하게응용할수있습니다. GLES10에서는바탕화면을그리고상자를그린다고하면다음과같이그릴수있다. glpushmatrix(); drawbackground(); glpopmatrix(); glpushmatrix(); drawcubebox(); glpopmatrix(); GLES20에서는 glpushmatrix()-glpopmatrix() 함수를지원하지않는다. gluseprogram(m_simple.program); drawbackground(); gluseprogram(m_cubebox.program); drawcubebox(); 와같이처리할수있다. [GLES20] 03. Color Shading 24

25 3. PROJECTION MATRIX m_simple.uniforms.projection = glgetuniformlocation(program, "u_modelviewprojectionmatrix"); m_simple.uniforms.projection = glgetuniformlocation(program, "u_projectionmatrix"); if (width > height) ratio = (GLfloat)width / (GLfloat)height; else ratio = (GLfloat)height / (GLfloat)width; mat4 projectionmatrix = mat4::perspective(45.0f, ratio, 1.0f, 100.0f); gluniformmatrix4fv(m_simple.uniforms.projection, 1, 0, projectionmatrix.pointer()); m_simple.uniforms.projection 은 glgetuniformlocation() 함수를이용해서 simple.vert 내에선언된 uniform mat4 u_projectionmatrix;//projection; 과연결되는 ID 를얻을수있습니다. 이 ID 에 Perspective, Frustum, Ortho 투영행렬을 gluniformmatrix4fv() 함수를이용해서저장합니다. 4. MODELVIEW MATRIX 4.1 CAMERA MATRIX /* Setting the camera */ vec3 eye(10, 10, 10); vec3 target(0, 0, 0); vec3 up(0, 1, 0); mat4 camera = mat4::lookat(eye, target, up); 틀릴수도있지만, 저는위의코드를아래와같이해석합니다. 카메라설정기능으로머리위인상향벡터 (up(0, 1,0 ) 로두었으며, 물체는원점 (target(0, 0, 0)) 으로설정되었고, 시점은 X, Y, Z 축으로 -10 만큼떨어져있다. 만약 3차원좌표계가아닌 2D 좌표계인 X-Y 기준으로보고싶다면, eye(0, 0, 10) 을하시면 X와 Y축만남게되고, Z축은시점에서정면이됩니다. [GLES20] 03. Color Shading 25

26 camera 행렬을 modelview 행렬에곱해서사용합니다. (camera 행렬은 Option으로서없어도 3D를표현할수있습니다. 하지만명확하게 3D를표현할때는 Camera 행렬을이용하는것이좋습니다.) camera에대해서는바른생활님기초강좌님다음페이지들을참고하십시요 VERTICES /* Draw Grid and Axis */ /* 20x20 의격자형바닥을그린다. */ GLfloat gridvertices[] = { -10.0f, 0.0f, 0.0f, 10.0f, 0.0f, 0.0f, 0.0f, 0.0f, -10.0f, 0.0f, 0.0f, 10.0f, ; /* X(Red)-Y(Green)-Z(Blue) 축을그린다. */ GLfloat axisvertices[] = { // x 0.0f, 0.0f, 0.0f, 6.0f, 0.0f, 0.0f, // y 0.0f, 0.0f, 0.0f, 0.0f, 4.0f, 0.0f, // z 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, 6.0f, ; 20x20 격자형바닥을표현할 gridvertices 배열과 X-Y-Z 축을표현할 axisvertices 배열입니다. 이정점들은 simple.vert 내의 attribute vec4 a_position; 에값들을저장합니다. [GLES20] 03. Color Shading 26

27 m_simple.attributes.position = glgetattriblocation(program, "a_position"); m_simple.attributes.position 은 glgetattriblocation(program, "a_position"); 함수를이용해서 simple.vert 내에선언된 uniform mat4 attribute vec4 a_position; 과연결되는 ID 를얻을수있습니다. a_position 에정점값을저장할려면, glenablevertexattribarray() 과 glvertexattribpointer() 함수를이용합니다. 이함수는 GLES1.0 과비교하면다음과같습니다. GLES10 glenableclientstate(gl_vertex_array); gldisableclientstate(gl_vertex_array); glvertexpointer(3, GL_FLOAT, 0, gridvertices); GLES20 glenablevertexattribarray(m_simple.attributes.position) gldisablevertexattribarray(m_simple.attributes.position glvertexattribpointer(m_simple.attributes.position, 3, G GL_FALSE, 0, gridvertices); glvertexpointer(3, GL_FLOAT, 0, axisvertices); glvertexattribpointer(m_simple.attributes.position, 3, G GL_FALSE, 0, axisvertices); 4.3 MODELVIEW MATRIX // 배경화면 Shader 인 Simple shader 프로그램바인딩. gluseprogram(m_simple.program); // GLES10에있는 glenableclientstate(gl_vertex_array) 를대체하는함수. glenablevertexattribarray(m_simple.attributes.position); // Draw Grid. // Grid Vertices Buffer Array 등록 // GLES10에있는 glvertexpointer(3, GL_FLOAT, 0, gridvertices); glvertexattribpointer(m_simple.attributes.position, 3, GL_FLOAT, GL_FALSE, 0, gridvertices); gllinewidth(1.0f); GLint grid_axis_diffuse = m_simple.attributes.diffusematerial; // OGLES20에서는색을칠하는 Color Buffer Array 나 glcolor4f등의 API는지원하지않는다. // 이를대체하는방법으로 model에재질을입혀서색을표현해야한다. // diffuse material( 난반사재질 ) 색상을회색으로칠했다. [GLES20] 03. Color Shading 27

28 vec3 grid_axis_material_dif = vec3(0.5f, 0.5f, 0.5f); glvertexattrib3fv(grid_axis_diffuse, grid_axis_material_dif.pointer()); mat4 grid_axis_modelview; for (int i = -10; i <= 10; ++i) { grid_axis_modelview = mat4::translate(0, 0, (GLfloat)i); grid_axis_modelview = grid_axis_modelview * camera; gluniformmatrix4fv(m_simple.uniforms.modelview, 1, 0, grid_axis_modelview.pointer()); gldrawarrays(gl_lines, 0, 2); for (int i = -10; i <= 10; ++i) { grid_axis_modelview = mat4::translate((glfloat)i, 0, 0); grid_axis_modelview = grid_axis_modelview * camera; gluniformmatrix4fv(m_simple.uniforms.modelview, 1, 0, grid_axis_modelview.pointer()); gldrawarrays(gl_lines, 2, 2); // Draw Axis. // Axis Vertices Buffer Array 등록 // GLES10에있는 glvertexpointer(3, GL_FLOAT, 0, axisvertices); 를대체하는함수. glvertexattribpointer(m_simple.attributes.position, 3, GL_FLOAT, GL_FALSE, 0, axisvertices); gllinewidth(1.5f); // Axis X // 빨간색난반사재질입히기 grid_axis_material_dif = vec3(1.0f, 0.0f, 0.0f); glvertexattrib3fv(grid_axis_diffuse, grid_axis_material_dif.pointer()); // gltranslatef() 를대체하는함수. grid_axis_modelview = mat4::translate(0.05f, 0.05f, 0.05f); grid_axis_modelview = grid_axis_modelview * camera; gluniformmatrix4fv(m_simple.uniforms.modelview, 1, 0, grid_axis_modelview.pointer()); gldrawarrays(gl_lines, 0, 2); // Axis Y // 녹색난반사재질입히기 grid_axis_material_dif = vec3(0.0f, 1.0f, 0.0f); [GLES20] 03. Color Shading 28

29 glvertexattrib3fv(grid_axis_diffuse, grid_axis_material_dif.pointer()); gldrawarrays(gl_lines, 2, 2); // Axis Z // 파란색난반사재질입히기 grid_axis_material_dif = vec3(0.0f, 0.0f, 1.0f); glvertexattrib3fv(grid_axis_diffuse, grid_axis_material_dif.pointer()); gldrawarrays(gl_lines, 4, 2); // GLES10 에있는 gldisableclientstate(gl_vertex_array) 를대체하는함수. gldisablevertexattribarray(m_simple.attributes.position); 위에코드을이용해서 20x20 격자형바닥을그린후 X-Y-Z축을그립니다. 여기서색상 Color Shading 에대해서나옵니다. GLES10에서는물체에색상을입힐때, COLOR BUFFER ARRAY 또는 glcolor3f, glcolor4f 등을이용합니다. 하지만, GLES20에서는 glcolor를지원하지않습니다. 그럼으로위에서사용했던방법과같이 Position 정점을구하는방법과마찬가지로, Color에대해서 Attribute 로설정합니다. 저는난반사재질인 Diffuse material 로정하고회색 (0.5f, 0.5f, 0.5f) 을입혔습니다. ( 보통불투명색상을 diffuse 로정한다고합니다.) m_simple.attributes.diffusematerial = glgetattriblocation(program, "a_diffusematerial");... vec3 grid_axis_material_dif = vec3(0.5f, 0.5f, 0.5f); glvertexattrib3fv(grid_axis_diffuse, grid_axis_material_dif.pointer()); Color Shading 은다음과같이 vertex shader 인 simple.vert 에서는 a_diffusematerial 로받은색상값을 varying keyword 를이용해서 fragment shader 인 simple.frag 에전달합니다. simple.vert varying vec3 v_diffuse;//diffuse; void main(void) [GLES20] 03. Color Shading 29

30 { v_diffuse = a_diffusematerial; gl_position = u_modelviewprojectionmatrix * u_modelviewmatrix * a_position; varying keyword 로전달받은 v_diffuse 는 gl_fragcolor 에저장합니다. (gl_fragcolor 는 (r, g, b, a) 임으로 vec4 형태로변경해줘야합니다. 물론 varying 통해서전달받는값자체를 vec4 형으로받아와도됩니다.) simple.frag varying lowp vec3 v_diffuse;//diffuse; void main(void) { gl_fragcolor = vec4(v_diffuse, 1.0); 이장에서는간단하게 glcolor4f 를이용해서색상을입히는방법에대해서알아봤습니다. 색상에대한상세한정리는 Light 조명효과로유명한 Phong Shader 를다룰때설명하도록하겠습니다. OGLES20 Template Application ported to mfc and android [GLES20] 03. Color Shading 30

31 [GLES20] 03. Color Shading 31

32 [GLES20] 04. Geometry Transform :37 기하변환 이번장에서는 CubeBox 를뛰운후에이를확대, 회전, 이동시키는변환방법에대해서알아보도록하겠습니다. 1. 회전변환 GLES10 에서는모델에대해서회전변환을적용하기위해서 glrotatef() 함수를이용합니다. glrotatef(90.0f, 1.0f, 0.0f, 0.0f) : X 축을기준으로 90 도회전 glrotatef(90.0f, 0.0f, 1.0f, 0.0f) : Y 축을기준으로 90 도회전 glrotatef(90.0f, 0.0f, 0.0f, 1.0f) : Z 축을기준으로 90 도회전 하지만, GLES20 에서는 glrotatef() 함수를지원하지않습니다. 즉이를대체하는 Function Set 를직접만들어야합니다. 구현방법은예전에정리했었던, " 오일러회전 " 장에보시면기본원리가있습니다. ( 변환으로가는길 #2 : 오일러회전 ) [GLES20] 04. Geometry Transform 32

33 Utils/Matrix.hpp -. 오일러변환 X 축 static Matrix4<T> RotateX(T degrees) { T radians = degrees * f / 180.0f; T s = std::sin(radians); T c = std::cos(radians); Matrix4 m; m.x.x = 1; m.x.y = 0; m.x.z = 0; m.x.w = 0; m.y.x = 0; m.y.y = c; m.y.z =-s; m.y.w = 0; m.z.x = 0; m.z.y = s; m.z.z = c; m.z.w = 0; m.w.x = 0; m.w.y = 0; m.w.z = 0; m.w.w = 1; return m; -. 오일러변환 Y 축 static Matrix4<T> RotateY(T degrees) { T radians = degrees * f / 180.0f; T s = std::sin(radians); T c = std::cos(radians); Matrix4 m; m.x.x = c; m.x.y = 0; m.x.z = s; m.x.w = 0; m.y.x = 0; m.y.y = 1; m.y.z = 0; m.y.w = 0; m.z.x = -s; m.z.y = 0; m.z.z = c; m.z.w = 0; m.w.x = 0; m.w.y = 0; m.w.z = 0; m.w.w = 1; return m; -. 오일러변환 Z 축 static Matrix4<T> RotateZ(T degrees) { T radians = degrees * f / 180.0f; T s = std::sin(radians); [GLES20] 04. Geometry Transform 33

34 T c = std::cos(radians); Matrix4 m; m.x.x = c; m.x.y = -s; m.x.z = 0; m.x.w = 0; m.y.x = s; m.y.y = c; m.y.z = 0; m.y.w = 0; m.z.x = 0; m.z.y = 0; m.z.z = 1; m.z.w = 0; m.w.x = 0; m.w.y = 0; m.w.z = 0; m.w.w = 1; return m; 사용방법은다음과같습니다. X 축회전 void RenderingEngine::drawCubebox(int texturemode) { mat4 euler_x = mat4::rotatex(xrot); mat4 euler_y = mat4::rotatey(yrot); mat4 euler_z = mat4::rotatez(yrot); mat4 rotation = euler_x * m_orientation.tomatrix(); mat4 modelview = scale * rotation * translation; [GLES20] 04. Geometry Transform 34

35 Y 축회전 void RenderingEngine::drawCubebox(int texturemode) { mat4 euler_x = mat4::rotatex(xrot); mat4 euler_y = mat4::rotatey(yrot); mat4 euler_z = mat4::rotatez(yrot); mat4 rotation = euler_y * m_orientation.tomatrix(); mat4 modelview = scale * rotation * translation; [GLES20] 04. Geometry Transform 35

36 Z 축회전 void RenderingEngine::drawCubebox(int texturemode) { mat4 euler_x = mat4::rotatex(xrot); mat4 euler_y = mat4::rotatey(yrot); mat4 euler_z = mat4::rotatez(yrot); mat4 rotation = euler_z * m_orientation.tomatrix(); mat4 modelview = scale * rotation * translation; [GLES20] 04. Geometry Transform 36

37 2. 축척변환 GLES10 에서는모델에대해서축척변환을적용하기위해서 glscalef() 함수를이용합니다. 하지만, GLES20 에서는 glscalef() 함수를지원하지않습니다. 축척을변환하는방법은위의함수를사용하지않고도간단하게구현할수있습니다. 왜냐하면, 확대축소는수학적으로벡터량이아닌스칼라량이기때문에곱하기만하면됩니다. iphone 3D Programming 책에서제공하는모듈에서는이에대한함수를제공함으로이를이용하면됩니다. Utils/Matrix.hpp static Matrix4<T> Scale(T s) { Matrix4 m; m.x.x = s; m.x.y = 0; m.x.z = 0; m.x.w = 0; m.y.x = 0; m.y.y = s; m.y.z = 0; m.y.w = 0; [GLES20] 04. Geometry Transform 37

38 m.z.x = 0; m.z.y = 0; m.z.z = s; m.z.w = 0; m.w.x = 0; m.w.y = 0; m.w.z = 0; m.w.w = 1; return m; static Matrix4<T> Scale(T x, T y, T z) { Matrix4 m; m.x.x = x; m.x.y = 0; m.x.z = 0; m.x.w = 0; m.y.x = 0; m.y.y = y; m.y.z = 0; m.y.w = 0; m.z.x = 0; m.z.y = 0; m.z.z = z; m.z.w = 0; m.w.x = 0; m.w.y = 0; m.w.z = 0; m.w.w = 1; return m; 사용방법은다음과같습니다. void RenderingEngine::drawCubebox(int texturemode) { mat4 euler_x = mat4::rotatex(xrot); mat4 euler_y = mat4::rotatey(yrot); mat4 euler_z = mat4::rotatez(yrot); // mat4 scale = mat4::scale(1.0f); mat4 scale = mat4::scale(3.0f*cos(interpolation_z)); mat4 translation = mat4::translate(x, y, z); mat4 rotation = euler_x * m_orientation.tomatrix(); mat4 modelview = scale * rotation * translation; interpolation_z += (2*Pi) * f; 보간값을계산할때삼각함수인 cos을이용했습니다. cos에치역은 -1.0f ~ 1.0f 사이입니다. 위의 3.0f*cos(interpolation_z) 의경우, interpolation_z가 0에서부터시작함으로, cos(0) = 1 입니다. +3 ~ 0 ~ -3 ~ 0 ~ +3 의값을반복해서반환하게됩니다. 결국아래의동영상에서볼수있듯이 CubeBox 가원점을기준으로 +3 에큰크기에서시작했다가 원점으로수렴해가면서작아집니다. 이후 -3 에점점수렴해가기때문에그모양이뒤집혀서커지게됩니다. ((2*Pi) * f; 증가수치는 PowerVR SDK 내의보간증가수치를가져왔습니다. ^^;) [GLES20] 04. Geometry Transform 38

39 3. 이동변환 GLES10 에서는모델에대해서이동변환을적용하기위해서 gltranslatef() 함수를이용합니다. 하지만, GLES20 에서는 gltranslatef() 함수를지원하지않습니다. 이동변환의원리는 4x4 행렬상에서 4번째행에값을저장하면됩니다. 예를들어아래와같은회전행렬이있다고한다면, wx wy wz 1 wx, wy, wz 요소에이동변환값을저장한후 model matrix 에곱하면됩니다. 구현함수는다음과같습니다. [GLES20] 04. Geometry Transform 39

40 Utils/Matrix.hpp static Matrix4<T> Translate(T x, T y, T z) { Matrix4 m; m.x.x = 1; m.x.y = 0; m.x.z = 0; m.x.w = 0; m.y.x = 0; m.y.y = 1; m.y.z = 0; m.y.w = 0; m.z.x = 0; m.z.y = 0; m.z.z = 1; m.z.w = 0; m.w.x = x; m.w.y = y; m.w.z = z; m.w.w = 1; return m; 사용방법은다음과같습니다. void RenderingEngine::drawCubebox(int texturemode) { mat4 euler_x = mat4::rotatex(xrot); mat4 euler_y = mat4::rotatey(yrot); mat4 euler_z = mat4::rotatez(yrot); mat4 scale = mat4::scale(1.0f); // mat4 translation = mat4::translate(x, y, z); mat4 translation = mat4::translate(x, y, 15.0f*cos(interpolation_z)-7.5f); mat4 rotation = euler_x * m_orientation.tomatrix(); mat4 modelview = scale * rotation * translation; interpolation_z += (2*Pi) * f; 보간값은축척변환에적용했던삼각함수 cos을이용했습니다. cos에치역은 -1.0f ~ 1.0f 사이입니다. 15.0f*cos(interpolation_z)-7.5f 의경우, interpolation_z가 0에서부터시작함으로, cos(0) = 1 입니다 ~ -7.5 ~ 의값을반복해서반환하게됩니다. 특이사항은 cos(theta) 가 0 ~ -1 일경우, -7.5 에가중치를받기때문에, 아주약간 EaseOut 효과처럼가속를받게됩니다. ((2*Pi) * f; 증가수치는 PowerVR SDK 내의보간증가수치를가져왔습니다. ^^;) [GLES20] 04. Geometry Transform 40

41 4. vertex shader 내에서변환적용하기 이와같은변환의적용은 vertex shader 내에서적용해도됩니다. shader language 내에서처리할경우, 그연산처리를 GPU 에서하기때문에, CPU 에대한부하를줄일수있다고합니다. ( 저도실제측정해보지는않았습니다.) Shaders/SimpleLighting.vert // Attributes attribute vec4 a_position;//position; // Uniforms uniform mat4 u_projectionmatrix;//projection; uniform mat4 u_modelviewmatrix;//modelview; uniform mat3 u_normalmatrix;//normalmatrix; uniform float u_interpolation_z; varying vec3 v_eyespacenormal;//eyespacenormal varying vec3 v_diffuse;//diffuse; varying vec2 v_texturecoordout; [GLES20] 04. Geometry Transform 41

42 void main(void) { v_eyespacenormal = u_normalmatrix * a_normal; v_diffuse = a_diffusematerial; v_texturecoordout = a_texturecoordin; // Vertex Position vec4 newpos = vec4(a_position); mat4 translation = mat4(1.0); mat4 modelview = mat4(u_modelviewmatrix); translation[3][2] = (15.0*cos(u_interpolation_z) - 7.5); modelview *= translation; gl_position = u_projectionmatrix * modelview * newpos; translation[3][2] 는이동변환에서 Z 축을기준으로변환시키는요소입니다. [GLES20] 04. Geometry Transform 42

43 저는아직까지는 vertex shader 내에서논리연산을많이사용하지는않습니다. 튜닝적인요소가있을경우에는적용할가치가있을것같지만, 아직까지는 shader 코드내에서의 helper 함수를새로구성해야하는점과디버깅이불편하다는점때문에잘사용하지는않습니다. OGLES20 Template Application ported to mfc and android [GLES20] 04. Geometry Transform 43

44 [GLES20] 05. Vertex Position 처리 (1) :24 Vertex Shader 내에서 Vertex Position 조정 이번장에서는 Vertex shader 내에서정점위치를조정하는방법에대해서정리해보도록하겠습니다. 정리에앞서서 OpenGL GLSL 로만들어진바른생활님강좌를한번읽어보시면도움이될것같습니다 OpenGL ES 에서는 OpenGL 에서는지원하는즉시모드 (Immediate Mode) 형태의 glvertex3f() 를지원하지않습니다. 그럼으로당연히 GLSL 내에있는 gl_vertex 도지원하지않습니다. 정점을얻기위해서는 attribute keyword 형태로선언해서 OpenGL App( 이하본 App ^^) 에서정점값을얻어와야합니다. ( 나중에다루겠지만, Normal vector, Texture vector 값도 attribute 으로선언해서본 App 으로부터얻어옵니다.) 1. Cubebox 그리기 여기서구현한 Cubebox 는 GL_TRIANGLE_STRIP 으로구현하는방법으로정점을구성하는방법중하나일뿐입니다. 예를들어, vertices, normals, texcoords 배열을초기화시점에미리다설정해서구성해도됩니다. [GLES20] 05. Vertex Position 처리 (1) 44

45 GLfloat texcoords[4][2]; GLfloat vertices[4][3]; GLfloat normals[4][3]; GLubyte indices[4]={0, 1, 3, 2; /* QUAD to TRIANGLE_STRIP conversion; */ -- (0) gluseprogram(m_cubebox.program); // GLES10에있는 glenableclientstate(gl_vertex_array) 를대체하는함수. -- (1) glenablevertexattribarray(m_cubebox.attributes.position); glenablevertexattribarray(m_cubebox.attributes.normal); glenablevertexattribarray(m_cubebox.attributes.texturecoord); // GLES10에있는 glvertexpointer(3, GL_FLOAT, 0, gridvertices); (2) glvertexattrib3fv(diffuse, box_material_dif.pointer()); glvertexattribpointer(position, 3, GL_FLOAT, GL_FALSE, 0, vertices); glvertexattribpointer(normal, 3, GL_FLOAT, GL_FALSE, 0, normals); glvertexattribpointer(texcoord, 2, GL_FLOAT, GL_FALSE, 0, texcoords); /* Front Face */ (3) /* Normal Pointing Towards Viewer */ // 법선벡터를 Z축방향으로앞으로나오는면이므로, Z축열에 +1.0을넣는다. normals[0][0] = normals[1][0] = normals[2][0] = normals[3][0] = 0.0f; normals[0][1] = normals[1][1] = normals[2][1] = normals[3][1] = 0.0f; normals[0][2] = normals[1][2] = normals[2][2] = normals[3][2] = 1.0f; /* Point 1 (Front) */ texcoords[0][0] = 1.0f; texcoords[0][1] = 0.0f; vertices[0][0] = -1.0f; vertices[0][1] = -1.0f; vertices[0][2] = 1.0f; /* Point 2 (Front) */ texcoords[1][0] = 0.0f; texcoords[1][1] = 0.0f; vertices[1][0] = 1.0f; vertices[1][1] = -1.0; vertices[1][2] = 1.0f; /* Point 3 (Front) */ texcoords[2][0] = 0.0f; texcoords[2][1] = 1.0f; vertices[2][0] = 1.0f; vertices[2][1] = 1.0; vertices[2][2] = 1.0f; /* Point 4 (Front) */ texcoords[3][0] = 1.0f; texcoords[3][1] = 1.0f; vertices[3][0] = -1.0f; vertices[3][1] = 1.0; vertices[3][2] = 1.0f; [GLES20] 05. Vertex Position 처리 (1) 45

46 /* Blue Color */ (4) if (texturemode == 0) { box_material_dif = vec3(0.f, 0.f, 1.f) * 0.75f; glvertexattrib3fv(diffuse, box_material_dif.pointer()); /* Draw one textured plane using two stripped triangles */ (5) gldrawelements(gl_triangle_strip, 4, GL_UNSIGNED_BYTE, indices); /* Back Face */ (6) /* Normal Pointing Away From Viewer */ // 법선벡터를 Z축방향으로뒤로들어가는면이므로, Z축열에 -1.0을넣는다. normals[0][0] = normals[1][0] = normals[2][0] = normals[3][0] = 0.0f; normals[0][1] = normals[1][1] = normals[2][1] = normals[3][1] = 0.0f; normals[0][2] = normals[1][2] = normals[2][2] = normals[3][2] = -1.0f; /* Point 1 (Back) */ texcoords[0][0] = 0.0f; texcoords[0][1] = 0.0f; vertices[0][0] = -1.0f; vertices[0][1] = -1.0f; vertices[0][2] = -1.0f; /* Point 2 (Back) */ texcoords[1][0] = 0.0f; texcoords[1][1] = 1.0f; vertices[1][0] = -1.0f; vertices[1][1] = 1.0f; vertices[1][2] = -1.0f; /* Point 3 (Back) */ texcoords[2][0] = 1.0f; texcoords[2][1] = 1.0f; vertices[2][0] = 1.0f; vertices[2][1] = 1.0f; vertices[2][2] = -1.0f; /* Point 4 (Back) */ texcoords[3][0] = 1.0f; texcoords[3][1] = 0.0f; vertices[3][0] = 1.0f; vertices[3][1] = -1.0; vertices[3][2] = -1.0f; /* Black Color */ if (texturemode == 0) { box_material_dif = vec3(0.f, 0.f, 0.f) * 0.75f; glvertexattrib3fv(diffuse, box_material_dif.pointer()); /* Draw one textured plane using two stripped triangles */ gldrawelements(gl_triangle_strip, 4, GL_UNSIGNED_BYTE, indices); [GLES20] 05. Vertex Position 처리 (1) 46

47 /* Top Face */ (7) /* Normal Pointing Up */ // 법선벡터를 Y축방향으로위로올라가는면이므로, Y축열에 +1.0을넣는다. normals[0][0] = normals[1][0] = normals[2][0] = normals[3][0] = 0.0f; normals[0][1] = normals[1][1] = normals[2][1] = normals[3][1] = 1.0f; normals[0][2] = normals[1][2] = normals[2][2] = normals[3][2] = 0.0f; /* Point 1 (Top) */ texcoords[0][0] = 1.0f; texcoords[0][1] = 1.0f; vertices[0][0] = -1.0f; vertices[0][1] = 1.0f; vertices[0][2] = -1.0f; /* Point 2 (Top) */ texcoords[1][0] = 1.0f; texcoords[1][1] = 0.0f; vertices[1][0] = -1.0f; vertices[1][1] = 1.0f; vertices[1][2] = 1.0f; /* Point 3 (Top) */ texcoords[2][0] = 0.0f; texcoords[2][1] = 0.0f; vertices[2][0] = 1.0f; vertices[2][1] = 1.0f; vertices[2][2] = 1.0f; /* Point 4 (Top) */ texcoords[3][0] = 0.0f; texcoords[3][1] = 1.0f; vertices[3][0] = 1.0f; vertices[3][1] = 1.0f; vertices[3][2] = -1.0f; /* Green Color */ if (texturemode == 0) { box_material_dif = vec3(0.f, 1.f, 0.f) * 0.75f; glvertexattrib3fv(diffuse, box_material_dif.pointer()); /* Draw one textured plane using two stripped triangles */ gldrawelements(gl_triangle_strip, 4, GL_UNSIGNED_BYTE, indices); /* Bottom Face */ (8) /* Normal Pointing Down */ // 법선벡터를 Y축방향으로위로올라가는면이므로, Y축열에 -1.0을넣는다. normals[0][0] = normals[1][0] = normals[2][0] = normals[3][0] = 0.0f; normals[0][1] = normals[1][1] = normals[2][1] = normals[3][1] = -1.0f; normals[0][2] = normals[1][2] = normals[2][2] = normals[3][2] = 0.0f; /* Point 1 (Bottom) */ texcoords[0][0] = 0.0f; texcoords[0][1] = 1.0f; vertices[0][0] = -1.0f; vertices[0][1] = -1.0f; vertices[0][2] = -1.0f; [GLES20] 05. Vertex Position 처리 (1) 47

48 /* Point 2 (Bottom) */ texcoords[1][0] = 1.0f; texcoords[1][1] = 1.0f; vertices[1][0] = 1.0f; vertices[1][1] = -1.0f; vertices[1][2] = -1.0f; /* Point 3 (Bottom) */ texcoords[2][0] = 1.0f; texcoords[2][1] = 0.0f; vertices[2][0] = 1.0f; vertices[2][1] = -1.0f; vertices[2][2] = 1.0f; /* Point 4 (Bottom) */ texcoords[3][0] = 0.0f; texcoords[3][1] = 0.0f; vertices[3][0] = -1.0f; vertices[3][1] = -1.0f; vertices[3][2] = 1.0f; /* Yellow Color */ if (texturemode == 0) { box_material_dif = vec3(0.8f, 0.8f, 0.f) * 0.75f; glvertexattrib3fv(diffuse, box_material_dif.pointer()); /* Draw one textured plane using two stripped triangles */ gldrawelements(gl_triangle_strip, 4, GL_UNSIGNED_BYTE, indices); /* Right face */ (9) /* Normal Pointing Right */ // 법선벡터를 X축방향으로오른쪽으로이동하는면이므로, X축열에 +1.0을넣는다. normals[0][0] = normals[1][0] = normals[2][0] = normals[3][0] = 1.0f; normals[0][1] = normals[1][1] = normals[2][1] = normals[3][1] = 0.0f; normals[0][2] = normals[1][2] = normals[2][2] = normals[3][2] = 0.0f; /* Point 1 (Right) */ texcoords[0][0] = 0.0f; texcoords[0][1] = 0.0f; vertices[0][0] = 1.0f; vertices[0][1] = -1.0f; vertices[0][2] = -1.0f; /* Point 2 (Right) */ texcoords[1][0] = 0.0f; texcoords[1][1] = 1.0f; vertices[1][0] = 1.0f; vertices[1][1] = 1.0f; vertices[1][2] = -1.0f; /* Point 3 (Right) */ texcoords[2][0] = 1.0f; texcoords[2][1] = 1.0f; vertices[2][0] = 1.0f; vertices[2][1] = 1.0f; vertices[2][2] = 1.0f; /* Point 4 (Right) */ texcoords[3][0] = 1.0f; texcoords[3][1] = 0.0f; vertices[3][0] = 1.0f; vertices[3][1] = -1.0f; vertices[3][2] = 1.0f; [GLES20] 05. Vertex Position 처리 (1) 48

49 /* Red Color */ if (texturemode == 0) { box_material_dif = vec3(1.0f, 0.f, 0.f) * 0.75f; glvertexattrib3fv(diffuse, box_material_dif.pointer()); /* Draw one textured plane using two stripped triangles */ gldrawelements(gl_triangle_strip, 4, GL_UNSIGNED_BYTE, indices); /* Left Face*/ (10) /* Normal Pointing Left */ // 법선벡터를 X축방향으로왼쪽으로이동하는면이므로, X축열에 -1.0을넣는다. normals[0][0] = normals[1][0] = normals[2][0] = normals[3][0] = -1.0f; normals[0][1] = normals[1][1] = normals[2][1] = normals[3][1] = 0.0f; normals[0][2] = normals[1][2] = normals[2][2] = normals[3][2] = 0.0f; /* Point 1 (Left) */ texcoords[0][0] = 1.0f; texcoords[0][1] = 0.0f; vertices[0][0] = -1.0f; vertices[0][1] = -1.0f; vertices[0][2] = -1.0f; /* Point 2 (Left) */ texcoords[1][0] = 0.0f; texcoords[1][1] = 0.0f; vertices[1][0] = -1.0f; vertices[1][1] = -1.0f; vertices[1][2] = 1.0f; /* Point 3 (Left) */ texcoords[2][0] = 0.0f; texcoords[2][1] = 1.0f; vertices[2][0] = -1.0f; vertices[2][1] = 1.0f; vertices[2][2] = 1.0f; /* Point 4 (Left) */ texcoords[3][0] = 1.0f; texcoords[3][1] = 1.0f; vertices[3][0] = -1.0f; vertices[3][1] = 1.0f; vertices[3][2] = -1.0f; /* White Color */ if (texturemode == 0) { box_material_dif = vec3(1.f, 1.f, 1.f) * 0.75f; glvertexattrib3fv(diffuse, box_material_dif.pointer()); /* Draw one textured plane using two stripped triangles */ gldrawelements(gl_triangle_strip, 4, GL_UNSIGNED_BYTE, indices); // GLES10 에있는 gldisableclientstate(gl_vertex_array) 를대체하는함수. -- (11) gldisablevertexattribarray(position); [GLES20] 05. Vertex Position 처리 (1) 49

50 gldisablevertexattribarray(normal); gldisablevertexattribarray(texcoord); (0) : 사각형을 gldrawarrays 가아닌 gldrawelements 로그리기위한 indices 순서입니다. (1) : glenablevertexattribarray() 는 vertex shader 에선언된 attribute keyword 를활성화합니다. 이는 GLES10 의 glenableclientstate() 를대체합니다. (2) : glvertexattribpointer() 를이용해서 vertex shader에선언된 attribte keyword 벡터변수에정정, 법선또는텍셀정보를저장합니다. 이는 GLES10의 glvertexpointer(), glnormalpointer(), gltexcoordpointer() 를대체합니다. 이는 OpenGL의 glvertex3f(), glnormal3f(), gltexcoord3f() 를대체합니다. (3) : Front Face 즉앞부분사각면을그리는부분입니다. 파란색으로칠하고있으며, 아직 normals 와 texcoords 는사용하지는않습니다. (4) : 파란색으로칠하기위해서본 App 에서 vertex shader 로접근하는부분입니다. 정점당색상값인 Color Buffer Array 을대체하는부분니다. (5) : (0) 에서설정한색인값인 indices 순서로사각형을그립니다. (6) : Back Face 즉뒷부분사각면을그리는부분입니다. 검정색으로칠하고있으며, 아직 normals 와 texcoords 는사용하지는않습니다. (7) : Top Face 즉윗부분사각면을그리는부분입니다. 녹색으로칠하고있으며, 아직 normals 와 texcoords 는사용하지는않습니다. (8) : Bottom Face 즉아랫부분사각면을그리는부분입니다. 노란색으로칠하고있으며, 아직 normals 와 texcoords 는사용하지는않습니다. (9) : Right Face 즉우측부분사각면을그리는부분입니다. 빨간색으로칠하고있으며, 아직 normals 와 texcoords 는사용하지는않습니다. (10) : Left Face 즉뒷좌측부분사격면을그리는부분입니다. 흰색으로칠하고있으며, 아직 normals 와 texcoords 는사용하지는않습니다. [GLES20] 05. Vertex Position 처리 (1) 50

51 (11) : (1) 에서활성화한정점, 법선, 텍셀을비활성화합니다. 이는 GLES10 의 gldisableclientstate() 를대체합니다. 결과는다음과같습니다. 2. Vertex Position Vertex shader 는본 App 으로부터 Position 정점정보를 a_position 으로전달받게됩니다. attribute 와 uniform 으로선언된변수들은 shader 내에서는 constant( 상수?) 로동작합니다. 즉 shader 내에서는 data 를읽기 (read) 는가능하지만쓰기 (write) 를할수는없습니다. 그럼으로 vertex 위치를임의로변경하기위해서는다음과같이 vec4 newpos 변수를만들어주고이에저장합니다. /Shaders/SimpleLighting.vert // Vertex Position vec4 newpos = vec4(a_position); newpos.z = newpos.z + sin(2.0 * newpos.x); gl_position = u_projectionmatrix * u_modelviewmatrix* newpos; [GLES20] 05. Vertex Position 처리 (1) 51

52 3. 결론 Cubebox 의정점이변경하기전과약간변화된것을볼수있습니다. 변형시키는 sin 함수내의가중치값 2.0 을더크게하면변화가눈에 " 뛰게보이지만, 주전자만큼크게찌그러지지는않습니다. newpos.z = newpos.z + sin(2.0 * newpos.x); 이는상자의경우정점의갯수가많지않아서그런것으로보입니다. 바른생활님예제 ( 와같이주전자로그림을그리면, 얼추비슷한결과가나올겁니다. 그런데, OpenGL ES 에서는 glut lib 를지원하지않기때문에, OpenGL 과같이 glutsolidteapot() 함수를통해서쉽게주전자를그릴수는없습니다. ㅠㅠ 다음장에서는주전자를그리기위해서 wavefront obj 파일을 header 로추출한파일을이용해서, 주전자를그리고 Vertex Position 보간값을적용해보도록하겠습니다. (wavefront obj 파일은 3DMax 나 Blender 와같은 3D 그래픽도구를이용해서그린후 export 를 obj 형태로하면됩니다. ^^;) [GLES20] 05. Vertex Position 처리 (1) 52

53 [GLES20] 06. Vertex Position 처리 - Obj 와 VBO (2) : : teapot을그릴때, normal 값에대한 offset이빠져있었습니다. ^^; Wireframe 형태일때는잘못느껴지겠지만, 면으로그려보면느껴지네요. 참고하십시요. ( 이전에 Render To Texture 로그릴때뺀이후로계속빠져있었던듯싶네요ㅎㅎ ) Vertex Shader 내에서 Vertex Position 조정 앞장에이어서이번장에서는 Wavefront Obj 포맷으로구성된 Obj 파일에서 mesh data 를추출한후, 이를 Vertex Buffer Object 형으로구성한뒤, Wireframe 형식의주전자 (Teapot) 를그려보도록하겠습니다. 그리고이 OpenGL App( 이하본 App) 의결과를 Vertex Shader 내에서 Vertex Position 을조정해보겠습니다. 1. Wavefront Obj mesh data 주전자 Teapot 를그리는방법은구글링하면많이나옵니다. 예를들어, 애플에서발표한 WWDC 2010 에서발표했던 CorMotionTeapot 를참조해도되고, [GLES20] 06. Vertex Position 처리 - Obj 와 VBO (2) 53

54 Wavefront Obj 모델파일을구해서, header 로변환해서이용해도됩니다. Obj 스펙은구글링하면손쉽게얻을수있으며, iphone3d Programming 책의 4 장에도설명은나와있습니다. 그런데, iphone3d Programming 책의경우 OBJ 파일포맷이 3dsMax 나 Blender 와는다른형태의 mesh 구조입니다. 작명에도나와있지만, Insanely Simple ObJ File( 직역하면, " 제정신이아니게간단한 OBJ File) - ㅁ -; 입니다. 또한 vertex 와면만을구하고 normal 과 texture coordinate 은고려하지않고만들어진파서입니다. 책에서는 normal 값을 Triangle 를구성하는 3 개의정점이한개의면을이루게됩니다. 같은평면상에있는두개의벡터의외적을구하면법선을계산할수있습니다. 즉, 면을구성하는 3 개의정점이 a, b, c 라고한다면, N = (b - a).cross(c - a) 가됩니다. [GLES20] 06. Vertex Position 처리 - Obj 와 VBO (2) 54

55 혹이책을보시고 Obj 포맷파싱을책과같이하면되겠구나오해하시면안되며, Example 4.23 과같이 f(face) 값같이숫자사이에 '/' 으로구분자를인식하게금만드셔야합니다. 3ds Max 나 Blender 로만든 Obj 파일은 Example 4.23 과같은포맷을얻을수있습니다. 그럼으로이책에서소개하는 OBJ 파서는이런포맷도있다고이해하시고다른파서를구하시는것이좋습니다. 저는다음과같이 prebuilt header로이미파싱된데이타를이용합니다. obj2opengl 이라고 perl script 형태이며, 손쉽게헤더파일을생성해줍니다. (Material 까지파싱은하지못하기때문에, 이값은수작업으로설정해야합니다. ^^;) 주전자하나그리는데너무삼천포로빠져버렸네요ㅠㅠ 그만큼 Opengl es 는 opengl 보다뭔가를그리기가쉽지가않습니다. 자기만의 utility function 등을구현해서 Module 화해놓는것이좋습니다. 그럼다시 Teapot 주전자그리기로돌아가도록하겠습니다. [GLES20] 06. Vertex Position 처리 - Obj 와 VBO (2) 55

56 Mesh data 는정점 (teapot2verts) 과법선정보 (teapot2normals) 두가지만담겨있습니다.( 텍스쳐정보는없음 ) Models/teapot2.h /* (1) created with obj2opengl.pl source file :./teapot2.obj vertices : 3644 faces : 6320 normals : 5995 texture coords : 0 // include generated arrays #import! "./teapot2.h" // set input data to arrays glvertexpointer(3f, GL_FLOAT, 0, teapot2verts); glnormalpointer(gl_float, 0, teapot2normals); // draw data gldrawarrays(gl_triangles, 0, teapot2numverts); */ unsigned int teapot2numverts = 18960; // (2) float teapot2verts [] = { // (3) // f 2909//1 2921//1 2939// f, f, f, f, f, f, f, f, e-05f,... ; float teapot2normals [] = { // (4) // f 2909//1 2921//1 2939// f, f, f, f, f, f, f, f, f,... [GLES20] 06. Vertex Position 처리 - Obj 와 VBO (2) 56

57 ; (1) : obj2opengl.pl 스크립트를이용해서생성된 Obj 파일에대한정보입니다. GLES 1.0 에서사용하는 Example 을보여줍니다. (2) : 주전자의정점갯수를나타냅니다. teapot2numverts (18960) 이값은면의갯수가 6320 개임으로, 한개의면당 3 개의정점이있기때문에 개가됩니다. (3) : 주전자정점의위치입니다. = teapot2verts 배열정보는 1차원배열이지만, 한줄당면한개를표현하는데필요한정점 3개를나타냅니다. 그럼으로, 면의갯수가 6320임으로전체줄수는 6320줄이며한줄당 3개의정점을포함하고있기때문에, 요소가있습니다. 이는일차원배열로는 [18960] 이며이차원배열로는 [6320][3] 으로정의할수있습니다. 아래의정보는 (1) 번의 "obj2opengl.pl" 로생성한정점좌표입니다. // f 2909//1 2921//1 2939// f, f, f, f, f, f, f, f, e-05f, 간단하게살펴보면, "// f v/vt/vn" 한개의면을구성하는데필요한 vertex/texture/normal 정보를나타냅니다. 예를들어 "//f 2909//1" 값을보면 teapot2.obj 에는 texture 정보는없다는것을알수있습니다 : 면을표현하는데필요한 vertices 정보는 2909번째줄에있는면정점 VOID : slash 사이에 0을채우는게아니라비워둡니다. 1 : 면을표현하는데필요한 normal 정보는 1번째줄에있는면의법선을나타냅니다. 다시 teapot2.h 를보면 teapot2verts 의경우, 첫째줄의정점 x, y, z 정보는 teapot2.obj 의 2909 번째줄의정점값을나타내야합니다. 그런데, teapot2.obj 의 2909 줄의 vertex 정보는 "v " 으로그값이다릅니다. 이는 obj2opengl.pl 스크립트를만드신분의정점에대한정보를최적화? 시키면서변경된사항입니다. 대략적인알고리즘은각각의정점 x, y, z 중중간값 center(x, y, z) 정보를구하고, scale factor 값을 x, y, z 정점중각각의차중가장큰값을 1로나눠서정규화 scale factor를구합니다. 이 center 정보와 scalefac에의해서계산되었기때문에다른겁니다. teapot2.obj 나위의 obj2opengl.pl 패키지에포함된 banana.obj 는정점이많은모델이기때문에이해가어려울수있습니다. [GLES20] 06. Vertex Position 처리 - Obj 와 VBO (2) 57

58 obj2opengl.pl 패키지내에같이포함된 cube.obj와이를컨버팅한 cube.h를비교해서보시면좀더쉽게해석할수있을것같습니다. cubeverts[] = { // f 1//2 7//2 5//2-0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5, -0.5, ; cube.obj v v v v v v v v Cube의경우, 정점의 range는 0 ~ 1.0 임으로 center(x, y, z) 는 (0.5, 0.5, 0.5) 입니다. scale factor는 xmax - min = xdiff 가 1임으로 1.0 / 1.0이되서 1.0입니다. (x_token - center.x) / 1.0 = ( ) / 1.0 = -0.5 (y_token - center.y) / 1.0 = ( ) / 1.0 = -0.5 (z_token - center.z) / 1.0 = ( ) / 1.0 = -0.5 첫번째줄의값이됩니다. 일곱번째줄의 face 값은 x(1.0), y(1.0), z(0.0) 임으로컨버팅값은 vx(0.5), vy(0.5), vz(-0.5) 가됩니다. 다섯번째줄의 face 값은 x(1.0), y(0.0), z(0.0) 임으로컨버팅값은 vx(0.5), vy(-0.5), vz(-0.5) 가됩니다. (4) : 주전자법선정보입니다. = teapot2normals 앞의 (3) 정점정보와같은방식으로계산할수있습니다. // f 2909//1 2921//1 2939// f, f, f, f, f, f, f, f, f, 엄하게 Vertex Position 을다룰려고했는데 Obj Parser 를다루게되어버렸네요 - ㅁ -; [GLES20] 06. Vertex Position 처리 - Obj 와 VBO (2) 58

59 책수준에서공부할때는이부분을넘겨도되지만, 차후상용프로젝트을진행할경우에는 3D 디자이너와협업을하게되는데, 이때 3D 디자이너는 3ds Max( 유료 ) 나 Blender( 무료 ) 툴을이용해서 Model 을그려서 Obj 포맷으로배포할수있습니다. 그럼으로 Obj spec( 을읽어보시고직접 Uitility module 을개발하시는것도좋 은공부가될수있습니다. 다음에 Texture 장을다룰때는텍스쳐정보가같이있는 Obj 파일인 banana.obj 와 banana.jpg 을다뤄보도록하겠습니다. 2. Vertex Buffer Object 앞절에서모델을 header로변환하는방법에대해서설명하였습니다. 이번절은주전자정보를 stl의 vector 클래스에보관한후이를 VBO에저장하는방법에대해서다루겠습니다. iphone 3D Programming 예제중 ModelViewer.ObjViewer 프로젝트가있습니다. ISurface interface를상속받아서 ObjSurface라는모듈을구현하고있습니다. 앞절에서소개했었던 Example 4.22 Insanely Simple Obj 파일로부터데이타를추출하고, vertices 정보를저장하고 normals 값은계산해서저장하고있습니다. 저는이파서를사용하지않고다음과같은 ObjSurfaceFromData 모듈을만들어서사용합니다. Utils/ObjSurfaceFromData.cpp 이모듈은 Obj 파일로부터추출한 vertices, textures, normals 의정보를 stl 의 vector 클래스를이용해서저장합니다. 특이사항은 obj2opengl.pl 이 indices 색인정보를이용해서삼각형을그리는 gldrawelements() 방식이아닌, 정점으로삼각형을그리는 gldrawarrays() 방식임으로 indices 정보는저장하지않습니다. ObjSurfaceFromData(int numverts, float* vertices, float* normals); 정점과법선정보한묶음 (stride) 으로만들어서 stl 의 vector 클래스에저장합니다. vertices(x, y, z) 와 normal(x, y, z) 임으로 stride 는 float 형으로 6 개가배치됩니다. ObjSurfaceFromData(int numverts, float* vertices, float* normals, float* texcoords); 정점, 법선그리고텍스쳐정보를한묵음 (stride) 으로만들어서 stl 의 vector 클래스에저장합니다. vertices(x, y, z), normal(x, y, z), texcoords(s, t) 임으로 stride 는 float 형으로 8 개가배치됩니다. void GenerateVertices(vector<float>& vertices, unsigned char flags) const; [GLES20] 06. Vertex Position 처리 - Obj 와 VBO (2) 59

60 저장된정점 (x, y, z), 법선 (x, y, z), 텍스쳐 (s, t) 정보를포함하는 vector 클래스의포인터를반환합니다. Vertex Buffer Object로 Data를옮기기위해서는 CreateDrawable() 함수를이용합니다. VBO에대해서는 iphone 3D Programming 책의 "3장정점과터치점, 3-3 정점버퍼객체를사용하여성능향상시키기 " 장에서설명이되어있으며, 바른생활님이정리하신다음포스트도읽어보시면도움이될것같습니다. // Create the VBO for the vertices (1) struct Drawable { GLuint VertexBuffer; GLuint IndexBuffer; int IndexCount; int VertexCount; int Flags; ; // Create the VBO for the vertices (2) struct Drawables { Drawable teapot; // ; void RenderingEngine::Initialize(int width, int height) { // Create the teapot drawable (3) int flags = VertexFlagsNormals;//VertexFlagsNormals VertexFlagsTexCoords; m_drawables.teapot = CreateDrawable(ObjSurfaceFromData(teapot2NumVerts, teapot2verts, teapot2normals), flags);... Drawable RenderingEngine::CreateDrawable(const ObjSurfaceFromData& surface, int flags) { // Create the VBO for the vertices (4) vector<float> vertices; surface.generatevertices(vertices, flags); GLuint vertexbuffer; [GLES20] 06. Vertex Position 처리 - Obj 와 VBO (2) 60

61 glgenbuffers(1, &vertexbuffer); glbindbuffer(gl_array_buffer, vertexbuffer); glbufferdata(gl_array_buffer, vertices.size() * sizeof(vertices[0]), &vertices[0], GL_STATIC_DRAW); // Create a new VBO for the indices if needed (5) int vertexcount = surface.getvertexcount(); int indexcount = surface.gettriangleindexcount(); GLuint indexbuffer; // 인덱스는사용하지않도록예외처리 (6) if (indexcount < 0) { indexbuffer = 0; indexcount = -1; else { // 이아래부분은이장에서는사용되지않는처리임 (7) vector<glushort> indices(indexcount); surface.generatetriangleindices(indices); glgenbuffers(1, &indexbuffer); glbindbuffer(gl_element_array_buffer, indexbuffer); glbufferdata(gl_element_array_buffer, indexcount * sizeof(glushort), &indices[0], GL_STATIC_DRAW); // Fill in the data into the drawable structure (8) Drawable drawable = {0; drawable.vertexbuffer = vertexbuffer; drawable.indexbuffer = indexbuffer; drawable.vertexcount = vertexcount; drawable.indexcount = indexcount; drawable.flags = flags; // GL_ARRAY_BUFFER 에 binding 했던것을해제하자 (9) glbindbuffer(gl_array_buffer, 0); [GLES20] 06. Vertex Position 처리 - Obj 와 VBO (2) 61

62 return drawable; (1) : Drawable 구조체입니다. VBO 로생성한 VertexBuffer ID, IndexBuffer ID, Index 갯수, Vertex 갯수, 그리고 Buffer 에저장된데이타가 Normal 이포함되어있는지 TexCoord 가포함되어있는지알려주는 Flag 값이있습니다. (2) : 여러개의 Drawable 포함하는 Drawables 구조체입니다. 현재는 teapot 하나이지만, 여러개의모델이있을경우여기에추가할예정입니다. (3) : teapot drawable를생성하는 CreateDrawable() 함수를호출합니다. 이함수는 Vertex Buffer ID, Index Buffer ID 등이포함된 Drawable 객체를반환해줍니다. 또한 ObjSurfaceFromData가 ISurface를상속받기때문에, 추후에 iphone 3D Programming에서이용하는 Parametric Surface 형으로만든기하구조와호환가능합니다. (Parametric Surface는매개변수방정식을이용해서만든 Geometry Sample( 구, 원뿔, 뫼비우스띠등 ) 입니다.) (4) : 정점정보를저장하는 VBO 을생성합니다. (5) : Vertex 의갯수를반환합니다. Index 의갯수는 Parametric Surface 에서이용되며, 여기서는 gldrawarrays() 로그리기때문에사용되지않습니다. (6) : IndexBuffer 와 IndexCount 를사용하지않는값으로설정합니다. (7) : VBO 의 Index Buffer 를등록하는부분입니다. gldrawelements() 로그릴때필요합니다. 주전자를그릴때는사용하지않습니다. 나중에 Parametric Surface 를이용해서기하구조를그릴때사용할예정입니다. (8) : Drawable 구조체에 VBO 로생성한 ID, Vertex count 등을저장합니다. [GLES20] 06. Vertex Position 처리 - Obj 와 VBO (2) 62