|└──── ... |└──── ... |└──── ... 将糊掉的部分设为第二组Mask，采用新的通道：不做任何处理，直接渲染。这组中有精灵文字和辉光（辉光不需要加辉光和抗锯齿，相反如果放在上一组容易产生色差等意料外的bug，所以也放在不做任何处理这一组里）

数字图像处理（Digital Image Processing)是指用计算机进行的处理。说起数字图像处理大家都会想到C++有很多库和算法，MATLAB的方便，但自从有了canvas，JavaScript可以对图像进行像素级的操作，甚至还可以直接处理图像的二进制原始数据。 HTM…

我对图像处理一直很感兴趣，曾经写过好几篇博客（1，2，3，4）。 前几天读到一篇文章，它提到图像其实是一种波，可以用波的算法处理图像。我顿时有一种醍醐灌顶的感觉，从没想到这两个领域是相关的，图像还可以这样玩！下面我就来详细介绍这篇文章。 我们知道，图像由像素组成。下…

计算机图像处理是一门很成熟的技术，任何一门可操作系统接口的语言都能很轻易的实现各种处理操作。但是前端限于浏览器环境和接口限制，处理起来会有诸多不便，这里所说的前端图像处理，是真的指 ** 不借助任何后端服务 ** 纯前端实现的图像处理。本文会介绍 canvas 位图处理，SVG 矢量图和 CSS3 图像处理，重点是 canvas，并且最后会附上一个小应用。

贝塞尔曲线并非是由贝塞尔发明的，但是是因为他把这个东西应用到当时的汽车领域而闻名的，所以取名为贝塞尔曲线。 在我看来，用简单的话来理解一下贝塞尔曲线，他是通过少量几个点，使用一套公式，生成一条平滑曲线。 先盗用人家的图，嘿嘿。 平面ABC 3个点。 从这里可以看出，这里有3个关…

网页上各种酷炫的粒子动画看的人眼花缭乱，实际上原理却非常简单。 获取像素信息 首先我们需要画张图到Canvas上，这里因为我懒的扣图(实际上是不会)，就找了张jpeg的白底图片。实际上用png的透明图会好很多。 一定要等图片加载完再画，这很重要，可以用判断图片的complete…

本文会把WebGL工作的具体流程梳理一遍，WebGL到底是如何渲染出一个三角形的。我们常说把大象装进冰箱需要三步，那么写一个WebGL程序应该也只需要三步：1、把数据放入缓冲区，2、把缓冲区的数据给着色器，3、着色器把数据给GPU。 一切的前提那一定是WebGL上下文了。 在创…

对于做3D WebGL 的开发者来说，加载大量的 hdr、glb、gltf 等文件往往是很令人头疼的，因为这些文件体积不小，在网络侧加载会消耗大量时间，从而影响用户体验。对于这些大文件，localstorage 和 sessionstorage 的缓存容量肯定是不够塞牙缝的。所…