Un matériau rendu avec des shaders personnalisés. Un shader est un petit programme écrit en [link:https://www.khronos.org/files/opengles_shading_language.pdf GLSL] qui s'exécute sur le GPU. Vous pouvez utiliser un shader personnalisé si vous avez besoin de :

Code Example

Exemples

[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_interactive_points webgl / interactive / points]
[example:webgl_video_kinect webgl / video / kinect]
[example:webgl_lights_hemisphere webgl / lights / hemisphere]
[example:webgl_marchingcubes webgl / marchingcubes]
[example:webgl_materials_envmaps webgl / materials / envmaps]
[example:webgl_materials_lightmap webgl / materials / lightmap]
[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]

Shaders de vertex et shaders de fragments

Vous pouvez spécifier deux types de shaders différents pour chaque matériau :

Le vertex shader s'exécute en premier ; il reçoit des `attributs`, calcule / manipule la position de chaque sommet individuel, et transmet des données supplémentaires ("variantes") au fragment shader.
Le shader fragment ( ou pixel ) s'exécute en second ; il définit la couleur de chaque "fragment" individuel (pixel) rendu à l'écran.

Il existe trois types de variables dans les shaders : les `uniforms`, les `attributes` et les `varyings` :

Les `Uniforms` sont des variables qui ont la même valeur pour tous les sommets - éclairage, brouillard, et les cartes d'ombre sont des exemples de données qui seraient stockées dans des uniformes. Les uniformes sont accessibles à la fois par le vertex shader et le fragment shader.
`Attributes` sont des variables associées à chaque sommet --- par exemple, la position du sommet, face normale et vertex color sont tous des exemples de données qui seraient stockées dans des attributs. Les attributs ne sont accessibles "que" dans le vertex shader.
`Varyings` sont des variables qui sont passées du vertex shader au fragment shader. Pour chaque fragment, la valeur de chaque variable sera interpolée en douceur à partir des valeurs des sommets adjacents.

Notez que "dans" le shader lui-même, les uniformes et les attributs agissent comme des constantes ; vous ne pouvez modifier leurs valeurs qu'en transmettant des valeurs différentes aux tampons à partir de votre code JavaScript.

Attributs et uniformes intégrés

La [page:WebGLRenderer] fournit de nombreux attributs et uniformes aux shaders par défaut ; les définitions de ces variables sont ajoutées à vos `fragmentShader` et `vertexShader` codés par le [page:WebGLProgram] lorsque le shader est compilé ; vous n'avez pas besoin de les déclarer vous-même. Voir [page:WebGLProgram] pour plus de détails sur ces variables.

Certains de ces uniformes ou attributs (par exemple, ceux concernant l'éclairage, le brouillard, etc.) exigent que les propriétés soient définies sur le matériau pour que [page: WebGLRenderer] copie les valeurs appropriées au GPU - assurez-vous de définir ces flags si vous souhaitez les utiliser fonctionnalités dans votre propre shader.

Si vous ne voulez pas que [page:WebGLProgram] ajoute quoi que ce soit à votre code de shader, vous pouvez utiliser [page:RawShaderMaterial] au lieu de cette classe.

Attributs et uniformes personnalisés

Les attributs personnalisés et les uniformes doivent être déclarés dans votre code de shader GLSL (dans `vertexShader` et/ou `fragmentShader`). Les uniformes personnalisés doivent être définis dans "les deux" propriétés `uniforms` de votre `ShaderMaterial`, alors que tous les attributs personnalisés doivent être définis via les instances [page:BufferAttribute]. Notez que "varying" doit uniquement être déclaré dans le code du shader (et non dans le matériau).

Pour déclarer un attribut personnalisé, veuillez vous référer à la page [page:BufferGeometry] pour un aperçu, et la page [page:BufferAttribute] pour un aperçu détaillé de l'API `BufferAttribute`.

Lors de la création de vos attributs, chaque tableau typé que vous créez pour contenir vos données doit être un multiple de la taille de votre type de données. Par exemple, si votre attribut est de type [page:Vector3 THREE.Vector3], et vous avez 3000 sommets dans votre [page:BufferGeometry], votre valeur de tableau typée doit être créée avec une longueur de 3000 * 3, ou 9000 (une valeur par composant). Un tableau de la taille de chaque type de données est présenté ci-dessous à titre de référence :

Taille des attributs
type GLSL	type JavaScript	taille
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

Notez que les tampons d'attributs ne sont `pas` actualisés automatiquement lorsque leurs valeurs changent. Pour mettre à jour les attributs personnalisés, définissez le paramètre `needsUpdate` sur true sur le [page:BufferAttribute] de la géométrie (voir [page:BufferGeometry] pour plus de détails).

Pour déclarer un [page:Uniform] personnalisé, utilisez la propriété `uniforms` : uniforms: { time: { value: 1.0 }, resolution: { value: new THREE.Vector2() } }

Il est recommandé de mettre à jour les valeurs [page:Uniform] personnalisées en fonction de [page:Object3D object] et [page:Camera camera] dans [page:Object3D.onBeforeRender] car [page:Material] peut être partagé entre [page:Mesh meshes], [page:Matrix4 matrixWorld] de [page:Scene] et [page:Camera] sont mis à jour dans [page:WebGLRenderer.render], et certains effets rendent une [page:Scene scene] avec leur propre [page : cameras] privées.

Constructeur

[name]( [param:Object parameters] )

[page:Object parameters] - (optionnel) un objet avec une ou plusieurs propriétés définissant l'apparence du matériau. Toute propriété du matériau (y compris toute proprioété héritée de [page:Material]) peut être passée dans l'objet.

Propriétés

[property:Boolean clipping]

Définit si ce matériau prend en charge l'écrêtage ; true pour laisser le moteur de rendu transmettre l'uniforme clippingPlanes. La valeur par défaut est false.

[property:Object defaultAttributeValues]

Lorsque la géométrie rendue n'inclut pas ces attributs mais que le matériau le fait, ces valeurs par défaut seront transmises aux shaders. Cela évite les erreurs lorsque des données de tampon sont manquantes.


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

[property:Object defines]

Définit des constantes personnalisées à l'aide des directives `#define` dans le code GLSL pour les deux shader de vertex et le shader de fragment ; chaque paire clé/valeur produit une autre directive :


		defines: {
			FOO: 15,
			BAR: true
		}

yields the lines


		#define FOO 15
		#define BAR true

in the GLSL code.

[property:Object extensions]

Un objet avec les propriétés suivantes :


			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]

Définissez si la couleur du matériau est affectée par les paramètres de brouillard globaux ; vrai pour passer les uniformes de brouillard au shader. La valeur par défaut est false.

[property:String fragmentShader]

Code GLSL du shader de fragment. C'est le code réel du shader. Dans l'exemple ci-dessus, le code `vertexShader` et `fragmentShader` est extrait du DOM ; il peut être passé sous forme de chaîne de caractères ou chargé via AJAX à la place.

[property:String glslVersion]

Définit la version GLSL du code de shader personnalisé. Pertinent uniquement pour WebGL 2 afin de définir s'il faut spécifier GLSL 3.0 ou pas. Les valeurs valides sont `THREE.GLSL1` ou `THREE.GLSL3`. La valeur par défaut est `null`.

[property:String index0AttributeName]

Si définit, cela appelle [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bindAttribLocation gl.bindAttribLocation] pour lier un index de sommet générique à une variable d'attribut. La valeur par défaut est undefined.

[property:Boolean isShaderMaterial]

[property:Boolean lights]

Définit si ce matériau utilise l'éclairage ; true pour transmettre des données uniformes liées à l'éclairage à ce shader. La valeur par défaut est false.

[property:Float linewidth]

Contrôle l'épaisseur du filaire. La valeur par défaut est 1.

A cause des limitations de [link:https://www.khronos.org/registry/OpenGL/specs/gl/glspec46.core.pdf OpenGL Core Profile] avec le moteur de rendu [page:WebGLRenderer WebGL] sur la plupârt des plateformes, l'épaisseur de ligne (linewidth) sera toujours à 1, indépendamment de la valeur définie.

[property:Boolean flatShading]

Définit si le matériau est rendu avec un ombrage plat. La valeur par défaut est false.

[property:Object uniforms]

Un object de la forme:


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

spécifiant les uniformes à transmettre au code shader ; les clés sont des noms uniformes, les valeurs sont des définitions de la forme


		{ value: 1.0 }

Quand `value` est la valeur de l'uniforme. Les noms doivent correspondre au nom de l'uniforme, tel que défini dans le code GLSL. A noter que les uniformes sont rafraichis à chaque frame, donc la mise à jour de la valeur de l'uniforme mettra immédiatement à jour la valeur disponible pour le code GLSL.

[property:Boolean uniformsNeedUpdate]

Peut être utilisé pour forcer une mise à jour uniforme lors du changement d'uniformes dans [page:Object3D.onBeforeRender](). La valeur par défaut est `false`.

[property:Boolean vertexColors]

Définit si la coloration des sommets est utilisée. La valeur par défaut est `false`.

[property:String vertexShader]

Code GLSL du vertex shader. C'est le code réel du shader. Dans l'exemple ci-dessus, le code `vertexShader` et `fragmentShader` est extrait du DOM ; il peut être passé sous forme de chaîne de caractères ou chargé via AJAX à la place.

[property:Boolean wireframe]

Rendre la géométrie en fil de fer (en utilisant GL_LINES au lieu de GL_TRIANGLES). La valeur par défaut est false (c'est-à-dire rendre sous forme de polygones plats).

[property:Float wireframeLinewidth]

Méthodes

[method:ShaderMaterial clone]()

Génère une copie superficielle de ce matériau. Notez que le vertexShader et le fragmentShader sont copiés "par référence", de même que les définitions des "attributs" ; cela signifie que les clones du matériel partageront la même [page:WebGLProgram] compilée. Cependant, le `uniformes` sont copiés `par valeur`, ce qui vous permet d'avoir différents ensembles d'uniformes pour différentes copies du matériel.

Source

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