在之前的文章中，我们使用WebGL绘制了很多二维的图形和图像，在学习2D绘图的时候，我们提过很多次关于GPU的高效渲染，但是2D图形的绘制只展示了WebGL部分的能力，WebGL更强大的地方在于，它可以绘制各种3D图形，而3D图形能够极大地增强可视化的表现能力。

固定帧动画的实现，是使用已生成的静态图像，然后将这些图像依次播放，而后面两种，增量动画和时序动画，都是需要动态绘制图像。可想而知，后面这两种动画形式会更灵活一些。

大家好，本文分享的是如何使用后期处理通道增强图像效果，通过前面几篇文章，我们了解了一些动态生成纹理的方法，比如符号距离场SDF、基于参数方程生成图案、基于噪声生成纹理，等等。这些生成纹理的技术有相似的地方，就是根据片元的纹理坐标，对片元着色，直接生成纹理。

首先，什么是噪声呢？在上篇文章中我介绍过一个生成随机数的函数，利用随机技巧我们生成了一个类似剪纸的图案，那在自然界中，这种离散的随机也是比较常见的，比如蝉鸣突然响起又突然停下，比如雨滴随机落在一个位置，但是随机和连续并存是更常见的情况，比如山脉的走向是随机的，但山峰之间的高度又是连续的，比如天上...

说到曲线和几何图形的绘制，我们知道图形系统默认支持的是通过直角坐标绘制，但是有些曲线呢，不太容易使用直角坐标系来表示，却可以很方便地使用极坐标来表示，这个时候我们可以选择通过极坐标和直角坐标的相互转换，来实现图形的绘制。

本文将介绍如何使用着色器来进行几何造型，说到几何图形大家一定都不陌生，比如说三角形、圆形，接触过WebGL基础使用的小伙伴一定都知道怎么去在画布上绘制一个三角形，只要传入三个顶点坐标，并选择绘图模式，我们就能在WebGL的画布上画出一个三角形。

接触过Canvas的小伙伴应该都知道，在Canvas2D中我们要加载一个图片很简单，通过调用drawImage API就能将图像绘制到画布上，当然在WebGL中我们也可以绘制图像，在绘制时我们需要用到WebGL中的纹理对象，在之前WebGL实现网格背景的文章中，我使用了一个叫做纹理坐标的配置，现在要完成纹理的加载我们也需要用到纹理坐标，...

之前在《CSS之浮动》中，我当时是想一起说说定位的，因为我在很多地方看到有把float和position放在一起讲的，说它们的一些属性值可以使元素脱离文档流，但是没想到在准备内容的时候，发现浮动的内容有点多，就先把浮动的内容单独整了一篇。本文就继续来说说定位吧。

在Canvas2D中实现圆形的绘制比较简单，只要调用arc指令就能在Canvas画布上绘制出一个圆形，类似的，在SVG中我们也只需要一个<circle>标签就能在页面上绘制一个圆形。那么在WebGL中我们要怎么去绘制呢？WebGL只能绘制三种形状：点、线段和三角形，它没有提供直接绘制圆形的功能，当然也无法像SVG一样使用标签，所以...

最近我在可视化课程中学习了如何在Canvas中利用像素处理来实现滤镜效果，在这节课程的结尾留了一道局部放大镜的题目，提示我们用像素处理的方式去实现这个效果，最终实现随着鼠标移动将图片局部放大，本着把学到的内容落地实践的想法，我就去思考了一番，但很不幸，我思考了好几天也没思考出结果，因为刚开始我想的一直...

在上篇文章中，我们使用WebGL实现了网格背景，当时有提到说使用WebGL来实现的好处之一，是网格背景可以与画布上的其他元素更好地融合，比如一起缩放平移，那么在WebGL中怎么实现缩放和平移呢？现在我们已经实现了网格背景，接下来我们就用网格背景作为例子来了解一下WebGL中的缩放和平移。

作为前端开发人员，我们最关注的就是应用的交互体验，而元素背景是最基础的交互体验之一。一般而言，能够使用代码实现的界面，我们都会尽可能减少图片的使用，这主要是有几方面的原因，第一，是图片会消耗更多的带宽，对于移动端或者网络信号较差时的体验不够友好，第二是不够便捷，在使用图片的情况下即使有细微的调整...

提到浮动，前端的小伙伴肯定都不陌生，但是随着弹性布局等等一些更好用的标准出来后，用在布局方面少了很多，当初我刚开始接触前端的时候，很习惯用浮动来给元素改变定位，当时还并不是很流行flexbox布局，很多布局会通过浮动来实现，但是使用浮动来布局会产生一些副作用，比如虽然使用浮动可以使元素向左或向右靠齐，但...

设计模式是通用的、可复用的代码设计方案，也可以说是针对某类问题的解决方案，因此，掌握好设计模式，可以帮助我们编写更健壮的代码。wiki中将设计模式分为四类，分别是：创建模式（creational patterns）结构模式（structural patterns）行为模式（behavioral patterns）并发模式（concurrency patterns）适配器模式属...

设计模式是通用的、可复用的代码设计方案，也可以说是针对某类问题的解决方案，因此，掌握好设计模式，可以帮助我们编写更健壮的代码。wiki中将设计模式分为四类，分别是：创建模式（creational patterns）结构模式（structural patterns）行为模式（behavioral patterns）并发模式（concurrency patterns）策略模式和状...

对于编写应用程序，尤其是要部署上线投入生产使用的应用，QA是其中重要的一环，在过去的工作经历中，我参与的项目开发，大多是由测试同学主要来把控质量的，我很少编写前端方面的测试代码，对于测试工具的使用，也基本停留在一个小玩具的样子，所以接触的也少，回忆上一次写单元测试，还是在一个vue3的课程中使用jest实...

说到颜色，前端的小伙伴们一定都不陌生，比如字体颜色、背景色等等，颜色是构建视觉效果的重要部分，所以也必然是可视化的关键部分，当学习到可视化中有关于颜色表示的这一部分时，我也想起了我曾经玩过的一个游戏，叫做Blendoku，这个名字和数独的Sudoku有些类似，考验的是玩家对颜色的敏锐度，下面是其中一个关卡的截...

在几年前，我就在一些博客中看到关于CSS中transform的分析，讲到它与线性代数中矩阵的关系，但当时由于使用transform比较少，再加上我毕竟是个数学学渣，对数学有点畏难心理，就有点看不下去，所以只是随便扫了两眼，就没有再继续了解了。现在在学习可视化，又遇到了这个点，又说到这是可视化的基础知识，既然这样，那看...

最近在学习可视化的东西，这让我想起了一些以前用过的图表库，其实我在日常做的大多是普通的需求，可视化方面应用的并不多，只是偶尔会因为个别特殊的需求，去借助一些图表库来实现图表的展示，这些普通的图表库，在使用上都大差不差，并没有什么太大的区别，但是某些特殊的图表库，比如地图库，在使用上和一些普通的图...

继续复习可视化的内容。WebGL和其他Web端的图形系统存在很大的不同，是OpenGL ES规范在浏览器的实现，它最大的不同就在于它更接近底层，可以由开发者直接操作GPU来实现绘图，性能很好，可以充分利用GPU并行计算的能力，并且WebGL还支持3D物体的渲染；WebGL最大的缺点应该就在于它的使用比较复杂，不易掌握，不同于一般的...

继续巩固我的可视化学习，向量运算是计算机图形学的基础，本例依旧是向量的一种应用，利用向量判断多边形边界，但是多边形的边界判断稍微有点复杂，所以除了应用向量之外，还需要借助三角剖分的相关工具。这个例子中可视化的展示采用Canvas2D来实现。

最近我在学可视化的东西，借此来巩固一下学习的内容，向量运算是计算机图形学的基础，这个例子就是向量的一种应用，是利用向量来计算点到线段的距离，这个例子中可视化的展示采用Canvas2D来实现。

事件循环不是浏览器独有的，从字面上看，“循环”可以简单地认为就是重复，比如for循环，就是重复地执行for循环体中的语句，所以事件循环，可以理解为重复地处理事件，那么下一个问题是，处理的是什么事件，事件的相关信息从哪里获取。

在前端面试中，一般比较侧重JavaScript方面的考察，CSS布局方面考察的内容会相对少一些，其中display: none与visibility: hidden的区别是较常见的考点，这两个css配置都可以从视觉上隐藏DOM元素，那这两者的使用上有什么区别呢？

设计模式wiki中将设计模式分为四类，分别是：创建模式（creational patterns）结构模式（structural patterns）行为模式（behavioral patterns）并发模式（concurrency patterns）迭代器模式属于其中的行为模式。迭代器做的只有一件事，就是解决集合的遍历问题。以下是wiki对迭代器模式的概括性描述：Provide a way to a...

设计模式wiki中将设计模式分为四类，分别是：创建模式（creational patterns）结构模式（structural patterns）行为模式（behavioral patterns）并发模式（concurrency patterns）观察者/发布订阅模式属于其中的行为模式。实际情境公众号订阅说到发布订阅，拿微信公众号举例，就很好理解，有n个人订阅了某公众号，在该公...

当时分享的具体内容是什么我已经不记得了，而且其实我当时也并不太理解设计模式是什么，后来阅读了一些文章，我隐隐约约地理解设计模式就是代码的设计方案。

在前端的面试中，相对JavaScript而言，CSS布局方面考察的内容会相对少一些，其中BFC是布局样式方面常考的一个考点。什么是BFCBFC，全称为Block Formatting Context，翻译过来即块格式化上下文。之前在其他文章中看到的说明是，网页上一个独立且隔离的渲染区域。现在呢，我稍微查阅了一些官方的信息。在了解BFC之前，我们...

首先我们知道wasm是目标语言，是一种新的V-ISA标准，所以编写wasm应用，正常来说不会直接使用WAT可读文本格式，更不会用wasm字节码；而是使用其他高级语言编写源代码，经过编译后得到wasm应用。课程中使用了C++来编写源代码，所以这里我也用C++来编写demo。

节流与防抖，先从字面上理解一下，节流就是节制流入或流出，在前端方面我个人理解一下，指的是节制功能或请求的触发次数，所以节流函数字面上的意思就是防止功能或请求被频繁触发的函数；防抖呢，更好理解，防止抖动，它的字面意思更贴近前端的需求，就是防止页面抖动，以达到更好的用户体验。