着色器从入门到精通一

着色器从入门到精通一

第一章 着色器基础一

概要:

1.深入图形渲染流程内部，了解什么是着色器
2.了解three.js对着色器的封装

1什么是着色器

你也许会问，到底什么是着色器？好吧，从3D图形学历史的角度来讲，它的确曾经扮演过和它名字一样的角色，即二进制码。例如告诉显卡如何在绘制一个场景之前进行渐变或上色。但随着时间的推移，着色器开始渐渐扩展自己的应用范围，现在应当把它定义为一种二进制码，它能够在绘制一个场景之前做任何想要做的事情。这的确非常实用，一时因为这些操作是在显卡中进行的，所以运行速度非常快；二是因为它能够实验很多three.js本身无法实现的功能，并且提高three.js的性能。
无论是在opengl、opengles、还是dx中，着色器都分为顶点着色器和片元着色器。通俗的讲顶点着色器就是对顶点进行操作。例如改变定点的位置和顶点的大小。片元着色器通俗的讲就是用来定义屏幕中显示的各个点的颜色的。在进一步理解，如果将three.js比作C语言的话，那么着色器就是汇编语言，显然所有C语言的实现最终都是由汇编语言完成的。所以着色器有比three.js更强大的功能，虽然three.js的功能已经很强大了。
另外，我要告诉大家的是three.js的最底层部分是着色器实现的，这是因为浏览器最底层就只支持着色器。但是着色器的编程确实太过于麻烦，所以才会有three.js这些容易一点的工具。但是无论怎么样，学习着色器都将是一个快乐的过程，因为它能够真真正正的让你成为高手，让你做你想做的任何事情。

2着色器例子欣赏

分形（Fractal），又称分形，通常被定义为“一个粗糙或零碎的几何形状，可以分成数个部分，且每一部分都是整体缩小后的形状”，即具有自相似的性质。分形的效果图如下所示”