WebGLRenderingContext: texImage2D() Methode

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Die WebGLRenderingContext.texImage2D()-Methode der WebGL API spezifiziert ein zweidimensionales Texturbild.

Syntax

js
// WebGL1
texImage2D(target, level, internalformat, width, height, border, format, type, pixels)
texImage2D(target, level, internalformat, format, type, pixels)


// WebGL2
texImage2D(target, level, internalformat, width, height, border, format, type, offset)
texImage2D(target, level, internalformat, width, height, border, format, type, source)
texImage2D(target, level, internalformat, width, height, border, format, type, srcData, srcOffset)

Parameter

target

Ein GLenum, der den Bindungspunkt (Target) der aktiven Textur angibt. Mögliche Werte:

  • gl.TEXTURE_2D: Eine zweidimensionale Textur.
  • gl.TEXTURE_CUBE_MAP_POSITIVE_X: Positive X-Seite für eine Würfel-Textur.
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_X: Negative X-Seite für eine Würfel-Textur.
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Y: Positive Y-Seite für eine Würfel-Textur.
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Y: Negative Y-Seite für eine Würfel-Textur.
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Z: Positive Z-Seite für eine Würfel-Textur.
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Z: Negative Z-Seite für eine Würfel-Textur.
level

Ein GLint, der das Detailniveau angibt. Niveau 0 ist das Basisbildniveau und Niveau n ist das n-te Mipmap-Reduktionsniveau.

internalformat

Ein GLenum, das die Farbkomponenten in der Textur angibt.

Mögliche Werte sowohl in WebGL1 als auch in WebGL2

Format Typ Kanäle Bytes pro Pixel
RGBA UNSIGNED_BYTE 4 4
RGB UNSIGNED_BYTE 3 3
RGBA UNSIGNED_SHORT_4_4_4_4 4 2
RGBA UNSIGNED_SHORT_5_5_5_1 4 2
RGB UNSIGNED_SHORT_5_6_5 3 2
LUMINANCE_ALPHA UNSIGNED_BYTE 2 2
LUMINANCE UNSIGNED_BYTE 1 1
ALPHA UNSIGNED_BYTE 1 1

Andere mögliche Werte in WebGL2 für die Versionen von texImage2D, die eine TypedArray, eine DataView oder einen GLintptr offset als Parameter akzeptieren

Größenformat Basisformat R
Bits
G
Bits
B
Bits
A
Bits
Geteilte
Bits
Farbrenderbar Texturfilterbar
R8 RED 8
R8_SNORM RED s8
RG8 RG 8 8
RG8_SNORM RG s8 s8
RGB8 RGB 8 8 8
RGB8_SNORM RGB s8 s8 s8
RGB565 RGB 5 6 5
RGBA4 RGBA 4 4 4 4
RGB5_A1 RGBA 5 5 5 1
RGBA8 RGBA 8 8 8 8
RGBA8_SNORM RGBA s8 s8 s8 s8
RGB10_A2 RGBA 10 10 10 2
RGB10_A2UI RGBA ui10 ui10 ui10 ui2
SRGB8 RGB 8 8 8
SRGB8_ALPHA8 RGBA 8 8 8 8
R16F RED f16
RG16F RG f16 f16
RGB16F RGB f16 f16 f16
RGBA16F RGBA f16 f16 f16 f16
R32F RED f32
RG32F RG f32 f32
RGB32F RGB f32 f32 f32
RGBA32F RGBA f32 f32 f32 f32
R11F_G11F_B10F RGB f11 f11 f10
RGB9_E5 RGB 9 9 9 5
R8I RED i8
R8UI RED ui8
R16I RED i16
R16UI RED ui16
R32I RED i32
R32UI RED ui32
RG8I RG i8 i8
RG8UI RG ui8 ui8
RG16I RG i16 i16
RG16UI RG ui16 ui16
RG32I RG i32 i32
RG32UI RG ui32 ui32
RGB8I RGB i8 i8 i8
RGB8UI RGB ui8 ui8 ui8
RGB16I RGB i16 i16 i16
RGB16UI RGB ui16 ui16 ui16
RGB32I RGB i32 i32 i32
RGB32UI RGB ui32 ui32 ui32
RGBA8I RGBA i8 i8 i8 i8
RGBA8UI RGBA ui8 ui8 ui8 ui8
RGBA16I RGBA i16 i16 i16 i16
RGBA16UI RGBA ui16 ui16 ui16 ui16
RGBA32I RGBA i32 i32 i32 i32
RGBA32UI RGBA ui32 ui32 ui32 ui32

Mögliche Werte in WebGL2 für die Versionen von texImage2D, die eine Textur eines HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap oder ImageData verwenden

  • gl.ALPHA: Verwift die roten, grünen und blauen Komponenten und liest die Alphakomponente.
  • gl.RGB: Verwift die Alphakomponenten und liest die roten, grünen und blauen Komponenten.
  • gl.RGBA: Rot-, Grün-, Blau- und Alphakomponenten werden aus dem Farbpuffer gelesen.
  • gl.LUMINANCE: Jede Farbkomponente ist eine Luminanzkomponente, Alpha ist 1.0.
  • gl.LUMINANCE_ALPHA: Jede Komponente ist eine Luminanz-/Alphakomponente.

Bei Verwendung der WEBGL_depth_texture Erweiterung:

  • gl.DEPTH_COMPONENT
  • gl.DEPTH_STENCIL

Bei Verwendung der EXT_sRGB Erweiterung:

  • ext.SRGB_EXT
  • ext.SRGB_ALPHA_EXT

Bei Verwendung eines WebGL 2 Kontexts sind zusätzlich die folgenden Werte verfügbar:

  • gl.R8
  • gl.R16F
  • gl.R32F
  • gl.R8UI
  • gl.RG8
  • gl.RG16F
  • gl.RG32F
  • gl.RG8UI
  • gl.RG16UI
  • gl.RG32UI
  • gl.RGB8
  • gl.SRGB8
  • gl.RGB565
  • gl.R11F_G11F_B10F
  • gl.RGB9_E5
  • gl.RGB16F
  • gl.RGB32F
  • gl.RGB8UI
  • gl.RGBA8
  • gl.SRGB8_ALPHA8
  • gl.RGB5_A1
  • gl.RGB10_A2
  • gl.RGBA4
  • gl.RGBA16F
  • gl.RGBA32F
  • gl.RGBA8UI
width

Eine GLsizei, die die Breite der Textur angibt.

height

Eine GLsizei, die die Höhe der Textur angibt.

border

Ein GLint, der die Breite des Randes angibt. Muss 0 sein.

format

Ein GLenum, das das Format der Texeldaten angibt. In WebGL 1 muss dies dasselbe sein wie internalformat (siehe oben). In WebGL 2 sind die Kombinationen in dieser Tabelle aufgeführt.

type

Ein GLenum, der den Datentyp der Texeldaten angibt. Mögliche Werte:

  • gl.UNSIGNED_BYTE: 8 Bits pro Kanal für gl.RGBA
  • gl.UNSIGNED_SHORT_5_6_5: 5 rote Bits, 6 grüne Bits, 5 blaue Bits.
  • gl.UNSIGNED_SHORT_4_4_4_4: 4 rote Bits, 4 grüne Bits, 4 blaue Bits, 4 Alphabits.
  • gl.UNSIGNED_SHORT_5_5_5_1: 5 rote Bits, 5 grüne Bits, 5 blaue Bits, 1 Alphabit.

Bei Verwendung der WEBGL_depth_texture Erweiterung:

  • gl.UNSIGNED_SHORT
  • gl.UNSIGNED_INT
  • ext.UNSIGNED_INT_24_8_WEBGL (Konstante, die von der Erweiterung bereitgestellt wird)

Bei Verwendung der OES_texture_float Erweiterung:

  • gl.FLOAT

Bei Verwendung der OES_texture_half_float Erweiterung:

  • ext.HALF_FLOAT_OES (Konstante, die von der Erweiterung bereitgestellt wird)

Bei Verwendung eines WebGL 2 Kontexts sind zusätzlich die folgenden Werte verfügbar:

  • gl.BYTE
  • gl.UNSIGNED_SHORT
  • gl.SHORT
  • gl.UNSIGNED_INT
  • gl.INT
  • gl.HALF_FLOAT
  • gl.FLOAT
  • gl.UNSIGNED_INT_2_10_10_10_REV
  • gl.UNSIGNED_INT_10F_11F_11F_REV
  • gl.UNSIGNED_INT_5_9_9_9_REV
  • gl.UNSIGNED_INT_24_8
  • gl.FLOAT_32_UNSIGNED_INT_24_8_REV (Pixel müssen null sein)
pixels

Die folgenden Typen können immer als Pixelquelle für die Textur verwendet werden:

Die folgenden Typen können nur als Pixelquelle verwendet werden, wenn width, height und border angegeben sind:

  • Uint8Array (muss verwendet werden, wenn type gl.UNSIGNED_BYTE ist)
  • Uint16Array (muss verwendet werden, wenn type entweder gl.UNSIGNED_SHORT_5_6_5, gl.UNSIGNED_SHORT_4_4_4_4, gl.UNSIGNED_SHORT_5_5_5_1, gl.UNSIGNED_SHORT oder ext.HALF_FLOAT_OES ist)
  • Uint32Array (muss verwendet werden, wenn type gl.UNSIGNED_INT oder ext.UNSIGNED_INT_24_8_WEBGL ist)
  • Float32Array (muss verwendet werden, wenn type gl.FLOAT ist)
offset

(Nur WebGL 2) Ein GLintptr Byte-Offset in den Datenspeicher des WebGLBuffer. Wird verwendet, um Daten in die derzeit gebundene WebGLTexture aus dem an PIXEL_UNPACK_BUFFER gebundenen WebGLBuffer hochzuladen.

Rückgabewert

Keiner (undefined).

Beispiele

js
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

Spezifikationen

Specification
WebGL Specification
# 5.14.8
WebGL 2.0 Specification
# 3.7.6

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch