WebGLShader

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

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

Specification
WebGL Specification # 5.8

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨8 sept. 2023⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content