跟月影学可视化
月影
前奇虎360奇舞团团长，可视化UI框架SpriteJS核心开发者，《JavaScript王者归来》作者
立即订阅
4192 人已学习
课程目录
已更新 27 讲 / 共 45 讲
0/4登录后，你可以任选4讲全文学习。
课前必学 (2讲)
开篇词 | 不写网页的前端工程师，还能干什么？
免费
预习 | Web前端与可视化到底有什么区别？
图形基础篇 (4讲)
01 | 浏览器中实现可视化的四种方式
02 | 指令式绘图系统：如何用Canvas绘制层次关系图？
03 | 声明式图形系统：如何用SVG图形元素绘制可视化图表？
04 | GPU与渲染管线：如何用WebGL绘制最简单的几何图形？
数学篇 (5讲)
05 | 如何用向量和坐标系描述点和线段？
06 | 可视化中你必须要掌握的向量乘法知识
07 | 如何用向量和参数方程描述曲线？
08 | 如何利用三角剖分和向量操作描述并处理多边形？
09 | 如何用仿射变换对几何图形进行坐标变换？
视觉基础篇 (8讲)
10 | 图形系统如何表示颜色？
11｜图案生成：如何生成重复图案、分形图案以及随机效果？
12 | 如何使用滤镜函数实现美颜效果？
13 | 如何给简单的图案添加纹理和复杂滤镜？
14 | 如何使用片元着色器进行几何造型？
15 | 如何用极坐标系绘制有趣图案？
16 | 如何使用噪声生成复杂的纹理？
17 | 如何使用后期处理通道增强图像效果？
视觉高级篇 (7讲)
18 | 如何生成简单动画让图形动起来？
19 | 如何用着色器实现像素动画？
20 | 如何用WebGL绘制3D物体？
21 | 如何添加相机，用透视原理对物体进行投影？
22 | 如何用仿射变换来移动和旋转3D物体？
23 | 如何模拟光照让3D场景更逼真？（上）
24 | 如何模拟光照让3D场景更逼真？（下）
特别放送 (1讲)
加餐一 | 作为一名程序员，数学到底要多好？
17 | 如何使用后期处理通道增强图像效果？
月影 2020-07-31
你好，我是月影。
前面几节课，我们学习了利用向量和矩阵公式，来处理像素和生成纹理的技巧，但是这些技巧都有一定的局限性：每个像素是彼此独立的，不能共享信息。
为什么这么说呢？因为 GPU 是并行渲染的，所以在着色器的执行中，每个像素的着色都是同时进行的。这样一来，我们就不能获得某一个像素坐标周围坐标点的颜色信息，也不能获得要渲染图像的全局信息。
这会导致什么问题呢？如果我们要实现与周围像素点联动的效果，比如给生成的纹理添加平滑效果滤镜，就不能直接通过着色器的运算来实现了。
因此，在 WebGL 中，像这样不能直接通过着色器运算来实现的效果，我们需要使用其他的办法来实现，其中一种办法就是使用后期处理通道。所谓后期处理通道，是指将渲染出来的图像作为纹理输入给新着色器处理，是一种二次加工的手段。这么一来，虽然我们不能从当前渲染中获取周围的像素信息，却可以从纹理中获取任意 uv 坐标下的像素信息，也就相当于可以获取任意位置的像素信息了。
使用后期处理通道的一般过程是，我们先正常地将数据送入缓冲区，然后执行 WebGLProgram。只不过，在执行了 WebGLProgram 之后，我们要将输出的结果再作为纹理，送入另一个 WebGLProgram 进行处理，这个过程可以进行一次，也可以循环多次。最后，经过两次 WebGLProgram 处理之后，我们再输出结果。
确认放弃笔记？
放弃后所记笔记将不保留。
新功能上线，你的历史笔记已初始化为私密笔记，是否一键批量公开？
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《跟月影学可视化》，如需阅读全部文章，
请订阅文章所属专栏，新⼈⾸单¥29.9
请订阅文章所属专栏，新⼈⾸单¥29.9
立即订阅
登录 后留言
精选留言(1)
胡浩好秀啊2020-08-08
收起评论