iT邦幫忙

webgl相關文章
共有 22 則文章
鐵人賽 Modern Web DAY 25
WebGL 與 Three.js 初探 系列 第 25

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

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

鐵人賽 Modern Web DAY 18
WebGL 與 Three.js 初探 系列 第 18

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

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

鐵人賽 Modern Web DAY 13
WebGL 與 Three.js 初探 系列 第 13

技術 [Da13] Three.js API 簡介

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

鐵人賽 Modern Web DAY 10
WebGL 與 Three.js 初探 系列 第 10

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

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

鐵人賽 Modern Web DAY 9
WebGL 與 Three.js 初探 系列 第 9

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

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

鐵人賽 Modern Web DAY 8
WebGL 與 Three.js 初探 系列 第 8

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

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

鐵人賽 Modern Web DAY 7
WebGL 與 Three.js 初探 系列 第 7

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

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

鐵人賽 Modern Web DAY 6
WebGL 與 Three.js 初探 系列 第 6

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

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

鐵人賽 Modern Web DAY 5
WebGL 與 Three.js 初探 系列 第 5

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

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

鐵人賽 Modern Web DAY 4
WebGL 與 Three.js 初探 系列 第 4

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

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

鐵人賽 Modern Web DAY 3
WebGL 與 Three.js 初探 系列 第 3

技術 [Day3] 影像、GPU、webGL

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

鐵人賽 Modern Web DAY 2
WebGL 與 Three.js 初探 系列 第 2

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

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

鐵人賽 app開發 DAY 24
30 天實戰跨平台行動APP 系列 第 24

技術 Day 24 Demo

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

鐵人賽 app開發 DAY 21
30 天實戰跨平台行動APP 系列 第 21

技術 Day 21 地球圖資

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

鐵人賽 app開發 DAY 19
30 天實戰跨平台行動APP 系列 第 19

技術 Day 19 材質貼圖 - 2

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

鐵人賽 app開發 DAY 17
30 天實戰跨平台行動APP 系列 第 17

技術 Day 17 Star Field

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

鐵人賽 app開發 DAY 15
30 天實戰跨平台行動APP 系列 第 15

技術 Day 15 WebGL 球球

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

鐵人賽 app開發 DAY 14
30 天實戰跨平台行動APP 系列 第 14

技術 Day 14 WebGL 星空與地球

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

鐵人賽 app開發 DAY 13
30 天實戰跨平台行動APP 系列 第 13

技術 Day 13 WebGL 3D

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

鐵人賽 app開發 DAY 11
30 天實戰跨平台行動APP 系列 第 11

技術 Day 11 WebGL 顏色

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

鐵人賽 app開發 DAY 10
30 天實戰跨平台行動APP 系列 第 10

技術 Day 10 Web GL Shader介紹

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

鐵人賽 app開發 DAY 9

技術 Day 9 : WebGL初探

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