WebGL(Web图形库)是一个JavaScript API,可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形,而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点,该API可以在HTML5
<canvas>
元素可被用来通过JavaScript(Canvas API 或 WebGL API)绘制图形及图形动画。")元素中使用。 这种一致性使API可以利用用户设备提供的硬件图形加速。
(PS: 引用来源于mdn官方文档)
WebGL可以简单理解为主要是对3D绘制在网页端的图形规范,只需支持的浏览器即可进行访问体验,无需额外的插件or本地应用程序。
基础概念
- 三维坐标系(x/y/z轴);顶点→多边形→网格/模型;纹理映射(位图)、材质(凹凸效果、辉光效果等)、光源;变换(模型缩放、旋转、位移等)通过矩阵;相机、透视、视口、投影(三维需要投射成二维展示);着色器。
- 使用WebGL把图形渲染到页面中,至少需要执行以下步骤
- 创建一个画布元素(canvas);
- 获取画布的上下文(content);
- 初始化视口;
- 创建一个或者多个包含渲染数据的数组(通常是顶定数组);
- 创建一个或者多个矩阵,将顶点数组变换到屏幕空间中;
- 创建一个或者多个着色器来实现绘制算法;
- 绘制。
参考书目
- 《WebGL入门指南》