Day8 - 「面面俱到」 - 幾何結構Geometry(二) 這裡是「Three.js學習日誌」的第8篇，本篇的主旨是要介紹Geometry的概念，還有一些...
圖片來源 艾斯卡諾在正中午最強，就如同three.js的光。你可能會覺得： 圖片來源 我可不是瞎掰喔，聽我解釋。 中午光線最強，就像艾斯卡諾中午最猛，而這是...
Day7 - 「就像在玩摺紙一樣」 - 幾何結構Geometry(一) 這裡是「Three.js學習日誌」的第7篇，本篇的主旨是要介紹Geometry的概念，...
圖片出處 我們都要有矢量（向量）操作能力 只是差別是，我們不需要像一方通行那樣，吸入必要的氧氣防止能力消失，我們學會了就可以操作！ 向量一般來說，是指一個同時...
Day6 - 事前健身操 - 顏色/動畫循環/群組 這裡是「Three.js學習日誌」的第6篇，本篇的主旨是要介紹一些在Three.js中，一些常用的基礎操作...
Day5 - 事前健身操 - 向量與形變 這裡是「Three.js學習日誌」的第5篇，本篇的主旨是要介紹一些在Three.js中，一些常用的基礎操作，這系列的...
這裡是「Three.js學習日誌」的第4篇，本篇的主旨是透過試做一個Three.js的Hello World案例，來讓讀者對於Three.js有基本的認識，這...
Day3 - 進入Three.js的領域 這裡是「Three.js學習日誌」的第3篇，本篇的主旨是透過試做一個Three.js的Hello World案例，來...
Day2 - 從webGL的基礎開始?(二) 這裡是「Three.js學習日誌」的第2篇，本篇的主旨是藉由描述一些簡單的webGL基礎，來做為引導three....
剛開始學前端視覺特效經常是這樣： 在開始Three.js之前，得先解釋清楚三者關係。接下來我也會不斷解釋三者關聯。 三者關係 Three.js 上層的API...
Day1 - 從webGL的基礎開始?(一) 這裡是「Three.js學習日誌」的第1篇，本篇的主旨是藉由描述一些簡單的webGL基礎，來做為引導three....
Day0 - 為什麼想要寫這個主題? 這裡是「Three.js學習日誌」的第0篇，本篇的主旨在於講述本次參賽的想法 心理的嚮往 四年前我剛成為前端工程師的時...
身為3D網頁視覺特效工程師，深知此坑水深，我自己時常掉入陷阱。因此希望能夠幫助大家往網頁特效邁進。 前端視覺特效可以做什麼？ 很多，最常見的用途是網頁品牌形象、...
隨著 VR 的技術越來越進步，VR 的應用已經逐漸融入我們的生活中，像是不久前 google 推出的 CardBoard，HTC 的HTC Vive、Oculu...
愷開
‧
2017-01-08
到目前為止，我們已經有了基礎了 three.js 知識，現在就讓我們一起來實作一些有用的效果吧！ three.js 能實作的特效非常多樣，隨便在網路上或是 c...
愷開
‧
2017-01-01
[Day12] webGL 框架 - Three.js 簡介 three.js 是一個非常強大的 webGL 函式庫，將很多功能都封裝成了一個個物件，主要透過繼...
愷開
‧
2016-12-27
雖然 three.js 幫我們簡化了許多複雜的工作，可以很快地用簡單 API 的方式馬上畫出圖形。不過我們仍然要介紹一下背後的原理，之後操作起來才會得心應手。...
愷開
‧
2016-12-24
到目前為止，已經介紹了不少 webGL 的 API 以及 GLSL 的使用與撰寫。是時候來寫寫看有趣的特效了，其實在網路上隨便搜尋關鍵字都能看到不少絢爛奪目的...
愷開
‧
2016-12-23
Sampler 在 GSGL 中，有一個特殊的類別是 sampler，負責接收由 Javascript 中傳來的 texture。我們可以將圖像的數據放到一個特...
愷開
‧
2016-12-22
[Day7] webGL修羅道 - 3D 與動畫 3D 圖形基礎 在電腦上看到圖形的方式，通常是透過 camera 的概念。可以想像人的眼睛（或螢幕）就是一台相...
愷開
‧
2016-12-21
[Day6] webGL 修羅道(3) - Animation 與 varying demo 昨天我們介紹完了如何傳遞資料給著色器，並且透過著色器畫了三個點，昨...
愷開
‧
2016-12-20
上一篇文章中，我們將 gl_Position 跟 gl_PointSize 等變數寫死在 shader 裡頭，這顯然不是個好方法，光是看到 C/C++ like...
愷開
‧
2016-12-19
WebGL 修羅道(1) - 用 100行程式碼畫點 前一個章節提到的 Shader，就是負責繪製每個像素的顏色跟位置。跟 canvas 本身的原理很像，我們先...
愷開
‧
2016-12-18
身為一位工程師，我知道各位已經迫不急待想要動手開始寫程式了。先不要急，我們先來了解一下基本的知識吧！ 我們是如何看見影像的 基本上我們是透過用眼睛接受光線的方式...
愷開
‧
2016-12-17
為什麼是 webGL 我知道，es6 語法簡介的迷人、react 的火紅、webpack...框架不斷竄出，從今年的鐵人幫大賽就看得出來。 不過，前端的可能性絕...
愷開
‧
2016-12-16
先直接看成果 以上為展示影片，既然說是webgl了，當然可以直接用瀏覽器連 測試網址 但是如果有碰到瀏覽器不支援就先抱歉了，因為我還沒處理到這塊。 今天的工作...
今天想想昨天可能找錯方向了，GIS資料應該是用來顯示特殊的資訊，例如湖泊港口的位置，國家的邊界等。 但是我想要的是地球的材質效果。所以換個方向找馬上就找到了ce...
昨天我們加入材質貼圖後，原本只是很多個平行螢幕的正方形，變成以下樣子： 是不是很不錯呢？ 只是這裡面的星星只有一種！有點單調，所以我另外找了幾種星星的圖片...
今天來做星空。 我們要怎麼做星星的效果呢？首先想到的就是使用星空的貼圖，貼一整片在背景對吧！ 但是這樣子做有個缺點，那就是星空永遠是固定的。我希望做到的星空是亂...
昨天已經將球上一點參數化了，就是 x = R * sin(theta) * cos(alpha) y = R * sin (-pi/2 + theta) z =...
Mizok
伍瑪斯
cwchang886
iThome鐵人賽
看影片追技術