2011年10月5日 星期三

OpenGL ES for Android的學習(二):建立多邊形(polygon)

一般來說,學繪圖的HelloWorld應該是要來劃一個三角形(Triangle),下面我綜合參考了
Jayway Team Blog:OpenGL ES Tutorial for Android –Part II– Building a polygon
3D Graphics using OpenGL ES (Including Nehe's Port)Example 2
來完成建立多邊形這個教學!

在開始建立程式前,先補充說明在建立3D模型時,需要用到的一些子元素
(頂點表面多邊形),他們都能獨立的分別被實做出來。
  • 頂點(Vertex)
         頂點是構成3D模型的最小建物,他是由兩個或兩個以上的邊交界而成的點。一個頂點可以在所有相關聯的邊、面和多邊形中共用。頂點也可以是照相機或光源位置的表示。Android中,我們浮點數陣列來定義它,同時我們將它放在byte buffer中以獲取較佳的效能。

 private float vertices[] = {  
    -1.0f, 1.0f, 0.0f, // 0, Top Left  
    -1.0f, -1.0f, 0.0f, // 1, Bottom Left  
     1.0f, -1.0f, 0.0f, // 2, Bottom Right  
     1.0f, 1.0f, 0.0f, // 3, Top Right  
 };  
 // a float is 4 bytes, therefore we multiply the number if vertices with 4.  
 ByteBuffer vbb = ByteBuffer.allocateDirect(vertices.length * 4);  
 vbb.order(ByteOrder.nativeOrder());  
 FloatBuffer vertexBuffer = vbb.asFloatBuffer();  
 vertexBuffer.put(vertices);  
 vertexBuffer.position(0);  
要注意的一個浮點數是4個位元組,將它和頂點數相乘,才可以正確的配置buffer大小。
  • (Edge)
          邊是在兩個頂點之間的線段。它們是表面和多邊形的邊緣線。在3D模型中,便可以在       兩個鄰近表面或多邊形之間共用。轉換一條邊,影響所有相連接的頂點,面和多邊形 。OpenGL ES中,我們不能定義邊,你只能通過給定的頂點定義面,這將至少構建三條邊。如果你想要修改一條邊,你應該改變產生這條邊的兩個頂點。
  • (face)
          面是一個三角形,面就是這三個頂點和三個邊所圍成的表面,變換一個面影響所有關聯         的頂點,邊和多邊形。對於這些元素的介紹先到這裡,Jayway還有一些細部的介紹,都還蠻有價值的,但我相信大家沒看到code就很難過,我們就先來畫畫三角形吧!          


Triangle.java
 com.hanshuo.opengl.tutorial;  
 import java.nio.ByteBuffer;  
 import java.nio.ByteOrder;  
 import java.nio.FloatBuffer;  
 import javax.microedition.khronos.opengles.GL10;  
 /*  
  * A triangle with 3 vertices.  
  */  
 public class Triangle {  
   private FloatBuffer vertexBuffer; // 頂點陣列的緩衝  
   private ByteBuffer indexBuffer;  // 索引緩衝  
   private float[] vertices = { // 三角形的頂點們  
     0.0f, 1.0f, 0.0f, // 0. 頂  
    -1.0f, -1.0f, 0.0f, // 1. 左下  
     1.0f, -1.0f, 0.0f // 2. 右下  
   };  
   private byte[] indices = { 0, 1, 2 }; // 連結這些點的順序  
   // 建構子 – 建立資料陣列的緩衝  
   public Triangle() {  
    // 建立頂點陣列緩衝. 頂點是浮點數要乘4個byte.  
    ByteBuffer vbb = ByteBuffer.allocateDirect(vertices.length * 4);  
    vbb.order(ByteOrder.nativeOrder()); // 使用原生順序  
    vertexBuffer = vbb.asFloatBuffer(); // 轉換位元組緩衝為浮點數  
    vertexBuffer.put(vertices);     // 將資料複製到緩衝  
    vertexBuffer.position(0);      // 倒轉歸零  
    //建立頂點索引陣列緩衝
    indexBuffer = ByteBuffer.allocateDirect(indices.length);  
    indexBuffer.put(indices);  
    indexBuffer.position(0);  
   }  
   // 渲染這個圖形  
   public void draw(GL10 gl) {  
    // Enable vertex-array and define the buffers  
    gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);  
    gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);  
    // int size, int type, int stride, Buffer pointer  
    // size: 頂點的座標數 (只有2,3,4).  
    // type: 頂點座標的資料型態, GL_BYTE, GL_SHORT, GL_FIXED, or GL_FLOAT  
    // stride: 連續頂點可以有幾個byte的offset. 0是緊密的包裝?  
    // 透過index-array繪製元素
    gl.glDrawElements(GL10.GL_TRIANGLES, indices.length, GL10.GL_UNSIGNED_BYTE, indexBuffer);  
    // int mode, int count, int type, Buffer indices) 
    // mode: GL_POINTS, GL_LINE_STRIP, GL_LINE_LOOP, GL_LINES, GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN, or GL_TRIANGLES  
    // count: 有幾個元素將要被渲染 
    // type:頂點的資料型態 (must be GL_UNSIGNED_BYTE or GL_UNSIGNED_SHORT).  
    // indices:index array的指標   
    gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);  
   }  
 }  

TutorialPartI.java (藍色是新的程式碼)
 package com.hanshuo.opengl.tutorial;  
 import javax.microedition.khronos.egl.EGLConfig;  
 import javax.microedition.khronos.opengles.GL10;  
 import android.content.Context;  
 import android.opengl.GLU;  
 import android.opengl.GLSurfaceView.Renderer;  
 public class OpenGLRenderer implements Renderer {  
      Triangle triangle;   
      public OpenGLRenderer() {  
         // Set up the data-array buffers for these shapes (多了這裡)  
         triangle = new Triangle();  // (多了這裡)   
        }  
      public void onSurfaceCreated(GL10 gl, EGLConfig config) {  
           // 將背景設成紅色 (rgba).  
           gl.glClearColor(1.0f, 0.0f, 0.0f, 0.0f);  
           // 允許陰影平滑, 預設也可以,不是必須的  
           gl.glShadeModel(GL10.GL_SMOOTH);  
           // 深度緩衝設置  
           gl.glClearDepthf(1.0f);  
           // 允許深度測試  
           gl.glEnable(GL10.GL_DEPTH_TEST);  
           // 深度檢測類型  
           gl.glDepthFunc(GL10.GL_LEQUAL);  
           // 精細度設置  
           gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST);  
      }  
      public void onDrawFrame(GL10 gl) {  
           // 清除螢幕和深度緩衝  
           gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);       
           gl.glLoadIdentity();         // Reset model-view matrix (多了這裡)
           gl.glTranslatef(-1.5f, 0.0f, -6.0f); // Translate left and into the screen (多了這裡)  
           triangle.draw(gl);          // Draw triangle (多了這裡)      
      }  

執行結果:

有沒有很簡單捏~

2011年10月4日 星期二

OpenGL ES for Android的學習(零):寫在前面

最近工作上要朝Android 3D的方向做研發,OpenGL ES我想是必須學習的一個主題,想說就在這裡邊寫邊學習。目前大部分是官方文件與國外部落格的整理,想看就看吧!


OpenGL ES for Android的學習(一):基礎概念

Android對於OpenGL的支援,可以透過frameworkAPINDK兩種,這裡要教學的是前者。GLSurfaceViewGLSurfaceView.RendererOpenGL ES API中最基礎了兩個類別,透過它你可以創造與操作影像。如果你的目標是將OpenGL應用在你的App,瞭解如何在activity中實作這些類別是第一要務。

l   GLSurfaceView (Class Link)
顧名思義,他是View的一種,你可以透過OpenGL API呼叫它,你可以對它畫圖(draw)和作其他操作,功能上和SurfaceView是很類似的。
它主要的特徵有:
n   管理一個surface:它是在記憶體中的特別區塊,能夠被覆合成為AndroidView
n   管理一個EGL:使OpenGL能夠render(對岸通常稱之為"渲染")到一個surface.
n   讓使用者自訂的render物件能夠被使用。
n   render的工作可以透過獨立單一的執行緒,和UI分開,以增進效能與平滑度。
n   支援自訂的或持續性的渲染。
n   提供易於使用的debug工具,來追蹤opengl es API的呼叫。

  如果你想要有觸控的功能,要自己延伸touch listeners
  可以參考TouchRotateActivity

l   GLSurfaceView.Renderer(Class Link)
這個介面定義了用來在GLSurfaceView上繪圖的方法,我們必須在另一個單獨的類別來實做這個介面,然後再用GLSurfaceView.setRenderer()的方式附加在GLSurfaceView的實例(instance)上。
GLSurfaceView.Renderer介面需要實作以下幾個方法:
n   onSurfaceCreated():這個方法在創造GLSurfaceView時只會被系統呼叫一次,像是設定OpenGL的環境參數或是初始化OpenGL繪圖物件都是在這裡。
n   onDrawFrame():當系統每次要重新繪圖(redraw)時會呼叫這個方法,此為物件繪圖(重繪)的主要方法。
n   onSurfaceChanged():GLSurfaceView在幾何上有改變時,系統會呼叫這個方法,包含GLSurfaceView的大小改變或是設備螢幕大小的改變。像是設備將顯示從直立改成橫立時,系統就會呼叫它。請這個方法來回應與處理GLSurfaceView的改變。

接著要來貼Code了,只需要兩支:

TutorialPartI.java
 package com.hanshuo.opengl.tutorial;  
 import android.app.Activity;  
 import android.opengl.GLSurfaceView;  
 import android.os.Bundle;  
 import android.view.Window;  
 import android.view.WindowManager;  
 public class TutorialPartI extends Activity {  
   /** Called when the activity is first created. */  
   @Override  
   public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        this.requestWindowFeature(Window.FEATURE_NO_TITLE); //不要標題  
     getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,  
       WindowManager.LayoutParams.FLAG_FULLSCREEN);//全螢幕  
            GLSurfaceView view = new GLSurfaceView(this);  
             view.setRenderer(new OpenGLRenderer());  
             setContentView(view);  
   }  
 }  
OpenGLRenderer.java
 package com.hanshuo.opengl.tutorial;  
 import javax.microedition.khronos.egl.EGLConfig;  
 import javax.microedition.khronos.opengles.GL10;  
 import android.opengl.GLU;  
 import android.opengl.GLSurfaceView.Renderer;  
 public class OpenGLRenderer implements Renderer {  
      public void onSurfaceCreated(GL10 gl, EGLConfig config) {  
           // 將背景設成紅色 (rgba).  
           gl.glClearColor(1.0f, 0.0f, 0.0f, 0.0f);  
           // 允許陰影平滑, 預設也可以,不是必須的  
           gl.glShadeModel(GL10.GL_SMOOTH);  
           // 深度緩衝設置  
           gl.glClearDepthf(1.0f);  
           // 允許深度測試  
           gl.glEnable(GL10.GL_DEPTH_TEST);  
           // 深度檢測類型  
           gl.glDepthFunc(GL10.GL_LEQUAL);  
           // 精細度設置  
           gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST);  
      }  
      public void onDrawFrame(GL10 gl) {  
           // 清除螢幕和深度緩衝  
           gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);            
      }  
      public void onSurfaceChanged(GL10 gl, int width, int height) {  
           // 把View設定到符合新的(螢幕)大小  
           gl.glViewport(0, 0, width, height);  
           // 選擇投影的矩陣  
           gl.glMatrixMode(GL10.GL_PROJECTION);  
           // 重設投影的矩陣  
           gl.glLoadIdentity();  
           // 計算視窗的比例  
           GLU.gluPerspective(gl, 45.0f, (float) width / (float) height, 0.1f,  
                     100.0f);  
           // 選擇modelview矩陣  
           gl.glMatrixMode(GL10.GL_MODELVIEW);  
           // 重設modelvew矩陣  
           gl.glLoadIdentity();  
      }  
 }  

這樣就算完成一支:Andorid OpenGL ES的"Hello World!"了!

應該不用貼圖吧,就看你背景是設什麼顏色,我這範例就會看到一片紅!