bcjohn's blog

Three.js 中物體的遠近關係 (7) - 使用 polygonOffset 動態改變深度值

發布於: 2025-05-29 更新於: 2025-05-29 分類於: Three.js

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

前言

在第四篇系列文 - 大尺度場景下導致的 z-fighting 中提到當兩個物體的深度值非常接近時，會難以辨別是哪個物體在前、哪個物體在後造成 z-fighting 問題，今天這篇文章則是希望使用 polygonOffset 來改變物體的深度值以解決 z-fighting 的問題

2025-05-15 (四)

發布於: 2025-05-16 更新於: 2025-05-16 分類於: Life

- 早上 11:00

今天中午去看爺爺剛好遇到主治醫生，他說今天照 x 光肺部發炎有改善一點，但抽血報告顯示紅血球、血色素等數值都變低，代表有慢性發炎的狀況，目前生命徵象穩定，但血色素的數值從 8 掉到 7 代表身體免疫力正在下降，之後再有細菌感染的話可能血壓會突然掉下來，他說之前爺爺的狀況就像是在平坦的丘陵上很穩定，但前陣子的肺部感染雖然目前身體自己有壓下來了，但細菌還是存在所以目前就像在經歷緩坡生命力正在慢慢消耗

Three.js 中物體的遠近關係 (6) - 如何正確的渲染透明粒子？

發布於: 2025-05-04 更新於: 2025-05-11 分類於: Three.js

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

前言

前五篇的系列文章讓我們理解 Three.js 中物體的遠近關係是如何決定的，今天這篇文章藉由 Three.js journey - lesson particles 這門課程中渲染粒子系統的範例，學習要怎麼正確的渲染粒子使其前後呈現的順序是正確的

發布於: 2025-04-17 更新於: 2025-05-25 分類於: Javascript

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

簡介

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

CORS Debug (1) - 網頁快取導致的 CORS 問題

發布於: 2025-04-13 更新於: 2025-05-25 分類於: Javascript

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

簡介

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

Three.js 中物體的遠近關係 (5) - 渲染物體的順序

發布於: 2025-03-31 更新於: 2025-05-11 分類於: Three.js

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

前言

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

Three.js 中物體的遠近關係 (4) - 對數深度值

發布於: 2025-03-17 更新於: 2025-05-11 分類於: Three.js

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

前言

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

Three.js 中物體的遠近關係 (3) - 深度值的計算方式

發布於: 2025-02-28 更新於: 2025-05-11 分類於: Three.js

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

前言

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

Three.js 中物體的遠近關係 (2) - 左手/右手座標系與齊次座標

發布於: 2025-02-28 更新於: 2025-05-11 分類於: Three.js

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

前言

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

Three.js 中物體的遠近關係 (1) - 什麼是深度測試？

發布於: 2025-02-13 更新於: 2025-05-11 分類於: Three.js

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

前言

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

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

前言

- 早上 11:00

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

前言

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

簡介

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

簡介

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

前言

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

前言

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

前言

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

前言

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

前言

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

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

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

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

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

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

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