使用自定义shader渲染的材质。 shader是一个用[link:https://www.khronos.org/files/opengles_shading_language.pdf GLSL]编写的小程序，在GPU上运行。您可能需要使用自定义shader，如果你要：

代码示例

例子

[example:webgl_animation_cloth webgl / animation / cloth ]
[example:webgl_buffergeometry_custom_attributes_particles webgl / buffergeometry / custom / attributes / particles]
[example:webgl_buffergeometry_selective_draw webgl / buffergeometry / selective / draw]
[example:webgl_custom_attributes webgl / custom / attributes]
[example:webgl_custom_attributes_lines webgl / custom / attributes / lines]
[example:webgl_custom_attributes_points webgl / custom / attributes / points]
[example:webgl_custom_attributes_points2 webgl / custom / attributes / points2]
[example:webgl_custom_attributes_points3 webgl / custom / attributes / points3]
[example:webgl_depth_texture webgl / depth / texture]
[example:webgl_gpgpu_birds webgl / gpgpu / birds]
[example:webgl_gpgpu_protoplanet webgl / gpgpu / protoplanet]
[example:webgl_gpgpu_water webgl / gpgpu / water]
[example:webgl_hdr webgl / hdr]
[example:webgl_interactive_points webgl / interactive / points]
[example:webgl_kinect webgl / kinect]
[example:webgl_lights_hemisphere webgl / lights / hemisphere]
[example:webgl_marchingcubes webgl / marchingcubes]
[example:webgl_materials_bumpmap_skin webgl / materials / bumpmap / skin]
[example:webgl_materials_envmaps webgl / materials / envmaps]
[example:webgl_materials_lightmap webgl / materials / lightmap]
[example:webgl_materials_parallaxmap webgl / materials / parallaxmap]
[example:webgl_materials_shaders_fresnel webgl / materials / shaders / fresnel]
[example:webgl_materials_skin webgl / materials / skin]
[example:webgl_materials_texture_hdr webgl / materials / texture / hdr]
[example:webgl_materials_wireframe webgl / materials / wireframe]
[example:webgl_modifier_tessellation webgl / modifier / tessellation]
[example:webgl_postprocessing_dof2 webgl / postprocessing / dof2]
[example:webgl_postprocessing_godrays webgl / postprocessing / godrays]

顶点着色器和片元着色器(Vertex shaders and fragment shaders)

您可以为每种材质指定两种不同类型的shaders：:

顶点着色器首先运行; 它接收*attributes*，计算/操纵每个单独顶点的位置，并将其他数据（*varying*s）传递给片元着色器。
片元（或像素）着色器后运行; 它设置渲染到屏幕的每个单独的“片元”（像素）的颜色。

shader中有三种类型的变量: uniforms, attributes, 和 varyings:

*Uniforms*是所有顶点都具有相同的值的变量。比如灯光，雾，和阴影贴图就是被储存在uniforms中的数据。 uniforms可以通过顶点着色器和片元着色器来访问。
*Attributes* 与每个顶点关联的变量。例如，顶点位置，法线和顶点颜色都是存储在attributes中的数据。attributes 只可以在顶点着色器中访问。
*Varyings* 是从顶点着色器传递到片元着色器的变量。对于每一个片元，每一个varying的值将是相邻顶点值的平滑插值。

注意：在shader 内部，uniforms和attributes就像常量；你只能使用JavaScript代码通过缓冲区来修改它们的值。

内置attributes 和 uniforms(Built-in attributes and uniforms)

[page:WebGLRenderer]默认情况下为shader提供了许多attributes和uniforms；这些变量定义在shader程序编译时被自动添加到*片元着色器*和*顶点着色器*代码的前面，你不需要自己声明它们。这些变量的描述请参见[page:WebGLProgram]。

这些uniforms或attributes（例如，那些和照明，雾等相关的）要求属性设置在材质上，以便 [page:WebGLRenderer]来拷贝合适的值到GPU中。如果你想在自己的shader中使用这些功能，请确保设置这些标志。

如果你不希望[page:WebGLProgram] 向你的shader代码中添加任何东西，你可以使用[page:RawShaderMaterial] 而不是这个类。

自定义 attributes 和 uniforms(Custom attributes and uniforms)

自定义attributes和uniforms必须在GLSL着色器代码中声明（在 *vertexShader* 和/或 *fragmentShader* 中)。自定义uniforms必须定义为 *ShaderMaterial* 的 *uniforms* 属性，而任何自定义attribtes必须通过[page:BufferAttribute]实例来定义。注意 *varying*s 只需要在shader代码中声明（而不必在材质中）。

要声明一个自定义属性，更多细节请参考[page:BufferGeometry]页面，以及 [page:BufferAttribute] 页面关于*BufferAttribute* 接口。

当创建attributes时，您创建的用来保存属性数据的每个类型化数组（typed array）必须是您的数据类型大小的倍数。比如，如果你的属性是一个[page:Vector3 THREE.Vector3]类型，并且在你的缓存几何模型[page:BufferGeometry]中有3000个顶点，那么你的类型化数组的长度必须是3000 * 3，或者9000（一个顶点一个值）。每个数据类型的尺寸如下表所示：

属性尺寸
GLSL 类型	JavaScript 类型	尺寸
float	[page:Number]	1
vec2	[page:Vector2 THREE.Vector2]	2
vec3	[page:Vector3 THREE.Vector3]	3
vec3	[page:Color THREE.Color]	3
vec4	[page:Vector4 THREE.Vector4]	4

请注意，属性缓冲区不会在其值更改时自动刷新。要更新自定义属性，需要在模型的[page:BufferAttribute]中设置*needsUpdate*为true。（查看[page:BufferGeometry]了解细节）。

要声明一个自定义的[page:Uniform]，使用*uniforms*属性： uniforms: { time: { value: 1.0 }, resolution: { value: new THREE.Vector2() } }

在[page:Object3D.onBeforeRender]中，建议根据[page:Object3D object]和[page:Camera camera]来更新自定义[page:Uniform]的值。因为 [page:Material] 可以被[page:Mesh meshes]，[page:Scene]的[page:Matrix4 matrixWorld]以及[page:Camera]共享，会在[page:WebGLRenderer.render]中更新，并会对拥有私有[page:Camera cameras]的[page:Scene scene]的渲染造成影响。

构造函数(Constructor)

[name]( [param:Object parameters] )

[page:Object parameters] - (可选)用于定义材质外观的对象，具有一个或多个属性。材质的任何属性都可以从此处传入(包括从[page:Material]继承的任何属性)。

属性(Properties)

[property:Boolean clipping]

定义此材质是否支持剪裁; 如果渲染器传递clippingPlanes uniform，则为true。默认值为false。

[property:Object defaultAttributeValues]

当渲染的几何体不包含这些属性但材质包含这些属性时，这些默认值将传递给shaders。这可以避免在缓冲区数据丢失时出错。


this.defaultAttributeValues = {
	'color': [ 1, 1, 1 ],
	'uv': [ 0, 0 ],
	'uv2': [ 0, 0 ]
};

[property:Object defines]

使用 #define 指令在GLSL代码为顶点着色器和片段着色器定义自定义常量；每个键/值对产生一行定义语句：


		defines: {
			FOO: 15,
			BAR: true
		}

这将在GLSL代码中产生如下定义语句：


		#define FOO 15
		#define BAR true

[property:Object extensions]

一个有如下属性的对象：


this.extensions = {
	derivatives: false, // set to use derivatives
	fragDepth: false, // set to use fragment depth values
	drawBuffers: false, // set to use draw buffers
	shaderTextureLOD: false // set to use shader texture LOD
};

[property:Boolean fog]

定义材质颜色是否受全局雾设置的影响; 如果将fog uniforms传递给shader，则为true。默认值为false。

[property:String fragmentShader]

片元着色器的GLSL代码。这是shader程序的实际代码。在上面的例子中， *vertexShader* 和 *fragmentShader* 代码是从DOM（HTML文档）中获取的；它也可以作为一个字符串直接传递或者通过AJAX加载。

[property:String glslVersion]

Defines the GLSL version of custom shader code. Only relevant for WebGL 2 in order to define whether to specify GLSL 3.0 or not. Valid values are *THREE.GLSL1* or *THREE.GLSL3*. Default is *null*.

[property:String index0AttributeName]

如果设置，则调用[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bindAttribLocation gl.bindAttribLocation] 将通用顶点索引绑定到属性变量。默认值未定义。

[property:Boolean lights]

材质是否受到光照的影响。默认值为 *false*。如果传递与光照相关的uniform数据到这个材质，则为true。默认是false。

[property:Float linewidth]

控制线框宽度。默认值为1。

由于[link:https://www.khronos.org/registry/OpenGL/specs/gl/glspec46.core.pdf OpenGL Core Profile]与大多数平台上[page:WebGLRenderer WebGL]渲染器的限制，无论如何设置该值，线宽始终为1。

[property:Boolean morphTargets]

When set to true, morph target attributes are available in the vertex shader. Default is *false*.

[property:Boolean morphNormals]

When set to true, morph normal attributes are available in the vertex shader. Default is *false*.

[property:Boolean flatShading]

[property:Boolean skinning]

定义材质是否使用蒙皮; 如果将蒙皮属性传递给shader，则为true。默认值为false。

[property:Object uniforms]

如下形式的对象：


{ "uniform1": { value: 1.0 }, "uniform2": { value: 2 } }

指定要传递给shader代码的uniforms；键为uniform的名称，值(value)是如下形式：


		{ value: 1.0 }

这里 *value* 是uniform的值。名称必须匹配 uniform 的name，和GLSL代码中的定义一样。注意，uniforms逐帧被刷新，所以更新uniform值将立即更新GLSL代码中的相应值。

[property:Boolean uniformsNeedUpdate]

Can be used to force a uniform update while changing uniforms in [page:Object3D.onBeforeRender](). Default is *false*.

[property:Boolean vertexColors]

[property:String vertexShader]

顶点着色器的GLSL代码。这是shader程序的实际代码。在上面的例子中，*vertexShader* 和 *fragmentShader* 代码是从DOM（HTML文档）中获取的；它也可以作为一个字符串直接传递或者通过AJAX加载。

[property:Boolean wireframe]

将几何体渲染为线框(通过GL_LINES而不是GL_TRIANGLES)。默认值为*false*（即渲染为平面多边形）。

[property:Float wireframeLinewidth]

方法(Methods)

[method:ShaderMaterial clone]() [param:ShaderMaterial this]

创建该材质的一个浅拷贝。需要注意的是，vertexShader和fragmentShader使用引用拷贝； *attributes*的定义也是如此; 这意味着，克隆的材质将共享相同的编译[page:WebGLProgram]；但是，*uniforms* 是 值拷贝，这样对不同的材质我们可以有不同的uniforms变量。

源码(Source)

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

着色器材质([name])