跟月影学可视化
月影
前奇虎360奇舞团团长,可视化UI框架SpriteJS核心开发者,《JavaScript王者归来》作者
新⼈⾸单¥29.9
4216 人已学习
课程目录
已更新 29 讲 / 共 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 | 如何使用后期处理通道增强图像效果?
视觉高级篇 (9讲)
18 | 如何生成简单动画让图形动起来?
19 | 如何用着色器实现像素动画?
20 | 如何用WebGL绘制3D物体?
21 | 如何添加相机,用透视原理对物体进行投影?
22 | 如何用仿射变换来移动和旋转3D物体?
23 | 如何模拟光照让3D场景更逼真?(上)
24 | 如何模拟光照让3D场景更逼真?(下)
25 | 如何用法线贴图模拟真实物体表面
26 | 如何绘制带宽度的曲线?
特别放送 (1讲)
加餐一 | 作为一名程序员,数学到底要多好?
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

14 | 如何使用片元着色器进行几何造型?

月影 2020-07-24
你好,我是月影。
在 WebGL 中,片元着色器有着非常强大的能力,它能够并行处理图片上的全部像素,让数以百万计的运算同时完成。但也正因为它是并行计算的,所以它和常规代码顺序执行或者串行执行过程并不一样。因此,在使用片元着色器实现某些功能的时候,我们要采用与常规的 JavaScript 代码不一样的思路。
到底哪里不一样呢?今天,我就通过颜色控制,以及线段、曲线、简单几何图形等的绘制,来讲讲片元着色器是怎么进行几何造型的,从而加深你对片元着色器绘图原理的理解。
首先,我们来说比较简单的颜色控制。

如何用片元着色器控制局部颜色?

我们知道,片元着色器能够用来控制像素颜色,最简单的就是把图片绘制为纯色。比如,通过下面的代码,我们就把一张图片绘制为了纯黑色。
#ifdef GL_ES
precision highp float;
#endif
varying vec2 vUv;
void main() {
gl_FragColor = vec4(0, 0, 0, 1);
}
如果想让一张图片呈现不同的颜色,我们还可以根据纹理坐标值来绘制,比如,通过下面的代码,我们就可以让某个图案的颜色,从左到右由黑向白过渡。
#ifdef GL_ES
precision highp float;
#endif
varying vec2 vUv;
void main() {
gl_FragColor.rgb = vec3(vUv.x);
gl_FragColor.a = 1.0;
}
不过,这种颜色过渡还比较单一,这里我们还可以改变一下渲染方式让图形呈现的效果更复杂。比如说,我们可以使用乘法创造一个 10*10 的方格,让每个格子左上角是绿色,右下角是红色,中间是过渡色。代码和显示的效果如下所示:
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《跟月影学可视化》,如需阅读全部文章,
请订阅文章所属专栏新⼈⾸单¥29.9
立即订阅
登录 后留言

精选留言(3)

  • 武岳
    符号距离场,SDF,学习了
    2020-07-24
    1
  • Sam
    GSLS中可以debugger或者console.log操作吗,总感觉没有理解到webgl的原理

    作者回复: 目前不能,glsl在浏览器中是不好调试。你多写写就会熟悉,可以看看shadertoy上的一些有趣的例子然后模仿

    2020-08-02
  • 张旭
    原来数学公式可以搞出这么多事情
    2020-07-29
收起评论
3
返回
顶部