canvas系列-打造精灵涂鸦效果

精灵涂鸦效果的这篇文章是昨日在unity看到的，感受将的颇有意思，虽然内容很少，可是信息却饱含了不少，因而偷偷写了这篇小文章~

                                     

本文会涉及一些比较高级的话题，包括：反向运动学的数学原理和大气的瑞利散射效果。可是既对这些内容感兴趣，又有理解所需的必备技术知识的开发者其实并很少

这是原文的的话，可是不少人都不太理解反向运动学（IK）跟散射效果，其实这里由于操做仍是在2d层面，散射效果能够忽略不计，那么主要的话题就是在IK

经过gif图，能够看得出图形的像素点在每帧都进行了大幅度的随机抖动，因而能够大致上把实现归结为

/* *gl_Position 当前像素坐标 *a_position 传入的像素坐标 *u_offset 像素偏移量 *width 视图的宽度 * noiseWeights 影响的大小 */
u_offset.x =  -1 + Math.random()*(gl_Position.x/width)    //以[-1，1]
u_offset.y =  -1 + Math.random()*(gl_Position.y/height)    //以[-1，1]
gl_Position.x = a_position.x + u_offset.x*noiseWeights
gl_Position.y = a_position.y + u_offset.y*noiseWeights  // 对像素进行偏移复制代码

这个时候就已经能够看出会对像素进行偏移操做，接下来就能够来讨论反向运动学的东西了，反向运动学的核心是由自由端来带动链接端，也就是说，咱们须要由外面的点来带动中间的点，造成联动效果，这个时候，咱们就须要对图像进行网格化，对网格进行拓扑处理，这样，就差很少能够实现了上方的效果。

可是！原文中还有一个概念点，就是对齐时间。

因为浏览器渲染是按帧渲染，可是咱们并不须要这么高的渲染帧率，因此就须要一个函数来进行对齐时间

function _snap (time, snap) {
    return snap * Math.random()*(time / snap)
}复制代码

这里的time☞的在shader中的是_Time.y,若是有兴趣的能够去了解，原意的目的应该是为了使每次变换周期内的偏移影响会随着时间变化，最后再把对齐时间的影响返回到偏移函数中

u_offset.x =  -1 + Math.random()*(gl_Position.x/width) + _snap(_Time.y, noiseWeights)
u_offset.y =  -1 + Math.random()*(gl_Position.y/height)+ _snap(_Time.y, noiseWeights)
// 此处_Time.y的意思是变换周期，好比每3s为一个渲染周期。那么 运行的取值应该是
// 1s -> 1 
// 2s -> 2 
// 3s -> 3
// 4s -> 1复制代码

那么效果就应该能够实现了，昨晚忽然看到感受很棒，可是unity跟正常的开发仍是有很多差别，正常的操做应该是交由shader来进行完成，可是奈何写很差，因而就整理了一下原分享者的思路，若是有疑问的，欢迎在下方提问哦~整理了思路，尚未来得及去code，若是有实现的老哥，记得艾特我丫。

原文是在unity的官方公众号看到的，若是有兴趣能够去看看，不过建议有unity跟shader经验的去看，由于它写的很简洁，并且都是直接shader操做，偏向于实战性的，门槛比较高