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.

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

Note: This feature is available in Web Workers.

WebGLShader là một phần của WebGL API và có thể là vertex shader hoặc fragment shader. Một WebGLProgram yêu cầu cả hai loại shader.

WebGLObject WebGLShader

Mô tả

Để tạo một WebGLShader, hãy dùng WebGLRenderingContext.createShader, sau đó gắn mã nguồn GLSL vào bằng WebGLRenderingContext.shaderSource(), và cuối cùng gọi WebGLRenderingContext.compileShader() để hoàn tất và biên dịch shader. Lúc này WebGLShader vẫn chưa ở dạng sử dụng được và cần phải được gắn vào một WebGLProgram.

js
function createShader(gl, sourceCode, type) {
  // Compiles either a shader of type gl.VERTEX_SHADER or 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 new Error(`Could not compile WebGL program. \n\n${info}`);
  }
  return shader;
}

Xem WebGLProgram để biết thông tin về cách gắn các shader.

Ví dụ

Tạo vertex shader

Lưu ý rằng có nhiều cách khác nhau để viết và truy cập chuỗi mã nguồn shader. Các ví dụ này chỉ mang tính minh họa.

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

// Use the createShader function from the example above
const vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);

Tạo fragment shader

js
const fragmentShaderSource = `void main() {
  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
`;

// Use the createShader function from the example above
const fragmentShader = createShader(
  gl,
  fragmentShaderSource,
  gl.FRAGMENT_SHADER,
);

Thông số kỹ thuật

Specification
WebGL Specification
# 5.8

Tương thích trình duyệt

Xem thêm