此為 Three.js 中物體的遠近關係 系列文章 - 第 3 篇：

1. Three.js 中物體的遠近關係 (1) - 什麼是深度測試？
2. Three.js 中物體的遠近關係 (2) - 左手/右手座標系與齊次座標
3. Three.js 中物體的遠近關係 (3) - 深度值的計算方式
4. Three.js 中物體的遠近關係 (4) - 對數深度值
5. Three.js 中物體的遠近關係 (5) - 渲染物體的順序
6. Three.js 中物體的遠近關係 (6) - 如何正確的渲染透明粒子？
7. Three.js 中物體的遠近關係 (7) - 使用 polygonOffset 動態改變深度值

前言

上一篇提到了所有 像素(fragment) 對應的深度值都會落在 [0, 1] 區間內，0 代表這個 像素(fragment) 離相機最近，而 1 代表離相機最遠。但每個物體與相機之間的距離都不一樣，要如何把這些距離都轉換到深度值的 [0, 1] 區間內呢？這篇文章將討論如何將物體的距離($ z $ 值)轉換成 [0, 1] 區間內的深度值

此為 Three.js 中物體的遠近關係 系列文章 - 第 2 篇：

1. Three.js 中物體的遠近關係 (1) - 什麼是深度測試？
2. Three.js 中物體的遠近關係 (2) - 左手/右手座標系與齊次座標
3. Three.js 中物體的遠近關係 (3) - 深度值的計算方式
4. Three.js 中物體的遠近關係 (4) - 對數深度值
5. Three.js 中物體的遠近關係 (5) - 渲染物體的順序
6. Three.js 中物體的遠近關係 (6) - 如何正確的渲染透明粒子？
7. Three.js 中物體的遠近關係 (7) - 使用 polygonOffset 動態改變深度值

前言

上一篇系列文中，我們了解深度測試中不同 像素(fragment) 是如何藉由比較各自的深度值來決定誰會渲染在畫面上，接著我們將討論深度值在數學上是如何計算出來的，但在那之前需要一些必備的知識幫助我們理解後續的數學推導，所以第二篇的系列文我們來學習這部分 - 左手/右手座標系、齊次座標

此為 Three.js 中物體的遠近關係 系列文章 - 第 1 篇：

1. Three.js 中物體的遠近關係 (1) - 什麼是深度測試？
2. Three.js 中物體的遠近關係 (2) - 左手/右手座標系與齊次座標
3. Three.js 中物體的遠近關係 (3) - 深度值的計算方式
4. Three.js 中物體的遠近關係 (4) - 對數深度值
5. Three.js 中物體的遠近關係 (5) - 渲染物體的順序
6. Three.js 中物體的遠近關係 (6) - 如何正確的渲染透明粒子？
7. Three.js 中物體的遠近關係 (7) - 使用 polygonOffset 動態改變深度值

前言

我想許多人一開始接觸 Three.js 中關於 深度測試(Depth testing) 的時候，常會聽到 depthTest, depthWrite，雖然看過很多文章講解這兩者的差別以及應用場景，但說真的還是無法體會兩者差在哪，於是萌生了研究深度測試的想法。而隨著對於深度測試的了解後才發現深挖的東西越來越多，所以才有了這一系列相關的文章

前言

繼上一篇 使用 Three.js 操作 shader 畫出國旗 後，這一篇文章希望了解 Three.js 裡的 shader 架構

WebGL 裡的 shader 綁定

因為 Three.js 的底層就是 WebGL 所以我們可以先從 WebGL 是如何綁定 shader 來找到 Three.js 中處理 shader 的起始點

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// WebGL 綁定 shader 部分片段

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl'); // WebGL 1.0
// 或
const gl = canvas.getContext('webgl2'); // WebGL 2.0

// 1. 創建 shader
const vertexShader = gl.createShader(gl.VERTEX_SHADER);

// 2. 撰寫 shader code
const vertexShaderSource = `
    attribute vec4 aPosition;
    void main() {
        gl_Position = aPosition;
    }
`;
gl.shaderSource(vertexShader, vertexShaderSource);

gl.compileShader(vertexShader); // 3. 編譯 shader
const shaderProgram = gl.createProgram(); // 4. 創建 program
gl.attachShader(shaderProgram, vertexShader); // 5. 附加 shader 到 program
gl.linkProgram(shaderProgram); // 6. 連接 program
gl.useProgram(shaderProgram); // 7. 使用 program

To 奶奶

前幾天有跟醫生提出拔管的需求了，但拔管後只能在醫院再住五天，之後就必須要回家照顧或轉到護理之家，這附近的護理之家我都問過了都沒有位置要排很久，所以目前會讓爺爺維持現在的狀態先在呼吸病房待著

另外爺爺之後一直臥床的話，一兩個月後八成會有肺部或是尿道的感染，正常來說醫院會使用抗生素治療，但即使暫時治好了，之後感染的狀況一樣會反覆出現，所以我打算簽署拒絕使用抗生素、輸血的同意書，這樣當下次有感染症狀時，爺爺會比較自然地...

- 晚上 7:00

昨天晚上來看爺爺的時候就有跟護士提出安寧拔管的意願，很快今天晚上蔡醫生就來病房跟我們討論後續的狀況，原來安寧拔管並沒有這麼簡單，之前以為拔管後就可以不用再忍受痛苦，很快的就會到天上，但醫生提醒有另一種狀況是拔管完後可能可以自主呼吸，而健保規定拔管後的病人只能繼續在呼吸病房再住五天，五天之後就需要回家或轉介到護理之家，之前完全沒想過還有這種狀況，如果真的要拔管的話，就要把之後有可能要轉介的機構也想好，這樣...

- 早上 11：30

沒想到禮拜天胸腔主治的蔡醫生竟然會出現，我發現他講話很實在直接而且還會用一般人能理解的比喻解釋病況，說明了爺爺目前的狀況如下：

一. 爺爺是多發性腦中風，提到丘腦還有某個腦都受損，把大腦想像成台北捷運系統，爺爺現在壞掉的就是台北車站，所以四肢的運動神經、意識方面都受到影響，就爺爺現...

- 下午 4：00

上週抽到的籤詩還沒有找師傅解，剛好今天是星期六想說解籤師傅應該在了，於是再度去台北府城隍廟，一到那邊先問櫃台的小姐解籤師傅是否有上班，沒想到他認得我上週來過，他說師傅現在正在祭改中，要等晚一點，於是我就先參拜了一輪跟神明們說爺爺目前的最新狀況，上週爺爺人還在加護病房但這週狀況有比較穩定所以下轉到呼吸病房，但目前住院接近一個月，爺爺還是昏迷臥床中，身上插著鼻胃管、氣管這些維生的儀器

拜完後，...

爺爺從上個月 23 號住進醫院，到現在已經過了三個禮拜了，一開始為了呼吸道暢通才插管使用呼吸器，但插管時間久了會傷害到喉嚨、聲帶等，通常醫生不會建議插管超過一個月，如果插太長時間之後也會引起肺部感染

爺爺現在一樣無法睜開眼睛躺在呼吸病房，手腳偶爾會動一下，但醫生說那個是基本上是無意識的肌肉反射，目前三餐是靠著鼻胃管灌食牛奶、營養品等，另外每天擦澡、翻身都需要 24 小時看護照顧

醫生說爺爺因為腦中風的關係之後要清醒的機率很低，就算有機會清醒之後都要臥床了，爺爺目前身上都還插著氣管內管、鼻胃管等，這些維生設備插著都很痛苦，所以我覺得現在對爺爺最好的方式是安...

- 早上 10:00

兩天前加護病房的護士就說爺爺的升壓藥已經停了，隨時做好可以去呼吸病房的準備，剛好今天是加護病房移到新大樓的日子，他們建議今天就把爺爺直接轉到呼吸病房，就不用到時新大樓舊大樓這樣移來移去，十點整我就準時在呼吸病房的外面等，等到大約十點半終於被叫進去，原來他們病房內部自己有電梯，難怪我在外面一直看都沒看到爺爺的病床推進去。

接著護理師做個簡單的環境介紹，然後是看護公司那邊的小老闆拿著契...