0%

前言

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

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

阅读全文 »

前言

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

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

阅读全文 »

前言

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

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

阅读全文 »

前言

background属性实际上和fontanimationtransition等属性一样,是一个缩写属性;实际上是由多个相关的属性组成的。

平时我们可能用的多就是填个背景色或者背景图地址上去,偶尔再调个背景图适应,也就没怎么关注过了。

不过把所有的background-*属性了解一下,会帮助我们更加的理解背景的本质,关键时候就不怕各种微调了。

阅读全文 »

前言

箭头函数的设计目的就是替代函数表达式及匿名函数在某些场景的应用,使用箭头函数能够更加简洁明了地描述匿名函数和函数表达式!

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

—— MDN

阅读全文 »