Webgl学习系列-认识Webgl

Webgl学习系列
第一章 认识Webgl

---

---

一、什么是webgl？

webgl是一种3D绘图协议，衍生于 OpenGL ES2.0，可以结合 Html5 和 JavaScript 在网页上绘制和渲染二/三维图形。

二、为什么学webgl？

• 数据可视化
• 图形/游戏引擎
• 交互演示、图形渲染
• 地图
• VR
• 物品展示
• 室内设计
• 城市规划

三、webgl的优势？

• 内嵌在浏览器中，不需要安装任何插件即可运⾏；
• 只需要⼀个⽂本编辑器和浏览器，就可以编写三维图形程序；

四、webgl开源框架

• Three.js：JavaScript 3D WebGL库
• Babylon.js：Web3D图形引擎
• KickJS：Web的开源图形和游戏引擎
• ClayGL：构建可扩展的Web3D应⽤程序
• PlayCanvas：网络游戏和3D图形引擎
• WebGLStudio.js和Litescene.js：开源Web 3D图形编辑器和创建器
• Luma：Uber的3D WebGL可视化库
• A-Frame是用于构建VR（虚拟现实）体验的Web框架

五、canvas和webgl的区别

Canvas API

• Canvas API 提供 二维 绘图的方式
• 图形的绘制主要通过 CanvasRenderingContext2D 接口完成
• canvas.getContext(’ 2d’)

WebGL API

• WebGL API 提供 三维 绘图的方式
• 图形的绘制主要通过 WebGLRenderingContext 接口完成
• canvas.getContext('webgl ')