WebGLShader

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

js
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.

js
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

js
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

BCD tables only load in the browser

Voir aussi