WebGLShader
Базовая поддержка Широко доступна *
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.
* Некоторые части этой функции могут иметь различный уровень поддержки.
Примечание: Эта функция доступна в Web Workers.
WebGLShader является частью WebGL API и может быть шейдером вершин или фрагментов. Для WebGLProgram требуется оба типа шейдеров.
Описание
Для создания WebGLShader используйте WebGLRenderingContext.createShader, затем подключите код GLSL с помощью WebGLRenderingContext.shaderSource(), и, наконец, вызовите WebGLRenderingContext.compileShader(), чтобы завершить и скомпилировать шейдер. В этот момент WebGLShader еще не готов к использованию и должен быть присоединен к 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 `Could not compile WebGL program. \n\n${info}`;
}
return shader;
}
См. WebGLProgram для получения информации о подключении шейдеров.
Примеры
Создание шейдера вершин
Обратите внимание, что существует множество других стратегий для написания и доступа к строкам исходного кода шейдера. Эти примеры приведены только для иллюстрации.
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);
Создание шейдера фрагментов
const fragmentShaderSource =
"void main() {\n" + " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" + "}\n";
//Use the createShader function from the example above
const fragmentShader = createShader(
gl,
fragmentShaderSource,
gl.FRAGMENT_SHADER,
);
Спецификации
| Спецификация |
|---|
| Спецификация WebGL # 5.8 |
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari в iOS | Samsung Internet | WebView Android | |
WebGLShader |
10 | 12 | 4 | 12 | 5.1 | 25 | 4 | 12 | 8 | 1.5 | 4.4 |
worker_support |
Нет | Нет | 105 | Нет | Нет | Нет | 105 | Нет | Нет | Нет | Нет |
См. также
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()
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGLShader