Maxi's Back Garden

The difficult situation to develop medical device products

2012-07-12T23:00:00.000-07:00

I am a bio-engineer and have been working in vaccine equipment and medical device research center for four years.

Recently, I have lose my enthusiasm, because the medical device industry go from bad to worse.

An innovation medical device products need to be done in a good research environment.

It means the doctors, specialists, patients, the infrastructure, the management system, the money, everything need to be well integrated.

There are still lots of work in this industry, if we want medical device industry finer.

First of all is to built a good enviroment for the next generation who wants to research and practice new medical device products.

Wish one day the day I dream come.

Tales of Only !!

2012-07-09T01:00:00.001-07:00

Let me introduce an exhibition: Tales of Only

It is a large show for the fans of Tales series in Taiwan.

Date: 2012/10/14

Location: The Taipei Jiantan Youth Activity Center

It's offical website:
http://or.studio-web.net/too/

Also:
http://www.doujin.com.tw/events/info/74

Maybe you could see me dress like someone in TOV

HA HA~

See you in the Tales of Only Exhibition.

NA

2012-06-12T01:23:00.000-07:00

It's hard to record the entire things in English in my life.

But I'll try hard to keep this blog going.

There are lots of rain in Taiwan recently.

Hope to cease this disaster.

God bless Taiwan.

JJ Lin - the smiling eyes

2012-03-16T01:00:00.000-07:00

From now on

2012-02-15T22:08:00.000-08:00

In order to make foreigner easier reading this blog

Therefore, I will try to translate all my articles to English form in near future

The first one will be discussed about the international license - Regulatory Affair Certification (General Scope, Medical device)

I actually don't know what it is until I joined a conference held by Tze Chiang Foundation of Science and technology in 2011

This license is not cheaper compared to other licenses in Taiwan

And I am also afraid it may not do great help in my career

Because the medical device or biotechnology industry in Taiwan still need time to grow up

If anybody in this area knows the RAC-GS(medical device focus) license in detail, I am seeking to discuss with you

Forgive my poor grammar, if there are any mistake in this article please let me know

Maxi Chien

下一次戀愛 - ELVA

2012-01-31T00:26:00.000-08:00

公主病 - 周杰倫

2012-01-18T22:46:00.000-08:00

12/10 飲料兩瓶

2011-12-01T04:08:00.000-08:00

品名: Yellow Tail Cabernet Sauvignon 黃尾袋鼠卡貝納蘇維翁紅酒
產地: 澳洲
年份: 2010
酒精度: 13.5%
容量: 750 ml
醒酒時間: 15-20分鐘
簡介: 黑莓與微甜摩卡融合黑醋栗果香，口感柔順

品名: Cahors Apogee卡歐艾伯奇A.O.C.紅酒
產地: 法國
年份: 2007
酒精度: 13%
容量: 750 ml
適飲溫度: 18 度
葡萄品種: 100%馬爾貝克
簡介: 木質香氣與水果甜，結構平衡，口感持久

少見逸品 - TOV 15週年開箱

2011-11-27T04:42:00.000-08:00

寫在文前

-------------------

感謝一位去日本出差的麻吉

不辭辛苦

跑遍各大遊戲區

才找到他說"架上僅有一片"的遊戲

我也爬了國內各大網拍發現真的是很少有這一片的蹤跡

麻吉感謝你阿

還有另一位麻吉要感謝

這是後話

我們看圖去

噫不是要開遊戲片嗎

丟個一張紙出來幹嘛

打開來看是米菈!!

原來是我麻吉去日本逛了TALES故事館

一進館就可以抽一張海報阿

我也好想去阿~~

跟麻吉一起去日本出差的朋友抽到老頭

聽說在日本當地留下一句國罵

----------------------

有請今天的開箱助理

沒錯 TOX的特點米菈

可是怎麼有兩隻??

這就是剛剛說的要感謝的另一個麻吉阿(還被我騙去買了一片TOV 金歹勢阿)

合照

主角現身

我拉

我再拉

拉出來~~

15週年阿邪惡的名字阿

正面來一張

其實15週年就是日版遊戲片套上15周年的硬紙板外殼

附上特點CODE

背面來一張

邪惡的MARK

正義貫通的RPG與兩位米菈小姐

日本店家送的TOV資料夾正版的喔~~

這次血拼的主角合照

PS3 三巨頭 TOV TOGF TOX

個人的TALES收藏 (離全制霸還好遠阿)

PS: TOE
PSP: TOP
PS2: TOD2 TOR TOL TOS TOA RETOD
PS3: TOV TOGF TOX

Taylor Swift - You belong with me

2011-11-24T05:58:00.000-08:00

一本滿足

2011-10-20T23:12:00.001-07:00

Design Pattern - Singleton

2011-10-20T02:36:00.000-07:00

.Introduction

        Singleton在軟體設計上屬於很常見, 也很易於使用的一個樣板, 主要設計用於開發者對某個物件限制其只能產生一個的時候使用, 以下對其設計思維以及實作方式做說明.

.Thinking in Singleton Pattern

        Singleton正如其名, 主要是為了確保目標物件只產生一個而設計, 常見的Design Patterns中有很多其他的樣板常使用Singleton來實作, 像是Abstract Factory, State Pattern等等.

        我們在什麼需求下會使用到Singleton, 在這邊舉一個簡單的例子來做說明, 假設我們要設計一個遊戲, 在這個遊戲裡面有各種各樣的場景, 為了不要讓程式架構中場景的處理太過混亂, 我希望設計一個場景管理器, 把這些場景的各種功能, 像是產生場景, 釋放場景等等都交由這個場景管理器處理, 那麼理所當然的, 我必須確認整個程式中所有的場景都交由這"一個"管理器做處理, 為了保證不讓程式中其他地方不小心產生額外的場景處理器, 此時就可以使用Singleton樣板.

.Implement

         為了確保只產生一個實體物件, Singleton的實作會在class中利用static成員變數的方式來確保產生唯一的Singleton物件, 並實作一個static函式提供用來取得這個Singleton物件, 架構並不複雜, 如下圖所示.

Singleton架構

那麼, 實際以程式碼實作層面來看上圖的話, 需要注意幾個重點,以下列出注意點以及程式實做.

為了不讓外部有權限產生Singleton物件, 其建構子會定為private
為了不讓外部有權限對Singleton裡面存取的物件做更動, 用來儲存的static成員變數instance也會定為private
外部要使用的話統一透過GetInstance函式取來用

程式碼實做

public class Singleton 
{
    private static Singleton instance = null;

    private Singleton() 
    {        
    }

    public static Singleton getInstance() 
    {
        if (instance == null) 
        {
            instance = new Singleton();
        }
        return instance;
    }

    //other method...
    public void test()
    { 
        System.out.println("Hello Singleton!");
    };
}

class App
{
    public static void main(String[] args) 
    {
        Singleton.getInstance().test();
    }
};

          以上執行結果會印出"Hello Singleton!", 不過以上的架構只是最基本的Singleton, 有開發過多執行序程式的人就會發現, 假設有多個執行序幾乎同時在程式第一次呼叫getInstance時, 在if判斷null與new產生物件之間, 同時另一個執行序也有可能跑到if判斷, 結果因為還沒new, 判斷是null, 也進去new, 結果產生了多個Singleton導致問題, 針對此問題有很多人提出討論以及解決辦法, 以下簡略做說明.

.Extended Reading

Double-checked locking and the Singleton pattern
      - http://www.ibm.com/developerworks/java/library/j-dcl/index.html

        如上列網址所探討, 針對在多執行序下Singleton的架構, 有人提出各種利用synchronized再多加一層處理的方式, 防止另一個執行序在當時同時做處理,如下所示

利用synchronized處理Singleton

public static synchronized Singleton getInstance()
{
  if (instance == null)          //1
    instance = new Singleton();  //2
  return instance;               //3
}

public static Singleton getInstance()
{
  if (instance == null)
  {
    synchronized(Singleton.class) {
      instance = new Singleton();
    }
  }
  return instance;
} 

public static Singleton getInstance()
{
  if (instance == null)
  {
    synchronized(Singleton.class) {  //1
      if (instance == null)          //2
        instance = new Singleton();  //3
    }
  }
  return instance;
}

不過利用synchronized多多少少會影響到程式本身執行的效率, 所以也有人提出直接在class產生時就把物件建好, 一勞永逸, 不需要在GetInstance時還要判斷, 程式如下所示

預先建好Singleton物件

class Singleton
{
  private Vector v;
  private boolean inUse;
  private static Singleton instance = new Singleton();

  private Singleton()
  {
    v = new Vector();
    inUse = true;
    //...
  }

  public static Singleton getInstance()
  {
    return instance;
  }
}

        以這幾種方式來看, 如果class本身沒有很複雜, 我個人是比較建議直接在class產生就建好, 畢竟synchronized影響的效率也不算小,又是多執行序一堆在取, 影響又更大了, 所以以我而言應該就比較偏向採用先建好的方式來實作, 另外, 在Java上實作可能要注意一些其他問題, 如下面網址, 有空的人可以鑽研一下.....

The "Double-Checked Locking is Broken" Declaration
      - http://www.cs.umd.edu/~pugh/java/memoryModel/DoubleCheckedLocking.html

原帖
      - http://arkkk.blogspot.com/2011/10/design-pattern-singleton.html

Stereoscopic 3D on Android ( OpenGL ES )

2011-10-14T07:34:00.000-07:00

本篇在Android上使用OpenGL ES簡單的實做Stereo View影像, 以下是結果畫面

執行結果

1.Introduction

        之前發過一篇x86上用OpenGL實做Stereo View, 概念一樣, 這次改在Android上實做
        網址:
        Stereoscopic 3D in OpenGL
          http://arkkk.blogspot.com/2011/09/stereoscopic-3d-in-opengl.html

        雖然說是用OpenGL ES, 不過嚴格說來並不是直接使用, 在這邊我說明一下, 在Android上使用OpenGL ES開發3D軟體常見有兩種方式, 一種是透過官方Android SDK幫你包好的版本下去實做, 一種是不使用SDK提供的版本, 直接在Android的source tree下使用Android底層的的OpenGL ES來撰寫編譯可執行檔或者lib, 透過JNI去link編譯好的lib或者直接執行檔執行, 兩種方式都不會很困難, 不過為了效率考量, 比較建議用原生的版本去撰寫程式, 這篇只是要講個概念而非OpenGL ES如何使用, 所以為了方便直接使用Android SDK來實做.

2.Implementation

首先, Android SDK軟體開發的基本架構資料很好找到, 這裡就不多談了, 主要架構程式碼如下

Android Application基本架構

package com.GLDemo;

import android.app.Activity;

public class GLDemo extends Activity 
{    
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
    }

    @Override
    protected void onPause() 
    {
        super.onPause();   
    }

    @Override
    protected void onResume() 
    {
        super.onResume();

    }
}

基本架構有了後, 第一步一開始要先做的是先偵測目前系統支援的OpenGL ES版本是否有到2.0, 如果有用到2.0才有的功能, 像是shader等等功能, 使用前可以先檢查版本有支援再執行

檢查OpenGL ES版本

    private boolean detectOpenGLES20() 
    {
        ActivityManager am =
            (ActivityManager) getSystemService(Context.ACTIVITY_SERVICE);
        ConfigurationInfo info = am.getDeviceConfigurationInfo();
        return (info.reqGlEsVersion &gt;= 0x20000);
    }

前面準備的動作都好了後, 接下來要做的就是產生一個GLSurfaceView以及Renderer來做OpenGESL繪圖, 大致介紹一下, class GLSurfaceView是Android裡SurfaceView的一種實作, 用來給OpenGLES繪圖元件繪圖的View, 而Renderer是一個Interface用來處理OpenGLES的每個frame的繪圖, 可以分開來兩個另外實作, 也可以直接在同一個class中處理, 在這邊我在同一個class中處理.

OpenGLES繪圖處理用的View

package com.GLDemo;

import javax.microedition.khronos.opengles.GL10;

import android.content.Context;
import android.opengl.GLSurfaceView;
import android.opengl.GLSurfaceView.Renderer;
import android.view.MotionEvent;


//switch perspective and stereo-view by touch
public class GLStereoView extends GLSurfaceView implements Renderer
{
    private Context context;    
    
    public GLStereoView(Context context)
    {
        super(context);
        //如果Render是分開做的話, setRenderer要另外處理
        this.setRenderer(this);
    }
    
    public void onDrawFrame(GL10 gl)
    {
        
            
    }

    public void onSurfaceChanged(GL10 gl, int width, int height) 
    {
                
    }

    public void onSurfaceCreated(GL10 gl, EGLConfig config) 
    {                
        
        
    }        
    
    public boolean onTouchEvent(final MotionEvent event)
    {        
        
        return true;        
    }    
}

在這個class GLStereoView裡可以發現有幾個要自己實做的函式, 以下一步一步來講解其意義以及實作方式

.OpenGLES繪圖處理

首先, 在繪圖之前我們必須要把整個場景的資料先處理好, 至少要有3D的點資料才有辦法繪圖, 以下大概簡單講一下我的作法, 這邊要注意的一點是Android SDK提供的Java層OPENGLES在使用都用Java的Buffer在處理, 也就是說, 不管哪種資料, 勢必得在java層複製一次, 多多少少會影響到效能, 以下是以Cube為例子的程式碼

建立3D Cube資料

public class Cube 
{

    private float SIZE = 1.0F;
    /**
     * The Cube constructor.
     *
     * Initiate the buffers.
     */
    public Cube(float size)
    {
        SIZE = size;
        vertices = new float[]
                {
                // Vertices according to faces
                -SIZE, -SIZE, SIZE, //v0
                SIZE, -SIZE, SIZE,     //v1
                -SIZE, SIZE, SIZE,     //v2
                SIZE, SIZE, SIZE,     //v3

                SIZE, -SIZE, SIZE,     //...
                SIZE, -SIZE, -SIZE,
                SIZE, SIZE, SIZE,
                SIZE, SIZE, -SIZE,

                SIZE, -SIZE, -SIZE,
                -SIZE, -SIZE, -SIZE,
                SIZE, SIZE, -SIZE,
                -SIZE, SIZE, -SIZE,

                -SIZE, -SIZE, -SIZE,
                -SIZE, -SIZE, SIZE,
                -SIZE, SIZE, -SIZE,
                -SIZE, SIZE, SIZE,

                -SIZE, -SIZE, -SIZE,
                SIZE, -SIZE, -SIZE,
                -SIZE, -SIZE, SIZE,
                SIZE, -SIZE, SIZE,

                -SIZE, SIZE, SIZE,
                SIZE, SIZE, SIZE,
                -SIZE, SIZE, -SIZE,
                SIZE, SIZE, -SIZE
                                    };

        
        texture = new float[]
                {
                //Mapping coordinates for the vertices
                0.0f, 0.0f,
                0.0f, 1.0f,
                1.0f, 0.0f,
                1.0f, 1.0f,

                0.0f, 0.0f,
                0.0f, 1.0f,
                1.0f, 0.0f,
                1.0f, 1.0f,

                0.0f, 0.0f,
                0.0f, 1.0f,
                1.0f, 0.0f,
                1.0f, 1.0f,

                0.0f, 0.0f,
                0.0f, 1.0f,
                1.0f, 0.0f,
                1.0f, 1.0f,

                0.0f, 0.0f,
                0.0f, 1.0f,
                1.0f, 0.0f,
                1.0f, 1.0f,

                0.0f, 0.0f,
                0.0f, 1.0f,
                1.0f, 0.0f,
                1.0f, 1.0f
                            };

        indices = new byte[]
                {
                // Faces definition
                0, 1, 3, 0, 3, 2,         // Face front
                4, 5, 7, 4, 7, 6,         // Face right
                8, 9, 11, 8, 11, 10,     // ...
                12, 13, 15, 12, 15, 14,
                16, 17, 19, 16, 19, 18,
                20, 21, 23, 20, 23, 22
                                        };


        //
        ByteBuffer byteBuf = ByteBuffer.allocateDirect(vertices.length * 4);
        byteBuf.order(ByteOrder.nativeOrder());
        vertexBuffer = byteBuf.asFloatBuffer();
        vertexBuffer.put(vertices);
        vertexBuffer.position(0);

        //
        byteBuf = ByteBuffer.allocateDirect(texture.length * 4);
        byteBuf.order(ByteOrder.nativeOrder());
        textureBuffer = byteBuf.asFloatBuffer();
        textureBuffer.put(texture);
        textureBuffer.position(0);


        //
        indexBuffer = ByteBuffer.allocateDirect(indices.length);
        indexBuffer.put(indices);
        indexBuffer.position(0);
   }
   public void draw(GL10 gl)
   {
   }
}

處理Cube的點資料完後, 再來是繪圖的部分, 把這些點透過Android SDK提供的OpenGLES畫出來, 以下是程式碼

Cube繪圖處理

 public void draw(GL10 gl)
    {
       
        //Bind the texture according to the set texture filter
        gl.glBindTexture(GL10.GL_TEXTURE_2D, textures);

        //Enable the vertex, texture and normal state
        gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
        gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

       
        gl.glTranslatef(tranform.pos[0], tranform.pos[1], tranform.pos[2]);
        gl.glRotatef(tranform.rotationAngle[0], 1.0f, 0.0f, 0.0f);
        gl.glRotatef(tranform.rotationAngle[1], 0.0f, 1.0f, 0.0f);
        gl.glRotatef(tranform.rotationAngle[2], 0.0f, 0.0f, 1.0f);

        gl.glScalef(tranform.scale[0], tranform.scale[1], tranform.scale[2]);//*/

        //Point to our buffers
        gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
        gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, textureBuffer);

        //Draw the vertices as triangles, based on the Index Buffer information
        gl.glDrawElements(GL10.GL_TRIANGLES, indices.length, GL10.GL_UNSIGNED_BYTE, indexBuffer);

        gl.glBindTexture(GL10.GL_TEXTURE_2D, 0);
        //Disable the client state before leaving
        gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
        gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
    }

基本的繪圖處理完後, 接下來回到GLStereoView開始處理整個場景的繪圖, 主要分為幾個步驟.

建立場景物件
處理Stereo View空間轉換矩陣
利用Render to Texture畫出Stereo兩個View場景

建立場景物件

如其名建立場景物件, 實做結果我建立2個Cube以及2個平面, 以下我以2個Cube為例子, 建立的時機在GLStereoView的onSurfaceCreated裡, 這邊說明一下, onSurfaceCreated是重載自GLSurfaceView的一個函式, 呼叫時機也由GLSurfaceView自己處理, 可以在這個函式裡面作一些場景初始化的處理, 甚至場景不大不需要管理的, 在這裡讀入所有場景也沒關係, 以下是我的程式部份.

建立場景物件

    public void onSurfaceCreated(GL10 gl, EGLConfig config) 
    {                
        // Set the background color to black ( rgba ).
        //gl.glClearColor(0.0f, 0.0f, 0.0f, 0.5f);
        gl.glClearColor(1.0f, 0.0f, 0.0f, 0.0f);
        // Enable Smooth Shading, default not really needed.
        gl.glShadeModel(GL10.GL_SMOOTH);
        // Depth buffer setup.
        //gl.glClearDepthf(1.0f);
        gl.glEnable(GL10.GL_TEXTURE_2D);
        // Enables depth testing.
        gl.glEnable(GL10.GL_DEPTH_TEST);
        // The type of depth testing to do.
        gl.glDepthFunc(GL10.GL_LEQUAL);
        // Really nice perspective calculations.
        gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST);
        
        textureIDGroup = createTextures(gl, 2, new int[]
                                                       {
                                                        R.drawable.create, 
                                                        R.drawable.ps_grid06});
        Cube []moveableObjs = new Cube[2];

        
        moveableObjs[0] = new Cube(1.0f);
        //Load the texture for the cube once during Surface creation
        moveableObjs[0].setGLTexture(textureIDGroup[0]);
        moveableObjs[0].translateOffset(2.0f, 0.0f, 0.0f);


        moveableObjs[1] = new Cube(1.0f);//0x10000);
        //Load the texture for the cube once during Surface creation
        moveableObjs[1].setGLTexture(textureIDGroup[0]);
        moveableObjs[1].translateOffset(1.5f, 1.0f, 5.0f);
    }

處理Stereo View空間轉換矩陣

接下來為了要產生Stereo View, 需要先處理Camera, 也就是投影矩陣的參數, 此部份與我上一篇Stereoscopic 3D in OpenGL處理是一樣的, 以下列出主要程式碼, 主要使用時機是想要切換成Stereo View的時候, 我是在onTouchEvent呼叫, 另外注意如果有切換多種View, 記得在onSurfaceChanged要作處理.

Camera參數

    //near clipping plane &gt;0
    private double mNearZ = 0.1f;
    //far clipping plane &gt;0
    private double mFarZ = 1000.0f;
    //screen projection plane
    private double mScreenZ = 50.0f;
    //intraocular distance
    private double mIOD = 0.05f;
    private double mFoxy = 45.0f;
    private double DTR = 0.0174532925; 
/*
     *  IOD : intraocular distance, that decides offset distances in StereoView 
     *          (opengl lookup the center of two-eyes, offset IOD/2)
     *  fovy : view angle of eyes
     *  aspect : screen aspect ratio, w/h, notice!! use Framebuffer w/h in FBO
     *  nearZ,farZ : positive , z clip plane
     *  clipPlaneRect : clip plane rect {left, right,bottom,top} will be setup based on DTR,foxy and nearZ,screenZ
     */
    private void setStereoFrustumParameter(double width, double height)
    {        
        double aspect = width/height;
        double foxy = mFoxy;
        double nearZ =  mNearZ;
        double screenZ = mScreenZ;
        double IOD = mIOD;
        double top = nearZ*Math.tan(DTR*foxy/2.0f);
        double right = aspect*top;
        double frustumShift = (IOD/2.0f)*nearZ/screenZ;
        
        //Left eye
        mLeftCam.mTopFrustum = top;
        mLeftCam.mBottomFrustum = -top;
        //center of two-eyes, offset IOD/2
        mLeftCam.mLeftFrustum = -right+frustumShift;
        mLeftCam.mRightFrustum = right+frustumShift;
        mLeftCam.mModelTranslation = IOD/2.0f;
            
        //right eye
        mRightCam.mTopFrustum = top;
        mRightCam.mBottomFrustum = -top;
        mRightCam.mLeftFrustum = -right-frustumShift;
        mRightCam.mRightFrustum = right-frustumShift;
        mRightCam.mModelTranslation = -IOD/2.0f;        
    }
    private float[] getFrustum(SIDEVIEW side)
    {
        float []frustum = new float[10];
  
        if(side == SIDEVIEW.RIGHT)
        {
            frustum[0] = (float)mRightCam.mLeftFrustum;
            frustum[1] = (float)mRightCam.mRightFrustum;
            frustum[2] = (float)mRightCam.mBottomFrustum;
            frustum[3] = (float)mRightCam.mTopFrustum;
            frustum[6] = (float)mRightCam.mModelTranslation;
            frustum[7] = 0.0f;
            frustum[8] = 0.0f;
        }
        else
        {
            frustum[0] = (float)mLeftCam.mLeftFrustum;
            frustum[1] = (float)mLeftCam.mRightFrustum;
            frustum[2] = (float)mLeftCam.mBottomFrustum;
            frustum[3] = (float)mLeftCam.mTopFrustum;
            frustum[6] = (float)mLeftCam.mModelTranslation;
            frustum[7] = 0.0f;
            frustum[8] = 0.0f;
        }
        frustum[4] = (float)mNearZ;
        frustum[5] = (float)mFarZ;
        frustum[9] = (float) mScreenZ;
  
        return frustum;
    }

利用Render to Texture畫出Stereo兩個View場景

最後, 剩下繪圖部份, 為了可以分別畫出兩個View, 這邊需要使用Render to Texture的方式, 由於實做比較複雜一點,大概列一下步驟

建立一個材質準備繪圖在上面
建立Frame Buffer Object(FBO), 並把他attach到材質上
繪圖

建立一個材質準備繪圖在上面

         int[] texture = new int[1];
         gl.glGenTextures(1, texture, 0);   
         gl.glBindTexture(GL10.GL_TEXTURE_2D, texture[0]);
         //notice!!, use null in render, not null in bmp? 
         gl.glTexImage2D(GL10.GL_TEXTURE_2D, 0, GL10.GL_RGBA, width, height, 0,
                 GL10.GL_RGBA, GL10.GL_UNSIGNED_BYTE, null);
         gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER,
                 GL10.GL_NEAREST);
         gl.glTexParameterf(GL10.GL_TEXTURE_2D,
                 GL10.GL_TEXTURE_MAG_FILTER,
                 GL10.GL_LINEAR);
         gl.glTexParameterx(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S,
                 GL10.GL_REPEAT);
         gl.glTexParameterx(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T,
                 GL10.GL_REPEAT);

建立Frame Buffer Object(FBO), 並把他attach到材質上

         int mFramebuffer;
         GL11ExtensionPack gl11ep = (GL11ExtensionPack) gl;
         int framebuffer;
         int[] framebuffers = new int[1];
         gl11ep.glGenFramebuffersOES(1, framebuffers, 0);
         framebuffer = framebuffers[0];
         gl11ep.glBindFramebufferOES(GL11ExtensionPack.GL_FRAMEBUFFER_OES, framebuffer);

         int depthbuffer;
         int[] renderbuffers = new int[1];
         gl11ep.glGenRenderbuffersOES(1, renderbuffers, 0);
         depthbuffer = renderbuffers[0];

         gl11ep.glBindRenderbufferOES(GL11ExtensionPack.GL_RENDERBUFFER_OES, depthbuffer);
         gl11ep.glRenderbufferStorageOES(GL11ExtensionPack.GL_RENDERBUFFER_OES,
                 GL11ExtensionPack.GL_DEPTH_COMPONENT16, width, height);
         gl11ep.glFramebufferRenderbufferOES(GL11ExtensionPack.GL_FRAMEBUFFER_OES,
                 GL11ExtensionPack.GL_DEPTH_ATTACHMENT_OES,
                 GL11ExtensionPack.GL_RENDERBUFFER_OES, depthbuffer);

         //Attach 2D Texture to the FBO
         gl11ep.glFramebufferTexture2DOES(GL11ExtensionPack.GL_FRAMEBUFFER_OES,
                 GL11ExtensionPack.GL_COLOR_ATTACHMENT0_OES, GL10.GL_TEXTURE_2D,
                 targetTextureId, 0);
         int status = gl11ep.glCheckFramebufferStatusOES(GL11ExtensionPack.GL_FRAMEBUFFER_OES);
         if (status != GL11ExtensionPack.GL_FRAMEBUFFER_COMPLETE_OES) 
         {
             throw new RuntimeException("Framebuffer is not complete: " +
                     Integer.toHexString(status));
         }
         gl11ep.glBindFramebufferOES(GL11ExtensionPack.GL_FRAMEBUFFER_OES, 0);

繪圖部份比較複雜, 這邊說明一下, Offscreen是繪圖到FBO, 也就是Texture上, 當在材質上畫完後, 再來只需要建個model, 把貼圖貼上畫出來就可以, drawOnscreen就是作這個, 我只畫了一個簡單的矩形貼上貼圖而已, 程式碼我就省略了.

繪圖

    public void drawFrame(GL10 gl, int width, int height,boolean ifFrustum, float []proj,float []look)
    {
         if (mContextSupportsFrameBufferObject) 
            {            
                //debug
                //drawOffscreenImage(gl, mFramebufferWidth, mFramebufferHeight);
                GL11ExtensionPack gl11ep = (GL11ExtensionPack) gl;
                
                //設定繪圖到FBO中
                gl11ep.glBindFramebufferOES(GL11ExtensionPack.GL_FRAMEBUFFER_OES, mFramebuffer);
                //draw on "FrameBuffer", all initial reset by FrameBuffer env
                drawOffscreenImage(gl, mFramebufferWidth, mFramebufferHeight,ifFrustum, proj,look);
             
                //關閉FBO繪圖
                gl11ep.glBindFramebufferOES(GL11ExtensionPack.GL_FRAMEBUFFER_OES, 0);
                                
                //draw on screen,  all initial reset by screen env
                drawOnscreen(gl, width, height);              
             } 
            else 
            {
                 // Current context doesn't support frame buffer objects.
                // Indicate this by drawing a red background.
                gl.glClearColor(1,0,0,0);
                gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
            }
    }
    private void drawOffscreenImage(GL10 gl, int width, int height, boolean ifFrustum, float []proj,float []look)
    {
        long time = SystemClock.uptimeMillis()% 4000L;
        float angle = 0.090f * ((int) time);
        gl.glViewport(0, 0, width, height);
      
        //framebuffer w/h, not screen
        float ratio = (float) width / height;
         
        gl.glMatrixMode(GL10.GL_PROJECTION);
        gl.glLoadIdentity();
        //notice!! gl.glFrustumf : model should locates in nearz~farz
        //gl.glFrustumf(-ratio, ratio, -1, 1, 3, 1000);
        //GLU.gluPerspective(gl, 45.0f, ratio, 0.1f, 1000.0f);
        if(ifFrustum == true)
        {
            gl.glFrustumf(proj[0], proj[1], proj[2], proj[3], proj[4], proj[5]);
            //notice!! x offset, not concern y,z now
            gl.glTranslatef(proj[6], proj[7], proj[8]);
        }
        else         
            GLU.gluPerspective(gl, proj[0], ratio,proj[1], proj[2]);
         
        //Set the face rotation
        gl.glFrontFace(GL10.GL_CCW);
        gl.glEnable(GL10.GL_CULL_FACE);
        gl.glCullFace(GL10.GL_BACK);
        gl.glEnable(GL10.GL_DEPTH_TEST);
         
        //notice!! unlike drawOnscreen, it's all right to clear buffer, because twice framebuffer are draw on individual texture
        //one texture is on left plane, the other is on right plane, so that clear is just clear buffer in individual texture 
        gl.glClearColor(0.0f,0.0f,0.0f,0);
        gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
        gl.glMatrixMode(GL10.GL_MODELVIEW);
        gl.glLoadIdentity();
         
        //GLU.gluLookAt(gl, 0, 0, 40, 0, 0, 0, 0, 1, 0);
               GLU.gluLookAt(gl,look[0],look[1],look[2],look[3],look[4],look[5],look[6],look[7],look[8]);
        gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
        gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

         
        /*   gl.glTranslatef(0, 0, -3.0f);
        gl.glRotatef(angle,        0, 1, 0);
        gl.glRotatef(angle*0.25f,  1, 0, 0);*/
         
        gl.glPushMatrix();
        if(ifFrustum == true)
        {
            //move to screenZ
            gl.glTranslatef(0, 0, -proj[9]);
        }
        drawScene(gl,time);
        gl.glPopMatrix();
         
        gl.glDisable(GL10.GL_CULL_FACE);
        gl.glDisable(GL10.GL_DEPTH_TEST);
        gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
        gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);        
        }

最後, 把整個場景在GLStereoView畫一畫就大功告成了, 在onDrawFrame呼叫drawFrame.

GLStereoView繪圖

    public void onDrawFrame(GL10 gl)
    {
        float []look = null;
        float lapsetime = SystemClock.uptimeMillis()% 1000.0f;
        //smooth move
        float cameraDistX =   mCameraSpeed * mMoveDistX * 0.0001f * lapsetime;
        float cameraDistY =  0.0f;//mCameraOffsetY * 0.0001f * lapsetime;
        
        mCameraPosX += cameraDistX;

                        
        gl.glClearColor(0.0f,0,1.0f,0);
        gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

        if(ifFrustum == true)
        {
            float screenOffsetw = (float)mDrawWidth*0.5f;
            float screenOffseth = (float)mDrawHeight*0.5f;
            look =  new float[]{ mCameraPosX, mCameraPosY, 0, mCameraPosX, mCameraPosY,(float) -mScreenZ,  0, 1, 0};
            mPrjParameter = getFrustum(SIDEVIEW.RIGHT);
            
            //right screen
            mFBOSceneRight.setPosition(new float[]{-screenOffsetw,0.0f,0.0f});
            mFBOSceneRight.drawFrame(gl, mWidth, mHeight,ifFrustum, mPrjParameter,look);

            //look =  new float[]{ mCameraPosX, mCameraPosY, 0, mCameraPosX, mCameraPosY,(float) -mScreenZ,  0, 1, 0};
            mPrjParameter = getFrustum(SIDEVIEW.LEFT);
            
            //left screen
            mFBOSceneLeft.setPosition(new float[]{screenOffsetw,0.0f,0.0f});
            mFBOSceneLeft.drawFrame(gl, mWidth, mHeight,ifFrustum, mPrjParameter,look);
        }
        else
        {
            look = new float[]{ mCameraPosX, mCameraPosY, 40, mCameraPosX, mCameraPosY, 0, 0, 1, 0};
            mPrjParameter = new float[]{45.0f, 0.1f, 1000.0f};
            mFBOScene.setPosition(new float[]{0.0f,0.0f,0.0f});
            mFBOScene.drawFrame(gl, mWidth, mHeight,ifFrustum, mPrjParameter,look);
        }        
    }

.實做結果

.原帖
http://arkkk.blogspot.com/2011/10/stereoscopic-3d-in-opengl-es-android.html

Puzzle Game Implementation Using Cogl/ODE

2011-10-11T10:54:00.000-07:00

在開始之前, Cogl跟ODE可能沒什麼人聽過, 先大概介紹一下

1.Introduction

Cogl:
     網址: http://wiki.clutter-project.org/wiki/Cogl

     Cogl是一套處理3D幾何的函式庫, 數於Open Source專案ClutterProject裡的一部份,底層使用OpenGL, OpenGLES, 目前仍在開發中, 功能尚沒有很齊全(2011/05), 另外在使用上要很注意, 使用Clutter做開發的軟體, 由於底層也使用Cogl, 如果在其中自己直接使用Cogl, 有可能會對Clutter造成影響, 像是設定viewport等等都有可能會互相影響, 混用的時候要很注意.

ODE:

    網址:http://www.ode.org/

    ODE是一套知名的Open Source物理引擎, 跟市面上現有的物理引擎比較起來功能雖然不強大, 但基礎功能該有的都有, 沒有很要求物理處理的效能以及功能的話用起來還不錯.

2.Implementation

    先來看結果的影片,處理拼圖塊的方式有很多種, 可以利用2d alpha map的方式, 產生無厚度的拼圖塊, 也可以直接做出3d model, 寫讀檔程式自己繪圖, 在這邊我用的是自己建3d model的方式, 以下做論述

結果影片

.puzzle model/texture

在puzzle的model部分, 我的方式是自己建模並輸出.obj檔案, 並在程式中寫讀檔以及繪圖, 在這邊有個重點是貼圖座標一定要處理好, 之後在程式中繪圖處理才比較不會太大的問題.

.建立3D模型

如圖, 把3ds_max開起來, 乖乖的慢慢拉點線面, 建好後輸出obj檔案, 在這邊說明一下, 在選擇輸出格式時要注意選擇有含貼圖資訊的格式, 並不是所有格式都有含貼圖資訊.....

建立3D模型-網格

建立3D模型-貼圖

.軟體實作

初始化

首先, 第一步是初始化, 分為兩個部分, Cogl以及ODE環境的初始化.

這邊為了方便, 使用clutter來處理介面,

clutter初始化

ClutterActor *stage ;

//clutter初始化
clutter_init (&argc, &argv);

//創建clutter基礎元件, 後續基本元件(actor)會加在stage裡
stage = clutter_stage_new();

ODE初始化

//dInitODE舊版ode不需要使用, 新版有些功能需要先呼叫才能使用, 如joint, collision等等
dInitODE();

//ode基礎的元件, 所有的物件產生在world下面
mWorld = dWorldCreate();

//建立一個碰撞空間, ode有幾種空間, dSimpleSpaceCreate較適合小量物件的碰撞
mSpace = dSimpleSpaceCreate(0);

//建立儲存接觸點的群組
mContactgroup = dJointGroupCreate(0);


//為了不讓物體一直掉到下去, 建立個地板, 參數為ax+by+cz=d的a,b,c,d
dCreatePlane(mSpace, 0, -1, 0, -10);

//設定重力
dWorldSetGravity(mWorld, 0, 1.0, 0);

//設定error correcting及constraint force mixing
dWorldSetERP(mWorld, 0.2);
dWorldSetCFM(mWorld, 1e-5);

註冊訊息事件

初始化完成後, 下一步是註冊我們所需要的訊息, 需要註冊的訊息分別為paint,destroy,key或者button事件

註冊訊息事件

//註冊繪圖事件, 最主要的處理都在這
g_signal_connect_after (actor, "paint", G_CALLBACK (cogl_paint_cb), &gFrameData);

//destroy, 裡面處理釋放資源
g_signal_connect (actor, "destroy", G_CALLBACK (actor_destroy), NULL);

//滑鼠事件
g_signal_connect (actor,
                    "button-press-event",
                    G_CALLBACK (button_press_cb),
                    NULL);
g_signal_connect (actor,
                    "button-release-event",
                    G_CALLBACK (button_release_cb),
                    NULL);
g_signal_connect (actor,
                    "motion-event",
                    G_CALLBACK (mouse_cb),
                    NULL);

繪圖與物理處理(paint事件)

接下來處理最重要paint事件部分, 這個部分包含model的繪圖, ODE物理部分的碰撞, 以及raycast處理.

先處理Cogl的3d model繪圖, obj檔案的讀取部分可以在網路上找到現成的code, 由於是不是我自己寫的, 此部分就略掉不講, 假設目前已經把3d點座標與貼圖座標都讀取到陣列存放, 以下是主要的程式碼

Cogl Load 3d puzzle model

void PuzzleModel::LoadWithMesh(string modelFilePath,Vector3D position)
{
    float maxx,maxy,maxz;
    float minx,miny,minz;
    maxx=maxy=maxz= -999999;
    minx=miny=minz= 999999;

    mMesh = new ObjData(modelFilePath);
 ObjMesh *pMesh = mMesh->mObjMesh;

#ifdef _DEBUG_MODEL_INFO
    printf("all point size : %d\n", pMesh->m_iNumberOfVertices);
    printf("all texture point size : %d\n", pMesh->m_iNumberOfTexCoords);
    printf("all normal point size : %d\n", pMesh->m_iNumberOfNormals);   
    printf("faces size : %d\n", pMesh->m_iNumberOfFaces);
#endif
 //1 face = 3 vertex = 3 texture = 3 normal..1面3點, 每點都有texture以及normal
    mDrawPointSize = pMesh->m_iNumberOfFaces*3;//pMesh->m_iNumberOfVertices;
    
    mTexturePointSize = pMesh->m_iNumberOfFaces*3;//pMesh->m_iNumberOfTexCoords;
    mNormalPointSize = pMesh->m_iNumberOfFaces*3;//pMesh->m_iNumberOfNormals;

    if( pMesh->m_aNormalArray   != NULL &&
     pMesh->m_aTexCoordArray != NULL )
    {

        unsigned int i;
        unsigned int iDraw = 0,iTexture = 0,iNormal=0;
        mDrawPointGroup = new float[mDrawPointSize*3];
        mTexturePointGroup = new float[mTexturePointSize*2];
        mNormalPointGroup = new float[mNormalPointSize*3];

        for(i=0;i<m_iNumberOfFaces;i++)
       {
                    unsigned int j;
      ObjFace *pf = &pMesh->m_aFaces[i];

      /*
      ** Draw the polygons with normals & uv co-ordinates
      */
      for(j=0;j<3;j++)
      {
                float fx,fy,fz;

                fx=pMesh->m_aTexCoordArray[ pf->m_aTexCoordIndicies[j] ].u;
                fy=pMesh->m_aTexCoordArray[ pf->m_aTexCoordIndicies[j] ].v;
                mTexturePointGroup[iTexture++]=fx;
                mTexturePointGroup[iTexture++]=fy;
                
                fx=pMesh->m_aNormalArray[ pf->m_aNormalIndices[j] ].x;
                fy=pMesh->m_aNormalArray[ pf->m_aNormalIndices[j] ].y;
                fz=pMesh->m_aNormalArray[ pf->m_aNormalIndices[j] ].z;
                mNormalPointGroup[iNormal++] = fx;
                mNormalPointGroup[iNormal++] = fy;
                mNormalPointGroup[iNormal++] = fz;

                fx=pMesh->m_aVertexArray[ pf->m_aVertexIndices[j] ].x;
                fy=pMesh->m_aVertexArray[ pf->m_aVertexIndices[j] ].y;
                fz=pMesh->m_aVertexArray[ pf->m_aVertexIndices[j] ].z;
                mDrawPointGroup[iDraw++] = fx;
                mDrawPointGroup[iDraw++] = fy;
                mDrawPointGroup[iDraw++] = fz;
                if(fx>maxx)
                    maxx=fx;
                if(fy>maxy)
                    maxy=fy;              
                if(fz>maxz)
                    maxz=fz;
                if(fx<minx)
                    minx=fx;
                if(fy<miny)
                    miny=fy;              
                if(fz<minz)
                    minz=fz;
      }
     }
#ifdef _DEBUG_MODEL_INFO
        //設定bounding box, 左上為原點
        //右下
printf("max:%f,%f,%f\n",maxx,maxy,maxz);
printf("min:%f,%f,%f\n",minx,miny,minz);
#endif
        //為了設定物理物件的大小, 此處計算bounding box
        mBoundingBox[0] = Vector3D(minx,miny,minz);
        mBoundingBox[1] = Vector3D(maxx,maxy,maxz);
        
         //建立ode物理body, 後面說明
        CreatePhysicsBody(position);

        //Cogl繪圖需要先創建buffer,gl_Vertex畫點,  
        //gl_Normal設定normal, 要繪圖至少要有gl_Vertex
        mVBO = cogl_vertex_buffer_new (mDrawPointSize);
        cogl_vertex_buffer_add (mVBO,
                              "gl_Vertex",
                              3,
                              COGL_ATTRIBUTE_TYPE_FLOAT,
                              FALSE,
                              sizeof (float)*3,
                              mDrawPointGroup);

        cogl_vertex_buffer_add (mVBO,
                              "gl_Normal",
                              3,
                              COGL_ATTRIBUTE_TYPE_FLOAT,
                              FALSE,
                              sizeof (float)*3,
                              mNormalPointGroup);

     
        //設定texture, 此處為了方便寫死texture.png, 真的實做請自己實做一個resource manager處理可能比較適當
        CoglTextureFlags flags = COGL_TEXTURE_NO_SLICING;
        
        CoglPixelFormat internalFormat = COGL_PIXEL_FORMAT_ANY;

        CoglHandle texture = cogl_texture_new_from_file ("texture.png",OGL_TEXTURE_NO_SLICING,COGL_PIXEL_FORMAT_ANY, NULL);
        if(texture != NULL)
        {
            //同樣是為了繪圖需要的buffer, 此處是畫材質用的貼圖座標
            cogl_vertex_buffer_add (mVBO,
                          "gl_MultiTexCoord0",
                          2,
                          COGL_ATTRIBUTE_TYPE_FLOAT,
                          FALSE,
                          sizeof (float)*2,
                          mTexturePointGroup);
            mModelTexture = cogl_material_new ();

            cogl_material_set_layer ((CoglMaterial*)mModelTexture, 0, texture);       
        }

    }

處理完model繪圖後, 接下來要替此物件建立一個物理body, 使之產生物理的效果

建立物理body

void PuzzleModel::CreatePhysicsBody(Vector3D position)
{

    float sizex = mBoundingBox[1].mx-mBoundingBox[0].mx;
    float sizey = mBoundingBox[1].my-mBoundingBox[0].my;
    float sizez = mBoundingBox[1].mz-mBoundingBox[0].mz;

    mPhyObj = PhysicsManager::Singleton()->createBox(sizex,sizey,sizez);

    dMatrix3 R;
    VECTOR tempVect(0.0, 0.0, 0.0);
    dBodySetLinearVel(mPhyObj->mBody, tempVect.x, tempVect.y, tempVect.z);
    dRFromAxisAndAngle(R, 0, 1, 0, 0);
    dBodySetRotation(mPhyObj->mBody, R);
    dBodySetPosition(mPhyObj->mBody,  position.mx, position.my, position.mz);

#ifdef _DEBUG_MODEL_INFO
//設定bounding box, 左上為原點
//右下
printf("GEOM(box) size:%f,%f,%f\n",sizex,sizey,sizez);
printf("GEOM(box) pos:%f,%f,%f\n",position.mx, position.my, position.mz);
#endif
}

model的位移以及旋轉, 也就是其空間矩陣值由ODE來處理, 成功建立物理body後, 在paint重繪處理時一併更新ODE物理計算, 將ODE計算出來的空間矩陣設定給此物件, 透過Cogl繪出即可, 此處要注意的是ODE的空間矩陣與Cogl(同OpenGL)放置方式不一樣, 所以需要再多一個轉換步驟

Puzzle model的繪圖Update處理

void PuzzleModel::Update(float elasptime)
{
    if(!mDrawPointGroup || mDrawPointSize <=0 ) return;
    
    cogl_push_matrix (); 

    //scale與translate順序會影響位移大小, scale先放則移動會乘上倍率
    cogl_scale (mScale.mx, mScale.my,  mScale.mz); 
    //物理處理    
    if(mPhyObj)
    {
/*      | 0  1  2  3  |            | 0  4  8  12 |
        |             |            |             |
    R = | 4  5  6  7  |            | 1  5  9  13 |
        |             |        M = |             |
        | 8  9  10 11 |            | 2  6  10 14 |
                                   |             |
    p = | 0  1  2 |                | 3  7  11 15 |
*/
        MATRIX geoMatrix;
        geoMatrix.LoadIdentity();
        const dReal *pos = dGeomGetPosition(mPhyObj->mGeom);
        const dReal *R = dGeomGetRotation(mPhyObj->mGeom);
#ifdef _DEBUG_MODEL_MATRIX
    printf("\n*************\n");
    printf("{%f,%f,%f,%f}\n{%f,%f,%f,%f}\n{%f,%f,%f,%f}\n",R[0],R[1],R[2],R[3],
                                                            R[4],R[5],R[6],R[7],         
                                                            R[8],R[9],R[10],R[11]);
    printf("\n(%f,%f,%f)\n", pos[0],pos[1],pos[2]);
    printf("*************\n");
#endif
        //arkkk 這裡一定要注意ode的dReal define是否為double精度, 否則會出問題(看ode\common.h, dDOUBLE/dSINGLE)
        geoMatrix.ODEtoOGL((const float*)pos, (const float*)R);
#ifdef _DEBUG_MODEL_MATRIX
    printf("\n==============\n");
    printf("{%f,%f,%f,%f}\n{%f,%f,%f,%f}\n{%f,%f,%f,%f}\n{%f,%f,%f,%f}\n",geoMatrix.Element[0],geoMatrix.Element[4],geoMatrix.Element[8],geoMatrix.Element[12],
                                                            geoMatrix.Element[1],geoMatrix.Element[5],geoMatrix.Element[9],geoMatrix.Element[13],         
                                                            geoMatrix.Element[2],geoMatrix.Element[6],geoMatrix.Element[10],geoMatrix.Element[14],
                                                            geoMatrix.Element[3],geoMatrix.Element[7],geoMatrix.Element[11],geoMatrix.Element[15]);
    printf("===============\n\n");
#endif

        CoglMatrix matrix_cogl,matrix_gl_ode,matrix_result;

        //gl to cogl matrix
        cogl_matrix_init_from_array(&matrix_gl_ode, geoMatrix.Element);
        //取出現在matrix
        cogl_get_modelview_matrix(&matrix_cogl);
        
        cogl_matrix_multiply(&matrix_result, &matrix_cogl, &matrix_gl_ode);
        cogl_set_modelview_matrix(&matrix_result);
    }
    else 
    {
        cogl_translate (mPosition.mx, mPosition.my,  mPosition.mz);

        cogl_rotate (mRotate.mx, 0, 0, 1);
        cogl_rotate (mRotate.my, 0, 1, 0);
        cogl_rotate (mRotate.mz, 1, 0, 0);
    }
    cogl_set_depth_test_enabled (TRUE);

    if(mModelTexture)
        cogl_set_source (mModelTexture);

    cogl_vertex_buffer_draw (mVBO,
                           COGL_VERTICES_MODE_TRIANGLES,
                           0,
                           mDrawPointSize);

    cogl_set_depth_test_enabled (FALSE);

    cogl_pop_matrix ();
}

釋放資源也是很重要的

PuzzleModel::~PuzzleModel()
{
    if(mMesh)
    {
        cogl_vertex_buffer_submit(mVBO);
        delete mMesh;
        mMesh = NULL;
        cogl_vertex_buffer_delete(mVBO,"gl_Vertex");
        cogl_vertex_buffer_delete(mVBO,"gl_Normal");
    }

    if(mModelTexture)
    {
        cogl_vertex_buffer_submit(mVBO);
        cogl_vertex_buffer_delete(mVBO,"gl_MultiTexCoord0");
        cogl_material_ref(mModelTexture);
        mModelTexture = NULL;
    }
}

model的處理到此大部分完成了, 接下來把paint重繪的部分補上

paint繪圖處理

static void cogl_paint_cb (ClutterActor *actor, FrameData *data)
{

    cogl_set_viewport (0, 0, data->mFrameWidth, data->mFrameHeight);
    

    cogl_perspective (60, /* field of view */
                    1, /* aspect ratio */
                    0.1, /* distance to near z plane */
                    100); /* distance to far z plane */

    setup_2d_device_coordinates_modelview (data->mFrameWidth,
                                         data->mFrameHeight);

    cogl_clear (&gWhite, COGL_BUFFER_BIT_COLOR);

    //center
    cogl_translate(gFrameData.mFrameWidth/2, gFrameData.mFrameHeight/2, 0.0f);

    //注意, NearCallback函式關係到物理碰撞時的處理
    dSpaceCollide(mSpace, 0, NearCallback);

    dWorldQuickStep(mWorld, 0.05);

    dJointGroupEmpty(mContactgroup);

    UpdateAllModels();
}

到這一步執行下去應該還是會發現各個puzzle model的碰撞並無效果, 各位應該已經發現到dSpaceCollide的NearCallback尚未處理, 最後一步來看物理body碰撞時的處理

ODE body碰撞處理

static void NearCallback(void *data, dGeomID o1, dGeomID o2)
{
    int i;
    dBodyID b1 = dGeomGetBody(o1);
    dBodyID b2 = dGeomGetBody(o2);

    dContact contact[MAX_CONTACTS];   // up to MAX_CONTACTS contacts per box-box

    for (i = 0; i < MAX_CONTACTS; i++)
    {
        contact[i].surface.mode = dContactBounce | dContactSoftCFM;
        contact[i].surface.mu = dInfinity;
        contact[i].surface.mu2 = 0;
        //表面彈性, 0~1
        contact[i].surface.bounce = 0.5;//0.9;
        //反彈速度
        contact[i].surface.bounce_vel = 0.5;//0.1;
        contact[i].surface.soft_cfm = 0.01;
    }

    if (int numc = dCollide(o1, o2, MAX_CONTACTS, &contact[0].geom, sizeof(dContact)))
    {
        for (i = 0; i < numc; i++)
        {
            dJointID c = dJointCreateContact(mWorld, mContactgroup, contact + i);
            dJointAttach(c, b1, b2);
        }
    }
}

3.後記

由於Cogl尚在開發中, 目前我並沒有在裡面發現有實做類似gluProject以及gluUnProject等函式, 我自己取其轉換矩陣下去計算發現滑鼠點選位置與3d空間會差一個位移, 原因我也不太確定, 導致用滑鼠點不太好讓ODE的raycast準確的打到物件, 後續有在實作再行補上點選拉動部分, 也許Cogl馬上就會有這功能, 或者其實有, 只是我沒發現吧, 另外, 以上程式碼為了只拿出重點部分, 所以是從原來架構精簡搬出來, 大錯誤應該是沒有, 不過可能會有小編譯錯誤, 以上~~

原帖:
http://arkkk.blogspot.com/2011/10/puzzle-game-implementation-using.html

陳綺貞 - 旅行的意義

2011-09-29T17:14:00.001-07:00

Bob Acri - Linda Rose

2011-09-25T23:46:00.001-07:00

Bob Acri - Sleep Away

2011-09-25T23:45:00.001-07:00

Stereoscopic 3D in OpenGL

2011-09-22T07:58:00.000-07:00

近年來Stereoscopic 3D在面板跟多媒體業界(的廠商,不包含使用者XD)間似乎很熱, 而在電腦影像處理中是如何處理多視角的3D影像呢,此篇用OpenGL來實際實作一個簡單的例子....

首先, 在開始前有些基本OpenGL功能必須要清楚, 像是一些基本的幾何知識,以及glFrustum的使用等等...

1.glFrustum

OpenGL API中的glFrustum函式主要負責投影矩陣的處理, 可由圖一看出Camera在3D空間中的投影成像狀況,可以看出是投影的成像是透過一個六面體 , glFrustum負責處理投影成像的矩陣運算,另外,OpenGL程式設計常使用到的gluPerspective是glFrustum的一種常用例子,其六面體是對稱的且前後投影面是平行的(如圖一), 沒有特別需求的話一般可以使用gluPerspective處理即可...

圖一,glFrustum Perspective View

詳細函式可以參考

http://www.opengl.org/sdk/docs/man/xhtml/glFrustum.xml

2.Stereo View的計算

詳細可以參考網址:
http://www.binocularity.org/page26.php
http://www.orthostereo.com/geometryopengl.html

左右眼在空間中的視角上視圖如圖二,實際單眼的視角在空間中會如圖一那樣,也就是說, 只要處理眼睛的移動以及投影的計算, 就可以產生出左右眼的影像.

圖二, 左右眼視角上視圖

實際實做需要注意的重點有幾個地方

.Frustum投影的計算

.平移3D環境的Camera

.重新計算Frustum投影

3.程式實做

從上面參考網址的程式碼來改, 基礎部分省略, 以下列出幾個重點部分

//這個是degrees to radians
#define DTR 0.0174532925

struct camera
{
 GLdouble leftfrustum;
 GLdouble rightfrustum;
 GLdouble bottomfrustum;
 GLdouble topfrustum;
 GLfloat modeltranslation;
} leftCam, rightCam;

double aspect = 1.0;
double nearZ = 0.1;                 //near clipping plane
//畫布(display plane)的z位置, Frustum效果平移的主要基準frame
double screenZ = 600.0;     
//眼(鏡頭)相距距離, 處理時由原點各左右移IOD/2處理左右眼影像, 值需要依狀況做調整, 
//另外, 有paper說最佳值為width的5%或2.5%, 不過沒試過我也不知道效果
double IOD = 5;

以上參數有了, 再來是計算Frustum的參數, 注意雖然不做也沒關係, 不過依照比例下去計算各個投影參數, 出來的形狀比較不會變形太多, frustumshift也依照比例去算

void setFrustum()
{
 double top = nearZ*tan(DTR*fovy/2);                    //sets top of frustum based on fovy and near clipping plane
 double right = aspect*top;                             //sets right of frustum based on aspect ratio
 double frustumshift = (IOD/2)*nearZ/screenZ;

 leftCam.topfrustum = top;
 leftCam.bottomfrustum = -top;
 leftCam.leftfrustum = -right + frustumshift;
 leftCam.rightfrustum = right + frustumshift;
 leftCam.modeltranslation = IOD/2;

 rightCam.topfrustum = top;
 rightCam.bottomfrustum = -top;
 rightCam.leftfrustum = -right - frustumshift;
 rightCam.rightfrustum = right - frustumshift;
 rightCam.modeltranslation = -IOD/2;
}

.處理左右影像繪圖

OpenGL基礎部分省略, 雖然畫幾個簡單幾何圖形表示就可以了, 不過感覺好像z值不夠變化, 所以找個DepthMap影像來畫一畫...

圖三, 材質

圖四, DepthMap

(圖的來源應該是某個學術網站, 臨時忘了網址, 想起來之後會補上)

.簡單依照DepthMap畫出3D模型

畫完了之後可以開始準備處理左右眼影像了...

圖五, 前視圖

圖六, 上視圖

.左右眼影像繪圖處理

GLvoid drawFrustumView(GLvoid)
{
 glDrawBuffer(GL_BACK);                                   //draw into both back buffers
 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);      //clear color and depth buffers

 if(nChangeSideView%2 == 0)
 {
  glDrawBuffer(GL_BACK_LEFT);                              //draw into back left buffer
  glMatrixMode(GL_PROJECTION);
  glLoadIdentity();                                        //reset projection matrix
  glFrustum(leftCam.leftfrustum, leftCam.rightfrustum,     //set left view frustum
   leftCam.bottomfrustum, leftCam.topfrustum,
   nearZ, farZ);
  glTranslatef(leftCam.modeltranslation, 0.0, 0.0);        //translate to cancel parallax
  glMatrixMode(GL_MODELVIEW);
  glLoadIdentity();
  gluLookAt(0, 0, 0,  0, 0, -1*screenZ, 0, 1, 0);
  glPushMatrix();
  {   
   glTranslated(xTranslation,yTranslation,-1*screenZ);//translate to screenplane
   RenderHeightMap(g_HeightMap);
  }
  glPopMatrix();
 }
 else if(nChangeSideView%2 == 1)
 {
  glDrawBuffer(GL_BACK_RIGHT);                             //draw into back right buffer
  glMatrixMode(GL_PROJECTION);
  glLoadIdentity();                                        //reset projection matrix
  glFrustum(rightCam.leftfrustum, rightCam.rightfrustum,   //set left view frustum
     rightCam.bottomfrustum, rightCam.topfrustum,
     nearZ, farZ);
  glTranslatef(rightCam.modeltranslation, 0.0, 0.0);       //translate to cancel parallax
  glMatrixMode(GL_MODELVIEW);
  glLoadIdentity();
  gluLookAt(0, 0, 0,  0, 0, -1*screenZ, 0, 1, 0);
  glPushMatrix();
  {   glTranslated(xTranslation,yTranslation,-1*screenZ);
   RenderHeightMap(g_HeightMap);
  }
  glPopMatrix();
 } 
}

.實作結果

圖七, 左眼影像

圖八, 右眼影像

以上為用OpenGL實做左右眼影像, 如果要用DirectX處理的話, 不很確定作法, 網路大概找了一下, 有可能是

D3DXMATRIX* WINAPI D3DXMatrixLookAtLH ( D3DXMATRIX *pOut, CONST D3DXVECTOR3 *pEye, CONST D3DXVECTOR3 *pAt, CONST D3DXVECTOR3 *pUp )

 // Set up our view matrix. A view matrix can be defined given an eye point,
    // a point to lookat, and a direction for which way is up. Here, we set the
    // eye five units back along the z-axis and up three units, look at the
    // origin, and define "up" to be in the y-direction.
    D3DXVECTOR3 vEyePt( 0.0f, 3.0f,-5.0f );
    D3DXVECTOR3 vLookatPt( 0.0f, 0.0f, 0.0f );
    D3DXVECTOR3 vUpVec( 0.0f, 1.0f, 0.0f );
    D3DXMATRIXA16 matView;
    D3DXMatrixLookAtLH( &matView, &vEyePt, &vLookatPt, &vUpVec );
    g_pd3dDevice->SetTransform( D3DTS_VIEW, &matView );

4.後續

如果要利用左右影像做3D影像, 紅藍記得是alpha兩邊都設0.5, 顏色處理一下, 找個想要讓眼睛焦點對上的地方當對位點對好即可,如果是要處理交錯, 就比較麻煩了, X86上可以用render to texture然後從gpu取貼圖到pc做處理, 或者是比較有效率的直接在shader做處理, 後者在OpenGL ES也可以實作, 前者會比較受限於OpenGL ES實作上有困難(至少我做的時候是那樣....哈).

原帖:
http://arkkk.blogspot.com/2011/09/stereoscopic-3d-in-opengl.html

程式筆記 - 在Blogger中使用SyntaxHighlighter

2011-09-20T23:56:00.000-07:00

SyntaxHighlighter可以解析程式碼,加上行數以及對關鍵字加上顏色處理, 增加程式碼美觀及可讀性.

網址:
http://alexgorbatchev.com/SyntaxHighlighter/

有在部落格貼程式碼的人可以考慮使用, 可以讓程式碼更整齊美觀一點, 下面是有使用跟沒使用的差別...

使用SyntaxHighlighter

class Test : public Parents
{
public:
    Test();
    ~Test();
public:
    int mId;
};
int main()
{
    Test aa;
    return 0;
}

無使用SyntaxHighlighter
class Test : public Parents
{
public:
Test();
~Test();
public:
int mId;
};
int main()
{
Test aa;
return 0;
}

安裝方法:

官方提供了兩種安裝方法, 沒要特別做修改傳到自己空間的可以使用hosted version

1.開啟Blogger設定頁,點選設計->修改HTML

2.找到</head>, 在前面貼上

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

3.找到</body>, 在前面貼上,並存檔跳出設定頁

<script type='text/javascript'>
SyntaxHighlighter.all()
</script>

4.測試,在Blogger文章貼上html

<pre class="brush:cpp">
int main()
{
return 0;
}
</pre>

5.網頁顯示最終結果

int main()
{
return 0;
}

原帖:
http://arkkk.blogspot.com/2011/09/test.html

9/6 周年慶

2011-09-05T20:35:00.001-07:00

滿一年囉

繼續朝目標邁進

林俊傑 - 她說

2011-08-17T08:02:00.001-07:00

她說(She Said)

作詞：孫燕姿
作曲：林俊傑

她靜悄悄地來過她慢慢帶走沉默
只是最後的承諾還是沒有帶走了寂寞
我們愛的沒有錯只是美麗的獨秀太折磨
她說無所謂只要能在夜裡翻來覆去的時候有寄託
等不到天黑煙火不會太完美
回憶燒成灰還是等不到結尾
她曾說的無所謂我怕一天一天被摧毀
等不到天黑不敢凋謝的花蕾
綠葉在跟隨放開刺痛的滋味
今後不再怕天明我想只是害怕清醒

她靜悄悄地來過她慢慢帶走沉默
只是最後的承諾還是沒有帶走了寂寞
我們愛的沒有錯只是美麗的獨秀太折磨
她說無所謂只要能在夜裡翻來覆去的時候有寄託
等不到天黑煙火不會太完美
回憶燒成灰還是等不到結尾
轉載來自 ※Mojim.com　魔鏡歌詞網
她曾說的無所謂我怕一天一天被摧毀
等不到天黑不敢凋謝的花蕾
綠葉在跟隨放開刺痛的滋味
今後不再怕天明我想只是害怕清醒

等不到天黑煙火不會太完美
回憶燒成灰還是等不到結尾
她曾說的無所謂我怕一天一天被摧毀
等不到天黑不敢凋謝的花蕾
綠葉在跟隨放開刺痛的滋味
今後不再怕天明我想只是害怕清醒

不怕天明我想只是害怕清醒

蕭煌奇 - 眷戀

2011-08-15T18:56:00.001-07:00

TOX主題曲

2011-08-02T17:47:00.001-07:00

小茹 - 愛你不是兩三天

2011-07-26T19:42:00.001-07:00

Diana Krall - the boy from Ipanema

2011-07-20T19:18:00.000-07:00