【零基础】充分理解WebGL(六)
接上篇:http://juejin.cn/post/7108674503101661197
颜色
在前面几篇的内容里,我们的例子大部分都是黑白的,那是因为我们着重于渲染形状,基本没有考虑渲染成不同的颜色。
我们既然把shader中文翻译成“着色器”,顾名思义,“着色器”本身就是用来在画布上“着色”的,自然和颜色有着密切的关系。
话不多说,我们仍然通过代码由浅入深地来看一看。
我们已经知道了在片段着色器中,FragColor输出颜色,它默认采用的是RGBA色值。
```glsl
version 300 es
precision highp float; out vec4 FragColor; uniform vec2 resolution;
void main() { FragColor.rgb = vec3(1.0, 0, 0); FragColor.a = 1.0; } ```
我们在第一讲中,就见过,上面的代码将整个canvas画布渲染为红色。
顺便说一下,码上掘金支持了自定义语言功能,所以从这一讲开始,我利用这个功能来写shader,因为我们讲WebGL的重点是渲染管线里的着色器,所以shader代码是核心,利用自定义语言来写,能够让读者浏览语法高亮的shader代码,便于阅读和修改调试。而其他JS部分,我放在Markup的script标签里,不作为重点。你只要切换码上掘金左侧窗口的script标签,就能看到语法高亮的shader代码了。
http://code.juejin.cn/pen/7111156081786617893
同样,在第一讲中,我们还写过一个例子,通过坐标值来绘制渐变颜色:
```glsl
version 300 es
precision highp float; out vec4 FragColor; uniform vec2 resolution;
void main() { vec2 st = gl_FragCoord.xy / resolution; FragColor.rgb = vec3(st, 0); FragColor.a = 1.0; } ```
http://code.juejin.cn/pen/7111162916430151711
我们可以利用前面学过的距离场来对颜色造型:
```glsl
version 300 es
precision highp float;
pragma include
out vec4 FragColor; uniform vec2 dd_resolution; uniform float dd_time;
void main() { vec2 st = gl_FragCoord.xy / dd_resolution; st = mix(vec2(-5), vec2(5), st); st = polar(st, vec2(0)); st = fract(st); FragColor.rgb = vec3(st.x, st.y + 0.5 * sin(dd_time), 0); FragColor.a = 1.0; } ```
http://code.juejin.cn/pen/7111163920278093838
在上面的代码里,我悄悄换了一个库,把 gl_render 换成了 glsl_doodle。
它们使用上没有太大差别,glsl_doodle 是继承了 gl_renderer,在 gl_renderer 的基础上支持了 #pragma include
指令加载函数库的功能。通过这个功能,我们内置了一些模块,使用它们的方法就是通过#pragma include
加载进来,这和使用C语言进行加载模块非常类似。实际上很大一部分模块我们在前面的章节中都介绍了它们的具体实现。在后续的章节中我们直接将它们加载进来,这样能保持glsl
代码的清晰,便于理解。对于未使用过的函数,如有涉及,我再单独介绍。
另外glsl_doodle还内置了一些uniforms,这样我们就不用在JS中去重复定义它们,内置uniforms在命名上以dd_
开头,例如上面代码用到的dd_resolution
,它和我们前面章节自己定义的resolution
没有区别。
渐变造型
在颜色渐变的基础上,我们可以通过造型函数来控制渐变过程,比如下面的代码用三阶贝塞尔曲线来控制渐变过程:
```glsl
version 300 es
precision highp float;
pragma include
pragma include
pragma include
out vec4 FragColor; uniform vec2 dd_resolution; uniform float dd_time; uniform vec3 fromColor; uniform vec3 toColor; uniform vec4 bezierController;
float cubic_bezier(float x, vec4 p) { return cubic_bezier(x, p.x, p.y, p.z, p.w); }
float cubic_bezier(float x) { return cubic_bezier(x, bezierController); }
void main() { vec2 st = gl_FragCoord.xy / dd_resolution; float d = cubic_bezier(st.x); FragColor.rgb = mix(fromColor, toColor, d); float d2 = PLOT(cubic_bezier, st, 0.01); FragColor.rgb += stroke(d2, 0.01, 0.2); FragColor.a = 1.0; } ```
http://code.juejin.cn/pen/7111175676136259621
像前面章节的例子一样,我们也可以把直角坐标映射成极坐标,做出有趣的效果来:
http://code.juejin.cn/pen/7111187775952519181
HSB
就像CSS中有RGB和HSL一样,我们可以将RGB设置转换成极坐标方式,将红、绿、蓝三原色通道映射成色相
、饱和度
和亮度
三个通道,这就是HSB设置。
HSB和RGB的相互转换公式如下:
```glsl vec3 rgb2hsb(vec3 c){ vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); float d = q.x - min(q.w, q.y); float e = 1.0e-10; return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); }
// Function from Iñigo Quiles // http://www.shadertoy.com/view/MsS3Wc vec3 hsb2rgb(vec3 c){ vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0); rgb = rgb * rgb * (3.0 - 2.0 * rgb); return c.z * mix(vec3(1.0), rgb, c.y); } ```
有了HSB,我们可以方便做连续的色相渐变,比如我们将上面的例子修改一下:
http://code.juejin.cn/pen/7111193630966022181
简单运用极坐标变换,我们可以看一下HSB色轮,类似CSS的HSL色轮:
```
version 300 es
precision highp float;
define WEBGL2;
pragma include
pragma include
pragma include
uniform vec2 dd_resolution; uniform float dd_time; uniform float fromColor; uniform float toColor; uniform vec4 bezierController;
void main() { vec2 st = gl_FragCoord.xy / dd_resolution; st = polar(st); FragColor.rgb = hsb2rgb(vec3(0.5 * st.y / PI +0.5,st.x,1.0)); FragColor.a = 1.0; } ```
http://code.juejin.cn/pen/7111195901342777374
掌握了颜色,我们可以来绘制一些更炫酷的东西了,不过别急,大家先通过练习掌握基础,在后续章节里我们再慢慢由浅入深。
- Day1:用原生JS把你的设备变成一台架子鼓!
- 【零基础】充分理解WebGL(七)
- 【零基础】充分理解WebGL(六)
- 【零基础】充分理解WebGL(五)
- 冷知识:不起眼但有用的String.raw方法
- 【零基础】充分理解WebGL(四)
- 【零基础】充分理解WebGL(三)
- 【零基础】充分理解WebGL(二)
- 【零基础】充分理解WebGL(一)
- css-doodle:如何让CSS成为艺术?
- 创建合辑,将【码上掘金】作为开源项目的demo库使用
- 使用 babel 插件来打造真正的“私有”属性
- 使用 Node.js 对文本内容分词和关键词抽取
- 用信号来控制异步流程
- 设计 Timeline 时间轴来更精确地控制动画
- 简单构建 ThinkJS Vue2.0 前后端分离的多页应用
- 冷门函数之Math.hypot
- 你还在用charCodeAt那你就out了
- 巧用 currentColor 属性来实现自定义 checkbox 样式
- 在什么情况下 a === a - 1 ?