lucefer

当下最火的短视频应用莫过于抖音了，凭借着丰富的视频特效，抖音吸引了很多年轻用户的青睐，今天我们来看一下，抖音特效如何在 Web 端实现。 1、使用预渲染 canvas 绘制 video 的每一帧画面。 2、将预渲染 canvas 作为纹理传到显存中。 3、着色器程序对纹理进行后…

上一节我们讲了 WebGL 坐标系的分类以及它们之间的转换方式，本节开始详细介绍坐标系基本变换的算法实现，图形学中实现变换的主要数学工具是矩阵，所以在讲解坐标系变换之前，我们先温习一下矩阵。 所使用的向量是行向量还是列向量。 如果是行向量，按照数学领域中矩阵相乘的规则，向量要放…

前面介绍了 3D 变换的原理和算法实现，并通过一些简单的 demo 演示了变换效果，但这些 demo 都是使用 WebGL 技术渲染。本节我们暂时不使用 WebGL，而是改用前端同学最熟悉的 CSS 技术来实现 3D 效果，并进一步了解 CSS 中的 3D 属性和 WebGL …

上节带领大家学习了基本三角形图元的绘制过程，以及如何使用缓冲区向着色器传递多个数据，但上节只演示了往着色器传递坐标这一种数据，本节通过绘制渐变三角形，讲解一下如何通过缓冲区向着色器传递多种数据。 顶点数据在 buffer 中的排布方式。 切换 buffer 时，bindBuff…

类型化数组是 HTML5 中引入的API，它能够让开发者使用 JavaScript 直接操作二进制数据。在类型化数组出现之前，我们是无法直接通过 JavaScript 操作二进制数据，通常都是操作 JavaScript 中的数据类型，由运行时转化成二进制。这就多了一个转化的过程…

前端面试常问第二大问题是http缓存相关内容。说真的，http缓存相关的细节比较多，并且 http 常用协议版本有1.0、1.1，（本文暂不讨论http2.0）。 我们先罗列一下和缓存相关的请求响应头。 今天着重介绍一下浏览器缓存机制，我们知道，浏览器缓存一般都是针对静态资源，…

我们看一些 Promise 的常见面试问法，由浅至深。 3、Promise 解决的痛点还有其他方法可以解决吗？如果有，请列举。 8、能不能手写一个 Promise 的 polyfill。 这些问题，如果你都能 hold 住，那么面试官基本认可你了。带着上面这些问题，我们往下看。…

window 的 onload 事件对于前端童鞋来说肯定是熟的不能再熟了，相信大家在刚入门时，见的最多的可能就是 load 事件了。load 事件接触多了，大家就会接触到它的闺蜜 DOMContentLoaded 事件，网上有很多介绍这两个事件的文章，对它们的解释无外乎以下两种…

nodejs是单线程执行的，同时它又是基于事件驱动的非阻塞IO编程模型。这就使得我们不用等待异步操作结果返回，就可以继续往下执行代码。当异步事件触发之后，就会通知主线程，主线程执行相应事件的回调。 以上是众所周知的内容。今天我们从源码入手，分析一下nodejs的事件循环机制。 …