16 | 如何使用噪声生成复杂的纹理？

小试牛刀： void main() { vec2 st = vUv * 3.0; vec3 color = vec3(.0); ... // 生成随机特征点（距离中心点） float md = 1.0; vec2 mg, mr; // 第一次遍历，找到特征点 for(int i = -1; i <= 1; i++){ // 计算坐标点到周围9个网格特征点的距离的最小值，并保存最小的那个特征点 for(int j = -1; j <= 1; j++){ ... vec2 r = g + o - fr; float m_dist = length(r); if(md > m_dist){ // 保存最小距离时的偏移 mg = g; // 保存特征点向量 mr = r; // 保存最小距离 md = m_dist; } } } md = 1.0; // 第二次遍历，计算出当前的像素点，与周围9个特征点，与距离最近的特征点之间的向量关系算法 for (int j= -1; j <= 1; j++) { for (int i= -1; i <= 1; i++) { // 同上 ... vec2 r = g + o - fr; // 0.00001是做精度处理 if ( dot(mr-r,mr-r) > 0.00001 ) { // mr:最小距离的特征点到当前像素点的向量， r:周围特征点到当前像素点的向量。 // 这里的思路是：利用三角形外心计算 // 其余特征点到最小距离特征点形成向量a1 = r-mr， 像素点到a1中心点形成向量a2 = (mr+r)/2， // 则求a2在a1上面的投影（点乘），就是距离场，求这个距离场的最小距离。 md = min(md, dot( 0.5 * (mr + r), normalize(r - mr) )); } } } // 等高线 color = md * fract(md * 35.0 / 2.0) * vec3(1.0); // 边框线 color = mix( vec3(1.0), color, smoothstep( 0.01, 0.02, md ) ); // 标记特征点 color += step(length(mr), 0.03); gl_FragColor.rgb = color; }

技术升华成艺术

在pixel shader生成艺术中，一般会使用噪声生成数据（纹理）的方式，而不是使用外部数据。

这篇太硬核了。。话说这些算法里，dot 的使用目的是什么，为了算夹角么？

太牛了！