技術 [Day4] WebGL 修羅道(1) - 用 100行程式碼畫...一個點

WebGL 修羅道(1) - 用 100行程式碼畫點 前一個章節提到的 Shader，就是負責繪製每個像素的顏色跟位置。跟 canvas 本身的原理很像，我們先...

技術 [Day3] 影像、GPU、webGL

身為一位工程師，我知道各位已經迫不急待想要動手開始寫程式了。先不要急，我們先來了解一下基本的知識吧！ 我們是如何看見影像的 基本上我們是透過用眼睛接受光線的方式...

技術 [Day5] WebGL 修羅道(2) - 資料傳遞

上一篇文章中，我們將 gl_Position 跟 gl_PointSize 等變數寫死在 shader 裡頭，這顯然不是個好方法，光是看到 C/C++ like...

技術 [Day8] webGL 修羅道 - 3D 紋理貼圖

Sampler 在 GSGL 中，有一個特殊的類別是 sampler，負責接收由 Javascript 中傳來的 texture。我們可以將圖像的數據放到一個特...

技術 [Day7] webGL修羅道（4） - 3D 與動畫

[Day7] webGL修羅道 - 3D 與動畫 3D 圖形基礎 在電腦上看到圖形的方式，通常是透過 camera 的概念。可以想像人的眼睛（或螢幕）就是一台相...

技術 [Day6] three.js 前置 webGL 修羅道（3) - 動畫與 varying

[Day6] webGL 修羅道(3) - Animation 與 varying demo 昨天我們介紹完了如何傳遞資料給著色器，並且透過著色器畫了三個點，昨...

技術 Day 1：前端視覺特效做出什麼內容？可以吃嗎？

身為3D網頁視覺特效工程師，深知此坑水深，我自己時常掉入陷阱。因此希望能夠幫助大家往網頁特效邁進。 前端視覺特效可以做什麼？ 很多，最常見的用途是網頁品牌形象、...

技術 [Day9] webGL 修羅道 - 特效實戰及總結

到目前為止，已經介紹了不少 webGL 的 API 以及 GLSL 的使用與撰寫。是時候來寫寫看有趣的特效了，其實在網路上隨便搜尋關鍵字都能看到不少絢爛奪目的...

技術 Day20: three.js 前端3D視覺特效開發實戰——智慧工廠：倒影特效

鏡面特效能夠非常有效的讓畫面更加豐富。不僅讓物件更有真實感，也可以創造出空間感。 上一篇示範過如何做出鏡面反射。而本篇將介紹倒影特效。 上一篇提到鏡面反射的原理...

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

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

技術 Android Curv Gradient 曲線漸層

前言 平常我們使用的漸層方式通常都是在drawable用Xml配置參考或者是在程式中設置Paint的shader參考這樣的文章介紹相信大家都看很多了，並且也挺熟...

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

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

技術 Day22: WebGL Shader—你好啊大哥哥，沒想到你可以到Shader來呢！

Shader是什麼 我們所稱呼的Shader，其實是Fragment Shader以及Vertex Shader的合稱。這兩個出現在Program上，使得我們最...

技術 Android Curv Gradient 曲線漸層2-優化篇

前言 延續前篇Android Curv Gradient 曲線漸層過了一個月...終於改好啦!!!! 效率比較 機型：同樣使用Oppo R17 Pro繪製數量：...

技術 Day9: Three.js 傲慢的太陽——光的開發與矩形區域光原理

圖片來源 艾斯卡諾在正中午最強，就如同three.js的光。你可能會覺得： 圖片來源 我可不是瞎掰喔，聽我解釋。 中午光線最強，就像艾斯卡諾中午最猛，而這是...

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

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

技術 Day29: WebGL Shader—用Shader做全視角內光暈、星球材質

本篇內容 一、全視角的內光暈 二、內光暈在地球的應用 成品 一、全視角的內光暈 前一篇我們完成了具有內光暈的球體。 但是最大的問題，就是當鏡頭轉向時，會...

技術 Day26: WebGL Shader—透過Shader製作光暈：速成篇

下面我將介紹如何透過Shader製作一個光暈。 分三個階段： 用three.js製作Shader材質 在vertex shader加上vertexNormal...

技術 [Day1] 基礎Render Pipeline介紹

在開始學習Shader之前，我們應該先了解一張2D圖片是怎麼從Unity的3D場景被繪製生成，或者說是渲染出來的，也就是Render Pipeline的工作流程...

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

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