# Computer Graphics
NTNU 計算機圖學
##### [Back to Note Overview](https://reurl.cc/XXeYaE)

{%hackmd @sophie8909/pink_theme %}
###### tags: `CG` `110-1` `CSIE` `選修` `NTNU`
<!-- tag順序 [課程] [系 必選] or [學程 學程名(不含學程的 e.g. 大師創業)][學校] -->
## Score
- 4~6 programming homework: 50%
- 60% score for late
- Homework 1
- deadline: 10/27
- Homework 2:
- deadline: 11/10
- Quizzes: 10%
- 10 quizzes
- Midterm exam: 20%
- ??
- Final project: 15%
- ??
- Attendance: 5%

## Outline
- Overview of graphics hardware and software
- GLSL: vertex buffer objects, coordinate systems, vertex/fragment shaders
- 3D transformation and viewing
- Illumination
- Visibility and Z-buffering
- Texture mapping
- Bump, environment, and projective texture mapping
- Ray tracing basics
- Real-time shadows
- Advanced topics in shader and graphics application

## 00_Hardware

### Raster Graphics System 光柵掃描圖形系統
+ Raster：圖片元素的陣列
+ 基於光柵掃描的電視科技
+ 螢幕包含離散的像素，每個像素都有一小塊顯示區域

### Frame Buffer 影格緩衝區
+ 用於保存像素屬性（顏色、alpha、深度...）的記憶體
+ 影響影格緩衝區的東西
+ Size：螢幕解析度
+ Depth：色階
+ 1 bit/pixel：黑白
+ 8 bits/pixel：256階灰階或調色板索引
+ 24 bits/pixel：1600萬色
+ Speed：更新速率

### Graphic Acceleration（card） 圖形加速卡
### GPU
+ GPUs 為大規模的平行處理器
+ 處理幾何圖形/像素及要顯示在顯示器上的圖像
+ 也可以用於執行運算（via CUDA/OpenGL）
+ 優點
+ 快速的平行浮點數處理
+ 單指令多數據的操作
+ 每次記憶體訪問時的高計算量
+ 劣於
+ 雙精度的計算
+ 分支密集的操作
+ 隨機存取、記憶體密集的操作

### The Rendering Pipeline 渲染管線
+ 整個過程由三個概念階段所組成
+ 每個階段都是一個管線且平行運作著
+ 圖形的效率取決於最慢的階段
+ 從給定的虛擬攝影機和3D物件到生成二維圖像的過程
+ 管線化階段實現了各種核心的圖形渲染演算法
+ 學習目的
+ 對 GPU 設計編程所必需的
+ 了解各種圖形演算法
+ 分析效能瓶頸
+ Host interface: 將資料從 CPU 搬到 GPU
+ Vertex processing: 將頂點從物件轉換到螢幕空間
+ Triangle setup: 光柵化
+ Pixel processing: 像素的顏色
+ Memory interface: 生成最終圖像

## 01_IntroductionGLSL

### OpenGL 簡介
+ OpenGL 的主要功能 - 渲染
+ 渲染是將對於幾何物件的描述傳換為影格緩衝區的參數（convert model to image）
+ model 一個綠色表面的球體、半徑為 3 、中心在(0, 0, 0)、光源在(1, 1, 1)
+ image 

### WebGL
+ OpenGL 以 js 的實作
+ 在網頁環境運行

#### WebGL 的渲染管線
1. Host interface
+ 接收來自 CPU 的指令並從系統記憶體中提取幾何資訊
+ Host interface 是 CPU 和 GPU 之間的橋樑
+ 最後輸出物件空間中的頂點流及其相關資訊（法線、紋理座標、每個頂點的顏色......）
2. Vertex processing
+ 頂點處理階段從物件空間中的主機接口接收頂點並在螢幕空間中輸出他們
+ 有可能是一個簡單的線性轉換或是複雜的操作
+ 法向量位置、紋理座標都會被轉換
+ 在這個階段不會產生出新的頂點，也不會有頂點被捨棄掉（輸出輸入會是 1：1）
3. Triangle setup
+ 在這個階段幾何資訊會變成柵格訊息（輸入螢幕空間的幾何，輸出像素）
+ 在光柵化之前背向或是位於視錐體外的三角形會被擋下來
+ 有些 GPU 也會做一些隱藏的表面去除
+ 每個片段被產出 i.f.f. 它在三角型的中間
+ 每個生成的片段的屬性都由構成三角形的頂點的透視校正插植出來的
4. Fragment processing
+ 上一步驟產出的所有片段都將作為一組輸入片段處理的屬性（位置、法線、紋理、座標等）用於計算此項像素的最終顏色
+ 在這邊的計算包含紋理映射及數學運算
+ 通常是現代應用的瓶頸
5. Memory interface
+ 上一步驟提供的片段顏色會被寫入影格緩衝區
+ 曾經是以前的瓶頸
+ 在最終寫入階段，z-buffer, stencil 和 alpha 測試會擋下一些片段
+ 在現在 GPU 上，z 和顏色被壓縮以減少影格緩衝區的帶寬

### GPU 中的可程式性
+ 頂點及片段處理及現在三角形設定都是可程式的
+ 程式設計師可以為每個頂點或是片段編寫處理的程式
+ 這允許全方位定制化的幾何圖形及陰影效果，使其超越舊 3D 應用程序的外觀及感受

### WebGL 程式設計
+ HTML + Javascript + GLSL
+ HTML：WebGL 在 HTML 上的 canvas 上渲染圖片
+ Javascript：準備 GLSL、用於渲染的資料及使用者介面
+ GLSL：渲染

### Vertex Buffer Object (VBO)
- Buffer to keep the vertices information for drawing
- To use VBO, there are multiple steps
1. Create a buffer: `gl.createBuffer()`
2. Bind(綁定) the buffer
<!-- 沒打完 -->
### "uniform" v.s. "attribute" in Shaders
| | vertex shader | fragment shader | value |
|:-------------:|:-------------:|:---------------:|:---------:|
| **uniform** | O | O | same |
| **attribute** | O | X | different |

## gl function
- `gl.drawArrays(mode, first, count);`
- mode: define the connections between points(make surface)
- first: the starting index in the array of vector points
- 
- `gl.POINTS`
- `gl.LINES`
- `gl.LINE_STRIP`
- `gl.LINE_LOOP`
- `gl.TRIANGLES`
- `gl.TRIANGLE_STRIP`
- `gl.TRIANGLE_FAN`
## Reuse VBO (USE)

<!-- This is the end of the note. -->