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 微信公众号 :)