SegmentFault 技術週刊 Vol.35 - WebGL：打開網頁看大片

WebGL 能夠說是 HTML5 技術生態鏈中最爲使人振奮的標準之一，它把 Web 帶入了 3D 的時代。

初識 WebGL

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

舒適提示：瀏覽如下網頁須要瀏覽器支持 WebGL 功能。:)

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

http://stars.chromeexperiment...

http://www.nowyouseeme.movie

http://webglsamples.org/

WebGL 入門

WebGL 技術儲備指南

本文的預期讀者是：不熟悉圖形學，熟悉前端，但願瞭解或系統學習 WebGL 的同窗。

本文不是 WebGL 的概述性文章，也不是完整詳細的 WebGL 教程。本文只但願成爲一篇供 WebGL 初學者使用的提綱。

WebGL 初探

用更專業的描述講，WebGL (Web Graphics Library) 是一個用以渲染交互式 3D 和 2D 圖形的無需插件且兼容下一代瀏覽器的 JavaScript API，經過 HTML5 中 <canvas> 元素實現功能。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 開發第一道坎：矩陣與座標變換

• 1、齊次座標
• 2、矩陣迷宮
• 3、模型矩陣與模型視圖矩陣
• 4、透視矩陣
• 5、屏幕座標變換

JavaScript Canvas——「WebGL」的注意要點

Threejs

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建立簡單的三維圖形，而且控制圖形運動。

• 1、建立場景
• 2、繪製圖形

• 3、建立3d對象

  • 建立一個本身的對象
  • 外部導入.obj文件

• 4、動畫

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

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圖形學開發中，坑很多，作了一下總結分享。

• 一、法向量問題
• 二、光源與面塊顏色
• 三、POI標註
• 四、點擊拾取問題
• 五、性能優化
• 六、麪點擊移動到屏幕中央
• 七、2/3D切換
• 八、3D中地理級別
• 九、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

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 微信公衆號 :)