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.
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.
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.
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
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
WebGLProgramWebGLRenderingContext.attachShader()WebGLRenderingContext.bindAttribLocation()WebGLRenderingContext.compileShader()WebGLRenderingContext.createProgram()WebGLRenderingContext.createShader()WebGLRenderingContext.deleteProgram()WebGLRenderingContext.deleteShader()WebGLRenderingContext.detachShader()WebGLRenderingContext.getAttachedShaders()WebGLRenderingContext.getProgramParameter()WebGLRenderingContext.getProgramInfoLog()WebGLRenderingContext.getShaderParameter()WebGLRenderingContext.getShaderPrecisionFormat()WebGLRenderingContext.getShaderInfoLog()WebGLRenderingContext.getShaderSource()WebGLRenderingContext.isProgram()WebGLRenderingContext.isShader()WebGLRenderingContext.linkProgram()WebGLRenderingContext.shaderSource()WebGLRenderingContext.useProgram()WebGLRenderingContext.validateProgram()