Extjs 4.2 MVC+ThreeJs学习笔记（三）Shader（着色器）

　　Shader的定义

　　维基百科中Shader的定义是：应用于计算机图形学领域，指一组供计算机图形资源在执行渲染任务时使用的指令。程序员将着色器应用于图形处理器（GPU）的可编程流水线，来实现三维应用程序。这样的图形处理器有别于传统的固定流水线处理器，为GPU编程带来更高的灵活性和适应性。通俗来说Shader就是运行在GPU中的一段代码，只管3D模型什么时候是什么颜色的程序，这样3D场景的渲染降低了对于CPU的依赖，变相增加了程序的性能。

　　Shader的种类

　　在Direct3D和OpenGL中有以下3种Shader：

　　顶点着色器：处理每个顶点，将顶点的空间位置投影在屏幕上，即计算顶点的二维坐标。

　　几何着色器：可以从多边形网格中增删顶点。

　   像素着色器（Direct3D）：又称为片段着色器（OpenGL），处理来自光栅化器的数据。

      OpenGL从版本1.5开始继承了一种类C语言的着色语言，称为OpenGL着色语言（GLSL）。

      在Three.js中主要有2种着色器：顶点着色器和片段着色器

      顶点着色器：通过修改模型的顶点生成或者修改3D模型。这是通过顶点着色器改变形状的一个例子（点我- -）。

      片段着色器：修改或者绘制场景中的像素。 他们通常用于3D场景的光栅化渲染，或者用于添加灯光等其他效果。

      片段着色器有两种不同的类型：

　　1.直接绘制图片或者纹理的Shader。这些Shader不但可以绘制抽象的图形，还可以加载到THREE.ShaderMaterial中去，可以给3D物体带来炫酷的效果，像这样。

　　2.修改其他图片或者纹理的Shader。这些Shader可以让你预处理一些已经存在的纹理，或者为一个3D场景添加光晕、闪光的效果。接下来我们主要学习这种Shader。

　　Three.js中的片段着色器

      Three.js中的效果管理器是EffectsComposer，还有很多有用的Shader。这些代码没有被编译到Three.js文件中，而是被分在根目录的2个文件夹中：

      /examples/js/postprocessing---包含了EffectsComposer类。

      /examples/js/shaders---含有很多单独的Shader。

      不幸的是，这些Shader写的不是很好，你需要自己去研究和测试。

      这是一些Three.js Shader的Demo。

　　在Three.js中使用Shader

      使用一个Shader非常简单，下面的例子将点效果和RGB shift效果应用到场景中。

      点效果。

      RGB shift。

　　

// postprocessing
composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( scene, camera ) );

var dotScreenEffect = new THREE.ShaderPass( THREE.DotScreenShader );
dotScreenEffect.uniforms[ 'scale' ].value = 4;
composer.addPass( dotScreenEffect );

var rgbEffect = new THREE.ShaderPass( THREE.RGBShiftShader );
rgbEffect.uniforms[ 'amount' ].value = 0.0015;
rgbEffect.renderToScreen = true;
composer.addPass( rgbEffect );

GLSL语法

WebGL里的Shader都是用GLSL语言写的。这是一个介绍GLSL（统一着色语言）的教程。
下面是一个Shader的例子：

THREE.BasicShader = {

uniforms: {},

vertexShader: [

"void main() {",

"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

"}"

].join(" "),

fragmentShader: [

"void main() {",

"gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );",

"}"

].join(" ")

};

　　原Blog地址：http://www.airtightinteractive.com/2013/02/intro-to-pixel-shaders-in-three-js/