鐵人檔案
本系列利用30天介紹前端視覺特效開發，幫助大家學習webGL，並且專注在視覺特效方面。
視覺特效開發需要多個角色以及工具完成，本篇以Three.js為主軸，觸及WebGL, Shader, SVG, Maya, Yoka等等，提供工程師在開發視覺特效時所需要的工具，藉此更熟悉前端視覺特效的應用。
本篇將透過鏡頭追蹤實作，使得我們能夠建立一個第三人稱是角，捕捉拓海的蹤影。 鏡頭追蹤與飄移基本上綜合前面好幾篇多種原理組成。 鏡頭是網頁特效中重要的戰場。網頁由...
Shader是什麼 我們所稱呼的Shader，其實是Fragment Shader以及Vertex Shader的合稱。這兩個出現在Program上，使得我們最...
上一篇，我們用最快的方式，透過shader製作了球體。基本上這個球體就跟MeshBasicMaterial({color: 0x4c99ff})一樣，其球體範圍...
前一篇我們初步修改Shader，並且介紹GLSL的型別、函式、程式進入點、程式最終任務。 本篇將繼續介紹： 實作即時變化的環境光 實作即時變化的環境光：回顧...
到目前為止，我們都是用three.js製作shader。 但其實three.js並不是唯一的選項，我們的選項其實很多。為了幫助大家順利應用shader在thre...
下面我將介紹如何透過Shader製作一個光暈。 分三個階段： 用three.js製作Shader材質 在vertex shader加上vertexNormal...
本篇內容 vertexNormal 是什麼？ 兩個Shader之間的傳值方式 WebGLProgram 添加變數的特性 vertexNormal 從哪裡來？...
Shader是前端視覺特效的重要戰場，而本篇所介紹的shader，不僅只是說明怎麼辦到，還要解釋期原理，並且帶出我們在鐵人賽一開始所打下的重要基礎。 Shade...
本篇內容 一、全視角的內光暈 二、內光暈在地球的應用 成品 一、全視角的內光暈 前一篇我們完成了具有內光暈的球體。 但是最大的問題，就是當鏡頭轉向時，會...
有時候我們會需要給一個物件邊框。無論是要讓物件在背景中突出、點選物件時有選中的感覺，或是在綠幕上有比較好裁切，物件邊框都能達到我們所需要的需求。 本篇介紹邊框，...
