跳到主要内容

webgl

tip

WebGL2 是对 WebGL 的一次重大更新，它基于 OpenGL ES 3.0

学习WebGL​

书籍​

  • 《WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL》：由 Kouichi Matsuda 和 Rodger Lea 编写，是一本非常好的入门书籍。
  • 《Real-Time 3D Graphics with WebGL 2》：由 Farhad Ghayour 和 Diego Cantor 编写，介绍了 WebGL 2 的进阶内容。

网站​

动手实践​

基础示例​

  • 绘制简单的几何图形：从绘制点、线、三角形开始，理解基本的渲染流程。
  • 着色器编程：学习编写顶点着色器和片段着色器，理解 GLSL（OpenGL 着色语言）。

项目练习​

  • 创建简单的 3D 场景：结合几何变换和光照模型，尝试创建一个简单的 3D 场景。
  • 交互功能：添加鼠标和键盘交互，控制摄像机视角或物体移动。

深入学习​

高级技术​

  • 纹理映射：学习如何在 3D 模型上应用纹理。
  • 帧缓冲对象（FBO）：理解高级渲染技术，如后期处理效果。
  • 阴影映射：实现动态阴影效果，提升场景的真实感。

性能优化​

  • 理解和优化 WebGL 性能：学习如何使用 WebGL 调试工具（如 Chrome DevTools）来分析和优化渲染性能。

使用高层次封装库​

Three.js​

Babylon.js​