在最后我们将一起实现如下图水面波动的效果，不过阅读完本文，也将了解到这一思路的其他用法本篇默认读者本已经能读懂基本的glsl语言，语法不再做过多解释，如果有不理解可以翻看之前的文章有详细讲解用shader制作马赛克这是上帝的杰作：10行代码搞定“热成像”几款207...

2D矩阵对旋转的局限性在之前的文章中我们讨论过旋转这件事，也说过用2阶矩阵描述的旋转：教练我想学矩阵很多成熟的框架/库也是基于矩阵这套逻辑来写的，比如说我膜拜的pixi.js

当腻了职场“螺丝钉”？想要成为不可或缺的角色？【开发，设计，运营，销售】任君挑选。薪酬美丽；团建给力；管理扁平；未来可期。快来稿定，一探究竟！

3D场景实现水波纹，我们往往会使用网格去模拟真实的水流动，无论是简单的三角函数或是gerstner wave。然后通过真实物理渲染（base physcal render）来实现其中的折射与反射。这些实现可以参考《GPU GEMS》第一版。

头“秃”来自“the book of shader”今天我的文章可能会有点抽象。我尽量“有图有真相”，不让大家的大脑内存泄漏！本文会讲到：transform 2D变换背后的数学原理如何直观理解一个矩阵齐次变换是什么？可能会涉及一些：逆矩阵()，正交()，向量的知识，用到的时候假装自己知...

伴随着赛博朋克2077的火爆（各种意义上的），这种电子故障类的shader似乎成为了一种时尚，因为你真不知道这是bug还是有意为之。今天我们就来了了几款故障类shader的原理及实现吧！本期将介绍2种shader（颜色偏移与扫描偏移）下期我们再说两种（抖动和摇晃），合理使...

已经过去的2020是一个不怎么顺遂的一年，出入公共场所都需要体温监测，而人流量密集的商场，一般会采用热成像技术来快速测量体温。那么今天我们就来说说如何让一张普通图片变成具有热成像的效果。

一个渲染引擎如何实现loop方法？一个监听回调队列如何实现添加和删除？监听回调队列先后关系如何实现？如果在监听回调函数中更新队列，本轮回调如何正确地执行？今天我们就借用PIXI.JS的源码来说说以上功能的实现（本文不打算讲解TS，为了方(tou)便(lan)就是用v4版本...

在之前的文章中我分享过一些图形学的知识，比如相机，比如空间。但那些更多是3D的范畴，而制作这些效果的时间成本会略大一下，而其实工作中很多时候，web需要处理的更多的是2D的效果，而2D时间确实就没有3D辣么复杂（其实也不简单），所以这个系列我们着重于一些2Dsh...

从本篇起，我们将正式进入webgl的3D世界 本篇涵盖的内容包括：webgl它在干啥？如何画一个正方体？如何成为一个“有深度”的正方体？正方体要离家出走了！webgl它在干啥？首先我们需要知道webgl的世界其实是一个x[-1,1],y[-1,1],z[-1,1]的小世界，所有在这个长度2的世界...

本文大纲矩阵和线性变换是什么？webgl如何实现缩放和旋转？平移不是线性变换，那该怎么办？webgl如何实现平移？今天的主菜是“矩阵”在上一篇中我们已经实现了使用webgl绘制图形这个小目标《前端图形学从入门到放弃》001 画一个三角形今天我们来探讨一个新的话题矩阵我...

说人话webgl就是个工具，可以拿来画图的，它依赖于canvas，在canvas上你可以获取2d的上下文，也可以获取webgl的上下文。类似宝可梦新手村可以选蒜头王八也可以选黄皮耗子

许多前端框架（如Angular,React,Vue）都有自己的响应式引擎。通过理解如何响应，提议提升你的开发能力并能够更高效地使用JS框架。本文中构建的响应逻辑与Vue的源码是一毛一样的！

与我交流过的绝大多数web开发者，都喜欢使用所有新的语法特性（如async/await，类，箭头函数等）。尽管所有现代浏览器都支持以上的语法，多部分开发者仍然会转译到ES5并且加上polyfill以便支持哪一小部分仍旧使用老版本浏览器的用户。

原文地址上周在JS圈中发生了意见相当重磅的事件。Vue的star数超过了React。 使用一个叫做Star History的工具，我们可以看到：React的大佬地位被迅速蹿升的Vue给取代了！ 每当一个流行框架出现时，总能引发那个框架“真的”更受欢迎，那个框架更强大的争论！ 纸面繁荣和...

做IE的兼容不仅会使开发效率降低，还有造成颈肩腰椎等部位疼痛或者是脱发，痔疮等问题。 PS：乱说的。最理想的前端开发就是不需要顾及css的兼容性，兼容性让预处理工具去做，前端只要负责逻辑就好

2.你只在构造函数内把props.father的值赋给了state.father，后面随着props.father的改变，state.father并不会主动响应，原因见上一点

{代码...}

然而，这可能还不够。你有想过页面也许会加载许多实际不会用到的资源？通过懒加载，一种设计模式，来实现推迟初始化（加载/获取/分配）资源（代码/数据/静态资源）直到你需要使用的时候再加载。

Tree Shaking是一个针对ES6以上代码的清楚死代码的算法，也是Webpack 2最被期待的特性之一。通过清除未使用的ES6引用，Webpack能更助于压缩过程从而得到比之前更小的文件体积。