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

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

先通過幾個使用 WebGL 的網(wǎng)站來認識下 WebGL 的魅力吧~

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

20 個讓人驚艷的運用 WebGL 的例子

http://stars.chromeexperiment...

http://www.nowyouseeme.movie

http://webglsamples.org/

WebGL 技術(shù)儲備指南

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

WebGL 初探

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

WebGL 繪制三角形

本篇章將講解如何使用 WebGL 繪制三角形，因為很多 3D 圖形都是使用三角形為基礎(chǔ)進行渲染的，所以有些對 GPU 性能指標的評價就是渲染三角形的能力。

WebGL 與 THREE 入門 Lesson1：計算圖形成像原理簡介

這篇文章我們將簡單講一下成像原理，以及附上的GPU繪制流水線。這個成像原理到繪制流水線的中間過渡可能有點跳躍。我當初學習的時候就在這里卡住了。因為學習過程中沒有理解記錄下來這個過程，所以現(xiàn)在沒有辦法還原自己的想法和大家分享，也沒法給大家一些啟示。所以隨時隨地記錄下自己的想法真的很重要?。。‰m然可能不準確但是很真實??！

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

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

JavaScript Canvas——“WebGL”的注意要點

Three.js中文文檔

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

Three.js學習筆記

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

我的世界：一個村落（其一）

本文是一篇three.js的入門文章，將介紹three.js的一些基本概念，并一步步搭建一個簡單的場景模型：

我的世界：一個村落（其二）

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

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

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

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

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

創(chuàng)建一個自己的對象
外部導入.obj文件



四、動畫

基本的動畫
對動畫進行控制

threejs 繪制地球、飛機、軌跡

首先我們來看下要實現(xiàn)的效果：

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

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

H5實例教學--3D全景(ThreeJs全景Demo)

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

ThreeJS中的點擊與交互——Raycaster的用法

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

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

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

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

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

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

A-Frame.js 學習&文檔翻譯（一）實體

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

簡單一招搞定 three.js 屏幕適配

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

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

基于HTML5和WebGL的3D網(wǎng)絡(luò)拓撲結(jié)構(gòu)圖

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

D3 力導向圖和 WebGL 的整合使用

D3 是目前最流行的數(shù)據(jù)可視化庫，WebGL 是目前 Web 端最快的繪制技術(shù)。由于性能問題的局限，將兩者結(jié)合的嘗試越來越多（如），本文將嘗試用 D3 的力導向圖 和 Three.js 和 PixiJS 結(jié)合。全文閱讀完大概 5 分鐘，因為你重點應(yīng)該看代碼。

從3dMax導出供threeJS使用的帶動作模型與加載

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

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

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

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

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

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

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

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

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

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

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

打造最美HTML5 3D機房（MONO哥強勢歸來，第四季驚艷發(fā)布）

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

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

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

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

淺談 WebVR

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

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

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

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

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

VR進化論|教你搭建通用的WebVR工程

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

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

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

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

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

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

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

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

本期完
:）

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