WebGLShader

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

WebGLShader は WebGL API の一部で、頂点シェーダーとフラグメントシェーダーを表します。 WebGLProgram は両方の種類のシェーダーが必要です。

解説

WebGLShader を作成するには WebGLRenderingContext.createShader を使用し、それから WebGLRenderingContext.shaderSource() を使用して GLSL ソースコードを結び付け、最後に WebGLRenderingContext.compileShader() を呼び出してシェーダーを完成させコンパイルします。この時点では WebGLShader はまだ使用可能な形になっておらず、 WebGLProgram に関連付ける必要があります。

function createShader(gl, sourceCode, type) {
  // gl.VERTEX_SHADER または gl.FRAGMENT_SHADER のどちらかをコンパイル
  const shader = gl.createShader(type);
  gl.shaderSource(shader, sourceCode);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    const info = gl.getShaderInfoLog(shader);
    throw `WebGL プログラムをコンパイルできませんでした。\n\n${info}`;
  }
  return shader;
}

シェーダーの取り付けについては WebGLProgram を参照してください。

例

頂点シェーダーの作成

シェーダーのソースコード文字列の書き込みのアクセスには、他にも多くの戦略があることに注意してください。これらの例は説明のためのものです。

const vertexShaderSource =
  "attribute vec4 position;\n" +
  "void main() {\n" +
  "  gl_Position = position;\n" +
  "}\n";

// 上の例の createShader 関数を使う
const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);

フラグメントシェーダーの作成

const fragmentShaderSource =
  "void main() {\n" + "  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" + "}\n";

// 上の例の createShader 関数を使う
const fragmentShader = createShader(
  gl,
  fragmentShaderSource,
  gl.FRAGMENT_SHADER,
);