1. webGL 是什么?
WebGL是一种3D绘图标准,允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染(部分计算GPU),这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。
WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。
总结一下,WebGL的本质 —— JavaScript操作OpenGL接口。
WebGL 目前应用在哪些领域,可参考以下链接
中文地址: https://zhuanlan.zhihu.com/p/369632693
英文地址: https://manu.ninja/25-real-world-applications-using-webgl/
2. 为什么要学习webGL?
虽然因为种种问题,WebGl当前还没有达到当初人们的预期,远远谈不上大火,但是星星之火可以燎原,未来的发展前景是十分被业界看好的。
看好WebGl的前景,主要是因为两个推动力:
- 第一个,技术推动力。随着硬件和通信技术的提升,以及越来越多的浏览器开始兼容WebGL,技术上的阻碍开始越来越少;
- 第二个,市场推动力。当前WebGL的应用前景越来越广阔,包括了智慧城市、智慧园区、智慧物流、智慧交通、智慧能源等等。
3. webGL 怎么用?
原理部分
1.整体流程
2.GPU渲染管线部分
需要深入了解原理可参考学习 www.icourse163.org/course/HUST…
应用部分
1.开始WebGL
如何设置 WebGL 上下文环境。
2.给WebGL 的上下文环境添加2D内容
如何用 WebGL 渲染简单的平面化图形。
3.在WebGL 中使用着色器(shader)去赋予颜色
演示如何使用着色器给图形添加颜色。
4.用WebGL让对象动起来
展示如何旋转移动物体来实现简单动画效果。
5.使用WebGL 创建3D物体
展示如何创建并设置一个 3D 物体动画 (这里使用立方体).
6.在WebGL中使用纹理贴图
展示如何投射纹理贴图到物体的各个面。
7.WebGL 中的灯光
如何在 WebGL 上下文环境中模拟灯光效果。
8.WebGL 中的动画纹理贴图
展示如何让纹理贴图动起来。在此例中,会投射一个 Ogg 格式的视频在一个旋转立方体的各个面上。