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

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

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

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

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

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

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

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

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

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

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

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

技術 E1 WebGL基礎概念：透過for迴圈探討渲染流程

引言 一直以來，我們在繪圖的時候要不管是用 2D 的 Canvas API 描繪形狀，或是用 3D 的 three.js 的幾何頂點描繪三角形片段，我們都離底層...

技術 E2 WebGL 畫圓範例：變數的傳遞與處理

引言 接下來，我們來介紹如何用頂點著色器和片段著色器渲染圖形，程式碼的部分，只要是 glsl 我都會用截圖的形式。 頂點著色器 在使用著色器時，會用到兩種變數，...