Hankz

应用一：Shader 光晕 为了营造太空的沉浸感，对针对地球额外做了一部分发光效果： 这里借助了 Three.js 中的 ShaderMaterial 编写 Shader 代码，利用菲涅耳 Fresn

第一次看到《蜘蛛侠：平行宇宙》这部电影时，就被其中的十足创新的视觉动态效果所惊艳，跟以往 3D 动画追求自然流畅截然相反，《蜘蛛侠：平行宇宙》反而在往漫画观感体验靠拢，让 3D 动画 2D 化，而且不是单纯的 2D 化。 正如在一篇文章里看到的评论：混搭上各类平行宇宙间不同的漫…

在之前的文章中提及了 Shader 中的颜色计算，介绍了一些基本的颜色混合计算，然而在实际的 Shader 滤镜中，简单到加减乘除并不能很好地还原出我们想要的效果，mix()也只是其中一个选择。 回顾一下，平时拿到设计师提供的设计稿，都能看到他们在 Photoshop 中应用了…

了解完高斯模糊之后，接下来看看运动模糊。 什么是运动模糊？ 根据百科的定义：动态模糊或运动模糊是静态场景或一系列的图片像电影或是动画中快速移动的物体造成明显的模糊拖动痕迹。 摄影机的工作原理是在很短的时间里把场景在胶片上曝光。场景中的光线投射在胶片上，引起化学反应，最终产生图片…

只要我们把 3x3 的网格放大，如 9x9 / 16x16，或者直接放大像素间距，都可以增加模糊效果。 然而上面的实现方式性能是比较差的。因为遍历的成本太高了。通常拆成两个一维向量，这样时间复杂度就由NxNxWxH下降为2xNxWxH（W为图像的宽，H为图像的高）。 让图片更加…

说到随机函数，JavaScript 中有 Math.random()，PHP 中有rand()，在图形绘制时，随机也无处不在。《The Book Of Shader》 通过一个简单的函数衍化，让我们了解随机： Shader 中的随机是确定性随机（伪随机），也就是当我们的输入值确…

转场效果在视频编辑工具中最为常见，在两段视频或图像之间增加一个「过渡」的效果，可以让整个过程更佳柔滑自然。常见的转场如渐变过渡、旋转、擦除等（下图为 iMovie 自带转场）： 简单解释下，假设我们的转场效果是从右往左切换（正如动图所示），切换的时机就是每轮动画的结束，对u_S…

OpenGL 是底层的驱动级的图形接口，但是这种底层接口是浏览器中的 JavaScript 无法调用的。2010 年 WebGL 被推出来了之后，它允许工程师使用 JavaScript 去调用部分封装过的 OpenGL ES2.0 标准接口去提供硬件级别的 3D 图形加速功能。…

绘制 Pattern 图案并不需要在 0~1 坐标系内重复绘制，我们可以利用 fract() 这个函数来把放大后的坐标系拆分成若干个0~1的坐标系。