这里我们的核心目标是动画的背景可替换，比如说，这里的视频可以有背景色，像以下的图。 接下来我们先对方案进行对比。 选用webgl的话，目前已经有很多很成熟且大型的库可供使用比如pixijs lottie，这些库动画效果酷炫，体积偏大，比如pixijs的cdn版本有80k，lot…

在重视可视化效果的地图应用场景中，常需要对指定区域高亮突出显示。传统的方法是覆盖一个高亮颜色的多边形，但在3D地图中平面多边形无法对区域内的3D模型进行覆盖，立体多边形又无法贴合3D模型的形状。另外，覆盖多边形也无法影响区域外部地区，当我们想要降低外部地区的亮度时就不能使用这种…

1. WebGL介绍 WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定。 2. WebGL、OpenG…

上面的邮箱验证成功以后，我们这里就要选企业了，当然如果你是个体工商户，你也可以选择个体工商户。 这样我们企业小程序就注册好了，可以看到企业小程序后台有微信支付选项的，个人小程序是没有这一选项的。 我们这个时候如果想直接做微信支付商户号关联，会提示如下错误。 也就是说我们必须先经…

最近正学到OpenGL ES如何实现粒子效果，使用苹果官方封装的CoreAnimation也能实现粒子效果，所以这篇文章实现一下抖音点赞，微信红包雨等一些常见的粒子效果。 粒子系统表示三维计算机图形学中模拟一些特定的模糊现象的技术，而这些现象用其它传统的渲染技术难以实现的真实感…

我们可以通过顶点着色器来绘制点线面图形，并组合成其他各种形状，但是一般 2D 场景中，顶点着色器一般都不改，并且它一般决定的是整个画布的大小。所以这里探讨的是通过片元着色器来绘制基础图形。 所以如果想得到一个非正方形，只需要水平和垂直不公用一个 padding 即可。或者通过上…

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

Shader 动画和 Canvas 动画原理是一样的，通过定时器循环渲染，并改变画布中图形的属性来实现动画。 一些 Shader 编辑器都已经实现好了定时器的功能，同时会传递一些跟时间相关的值给到着色器代码中，如 ShaderToy 中与时间相关的属性是 iTime/iTime…

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