俊隆ㄉ計算機圖學筆記 - Week 11 Audio

- OpenGL play sound

#include<windows.h>
#include<mmsystem.h>
PlaySoundA("filename", NULL, SND_ASYNC) // Playe sound, and must use ascii file name.

俊隆ㄉ計算機圖學筆記 - Week 18 期末專題展示

一. 作品名稱：穿越蟲洞

二. Demo 影片網址: https://youtu.be/0fA0iP5g7ss



三. 介紹:
駕駛太空船穿越看不見底的超時空蟲洞，使用滑鼠左右搖擺太空船與產生蟲洞空間變化。

四. 細節:
(1) 使用 WebGL (Three.js、TweenMax)
(2) 超時空蟲洞加速效果、震動
(3) 滑鼠晃動使隧道產生空間變化
(4) 除了機體本身的晃動，蟲洞會影響機體的晃動
(5) 畫面數位雜訊效果
(6) 音效使用

五. References
(1) https://clara.io/view/814322ac-5eec-4828-8b25-a85e8c57d6fe
(2) https://youtu.be/gjc2FC3ekNo
(3) https://tympanus.net/codrops/2017/05/09/infinite-tubes-with-three-js/
(4) https://www.youtube.com/watch?v=oXa3iAj4jVI
(5) https://threejs.org/examples/#webgl_postprocessing_glitch

六、學習共筆: https://hackmd.io/s/B1j4leggM

七、注意事項:
(1) 用FireFox開啟
(2) 請注意音量大小

俊隆ㄉ計算機圖學筆記 - Week 14

- Rasterization
What is Rasterization ?
> 光栅化是将几何数据经过一系列变换后最终转换为像素，从而呈现在显示设备上的过程，光栅化的本质是坐标变换、几何离散化
Using Fragment Shader
size(1000, 1000, P3D);
background(255);
beginShape(TRIANGLE);
 stroke(255, 0, 0);
 vertex(300, 100);
 stroke(255, 255, 0);
 vertex(500, 500);
 stroke(0, 0, 255);
 vertex(100, 500);
 endShape();

利用 GLUT_DEPTH( Z值 ) 分辨前後順序
void setup()
{
  size(600, 600, P3D);
}
void draw()
{
   background(255);
   beginShape(TRIANGLE);
     fill(255, 0, 0);
     vertex(100, 100, 50);
     fill(255, 0, 255);
     vertex(100, 500, 100);
     fill(255, 255, 0);
     vertex(500, 500, 0);
    endShape();
    
     beginShape(TRIANGLE);
       fill(255, 155, 0);
       vertex(150, 100, 0);
       fill(255, 0, 255);
       vertex(100, 500, 100);
       fill(255, 255, 0);
       vertex(500, 500, 0);
     endShape();
}
 

俊隆ㄉ計算機圖學筆記 - Week 8 Texture

- Install OpenCV 2.1 and project settings https://www.youtube.com/watch?v=iu6RI4ns4n8

1. Add folder OpenCV/include to project 's compiler Search Dictories

2. Add folder OpenCV/lib to project 's linker Search Dictories

3. Add open210, highgui210, cxcore210 to project's Linker Settings/ Link liberties.

- OpenCV with GLUT project:

Add code:

#include <opencv/highgui.h>

IplImage * img=cvLoadImage("a.jpg");

    cvNamedWindow("hello");

    cvShowImage("hello", img);

    cvWaitKey(0);

俊隆ㄉ計算機圖學筆記 - Week 7 Shading

/* 各種光源位置 */
const GLfloat light_ambient[]  = { 0.0f, 0.0f, 0.0f, 1.0f };
const GLfloat light_diffuse[]  = { 1.0f, 1.0f, 1.0f, 1.0f };
const GLfloat light_specular[] = { 1.0f, 1.0f, 1.0f, 1.0f };
GLfloat light_position[] = { 2.0f, 5.0f, 5.0f, 0.0f };

/* 各種材質位置 */
const GLfloat mat_ambient[]    = { 0.7f, 0.7f, 0.7f, 1.0f };
const GLfloat mat_diffuse[]    = { 0.8f, 0.8f, 0.8f, 1.0f };
const GLfloat mat_specular[]   = { 1.0f, 1.0f, 1.0f, 1.0f };
const GLfloat high_shininess[] = { 100.0f };

/* 閒置時執行*/
static void idle(void)
{
    printf("light pos = %.4f %.4f\n", light_position[0], light_position[1]);
    glutPostRedisplay();
}
/* 利用滑鼠控制光源 */
void motion(int x, int y)
{
    light_position[0] = -(x - 150)/150.0 *4;
    light_position[1] = -(y - 150)/150.0 *4;
    glLightfv(GL_LIGHT0, GL_POSITION, light_position);
    glutPostRedisplay();
}

- Light reflection need to consider
1. Diffuse
2. Specular
3. Ambient

1. Light Source
2. Normal
3.

俊隆ㄉ計算機圖學筆記 - Week 6 Lighting

- 開啟光源
glEnable(GL_DEPTH_TEST); // 3D深度測試開啟
glEnable(GL_LIGHTING); //根據當前光源計算顏色
glEnable(GL_LIGHT0); //開啟光源i
glLightfv(GL_LIGHT0, GL_POSITION, pos);
glDisable(GL_LIGHTING); //關閉光源
glLightfv()的用法可參考：http://blog.csdn.net/chy19911123/article/details/46413121

- 繼 week 4的 Project setting,
加入
GLfloat pos[] = {0.0, 0.0, -1.0, 0.0}; //Light position
int main(int argc, char**argv)
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);
    glutCreateWindow("week05");
    //light
    glEnable(GL_DEPTH_TEST); 
    glEnable(GL_LIGHTING);
    glEnable(GL_LIGHT0);
    glLightfv(GL_LIGHT0, GL_POSITION, pos);
    //light end
    glutDisplayFunc(display);
    glutMainLoop();
}

- Add Mouse and Keyboard control.
glutMouseFunc(mouse);
glutKeyboardFunc(keyboard);

- 實作鍵盤滑鼠旋轉角度
int rotateX = 0, rotateY = 0, rotateZ = 0;
int oldX = 0, oldY = 0;
void keyboard(unsigned char key, int x, int y)
{
    if(key == '1') rotateX+=1;
    if(key == '2') rotateY+=1;
    if(key == '3') rotateZ+=1;
    glutPostRedisplay();
}
void motion(int x, int y)
{
    rotateY += -(x- oldX);
    rotateX += -(y- oldY);
    glutPostRedisplay();
}
void mouse(int button, int state, int x, int y)
{
    if(state == GLUT_DOWN)
    {
        oldX = x;
        oldY = y;
    }
}

俊隆ㄉ計算機圖學筆記 - Week 5 Viewing

- Matrix math concepts

• Translation

• Rotation

- gluLookAt(), glFrustum(), glOrtho(), glPerspective() 

• gl開頭: 原生 OpenGL 底層函式，而 glu 之開頭函式則是較抽象化。
• 下載程式幫助理解(data, win32, glut32.dll) http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/
• glPerspective() 

角錐投影，四個參數: 

fovy: field of view angle 角度

aspect: 長寬比

zNear: Camera 最近距離

zFar: Camera 最遠距離

• gluLookAt()

三個參數：

eye: Camera 位置的x, y, z

center: Camera 觀看角度

top: Camera's up vector (平面的旋轉) 

• glOrtho()

平行投影

六個參數：

left, right, bottom, top: 投影界線

near: Camera 最近距離

far: Camera 最遠距離

• glFrustum()

六個參數：

left, right, bottom, top:   投影上下左右邊界

near: Camera 最近距離

far: Camera 最遠距離

- Read files from project folder, instead of freeglut lib

Modify the .cbp codeblocks project file with editor, and change working_dir content to "."

俊隆ㄉ計算機圖學筆記 - Week 4

- Before Roatate or Translate a object, having to push matrix to stack, and after this, pop it.
glPushMatrix(), glPopMatrix()
/*
const double t = glutGet(GLUT_ELAPSED_TIME) / 1000.0; //Get ELAPSED_TIME
const double a = t*90.0;
glPushMatrix() //Push current matrix to stack.
glTranslated(-2.4,-1.2,-6); //Move the object, the end 'd' mean 'double' type. glTranslatef() work the same with this.
glRotated(60,1,0,0); //Rotate the object ; argument = (angle, x, y, z) rotate.
glRotated(a,1,0,0); //Add time variable to rotate as time goes.
glScaled(3,3,3); //Scale object
glutWireSphere(1,slices,stacks); //Add object
glPopMatrix(); //Pop current matrix .
*/

- Resize
glFrustum()

- Mouse Control
In main(): glutMouseFunc(mouse) and glutMotionFunc(motion) add function to control with mouse.
And add two fuctions below.
float dx,dy,dz;
int oldX, oldY,oldZ;
void motion(int x, int y)
{
    dx +=(x-oldX)/150.0; //At the previous point, add the displacement.
    dy += -(y-oldY)/150.0;
    oldX = x;
    oldY = y;
    glutPostRedisplay(); //Redraw display.
}
- - -
void mouse(int button, int state, int x, int y)
{
    if(state == GLUT_DOWN) //When mouse down, update oldX, oldY
    {
        oldX = x;
        oldY = y;
    }

}

俊隆ㄉ計算機圖學筆記 - Week 2

- 避免在函式中讀檔，影響效能
- Glut 之讀檔位置在 Glut's lib/bin 資料夾
- glPointSize(10.0f) 每點放大十倍
- Using 3D exploration to export 3D model file as OpenGL code File(Sample App mode), and comment some code to run successfully.


-

俊隆ㄉ計算機圖學筆記 - Week 2

#include <GL/glut.h>
void display()
{
    glClearColor(0,0,1,3);// The background color
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    // Using Double Buffer and Depth Buffer
    glColor3f(1,0,1); // Have three float argument, to change the thing's color
    glBegin(GL_LINE_LOOP);// Begin to draw a polygon, 
    //or using GL_POLYGON to draw a polygon
    glVertex3f(0.5,0,0); // To draw the point, the argument means x,y,z axis
    glVertex3f(0,1,0);
    glVertex3f(1,0,0);
    glVertex3f(3,0,0);
    glVertex3f(3,5,0);
    glEnd(); // End Drawing
    glutSwapBuffers();
}
int main(int argc, char *argv[])
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
    glutCreateWindow("GLUT");
    glutDisplayFunc(display); // Register display function.
    glutMainLoop();
}

俊隆ㄉ計算機圖學筆記 - Week 1

OpenGL

1. 新增 OpenGL Project


2. Run it.

Glut 

1. Add a Glut Project

2. Go to folder freeglut/lib and change the name of libfreeglut.a to libglut32.a

3. Add Glut lib

4. Run