WebGLRenderingContext: метод readPixels()

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

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

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

Метод WebGLRenderingContext.readPixels() API WebGL считывает блок пикселей из указанного прямоугольника текущего цветового буфера фрейма в объект TypedArray или DataView.

Синтаксис

// WebGL1:
readPixels(x, y, width, height, format, type, pixels)

// WebGL2:
readPixels(x, y, width, height, format, type, offset)
readPixels(x, y, width, height, format, type, pixels)
readPixels(x, y, width, height, format, type, pixels, dstOffset)

Параметры

x

Значение GLint, определяющее первый горизонтальный пиксель, который считывается из левого нижнего угла прямоугольного блока пикселей.

y

Значение GLint, определяющее первый вертикальный пиксель, который считывается из левого нижнего угла прямоугольного блока пикселей.

width

Значение GLsizei, определяющее ширину прямоугольника.

height

Значение GLsizei, определяющее высоту прямоугольника.

format

Значение GLenum, определяющее формат данных пикселей. Возможные значения:

gl.ALPHA: Отбрасывает компоненты красного, зеленого и синего цветов и считывает альфа-компонент.
gl.RGB: Отбрасывает альфа-компоненты и считывает компоненты красного, зеленого и синего цветов.
gl.RGBA: Считываются компоненты красного, зеленого, синего и альфа-цвета из буфера цвета.

WebGL2 добавляет

gl.RED
gl.RG
gl.RED_INTEGER
gl.RG_INTEGER
gl.RGB_INTEGER
gl.RGBA_INTEGER

type

Значение GLenum, определяющее тип данных пиксельных данных. Возможные значения:

gl.UNSIGNED_BYTE
gl.UNSIGNED_SHORT_5_6_5
gl.UNSIGNED_SHORT_4_4_4_4
gl.UNSIGNED_SHORT_5_5_5_1
gl.FLOAT

WebGL2 добавляет

gl.BYTE
gl.UNSIGNED_INT_2_10_10_10_REV
gl.HALF_FLOAT
gl.SHORT
gl.UNSIGNED_SHORT
gl.INT
gl.UNSIGNED_INT
gl.UNSIGNED_INT_10F_11F_11F_REV
gl.UNSIGNED_INT_5_9_9_9_REV

pixels

Объект для чтения данных. Тип массива должен соответствовать типу параметра type.

Uint8Array для gl.UNSIGNED_BYTE.
Uint16Array для gl.UNSIGNED_SHORT_5_6_5, gl.UNSIGNED_SHORT_4_4_4_4, или gl.UNSIGNED_SHORT_5_5_5_1.
Float32Array для gl.FLOAT.

dstOffset Необязательно

Смещение. По умолчанию 0.

Возвращаемое значение

Ничего (undefined).

Исключения

Выбрасывается ошибка gl.INVALID_ENUM, если format или type не является допустимым значением.
Выбрасывается ошибка gl.INVALID_OPERATION, если
- type равно gl.UNSIGNED_SHORT_5_6_5 и format не равно gl.RGB.
- type равно gl.UNSIGNED_SHORT_4_4_4_4 и format не равно gl.RGBA.
- type не соответствует типу массива с типом pixels.
Выбрасывается ошибка gl.INVALID_FRAMEBUFFER_OPERATION если текущий связанный буфер фрейма не является полным буфером.

Примеры

const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const pixels = new Uint8Array(
  gl.drawingBufferWidth * gl.drawingBufferHeight * 4,
);
gl.readPixels(
  0,
  0,
  gl.drawingBufferWidth,
  gl.drawingBufferHeight,
  gl.RGBA,
  gl.UNSIGNED_BYTE,
  pixels,
);
console.log(pixels); // Uint8Array

Спецификации

Спецификация
Спецификация WebGL # 5.14.12

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`readPixels`	9	12	4	12	5.1	25	4	12	8	1.5	4.4.3

См. также

Массивы с типом данных

© 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/WebGLRenderingContext/readPixels