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

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

先通過幾個使用 WebGL 的網站來認識下 WebGL 的魅力吧~

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

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

http://stars.chromeexperiment...

http://www.nowyouseeme.movie

http://webglsamples.org/

WebGL 技術儲備指南

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

WebGL 初探

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

WebGL 繪制三角形

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

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

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

webgl 開發第一道坎：矩陣與坐標變換

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

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

Three.js中文文檔

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

Three.js學習筆記

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

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

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

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

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

threejs構建web三維視圖入門教程

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

一、創建場景
二、繪制圖形

三、創建3d對象

創建一個自己的對象
外部導入.obj文件



四、動畫

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

threejs 繪制地球、飛機、軌跡

首先我們來看下要實現的效果：

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

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

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

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

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

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

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

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

Threejs 開發 3D 地圖實踐總結

前段時間連續上了一個月班，加班加點完成了一個3D攻堅項目。也算是由傳統web轉型到webgl圖形學開發中，坑不少，做了一下總結分享。

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

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

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

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

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

利用threejs實現3D全景圖

基于HTML5和WebGL的3D網絡拓撲結構圖

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

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

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

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

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

Canvas + WebGL中文藝術字渲染

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

基于 WebSocket 實現 WebGL 3D 拓撲圖實時數據通訊同步（一）

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

基于 WebSocket 實現 WebGL 3D 拓撲圖實時數據通訊同步（二）

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

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

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

打造最美HTML5 3D機房（第三季新增資產管理、動環監控）

，第一期重點放在三維呈現和靜態的資產管理上，第二期著重動環監控，這樣基本上一個比較完整的數據中心監控系統就出來了。

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

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

基于HTML5和WebGL的三維可視立體動態流程圖

WebGL實現HTML5貪吃蛇3D游戲

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

淺談 WebVR

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

JavaScript, Three.js 與 監聽設備方向（Device Orientation）
JavaScript, Three.js 與 WebVR
CSS 與 WebVR（仍處于非常早期階段）

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

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

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

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

本文旨在介紹如何搭建WebVR工程以支持多場景開發。
實現功能

VR多場景模塊化開發
支持VR場景創建、回收、切換
項目自動化構建與壓縮打包
支持es7/6

【WebVR教程翻譯】超簡單！用A-frame快速打造你的VR網站

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

VR大潮來襲 ---前端開發能做些什么

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

WebVR開發教程——深度剖析

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

本期完
:）

歡迎關注 SegmentFault 微信公眾號 :)