2011年11月20日 星期日

2011年8月12日 星期五

擴增實境-運用於數位教學

擴增實境-線上購物服裝

【AR應用】互動式昆蟲卡

【AR應用】互動式人體手術介紹卡片

AR蝴蝶逛花博 Augmented Reality Taipei International Flower EXPO

猜猜看蝴蝶是真的嗎?

建國百年特展-技術創新館

建國百年經建特展秀新科技:小西瓜撥打100專線!與國父3D立體影像通話!

到「技術創新館」玩玩創新技術,見證台灣百年歷史

2011年7月24日 星期日

[ Android 3D Animation (3)] min3d立體方塊Box類別的程式解說

在前一篇文章中我們說明如何利用Box來建立立體方塊,那Box又是什麼呢?我們來追蹤Box程式,首先您可以發現Box是min3d.objectPrimitives套件下的某一類別,Box的父類別就是3D物件的容器Object3dContainer,此類別有4個屬性,如下列所示:
private Color4[] _cols; //儲存顏色
private float _width; //寬度
private float _height; //高度
private float _depth; //深度

以下是Box4個建構子,當Box物件被建立時建構子會被呼叫用來初始化該物件
public Box(float $width, float $height, float $depth, Color4[] $sixColor4s, Boolean $useUvs, Boolean $useNormals, Boolean $useVertexColors)
public Box(float $width, float $height, float $depth, Color4[] $sixColor4s)
public Box(float $width, float $height, float $depth, Color4 color)
public Box(float $width, float $height, float $depth)

該類別內只有1個函式make(),用來建立立體方塊。

以下是Box類別的程式列表:

package min3d.objectPrimitives;

import min3d.Utils;
import min3d.core.Object3dContainer;
import min3d.vos.Color4;


/**
* Note how each 'face' (quad) of the box uses its own set of 4 vertices each,
* rather than sharing with adjacent faces. This allows for each face to be
* texture mapped, normal'ed, and colored independently of the others.
*
* Object origin is center of box.
*/
public class Box extends Object3dContainer
{
private Color4[] _cols;
private float _width;
private float _height;
private float _depth;


public Box(float $width, float $height, float $depth, Color4[] $sixColor4s, Boolean $useUvs, Boolean $useNormals, Boolean $useVertexColors)
{
super(4*6, 2*6, $useUvs,$useNormals,$useVertexColors);

_width = $width;
_height = $height;
_depth = $depth;

if ($sixColor4s != null)
{
_cols = $sixColor4s;
}
else
{
_cols = new Color4[6];
_cols[0] = new Color4(255,0,0,255);
_cols[1] = new Color4(0,255,0,255);
_cols[2] = new Color4(0,0,255,255);
_cols[3] = new Color4(255,255,0,255);
_cols[4] = new Color4(0,255,255,255);
_cols[5] = new Color4(255,0,255,255);
}

make();
}

public Box(float $width, float $height, float $depth, Color4[] $sixColor4s)
{
this($width,$height,$depth, $sixColor4s, true,true,true);
}

public Box(float $width, float $height, float $depth, Color4 color)
{
this($width,$height,$depth, new Color4[] { color, color, color, color, color, color }, true,true,true);
}

public Box(float $width, float $height, float $depth)
{
this($width,$height,$depth, null, true,true,true);
}

private void make()
{
float w = _width / 2f;
float h = _height / 2f;
float d = _depth / 2f;

short ul, ur, lr, ll;

// front
ul = this.vertices().addVertex(-w,+h,+d, 0f,0f, 0,0,1, _cols[0].r,_cols[0].g,_cols[0].b,_cols[0].a);
ur = this.vertices().addVertex(+w,+h,+d, 1f,0f, 0,0,1, _cols[0].r,_cols[0].g,_cols[0].b,_cols[0].a);
lr = this.vertices().addVertex(+w,-h,+d, 1f,1f, 0,0,1, _cols[0].r,_cols[0].g,_cols[0].b,_cols[0].a);
ll = this.vertices().addVertex(-w,-h,+d, 0f,1f, 0,0,1, _cols[0].r,_cols[0].g,_cols[0].b,_cols[0].a);
Utils.addQuad(this, ul,ur,lr,ll);

// right
ul = this.vertices().addVertex(+w,+h,+d, 0f,0f, 1,0,0, _cols[1].r,_cols[1].g,_cols[1].b,_cols[1].a);
ur = this.vertices().addVertex(+w,+h,-d, 1f,0f, 1,0,0, _cols[1].r,_cols[1].g,_cols[1].b,_cols[1].a);
lr = this.vertices().addVertex(+w,-h,-d, 1f,1f, 1,0,0, _cols[1].r,_cols[1].g,_cols[1].b,_cols[1].a);
ll = this.vertices().addVertex(+w,-h,+d, 0f,1f, 1,0,0, _cols[1].r,_cols[1].g,_cols[1].b,_cols[1].a);
Utils.addQuad(this, ul,ur,lr,ll);

// back
ul = this.vertices().addVertex(+w,+h,-d, 0f,0f, 0,0,-1, _cols[2].r,_cols[2].g,_cols[2].b,_cols[2].a);
ur = this.vertices().addVertex(-w,+h,-d, 1f,0f, 0,0,-1, _cols[2].r,_cols[2].g,_cols[2].b,_cols[2].a);
lr = this.vertices().addVertex(-w,-h,-d, 1f,1f, 0,0,-1, _cols[2].r,_cols[2].g,_cols[2].b,_cols[2].a);
ll = this.vertices().addVertex(+w,-h,-d, 0f,1f, 0,0,-1, _cols[2].r,_cols[2].g,_cols[2].b,_cols[2].a);
Utils.addQuad(this, ul,ur,lr,ll);

// left
ul = this.vertices().addVertex(-w,+h,-d, 0f,0f, -1,0,0, _cols[3].r,_cols[3].g,_cols[3].b,_cols[3].a);
ur = this.vertices().addVertex(-w,+h,+d, 1f,0f, -1,0,0, _cols[3].r,_cols[3].g,_cols[3].b,_cols[3].a);
lr = this.vertices().addVertex(-w,-h,+d, 1f,1f, -1,0,0, _cols[3].r,_cols[3].g,_cols[3].b,_cols[3].a);
ll = this.vertices().addVertex(-w,-h,-d, 0f,1f, -1,0,0, _cols[3].r,_cols[3].g,_cols[3].b,_cols[3].a);
Utils.addQuad(this, ul,ur,lr,ll);

// top
ul = this.vertices().addVertex(-w,+h,-d, 0f,0f, 0,1,0, _cols[4].r,_cols[4].g,_cols[4].b,_cols[4].a);
ur = this.vertices().addVertex(+w,+h,-d, 1f,0f, 0,1,0, _cols[4].r,_cols[4].g,_cols[4].b,_cols[4].a);
lr = this.vertices().addVertex(+w,+h,+d, 1f,1f, 0,1,0, _cols[4].r,_cols[4].g,_cols[4].b,_cols[4].a);
ll = this.vertices().addVertex(-w,+h,+d, 0f,1f, 0,1,0, _cols[4].r,_cols[4].g,_cols[4].b,_cols[4].a);
Utils.addQuad(this, ul,ur,lr,ll);

// bottom
ul = this.vertices().addVertex(-w,-h,+d, 0f,0f, 0,-1,0, _cols[5].r,_cols[5].g,_cols[5].b,_cols[5].a);
ur = this.vertices().addVertex(+w,-h,+d, 1f,0f, 0,-1,0, _cols[5].r,_cols[5].g,_cols[5].b,_cols[5].a);
lr = this.vertices().addVertex(+w,-h,-d, 1f,1f, 0,-1,0, _cols[5].r,_cols[5].g,_cols[5].b,_cols[5].a);
ll = this.vertices().addVertex(-w,-h,-d, 0f,1f, 0,-1,0, _cols[5].r,_cols[5].g,_cols[5].b,_cols[5].a);
Utils.addQuad(this, ul,ur,lr,ll);
}
}

[ Android 3D Animation (2)] 利用min3d來建立立體方塊

1. 建立新專案


2. 把min3d套件剪貼到您的專案,如圖中紅色框內的套件


3. 修改BoxOpenGLActivity的程式


4. 執行後的結果

2011年7月23日 星期六

[ Android 3D Animation (1)] 為何要使用min3d來設計3D動畫

由於目前智慧型手機都有不錯的效能,已具備展現3D動畫的能力,而在Android手機上要顯示3D動畫,就必須使用OpenGL ES,有關這部份的教學資料可以參考下列文章

  1. [ Android OpenGL ES 教學(一)] 設定視域
  2. [ Android OpenGL ES 教學(二)] 建立多邊形
  3. [ Android OpenGL ES 教學(三)] 轉換相關方法
  4. [ Android OpenGL ES 教學(四)] 添加顏色
  5. [ Android OpenGL ES 教學(五)] 貼皮技術
  6. [ Android OpenGL ES 教學(六)] 觸控控制


然而這套語言較為複雜,對於要快速進入3D動畫領域的初學者,就顯有點難度,在2010年5月推出min3d
min3d 下載網址: http://code.google.com/p/min3d/

使用OpenGL ES和min3d兩者差異如下:

  1. min3d採用繼承RendererActivity而非一般Android應用程式都是繼承Activity,其實RendererActivity也是繼承Activity,只不過把一些特定繁雜工作把它包裝起來,省去許多不必要的程式碼。
  2. min3d採用場景(Scene)概念簡單明瞭,因此以initScene()updateScene()兩個函式為程式的設計主體,initScene()用來做場景的初始化,因此僅執行一次,而updateScene()則表示每一個新的場景,該函式會不斷地被重複執行。
  3. min3d引入3d物件的概念,利用Object3dContainer類別來當成3d物件的容器,使用在產生新的3d物件就變得容易多了。

以上僅列舉三項基本的差異供社友們參考。

2011年6月24日 星期五

Flash範例(40)

一個以Flash設計的成語故事。
此為學生作品,所以,尊重智慧權,無法提共原始檔。
創作者為,南開科技大學,文化創意與設計系。

Flash範例(39)

一個以Flash設計的成語故事。
此為學生作品,所以,尊重智慧權,無法提共原始檔。
創作者為,南開科技大學,文化創意與設計系。

2011年6月23日 星期四

Flash範例(38)

一個以Flash設計的成語故事。
此為學生作品,所以,尊重智慧權,無法提共原始檔。
創作者為,南開科技大學,文化創意與設計系。

2011年6月12日 星期日

[Blender 基礎教學(24)] 使用線條畸型(Curve Deform)來幫孫悟空整型

1. 開啟新檔
2. 增加孫悟空


3. 按下數字 7

4. 增加Bezier Curve

5. 調整曲線的位置及大小

6.把孫悟空置於曲線上
7. 先選孫悟空再選曲線按下Ctr+P


8. 可以看到孫悟空會依曲線變化
9. 選擇孫悟空切換到編輯模型進成分割作業

10. 在物件模式按下平滑

11. 按下G鍵移動孫悟空


12. 按下F12查看

2011年6月6日 星期一

[Blender 基礎教學(21)] 會跳舞的三顆球

在Blender中有一項很強的功能叫修飾子「Modifiers」,今天我們利用這項功能來讓三顆球跳舞,其步驟如下:
1. 先建立三顆球體。

2. 選擇其中一顆,再選右手邊的「Modifiers」。

3. 加入一個修飾子「Add Modifier」。

4. 選擇「Wave」,並設定屬性值。


5.移動時間視窗「Time」。

2011年6月5日 星期日

[Blender 基礎教學(20)] 烏雲世界的設定

1. 選擇World功能,把Blend選項打勾。

2. 切換到Texture功能,按下新增鈕。

3. 烏雲選項

4. 按下F12查看

2011年6月3日 星期五

[Blender 基礎教學(19)] 光線處理(Lighting)

1. 點選光源

2. 選擇Object Data選項

3. 選擇顏色

4. 按F12輸出

5. 切回3D編輯模式

6. 增光太陽光源

7. 調整位置

8. 再按F12輸出