snowdream

前言

在掘金上看到一篇文章，大意是如何让a === 1 && a === 2 && a === 3等于true；一开始确实一脸懵逼，不过后来想到了访问修饰符能够解决这个问题，毕竟每访问一次值就加上1就好了；当然，我居然忘了全局变量本身就是window的一个属性这个点，有点疏忽大意。

1
2
3
4
5
6
7
8

let val = 1
Object.defineProperty(window, 'a', {
  get () {
    return this.val++ // 这里的this就是全局对象window
  }
})

console.log(a === 1 && a === 2 && a === 3) // true

不过，我又想到貌似对象还有一些方法能够改变访问到的值；比如：

• Object.prototype.valueOf()
• Object.prototype.toString()
• [Symbol.toPrimitive](hint)

然而，经过折腾发现这三种方法并不像访问修饰符那样的机制，在使用全等号===进行判断时并没有触发：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let a = {
  valueOf () {
    return 1
  },
  toString () {
    return '2'
  },
  [Symbol.toPrimitive] () {
    return 3
  }
}

console.log(a === 1) // false
console.log(a === '2') // false
console.log(a === 3) // false

所以，心里自然就有疑问，这几个方法到底在什么时候才会触发？

前言

记录npm使用的一些注意事项，以及收集一些npm错误的解决办法。

前言

在webGL中，纹理有两种类型，一种是2d的，另一种是天空盒类型的。纹理除了用于给物体表面贴图之外，还可以用于数据传输，十分有用。

纹理数据的来源可以是图片、视频、帧缓冲、canvas甚至还可以是数组，对于着色器而言，纹理就是一类特定的数据，在着色器可以使用取样器来进行数据取样（解析）。

前言

直接用webGL画出成千上万的粒子，并不像在canvas中造出相应数量的粒子“实例”，然后统一绘制那么简单；因为直接在webGL中绘制时，实际上是用着色器去绘制，而着色器的API有限，最重要的是数据传入着色器内的方式有限；但是另一方面由于着色器内可以进行并行运算，因此如果将原本在CPU中进行的计算转移到GPU内就会大幅提高运行效率，画面也就更流畅了。

而帧缓冲就可以解决大量数据传入的问题，不过用帧缓冲来传递数据本质上是利用帧缓冲作为数据写入介质，将数据通过帧缓冲保存到纹理上，然后将纹理传入相应的着色器；帧缓冲实际上的作用其实更加强大。

前言

逐帧动画就有点像gif图，就是将动画的所有帧都提取出来，然后按顺序进行播放；

利用CSS3中的steps()函数以及background-position即可轻易的实现！