鐵人檔案
WebGL 不好學，可是使用 WebGL 技術後又好像特別厲害
究竟 WebGL 為什麼不好寫，WebGL 能做到的效果為什麼這麼厲害
系列文將分享自己的學習經驗，討論在學習 WebGL 時會遇到的各種情境
昨天講了輸出黑白畫面，並留了個問題：輸出的畫面如果要是彩色的要怎麼處理? 將三個顏色都寫進去，還要定成不同的值！ vec3 col = vec3(uv.x,...
上色沒什麼問題的話，那來畫圖吧！ 可是fragment shader 沒有像是 drawRect()、drawCircle() 的方法 畫圓 先前提到的，用數...
昨天介紹了畫圓與一些調整的方法今天除了畫方形外，也介紹 Shader 裡一個常用的函式：smoothstep() smoothstep() 的用途是將一個值平...
前兩天討論了畫圖的部分，今天討論加減乘除與遮罩 事前準備 為了方便處理加減乘除，先整理前幾天的程式碼： float Circle(vec2 uv, vec2...
今天討論與使用者滑鼠互動 先前的文章提到， Shadertoy 有內建滑鼠輸入 iMouse： uniform vec4 iMouse; iMouse 是...
延續先前的許多討論後，今天來談談文字 Shader 的實作都相當底層如前幾篇提到的畫圓形與方形，實作上並不容易 讓文字顯示在在畫面上...也不容易！ 昨天的...
接著的幾篇會介紹在 PixiJS、three.js 裡寫 Shader 的方法 PixiJS Filters PixiJS 寫 Shader，主要是透過 fi...
PixiJS 內建一些濾鏡： PIXI.filters - Classes：AlphaFilter、BlurFilter、BlurFilterPass、Col...
看懂 alphaFilter 後，來看另一個 filter： glowFilter glowFilter 與 Photoshop 混和選項的外光暈 / 內光暈...
相較 PixiJS，three.js 應用 Shader 的方式就相當多種 先前的自己，看到程式碼裡有 Shader 時，會覺得"啊，是Shader...
