CreateShader: примеры (JAVASCRIPT)

Примеры использования createShader

Базовый пример создания шейдеров двух типов.

Создание вершинного шейдера

const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

if (gl) {
  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  console.log(vertexShader);
}

WebGLShader {}

Создание фрагментного шейдера

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
console.log(fragmentShader instanceof WebGLShader);

true

Попытка создания с неверным типом

const invalidShader = gl.createShader(9999);
console.log(invalidShader);

null

Похожие функции в JavaScript

В WebGL API существуют связанные функции для работы с шейдерами.

createProgram()

Создаёт объект WebGLProgram, который объединяет вершинный и фрагментный шейдеры. Используется после создания шейдеров для формирования полноценной программы.

shaderSource()

Устанавливает исходный код шейдера в созданный объект WebGLShader. Работает в паре с createShader.

compileShader()

Компилирует исходный код шейдера, который был установлен через shaderSource. Без этой функции шейдер не будет готов к использованию.

Функция createShader является начальным этапом работы с шейдерами. Последовательность обычно такая: createShader → shaderSource → compileShader → attachShader → linkProgram.

Аналоги функции в других языках

OpenGL (C/C++)

Функция glCreateShader() принимает тип шейдера и возвращает его идентификатор.

GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER);

Возвращает ненулевой идентификатор шейдера

Python (PyOpenGL)

Модуль OpenGL.GL предоставляет аналогичный интерфейс.

from OpenGL.GL import *
vertex_shader = glCreateShader(GL_VERTEX_SHADER)

Возвращает целочисленный идентификатор

WebGPU (современная альтернатива WebGL)

Использует другой подход: создание шейдерных модулей через device.createShaderModule().

const shaderModule = device.createShaderModule({
  code: shaderCode
});

WebGPU обеспечивает более низкоуровневый контроль над графическим конвейером.

Типичные ошибки

Отсутствие контекста WebGL

const gl = canvas.getContext('2d');
const shader = gl.createShader(gl.VERTEX_SHADER);

Uncaught TypeError: gl.createShader is not a function

Использование недопустимого типа

const shader = gl.createShader(12345);
if (!shader) {
  console.error('Не удалось создать шейдер');
}

Не удалось создать шейдер

Попытка использования удалённого контекста

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');
document.body.removeChild(canvas);
const shader = gl.createShader(gl.VERTEX_SHADER);

Может вызвать ошибку WebGL: CONTEXT_LOST_WEBGL

Создание шейдеров без проверки поддержки

const gl = canvas.getContext('webgl');
if (!gl) {
  console.log('WebGL не поддерживается');
} else {
  const shader = gl.createShader(gl.VERTEX_SHADER);
}

Всегда проверяйте доступность контекста перед использованием WebGL функций.

Изменения в последних версиях

Функция createShader остаётся стабильной частью WebGL 1.0 и WebGL 2.0 API без существенных изменений в синтаксисе. Основные отличия связаны с новыми возможностями в WebGL 2.0:

• Добавлены новые типы шейдеров для трансформационной обратной связи (только в нативных OpenGL).
• Улучшена обработка ошибок и отладка шейдеров через расширения.
• В WebGL 2.0 появилась поддержка шейдеров с вычислениями (compute shaders) через расширения.

Спецификация функции не претерпела изменений, но контекст WebGL 2.0 предоставляет дополнительные константы и возможности для созданных шейдеров.

Расширенные примеры использования

Создание полной шейдерной программы

function createShaderProgram(gl, vertexSource, fragmentSource) {
  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, vertexSource);
  gl.compileShader(vertexShader);
  
  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, fragmentSource);
  gl.compileShader(fragmentShader);
  
  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  
  return program;
}

Обработка ошибок компиляции

const shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(shader, 'invalid shader code');
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
  console.error(gl.getShaderInfoLog(shader));
  gl.deleteShader(shader);
}

Создание шейдеров для различных эффектов

// Шейдер для текстурирования
const textureVertexShader = gl.createShader(gl.VERTEX_SHADER);
const textureFragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

// Шейдер для постобработки
const postProcessVertexShader = gl.createShader(gl.VERTEX_SHADER);
const postProcessFragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

// Шейдер для эффекта размытия
const blurVertexShader = gl.createShader(gl.VERTEX_SHADER);
const blurFragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

Использование с расширениями

// Проверка доступности расширений перед созданием шейдеров
const ext = gl.getExtension('OES_standard_derivatives');
if (ext) {
  const shader = gl.createShader(gl.FRAGMENT_SHADER);
  // Использование специфичных функций расширения в коде шейдера
}

Многократное создание и удаление шейдеров

// Для динамической перекомпиляции шейдеров
function recreateShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  return shader;
}

// Удаление старого шейдера перед созданием нового
gl.deleteShader(oldShader);
const newShader = recreateShader(gl, gl.FRAGMENT_SHADER, newSource);