技術 Day30: WebGL Shader—製作物件的邊框

有時候我們會需要給一個物件邊框。無論是要讓物件在背景中突出、點選物件時有選中的感覺，或是在綠幕上有比較好裁切，物件邊框都能達到我們所需要的需求。 本篇介紹邊框，...

技術 Day28: WebGL Shader—透過Shader製作光暈：光暈原理與多種變化形式

Shader是前端視覺特效的重要戰場，而本篇所介紹的shader，不僅只是說明怎麼辦到，還要解釋期原理，並且帶出我們在鐵人賽一開始所打下的重要基礎。 Shade...

技術 Day27: WebGL Shader—透過Shader製作光暈：Shader傳值的原理

本篇內容 vertexNormal 是什麼？ 兩個Shader之間的傳值方式 WebGLProgram 添加變數的特性 vertexNormal 從哪裡來？...

技術 Day: 25 使用Shader創造漸層

到目前為止，我們都是用three.js製作shader。 但其實three.js並不是唯一的選項，我們的選項其實很多。為了幫助大家順利應用shader在thre...

技術 Day24: WebGL Shader——透過自製環境光實作shader傳值

前一篇我們初步修改Shader，並且介紹GLSL的型別、函式、程式進入點、程式最終任務。 本篇將繼續介紹： 實作即時變化的環境光 實作即時變化的環境光：回顧...

技術 Day23: WebGL Shader——從認識GLSL開始釐清Shader

上一篇，我們用最快的方式，透過shader製作了球體。基本上這個球體就跟MeshBasicMaterial({color: 0x4c99ff})一樣，其球體範圍...