此為 CORS Debug 系列文章 - 第 2 篇：

1. CORS Debug (1) - 網頁快取導致的 CORS 問題
2. CORS Debug (2) - src 與 crossOrigin 在 img 元素中的順序導致 CORS error

簡介

在上一篇文章 - 網頁快取導致的 CORS 問題 中，最終採用了 crossOrigin='anonymous' 這樣的方式解決網頁快取導致的 CORS 錯誤，原本以為這樣已經萬無一失，但沒想到更悲劇的事情發生了 => 在 Safari 瀏覽器有時候會發現網頁上的圖片都不見了

此為 CORS Debug 系列文章 - 第 1 篇：

1. CORS Debug (1) - 網頁快取導致的 CORS 問題
2. CORS Debug (2) - src 與 crossOrigin 在 img 元素中的順序導致 CORS error

簡介

最近做到一個在網頁上展示圖片的功能，簡單來說就是點擊右側的圖片庫，左邊的主畫面可以展示大圖，如下圖所示，這是一個非常簡單的功能，但到最後發現這跟 CORS 有密切的關係，下面我們來一步步探討看看

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

1. Three.js 中物體的遠近關係 (1) - 什麼是深度測試？
2. Three.js 中物體的遠近關係 (2) - 左手/右手座標系與齊次座標
3. Three.js 中物體的遠近關係 (3) - 深度值的計算方式
4. Three.js 中物體的遠近關係 (4) - 對數深度值
5. Three.js 中物體的遠近關係 (5) - 渲染物體的順序

前言

前面幾篇系列文中介紹深度測試運作的原理，而決定畫面上的兩個物體誰遠誰近，除了跟物體之間深度值差異有關，另外也相同重要的是物體間渲染的順序，今天這篇文章就讓我們討論在 Three.js 中是如何根據不同種類的物體決定渲染順序

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

1. Three.js 中物體的遠近關係 (1) - 什麼是深度測試？
2. Three.js 中物體的遠近關係 (2) - 左手/右手座標系與齊次座標
3. Three.js 中物體的遠近關係 (3) - 深度值的計算方式
4. Three.js 中物體的遠近關係 (4) - 對數深度值
5. Three.js 中物體的遠近關係 (5) - 渲染物體的順序

前言

上一篇中我們知道透視投影的深度值 $ z_{depth} $ 和 $ 1/z $ 成正比，如此與人眼感知的狀況相符，對於近處物體的分辨率較高，而遠處物體不容易分辨清楚互相的前後關係，大部分情況下這個深度值的轉換函式可以很好的描述物體的遠近，但如果套用到大尺度的場景，例如：太陽系、宇宙等，這種深度值的轉換函式就會出問題，這篇文章討論會出現哪些問題，以及最後如何使用對數深度值轉換函式解決

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

1. Three.js 中物體的遠近關係 (1) - 什麼是深度測試？
2. Three.js 中物體的遠近關係 (2) - 左手/右手座標系與齊次座標
3. Three.js 中物體的遠近關係 (3) - 深度值的計算方式
4. Three.js 中物體的遠近關係 (4) - 對數深度值
5. Three.js 中物體的遠近關係 (5) - 渲染物體的順序

前言

上一篇提到了所有 像素(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) - 渲染物體的順序

前言

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

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

1. Three.js 中物體的遠近關係 (1) - 什麼是深度測試？
2. Three.js 中物體的遠近關係 (2) - 左手/右手座標系與齊次座標
3. Three.js 中物體的遠近關係 (3) - 深度值的計算方式
4. Three.js 中物體的遠近關係 (4) - 對數深度值
5. Three.js 中物體的遠近關係 (5) - 渲染物體的順序

前言

我想許多人一開始接觸 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

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