Spec-Zone.ru › Web APIs

WebGLShader

Базовая поддержка Широко доступна *

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

* Некоторые части этой функции могут иметь различный уровень поддержки.

  • Узнать больше
  • Полная совместимость
  • Отправить отзыв

Примечание: Эта функция доступна в Web Workers.

WebGLShader является частью WebGL API и может быть шейдером вершин или фрагментов. Для WebGLProgram требуется оба типа шейдеров.

WebGLObject WebGLShader

Описание

Для создания 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 Нет Нет Нет Нет

См. также

  • WebGLProgram
  • WebGLRenderingContext.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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API