鐵人檔案
探索各種互動感強烈的網頁效果，實際拆解並實作背後的前端視覺技術。系列將從 Vue、GSAP 與瀏覽器 API 開始，逐步探索 Canvas、SVG、p5.js、Matter.js、WebGL、GLSL、WebGPU、Three.js 與 3D 資產整合，記錄不同工具的實作方式、踩坑過程與適用情境。最後將這些實驗整合進個人作品集，打造兼具設計感與互動性的 Modern Web 體驗。
經過鐵人賽的 1/3，我們終於來到 WebGL，可喜可賀！ 如同在 Day 7 稍微提過的，WebGL 是 提供的另一種繪圖環境，也可以把它理解成瀏覽器中的...
昨天我們畫出一個 2D 漸層三角形，走過一次 WebGL 的基本渲染流程：準備頂點資料、把資料放進 Buffer，再交給 Shader 和 GPU 繪製。 今天...
昨天我們用 36 筆頂點組成 12 個三角形，畫出一個 3D 立方體。 看到這裡，你可能會覺得哪利怪怪的?3D 空間中的座標，究竟是如何映射到 2D 的 Can...
在 day11 的文章中我們已經有稍微提過 shader 的概念，今天就延續前兩天的立方體，進一步認識 Shader 的運作方式，並用 GLSL 寫出負責頂點位...
昨天我們認識了 Shader 與 GLSL，也知道 Vertex Shader 負責決定頂點的位置，Fragment Shader 則負責輸出片段最後的顏色。...
昨天我們講解了光影如何改變物體的顏色，但如果想更細緻地討論光影，就必須進一步考慮材質。 今天我們就來看看光滑表面在光線照射下會產生什麼變化——高光與鏡面反射。👉...
這幾天已經被 GLSL 與各種向量計算搞得頭昏眼花，今天就先來輕鬆一下～ 前面畫三角形、立方體時，我們直接在程式裡寫下頂點座標；到了球體，則用迴圈搭配三角函數產...
Day 18｜Three.js（1）基礎認識 昨天的 OBJ Demo 則先借用了 Three.js，幫我們把模型放進網頁。接下來幾天就讓我們來認識 Three...
昨天認識了 Three.js 常見的工具，今天就把場景、相機、材質與光源放在一起，做出一個可以旋轉的漸層立方體。 原本手刻的頂點、矩陣和光照 Shader，這次...
昨天用 Three.js 建立了場景、相機和立方體，也透過光源讓各個面呈現明暗。今天把模型換成球體，試著讓同一顆球呈現金屬、塑膠等不同材質。球體的形狀和顏色都保...
