04 | GPU与渲染管线：如何用WebGL绘制最简单的几何图形？（上）
月影
该思维导图由 AI 生成，仅供参考
你好，我是月影。今天，我们要讲 WebGL。今天的内容比较多，也比较重要，所以我们会分上、下两节课来讲。
WebGL 是最后一个和可视化有关的图形系统，也是最难学的一个。为啥说它难学呢？我觉得这主要有两个原因。第一，WebGL 这种技术本身就是用来解决最复杂的视觉呈现的。比如说，大批量绘制复杂图形和 3D 模型，这类比较有难度的问题就适合用 WebGL 来解决。第二，WebGL 相对于其他图形系统来说，是一个更“开放”的系统。
我说的“开放”是针对于底层机制而言的。因为，不管是 HTML/CSS、SVG 还是 Canvas，都主要是使用其 API 来绘制图形的，所以我们不必关心它们具体的底层机制。也就是说，我们只要理解创建 SVG 元素的绘图声明，学会执行 Canvas 对应的绘图指令，能够将图形输出，这就够了。但是，要使用 WebGL 绘图，我们必须要深入细节里。换句话说就是，我们必须要和内存、GPU 打交道，真正控制图形输出的每一个细节。
所以，想要学好 WebGL，我们必须先理解一些基本概念和原理。那今天这一节课，我会从图形系统的绘图原理开始讲起，主要来讲 WebGL 最基础的概念，包括 GPU、渲染管线、着色器。然后，我会带你用 WebGL 绘制一个简单的几何图形。希望通过这个可视化的例子，能够帮助你理解 WebGL 绘制图形的基本原理，打好绘图的基础。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入介绍了WebGL绘制图形的基本原理和操作步骤。作者首先强调了WebGL相对于其他图形系统的开放性和复杂性，需要深入了解底层机制。接着详细讲解了计算机图形系统的组成部分和绘图过程，包括光栅、像素、帧缓存、CPU和GPU等概念。文章重点介绍了GPU的结构和作用，以及使用WebGL绘制三角形的具体步骤，包括创建WebGL上下文、创建WebGL程序、将数据存入缓冲区、将缓冲区数据读取到GPU和GPU执行WebGL程序输出结果。此外，文章还解释了顶点着色器和片元着色器的作用，以及它们在绘图过程中的重要性。总体而言，本文适合想要深入了解WebGL绘图原理和操作步骤的读者阅读学习。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《跟月影学可视化》，新⼈⾸单¥68
《跟月影学可视化》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(5)
- 最新
- 精选
647向月影大大学习 哈哈哈哈 赞作者回复: 哈哈，有啥问题在微信随时问我
2020-06-2931- Bufan老师我想边学边实践，是直接用封装好的框架去实践好呢还是用原声的好呢
作者回复: 你可以跟着课程循序渐进，课程中我们先用原生来写，再用gl-renderer，然后再到Ogl，最后是spritejs。这样理解会深刻一些。
2020-06-30 
青刀铜剑之前学threejs一直不懂着色器是什么。。老师这么一说我瞬间就明白着色器是干什么的了作者回复: 嗯嗯，理解了渲染管线、GPU并行计算和着色器执行的基本原理，就掌握了webgl最基础的内容，后面再理解其他的就容易很多了，threejs也可以应用得更好。
2020-06-30- Plu2ds关键词比较多啊，基础内容要补充下
作者回复: 学webgl一开始比较难，熟悉一些概念就好了。关键还得多动手实践～
2020-06-30 - Geek_1a3e9c可以理解为，片元决定形状，图元决定填充信息么？
作者回复: 顶点决定形状，片元是处理像素，图元决定顶点到像素（光栅化）的具体方式
2020-06-29
收起评论