iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 18027 瀏覽

鐵人賽 Modern Web DAY 13

WebGL 與 Three.js 初探系列第 13 篇

技術 [Da13] Three.js API 簡介

[Day12] webGL 框架 - Three.js 簡介 three.js 是一個非常強大的 webGL 函式庫，將很多功能都封裝成了一個個物件，主要透過繼...

愷開 ‧ 2016-12-27

3 Like 0 留言 14643 瀏覽

鐵人賽 Modern Web DAY 2

WebGL 與 Three.js 初探系列第 2 篇

技術 [Day2] 為什麼是 webGL 與 Three.js？

為什麼是 webGL 我知道，es6 語法簡介的迷人、react 的火紅、webpack...框架不斷竄出，從今年的鐵人幫大賽就看得出來。不過，前端的可能性絕...

愷開 ‧ 2016-12-16

1 Like 0 留言 10564 瀏覽

鐵人賽 app開發 DAY 9

30 天實戰跨平台行動APP 系列第 9 篇

技術 Day 9 : WebGL初探

截至目前為止，我們已經完成了用FB登入機制達成的使用者系統了解了怎麼使用Graph API取得FB資料現在就是要把這些資料呈現在3D的地球上了！我們...

cwchang886 ‧ 2014-10-08

1 Like 1 留言 9650 瀏覽

鐵人賽 Modern Web DAY 4

WebGL 與 Three.js 初探系列第 4 篇

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

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

愷開 ‧ 2016-12-18

0 Like 0 留言 8995 瀏覽

鐵人賽 Modern Web DAY 3

WebGL 與 Three.js 初探系列第 3 篇

技術 [Day3] 影像、GPU、webGL

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

愷開 ‧ 2016-12-17

0 Like 0 留言 8444 瀏覽

鐵人賽 Modern Web DAY 10

WebGL 與 Three.js 初探系列第 10 篇

技術 [Day10] 寫在 Three.js 之前 - 投影基礎

雖然 three.js 幫我們簡化了許多複雜的工作，可以很快地用簡單 API 的方式馬上畫出圖形。不過我們仍然要介紹一下背後的原理，之後操作起來才會得心應手。...

愷開 ‧ 2016-12-24

0 Like 0 留言 7444 瀏覽

鐵人賽 app開發 DAY 10

30 天實戰跨平台行動APP 系列第 10 篇

技術 Day 10 Web GL Shader介紹

經過昨天一番折騰，做了WebGL第一個範例，是不是覺得非常的麻煩呢。雖然過去也有過寫shader的經驗，但是那是為了要達成一些特殊效果。但OpenGL ES...

cwchang886 ‧ 2014-10-09

1 Like 0 留言 6674 瀏覽

鐵人賽 Modern Web DAY 5

WebGL 與 Three.js 初探系列第 5 篇

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

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

愷開 ‧ 2016-12-19

0 Like 0 留言 5519 瀏覽

鐵人賽 Modern Web DAY 8

WebGL 與 Three.js 初探系列第 8 篇

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

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

愷開 ‧ 2016-12-22

0 Like 0 留言 5477 瀏覽

鐵人賽 Modern Web DAY 7

WebGL 與 Three.js 初探系列第 7 篇

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

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

愷開 ‧ 2016-12-21

0 Like 1 留言 5357 瀏覽

鐵人賽 Modern Web DAY 6

WebGL 與 Three.js 初探系列第 6 篇

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

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

愷開 ‧ 2016-12-20

0 Like 0 留言 5332 瀏覽

鐵人賽 Modern Web DAY 18

WebGL 與 Three.js 初探系列第 18 篇

技術 [Day18] Three.js 實戰(1) - 全景圖實作

到目前為止，我們已經有了基礎了 three.js 知識，現在就讓我們一起來實作一些有用的效果吧！ three.js 能實作的特效非常多樣，隨便在網路上或是 c...

愷開 ‧ 2017-01-01

1 Like 1 留言 4878 瀏覽

鐵人賽 Modern Web DAY 30

Three.js 學習日誌系列第 30 篇

技術 Day29 - 跟著甜甜圈大師~ 使用three.js + blender 一起製造甜甜圈 (二)

Day29 - 跟著甜甜圈大師~ 使用three.js + blender 一起製造甜甜圈這裡是「Three.js學習日誌」的第29篇，這篇主要在講解如何把...

Mizok ‧ 2022-10-15

1 Like 0 留言 4255 瀏覽

鐵人賽 Modern Web DAY 25

WebGL 與 Three.js 初探系列第 25 篇

技術 [Day25] webVR 中的 jquery - aframe.js introduction

隨著 VR 的技術越來越進步，VR 的應用已經逐漸融入我們的生活中，像是不久前 google 推出的 CardBoard，HTC 的HTC Vive、Oculu...

愷開 ‧ 2017-01-08

2 Like 0 留言 4080 瀏覽

鐵人賽 Software Development DAY 1

30天成為鍵盤麥可貝：前端視覺特效開發實戰系列第 1 篇

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

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

伍瑪斯 ‧ 2022-09-16

1 Like 0 留言 3965 瀏覽

鐵人賽 Modern Web DAY 9

WebGL 與 Three.js 初探系列第 9 篇

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

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

愷開 ‧ 2016-12-23

0 Like 0 留言 3077 瀏覽

鐵人賽 Software Development DAY 2

30天成為鍵盤麥可貝：前端視覺特效開發實戰系列第 2 篇

技術 Day2: ThreeJS、OpenGL、WebGL：誰是誰？我要怎麼開始？

剛開始學前端視覺特效經常是這樣：在開始Three.js之前，得先解釋清楚三者關係。接下來我也會不斷解釋三者關聯。三者關係 Three.js 上層的API...

伍瑪斯 ‧ 2022-09-17

0 Like 0 留言 2953 瀏覽

鐵人賽 app開發 DAY 19

30 天實戰跨平台行動APP 系列第 19 篇

技術 Day 19 材質貼圖 - 2

昨天我們加入材質貼圖後，原本只是很多個平行螢幕的正方形，變成以下樣子：是不是很不錯呢？只是這裡面的星星只有一種！有點單調，所以我另外找了幾種星星的圖片...

cwchang886 ‧ 2014-10-18

0 Like 0 留言 2920 瀏覽

鐵人賽 app開發 DAY 13

30 天實戰跨平台行動APP 系列第 13 篇

技術 Day 13 WebGL 3D

到目前為止我們都只處理2D的成像，今天進入3D的世界。其實呢，如果我們把電腦螢幕，當成觀測我們虛擬世界的一個窗口(跟xy平面平行，xy值都落在正負一之間)，之...

cwchang886 ‧ 2014-10-12

0 Like 0 留言 2680 瀏覽

鐵人賽 app開發 DAY 11

30 天實戰跨平台行動APP 系列第 11 篇

技術 Day 11 WebGL 顏色

回到Day 9的例子我們想辦法來加些變化，首先是幫三角形上色因為WebGL中的幾何圖形都是由vertex組成的，所以就是要幫每個頂點增加顏色的屬性，又從...

cwchang886 ‧ 2014-10-10

1 Like 0 留言 2527 瀏覽

鐵人賽 app開發 DAY 14

30 天實戰跨平台行動APP 系列第 14 篇

技術 Day 14 WebGL 星空與地球

經過了第13天，我們也了解WebGL的大致繪圖機制，也了解怎麼3D繪圖了，今天我們就要來畫一個3D地球（總算）我們現在已經了解了，在電腦圖學的世界裡，不管什麼...

cwchang886 ‧ 2014-10-13

0 Like 0 留言 2132 瀏覽

鐵人賽 app開發 DAY 24

30 天實戰跨平台行動APP 系列第 24 篇

技術 Day 24 Demo

先直接看成果以上為展示影片，既然說是webgl了，當然可以直接用瀏覽器連測試網址但是如果有碰到瀏覽器不支援就先抱歉了，因為我還沒處理到這塊。今天的工作...

cwchang886 ‧ 2014-10-23

0 Like 0 留言 1896 瀏覽

鐵人賽 app開發 DAY 15

30 天實戰跨平台行動APP 系列第 15 篇

技術 Day 15 WebGL 球球

昨天已經將球上一點參數化了，就是 x = R * sin(theta) * cos(alpha) y = R * sin (-pi/2 + theta) z =...

cwchang886 ‧ 2014-10-14

0 Like 0 留言 1865 瀏覽

鐵人賽 Software Development DAY 20

30天成為鍵盤麥可貝：前端視覺特效開發實戰系列第 20 篇

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

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

伍瑪斯 ‧ 2022-10-05

0 Like 0 留言 1795 瀏覽

鐵人賽 Modern Web DAY 2

Three.js 學習日誌系列第 2 篇

技術 Day1 - 從webGL的基礎開始?(一)

Day1 - 從webGL的基礎開始?(一) 這裡是「Three.js學習日誌」的第1篇，本篇的主旨是藉由描述一些簡單的webGL基礎，來做為引導three....

Mizok ‧ 2022-09-17

0 Like 0 留言 1656 瀏覽

鐵人賽 app開發 DAY 17

30 天實戰跨平台行動APP 系列第 17 篇

技術 Day 17 Star Field

今天來做星空。我們要怎麼做星星的效果呢？首先想到的就是使用星空的貼圖，貼一整片在背景對吧！但是這樣子做有個缺點，那就是星空永遠是固定的。我希望做到的星空是亂...

cwchang886 ‧ 2014-10-16

0 Like 0 留言 1623 瀏覽

鐵人賽 Modern Web DAY 29

Three.js 學習日誌系列第 29 篇

技術 Day28 - 跟著甜甜圈大師~ 使用three.js + blender 一起製造甜甜圈

Day28 - 跟著甜甜圈大師~ 使用three.js + blender 一起製造甜甜圈這裡是「Three.js學習日誌」的第27篇，這篇主要在講解如何把...

Mizok ‧ 2022-10-14

0 Like 0 留言 1611 瀏覽

鐵人賽 Software Development DAY 7

30天成為鍵盤麥可貝：前端視覺特效開發實戰系列第 7 篇

技術 Day7: three.js的一方通行：矢量操作——全面釐清向量與底層特性

圖片出處我們都要有矢量（向量）操作能力只是差別是，我們不需要像一方通行那樣，吸入必要的氧氣防止能力消失，我們學會了就可以操作！向量一般來說，是指一個同時...

伍瑪斯 ‧ 2022-09-22

0 Like 0 留言 1571 瀏覽

鐵人賽 app開發 DAY 21

30 天實戰跨平台行動APP 系列第 21 篇

技術 Day 21 地球圖資

今天想想昨天可能找錯方向了，GIS資料應該是用來顯示特殊的資訊，例如湖泊港口的位置，國家的邊界等。但是我想要的是地球的材質效果。所以換個方向找馬上就找到了ce...

cwchang886 ‧ 2014-10-20

0 Like 0 留言 1551 瀏覽