Le WebGLShader fait partie de l'API WebGL et peut être un shader de sommet ou de fragment. Un WebGLProgram requiert les deux types de shaders.

Description

Pour créer un WebGLShader, utiliser WebGLRenderingContext.createShader, puis reliez-y le code source GLSL en utilisant WebGLRenderingContext.shaderSource(), et enfin, appelez WebGLRenderingContext.compileShader() pour terminer et compiler le shader. À ce stade, le WebGLShader n'est toujours pas sous une forme utilisable et doit toujours être relié à un WebGLProgram.

function creerShader (gl, codeSource, type) {
  // Compile un shader de type soit gl.VERTEX_SHADER, soit gl.FRAGMENT_SHADER
  var shader = gl.createShader( type );
  gl.shaderSource( shader, codeSource );
  gl.compileShader( shader );

  if ( !gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) {
    var info = gl.getShaderInfoLog( shader );
    throw 'Impossible de compiler le programme WebGL.\n\n' + info;
  }
  return shader;
}

Voir WebGLProgram pour des informations sur la liaison de shaders.

Exemples

Création d'un shader de sommet

Notez qu'il existe de nombreuses autres stratégies pour écrire des chaînes de code source de shader et y accéder. Ces exemples sont à titre d'illustration seulement.

var sourceShaderDeSommet =
  'attribute vec4 position;\n' +
  'void main() {\n' +
  '  gl_Position = position;\n' +
  '}\n';

// Utilisez la function creerShader de l'exemple ci-dessus
var shaderDeSommet = creerShader(gl, sourceShaderDeSommet, gl.VERTEX_SHADER)

Création d'un shader de fragment

var sourceShaderDeFragment =
  'void main() {\n' +
  '  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n' +
  '}\n';

// Utilisez la fonction creerShader de l'exemple ci-dessus
var shaderDeFragment = creerShader(gl, sourceShaderDeFragment, gl.FRAGMENT_SHADER)

Spécifications

Spécification Statut Commentaire
WebGL 1.0
La définition de 'WebGLShader' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

No compatibility data found. Please contribute data for "api.WebGLShader.WebGLShader" (depth: 1) to the MDN compatibility data repository.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : NemoNobobyPersonne
 Dernière mise à jour par : NemoNobobyPersonne,