摘要：在文末，我會(huì)附上一個(gè)可加載的模型方便學(xué)習(xí)中文藝術(shù)字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。

WebGL 可以說(shuō)是 HTML5 技術(shù)生態(tài)鏈中最為令人振奮的標(biāo)準(zhǔn)之一，它把 Web 帶入了 3D 的時(shí)代。

先通過(guò)幾個(gè)使用 WebGL 的網(wǎng)站來(lái)認(rèn)識(shí)下 WebGL 的魅力吧~

溫馨提示：瀏覽以下網(wǎng)頁(yè)需要瀏覽器支持 WebGL 功能。:)

20 個(gè)讓人驚艷的運(yùn)用 WebGL 的例子

http://stars.chromeexperiment...

http://www.nowyouseeme.movie

http://webglsamples.org/

WebGL 技術(shù)儲(chǔ)備指南

本文的預(yù)期讀者是：不熟悉圖形學(xué)，熟悉前端，希望了解或系統(tǒng)學(xué)習(xí) WebGL 的同學(xué)。
本文不是 WebGL 的概述性文章，也不是完整詳細(xì)的 WebGL 教程。本文只希望成為一篇供 WebGL 初學(xué)者使用的提綱。

WebGL 初探

用更專業(yè)的描述講，WebGL (Web Graphics Library) 是一個(gè)用以渲染交互式 3D 和 2D 圖形的無(wú)需插件且兼容下一代瀏覽器的 JavaScript API，通過(guò) HTML5 中  元素實(shí)現(xiàn)功能。WebGL 是由 Khronos Group 集團(tuán)制定，而非 W3C 組織。目前，我們可以使用的是 WebGL 第一個(gè)版本，它繼承自 OpenGL ES 2.0 。而 OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL 三維圖形 API 的子集，針對(duì)手機(jī)、PDA 和游戲主機(jī)等嵌入式設(shè)備而設(shè)計(jì)。

WebGL 繪制三角形

本篇章將講解如何使用 WebGL 繪制三角形，因?yàn)楹芏?3D 圖形都是使用三角形為基礎(chǔ)進(jìn)行渲染的，所以有些對(duì) GPU 性能指標(biāo)的評(píng)價(jià)就是渲染三角形的能力。

WebGL 與 THREE 入門 Lesson1：計(jì)算圖形成像原理簡(jiǎn)介

這篇文章我們將簡(jiǎn)單講一下成像原理，以及附上的GPU繪制流水線。這個(gè)成像原理到繪制流水線的中間過(guò)渡可能有點(diǎn)跳躍。我當(dāng)初學(xué)習(xí)的時(shí)候就在這里卡住了。因?yàn)閷W(xué)習(xí)過(guò)程中沒(méi)有理解記錄下來(lái)這個(gè)過(guò)程，所以現(xiàn)在沒(méi)有辦法還原自己的想法和大家分享，也沒(méi)法給大家一些啟示。所以隨時(shí)隨地記錄下自己的想法真的很重要啊！！雖然可能不準(zhǔn)確但是很真實(shí)啊！

webgl 開(kāi)發(fā)第一道坎：矩陣與坐標(biāo)變換

一、齊次坐標(biāo)
二、矩陣迷宮
三、模型矩陣與模型視圖矩陣
四、透視矩陣
五、屏幕坐標(biāo)變換

JavaScript Canvas——“WebGL”的注意要點(diǎn)

Three.js中文文檔

Three.js是一個(gè)在瀏覽器中使用WebGL創(chuàng)建3D變得容易的庫(kù)。當(dāng)你想創(chuàng)建一個(gè)立方體的時(shí)候，使用原生WebGL來(lái)創(chuàng)建，需要寫數(shù)百行JavaScript代碼，如果使用Three.js只需要幾行代碼就可以完成。

Three.js學(xué)習(xí)筆記

一個(gè)典型的Three.js程序至少要包括渲染器（Renderer）、場(chǎng)景（Scene）、照相機(jī)（Camera），以及你在場(chǎng)景中創(chuàng)建的物體。

我的世界：一個(gè)村落（其一）

本文是一篇three.js的入門文章，將介紹three.js的一些基本概念，并一步步搭建一個(gè)簡(jiǎn)單的場(chǎng)景模型：

我的世界：一個(gè)村落（其二）

現(xiàn)在我們對(duì)three.js的基本元素與如何用three.js搭建場(chǎng)景有了一定的了解后，本篇我們開(kāi)始搭建村落中山坡，房屋等對(duì)象。

threejs構(gòu)建web三維視圖入門教程

本文是一篇簡(jiǎn)單的webGL+threejs構(gòu)建web三維視圖的入門教程，你可以了解到利用threejs創(chuàng)建簡(jiǎn)單的三維圖形，并且控制圖形運(yùn)動(dòng)。

一、創(chuàng)建場(chǎng)景
二、繪制圖形

三、創(chuàng)建3d對(duì)象

創(chuàng)建一個(gè)自己的對(duì)象
外部導(dǎo)入.obj文件



四、動(dòng)畫

基本的動(dòng)畫
對(duì)動(dòng)畫進(jìn)行控制

threejs 繪制地球、飛機(jī)、軌跡

首先我們來(lái)看下要實(shí)現(xiàn)的效果：

Three.js 入門：如何使用并繪制基礎(chǔ) 3D 圖形

在以上內(nèi)容中，只寫到了 Three.js 中提供的基礎(chǔ)功能，還有很多高級(jí)的功能需要大家去探索。希望大家看完這篇文章后能對(duì) Three.js 有一個(gè)初步的了解，并能夠使用 Three.js 繪制出基礎(chǔ)的 3D 圖形。

H5實(shí)例教學(xué)--3D全景(ThreeJs全景Demo)

在現(xiàn)在市面上很多全景H5的環(huán)境下，要實(shí)現(xiàn)全景的方式有很多，可以用css3直接構(gòu)建也可以用基于threeJs的庫(kù)來(lái)實(shí)現(xiàn)，還有很多別的制作全景的軟件使用。本教學(xué)適用于未開(kāi)發(fā)過(guò)3D全景的工程獅。

ThreeJS中的點(diǎn)擊與交互——Raycaster的用法

我們的手機(jī)屏幕是二維的，但是我們展示物體的世界是三維的，當(dāng)我們?cè)跇?gòu)建一個(gè)物體的時(shí)候我們是以一個(gè)三維世界既是世界坐標(biāo)來(lái)構(gòu)建，而轉(zhuǎn)化為屏幕坐標(biāo)展示在我們眼前，則需要經(jīng)歷多道矩陣變化，中間webGL替我們操作了許多事情。

高仿騰訊QQ Xplan（X計(jì)劃）的H5頁(yè)面（1）：threejs創(chuàng)建地球

這個(gè)h5的主要玩法很簡(jiǎn)單：地球自轉(zhuǎn)的時(shí)候會(huì)播放背景音樂(lè)（比如海浪聲），為了找到這個(gè)聲音是從哪個(gè)地球上哪個(gè)地方傳來(lái)的，需要長(zhǎng)按下方的按鈕，這時(shí)地球會(huì)自動(dòng)轉(zhuǎn)動(dòng)到目標(biāo)地點(diǎn)，然后鏡頭拉近，穿過(guò)云層，最后你會(huì)看到和這段聲音相關(guān)的視頻內(nèi)容；松開(kāi)手之后，上面的過(guò)程會(huì)倒退回去，地球又開(kāi)始自轉(zhuǎn)，播放著下段神秘的背景音樂(lè)。

Threejs 開(kāi)發(fā) 3D 地圖實(shí)踐總結(jié)

前段時(shí)間連續(xù)上了一個(gè)月班，加班加點(diǎn)完成了一個(gè)3D攻堅(jiān)項(xiàng)目。也算是由傳統(tǒng)web轉(zhuǎn)型到webgl圖形學(xué)開(kāi)發(fā)中，坑不少，做了一下總結(jié)分享。

1、法向量問(wèn)題
2、光源與面塊顏色
3、POI標(biāo)注
4、點(diǎn)擊拾取問(wèn)題
5、性能優(yōu)化
6、面點(diǎn)擊移動(dòng)到屏幕中央
7、2/3D切換
8、3D中地理級(jí)別
9、poi碰撞

A-Frame.js 學(xué)習(xí)&文檔翻譯（一）實(shí)體

A-Frame是Mozilla 開(kāi)源 web 虛擬現(xiàn)實(shí)框架，他能夠非常方便的創(chuàng)建VR視口，載入部分格式的模型，設(shè)置照相機(jī)等，這為對(duì)計(jì)算機(jī)圖形學(xué)不是很了解的同學(xué)，減輕了好多負(fù)擔(dān)。我分別用了threeJS和A-Frame.js做了兩個(gè)小項(xiàng)目，全英文文檔看的好累，就順便翻譯了部分文檔，之后會(huì)分享threeJS與模型導(dǎo)出與加載的一些坑。

簡(jiǎn)單一招搞定 three.js 屏幕適配

做過(guò)手機(jī) H5 的同學(xué)可能會(huì)覺(jué)得屏幕適配挺麻煩。原因是設(shè)計(jì)師提供的設(shè)計(jì)稿尺寸比固定，但是前端開(kāi)發(fā)者卻要適配不同大小、長(zhǎng)寬比的目標(biāo)設(shè)備。適配的終極目標(biāo)無(wú)非是最大程度把主體內(nèi)容優(yōu)雅地呈現(xiàn)給用戶。開(kāi)發(fā)和設(shè)計(jì)如果沒(méi)有協(xié)調(diào)好的話可能會(huì)妥協(xié)比較丑陋的方案，例如由于設(shè)計(jì)比例問(wèn)題，為了照顧主體內(nèi)容不被裁剪，只好設(shè)備兩邊，或者上下留黑邊這種。
不過(guò)在 3D 的世界里，我們不用擔(dān)心會(huì)有黑邊的問(wèn)題，因?yàn)?3D 場(chǎng)景是無(wú)限延伸的，總能填滿任何比例的屏幕。

利用threejs實(shí)現(xiàn)3D全景圖

基于HTML5和WebGL的3D網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)圖

利用HT For Web中的3D組件來(lái)實(shí)現(xiàn)了一個(gè)小例子，整體實(shí)現(xiàn)的效果圖：

D3 力導(dǎo)向圖和 WebGL 的整合使用

D3 是目前最流行的數(shù)據(jù)可視化庫(kù)，WebGL 是目前 Web 端最快的繪制技術(shù)。由于性能問(wèn)題的局限，將兩者結(jié)合的嘗試越來(lái)越多（如），本文將嘗試用 D3 的力導(dǎo)向圖 和 Three.js 和 PixiJS 結(jié)合。全文閱讀完大概 5 分鐘，因?yàn)槟阒攸c(diǎn)應(yīng)該看代碼。

從3dMax導(dǎo)出供threeJS使用的帶動(dòng)作模型與加載

在自己做的一個(gè)小玩意中，發(fā)現(xiàn)要從3dMax中導(dǎo)出js文件供給threeJS使用，真是太多坑了！所以打算詳細(xì)記錄一下方法，好像開(kāi)發(fā)會(huì)3dMax的比較少，但是至少可以幫助開(kāi)發(fā)與美工更好的溝通與交流。在文末，我會(huì)附上一個(gè)可加載的js模型,方便學(xué)習(xí)~

Canvas + WebGL中文藝術(shù)字渲染

用canvas原生api可以很容易地繪制文字，但是原生api提供的文字效果美化功能十分有限。如果想要繪制除描邊、漸變這些常用效果以外的藝術(shù)字，又不用耗時(shí)耗力專門制作字體庫(kù)的話，利用WebGL進(jìn)行渲染是一種不錯(cuò)的選擇。
這篇文章主要講述如何利用canvas原生api獲取文字像素?cái)?shù)據(jù)，并對(duì)其進(jìn)行筆畫分割、邊緣查找、法線計(jì)算等處理，最后將這些信息傳入著色器，實(shí)現(xiàn)基本的光照立體文字。
利用canvas原生api獲取文字像素信息的好處是，可以繪制任何瀏覽器支持的字體，而無(wú)需制作額外的字體文件；而缺陷是對(duì)一些高級(jí)需求（如筆畫分割）的數(shù)據(jù)處理，時(shí)間復(fù)雜度較高。但對(duì)于個(gè)人項(xiàng)目而言，這是做出自定義藝術(shù)字效果比較快捷的方法。

基于 WebSocket 實(shí)現(xiàn) WebGL 3D 拓?fù)鋱D實(shí)時(shí)數(shù)據(jù)通訊同步（一）

在這里我們用比較易上手的 Node.js 的 Socket.IO 做通訊框架，Socket.IO 讓長(zhǎng)連接通訊變得無(wú)比簡(jiǎn)單，服務(wù)器再也不用等待客戶端的請(qǐng)求就可以直接給客戶端發(fā)送消息，根據(jù)這樣的特性就可以實(shí)現(xiàn)數(shù)據(jù)通訊同步的問(wèn)題。

基于 WebSocket 實(shí)現(xiàn) WebGL 3D 拓?fù)鋱D實(shí)時(shí)數(shù)據(jù)通訊同步（二）

有了前面的知識(shí)儲(chǔ)備，我們就可以來(lái)真正實(shí)現(xiàn)我們 3D 拓?fù)鋱D組件上節(jié)點(diǎn)位置信息的實(shí)時(shí)數(shù)據(jù)同步了，毋庸置疑，節(jié)點(diǎn)的位置信息必須是在服務(wù)端統(tǒng)籌控制，才能達(dá)到實(shí)時(shí)數(shù)據(jù)同步，也就是說(shuō)，我們必須在服務(wù)端創(chuàng)建 DataModel 來(lái)管理節(jié)點(diǎn)，創(chuàng)建 ForceLayout 彈力布局節(jié)點(diǎn)位置，并在節(jié)點(diǎn)位置改變的過(guò)程中，實(shí)時(shí)地將位置信息推送到客戶端，讓每個(gè)客戶端都更新各自頁(yè)面上面的節(jié)點(diǎn)位置。

HTML5，不只是看上去很美（第二彈：打造最美3D機(jī)房）

在html5里面使用3D已經(jīng)不是什么高深技術(shù)，它的基礎(chǔ)是WebGL，一個(gè)OpenGL的瀏覽器子集，支持大部分主要3D功能接口。目前最新的瀏覽器都有比較好的支持，IE需要到11（是的，你沒(méi)有看錯(cuò)）。

打造最美HTML5 3D機(jī)房（第三季新增資產(chǎn)管理、動(dòng)環(huán)監(jiān)控）

，第一期重點(diǎn)放在三維呈現(xiàn)和靜態(tài)的資產(chǎn)管理上，第二期著重動(dòng)環(huán)監(jiān)控，這樣基本上一個(gè)比較完整的數(shù)據(jù)中心監(jiān)控系統(tǒng)就出來(lái)了。

打造最美HTML5 3D機(jī)房（MONO哥強(qiáng)勢(shì)歸來(lái)，第四季驚艷發(fā)布）

[2016年末巨獻(xiàn)] — HTML5可交互地鐵線路圖（第二季：帝都進(jìn)階版）

基于HTML5和WebGL的三維可視立體動(dòng)態(tài)流程圖

WebGL實(shí)現(xiàn)HTML5貪吃蛇3D游戲

90來(lái)行所有JS源代碼如下，各位游戲高手不要噴我，肯定很多人可以寫得更精煉，但我只想通過(guò)這個(gè)玩一玩3D，HTML5和WebGL，包括給整天搞企業(yè)應(yīng)用的自己換換腦子思考些新元素。

淺談 WebVR

WebVR 是早期和實(shí)驗(yàn)性的 JavaScript API，它提供了訪問(wèn)如 Oculus Rift 和 Google Cardboard 等 VR 設(shè)備功能的 API。
在 Web 上開(kāi)發(fā) VR 應(yīng)用，有下面三種（潛在）方式：

JavaScript, Three.js 與 監(jiān)聽(tīng)設(shè)備方向（Device Orientation）
JavaScript, Three.js 與 WebVR
CSS 與 WebVR（仍處于非常早期階段）

由于 WebVR 仍處于草案階段并可能會(huì)有所改變，所以建議你基于 webvr-boilerplate 進(jìn)行 WebVR 開(kāi)發(fā)。

WebVR如此近-three.js的WebVR示例解析

WebVR是一個(gè)實(shí)驗(yàn)性的Javascript API，允許HMD（head-mounted displays）連接到web apps，同時(shí)能夠接受這些設(shè)備的位置和動(dòng)作信息。這讓使用Javascript開(kāi)發(fā)VR應(yīng)用成為可能（當(dāng)然已經(jīng)有很多接口API讓Javascript作為開(kāi)發(fā)語(yǔ)言了，不過(guò)這并不影響我們?yōu)閃ebVR感到興奮）。而讓我們能夠立馬進(jìn)行預(yù)覽與體驗(yàn)，移動(dòng)設(shè)備上的chrome已經(jīng)支持了WebVR并使手機(jī)作為一個(gè)簡(jiǎn)易的HMD。手機(jī)可以把屏幕分成左右眼視覺(jué)并應(yīng)用手機(jī)中的加速度計(jì)、陀螺儀等感應(yīng)器，你需要做的或許就只是買一個(gè)cardboard。

VR進(jìn)化論|教你搭建通用的WebVR工程

本文旨在介紹如何搭建WebVR工程以支持多場(chǎng)景開(kāi)發(fā)。
實(shí)現(xiàn)功能

VR多場(chǎng)景模塊化開(kāi)發(fā)
支持VR場(chǎng)景創(chuàng)建、回收、切換
項(xiàng)目自動(dòng)化構(gòu)建與壓縮打包
支持es7/6

【W(wǎng)ebVR教程翻譯】超簡(jiǎn)單！用A-frame快速打造你的VR網(wǎng)站

A-frame是由three.js封裝而來(lái)的一組庫(kù)，使用它可以方便地構(gòu)建跨平臺(tái)Web VR應(yīng)用。如果你對(duì)它毫無(wú)概念，還沒(méi)有準(zhǔn)備好繼續(xù)往下讀，可以先看看A-frame官方示例，了解了解這個(gè)它是工作的，以及它能用來(lái)做什么。
在這篇文章中，我將教會(huì)你如何創(chuàng)建一個(gè)VR網(wǎng)站，你可以體驗(yàn)到在兩個(gè)360°全景之間切換。實(shí)現(xiàn)這一效果，我們將會(huì)用到一些A-frame的特定代碼和一點(diǎn)點(diǎn)JavaScript的代碼。

VR大潮來(lái)襲 ---前端開(kāi)發(fā)能做些什么

去年谷歌和火狐針對(duì)WebVR提出了WebVR API的標(biāo)準(zhǔn)，顧名思義，WebVR即web + VR的體驗(yàn)方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁(yè)，新的API標(biāo)準(zhǔn)讓我們可以使用js語(yǔ)言來(lái)開(kāi)發(fā)。今天，約克先森將介紹如何開(kāi)發(fā)一個(gè)WebVR網(wǎng)頁(yè)，在此之前，我們有必要了解WebVR的體驗(yàn)方式。

WebVR開(kāi)發(fā)教程——深度剖析

最近WebVR API 1.1已經(jīng)發(fā)布，2.0草案也在擬定中，在我看來(lái)，WebVR走向大眾瀏覽器是早晚的事情了，今天本人將對(duì)WebVR開(kāi)發(fā)環(huán)境和開(kāi)發(fā)流程進(jìn)行深入介紹。

本期完
:）

歡迎關(guān)注 SegmentFault 微信公眾號(hào) :)