WebGLShader

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

もっと詳しく
完全な互換性情報を見る

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,
);