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

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

技術 E4 曼德博羅集的分形魔力：用片段著色器實現反鋸齒

引言 昨天我們完成了茱莉亞合集的渲染，能夠根據滑鼠的位置改變常數 C，從而渲染不同的圖形，今天我們將探討另一個經典分形——曼德柏羅集，這個集合將初始值設為 0，...

技術 E3 渲染的奧秘：分形茱莉亞集合的片段著色器藝術

引言 透過前兩天的範例，我們已經理解了頂點著色器和片段著色器的分工模式，頂點著色器負責處理頂點的空間定位，而片段著色器則專注於每個像素的渲染工作。接下來，我們將...

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

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

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

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