WebGL - 3D im Browser

siehe auch WebGPU!

Javascript ist in deinem Browser deaktiviert oder wird nicht unterstützt.
Das ist grundsätzlich vernünftig.
Diese Seite benötigt Javascript
1. damit WebGL-Inhalte dargestellt werden können.
2. um Formeln mit MathJax darstellen zu können
3. und weitere Hilfsfunktionen zur ergonomischen Darstellung.
Javascript wird auf diesen Seiten NICHT verwendet um Informationen über den User (Dich!) zu sammeln oder Daten zu sammeln die über die Darstellung dieser Webseiten hinausgehen.

Home
WebGL Api Spickzettel
WebGL Sicherheit

Tutorial
0 : WebGL Browser
1 : Das erste Dreieck
2 : 3D-Mathematik
3 : Farbe
4 : Animation
5 : Interaktion I
6 : Texturen
7 : Beleuchtung I
8 : Interaktion II

Links
WebGL Beispiele
WebGL Frameworks
ext. WebGL Tutorials

Kontakt / Impressum
webgl ([ät)] peter-strohm Punkt de

WebGL API-Funktionen

Eine unvollständige Übersicht über WebGL API-Funktionen auf deutsch.
Hier geht's zu den vollständigen Original-Spezifikationen

activeTexture
attachShader
bindAttribLocation
bindBuffer
bindFramebuffer
bindRenderbuffer
bindTexture
blendColor
blendEquation
blendEquationSeparate
blendFunc
blendFuncSeparate
bufferData
bufferSubData
checkFramebufferStatus
clear
clearColor
clearDepth
clearStencil
colorMask
compileShader
copyTexImage2D
copyTexSubImage2D
createBuffer
createProgram
createShader
createTexture
deleteProgram
deleteShader
disable
drawArrays
drawElements
enable
enableVertexAttribArray
getAttribLocation
getError
getProgramInfoLog
getProgramParameter
getShaderInfoLog
getShaderParameter
getUniformLocation
linkProgram
shaderSource
texImage2D
texParameteri
uniformMatrix4fv
useProgram

void activeTexture(GLenum texture)

texture	Die texture-unit, die aktiviert werden soll (TEXTURE0 oder TEXTURE1 oder ...oder TEXTURE31)
Rückgabewert	void

activeTexture

void attachShader(WebGLProgram program, WebGLShader shader)

program
shader	Der Shader (Vertex oder Fragment)
Rückgabewert	void

attachShader

void bindAttribLocation(WebGLProgram program, GLuint index, DOMString name)

program	Das WebGL-Program-Objekt in dem die Attribut-Index-Zuordnung erfolgen soll.
index	der vertex-Attribut Index
name	Zeichenkette/Name des Attributs im Shader.
Rückgabewert	void

bindAttribLocation

void bindBuffer(GLenum ziel, WebGLBuffer puffer)

ziel	Art des Puffers. Entweder ARRAY_BUFFER oder ELEMENT_ARRAY_BUFFER
puffer	Meist ein WebGL-eigenes Array (z.B. Float32Array) mit einer Werten (Koordinaten, Farbwerte,...)
Rückgabewert	void

bindBuffer wird benutzt um einen Puffer als "aktiven" Puffer zu deklarieren. Nachfolgende Puffer-Operationen beziehen sich dann auf diesen Puffer (bis ein anderer aktiviert wird)

void bindFramebuffer(GLenum target, WebGLFramebuffer framebuffer)

target	FRAMEBUFFER (immer!)
framebuffer	Der zu aktivierende Framebuffer oder null um den aktiven Framebuffer zu deaktivieren
Rückgabewert	void

bindFramebuffer

void bindRenderbuffer(GLenum target, WebGLFramebuffer framebuffer)

target	RENDERBUFFER (immer!)
framebuffer	Der zu aktivierende Renderbuffer oder null um den aktiven Renderbuffer zu deaktivieren.
Rückgabewert	void

bindRenderbuffer

void bindTexture(GLenum ziel, WebGLTexture textur)

ziel	TEXTURE_2D oder TEXTURE oder TEXTURE_CUBE_MAP oder TEXTURE_BINDING_CUBE_MAP oder TEXTURE_CUBE_MAP_POSITIVE_X oder TEXTURE_CUBE_MAP_NEGATIVE_X oder TEXTURE_CUBE_MAP_POSITIVE_Y oder TEXTURE_CUBE_MAP_NEGATIVE_Y oder TEXTURE_CUBE_MAP_POSITIVE_Z oder TEXTURE_CUBE_MAP_NEGATIVE_Z oder MAX_CUBE_MAP_TEXTURE_SIZE
textur	die zu aktivierende Textur
Rückgabewert	void

bindTexture

void blendColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha)

red	Rotanteil der Farbe(0.0 .. 1.0)
green
blue	Blauanteil der Farbe(0.0 .. 1.0)
alpha
Rückgabewert	void

blendColor

void blendEquation(GLenum mode)

mode	FUNC_ADD oder FUNC_SUBTRACT oder FUNC_REVERSE_SUBTRACT (ggf. weitere?)
Rückgabewert	void

blendEquation

void blendEquationSeparate(GLenum modeRGB, GLenum modeAlpha)

modeRGB	FUNC_ADD oder FUNC_SUBTRACT oder FUNC_REVERSE_SUBTRACT (ggf. weitere?)
modeAlpha	FUNC_ADD oder FUNC_SUBTRACT oder FUNC_REVERSE_SUBTRACT (ggf. weitere?)
Rückgabewert	void

blendEquationSeparate

void blendFunc(GLenum sfactor, GLenum dfactor)

sfactor	Bewertung des Quell(Source-)Pixels
dfactor	Bewertung des Ziel(Destination-)Pixels
Rückgabewert	void

blendFunc

void blendFuncSeparate(GLenum srcRGB, GLenum dstRGB, GLenum srcAlpha, GLenum dstAlpha)

srcRGB	Bewertung des Farbkanals des Quell(Source-)Pixels
dstRGB	Bewertung des Farbkanals des Ziel(Destination-)Pixels
srcAlpha
dstAlpha
Rückgabewert	void

blendFuncSeparate

void bufferData(GLenum target, ArrayBuffer data, GLenum usage)

target	ARRAY_BUFFER oder ELEMENT_ARRAY_BUFFER
data	Die Daten in einem 1-D Array
usage	STREAM_DRAW oder STATIC_DRAW oder DYNAMIC_DRAW
Rückgabewert	void

bufferData

void bufferSubData(GLenum target, GLintptr offset, ArrayBuffer data)

target	ARRAY_BUFFER oder ELEMENT_ARRAY_BUFFER
offset	Der Offset vom Beginn des Puffers ab dem die Daten gespeichert werden sollen.
data	Die Daten in einem 1-D Array
Rückgabewert	void

bufferSubData

GLenum checkFramebufferStatus(GLenum target)

target	FRAMEBUFFER (immer!)
Rückgabewert	GLenum eine der folgenden Konstanten: FRAMEBUFFER_COMPLETE oder FRAMEBUFFER_INCOMPLETE_ATTACHMENT oder FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT oder FRAMEBUFFER_INCOMPLETE_DIMENSIONS oder FRAMEBUFFER_UNSUPPORTED

checkFramebufferStatus kann verwendet werden um den Status des zuletzt mit bindFrambuffer aktivierten Framebuffers auszulesen.

void clear(GLbitfield mask)

mask
Rückgabewert	void

clear

void clearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha)

red	Farbanteil rot (0.0 .. 1.0)
green
blue	Farbanteil blau (0.0 .. 1.0)
alpha	Alphakanal, (1-Transparenz) (0.0 .. 1.0)
Rückgabewert	void

clearColor

void clearDepth(GLclampf depth)

depth	0.0 .. 1.0
Rückgabewert	void

clearDepth

void clearStencil(GLclampf s)

s	0.0 .. (2^n-^1) wobei n die Bittiefe des Stencilpuffers ist.
Rückgabewert	void

clearStencil

void colorMask(GLboolean red, GLboolean green, GLboolean blue, GLboolean alpha)

red	true oder false
green	true oder false
blue	true oder false
alpha	true oder false
Rückgabewert	void

colorMask

void compileShader(WebGLShader shader)

shader	der zu kompilierende Shader.
Rückgabewert	void

compileShader kompiliert den angegebenen Shader

void copyTexImage2D(GLenum target, GLint level, GLenum internalformat, GLint x, GLint y, GLsizei width, GLsizei height, GLint border)

target	Art der Textur (z.B. TEXTURE_2D)
level	mip level
internalformat	ALPHA oder RGB oder RGBA oder LUMINANCE oder LUMINANCE_ALPHA
x	X-Koordinate des Framebuffers der kopiert werden soll.
y	Y-Koordinate des Framebuffers der kopiert werden soll.
width	Breite des zu kopierenden Bereichs in Pixeln.
height
border
Rückgabewert	void

copyTexImage2D

void copyTexSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLint x, GLint y, GLsizei width, GLsizei height)

target	Art der Textur (z.B. TEXTURE_2D)
level	mip level
xoffset	X-Startkoordinate der Zieltextur
yoffset	Y-Startkoordinate der Zieltextur
x	X-Koordinate des Framebuffers der kopiert werden soll.
y	Y-Koordinate des Framebuffers der kopiert werden soll.
width	Breite des zu kopierenden Bereichs in Pixeln.
height
Rückgabewert	void

copyTexSubImage2D

WebGLBuffer createBuffer()

Rückgabewert

WebGLBuffer

das Puffer-Objekt.

createBuffer

WebGLProgram createProgram()

Rückgabewert

WebGLProgram

das WebGLProgramObject, das die Shader beinhalten kann.

createProgram erzeugt ein neues WebGLProgram-Objekt.

WebGLShader createShader(GLenum type)

type	FRAGMENT_SHADER oder VERTEX_SHADER
Rückgabewert	WebGLShader das Shader-Objekt

createShader erzeugt einen neuen Shader (Vertex oder Fragment)

WebGLTexture createTexture()

Rückgabewert

WebGLTexture

das neue Textur-Objekt

createTexture legt ein neues Textur-Objekt an.

void deleteProgram(WebGLProgram program)

program
Rückgabewert	void

deleteProgram

void deleteShader(WebGLShader shader)

shader
Rückgabewert	void

deleteShader

void disable(GLenum cap)

cap	CULL_FACE oder BLEND oder DITHER oder STENCIL_TEST oder DEPTH_TEST oder SCISSOR_TEST oder POLYGON_OFFSET_FILL oder SAMPLE_ALPHA_TO_COVERAGE oder SAMPLE_COVERAGE
Rückgabewert	void

disable schaltet einzelne Renderparameter aus. Siehe auch enable!

void drawArrays(GLenum modus, GLint startIndex, GLsizei anzahl)

modus
startIndex	Die Pufferadresse, ab der der Pufferinhalt gezeichnet werden soll.
anzahl	Die Anzahl der Elemente(Vertizes) im Puffer (die gezeichnet werden sollen).
Rückgabewert	void

drawArrays veranlasst dass alle zuletzt gesetzten und aktivierten Puffer in den Shadern berechnet werden und letztlich gezeichnet werden.

void drawElements(GLenum modus, GLsizei count, GLenum type, GLsizei anzahl)

modus
count	Der Index ab dem der Pufferinhalt gezeichnet werden soll.
type
anzahl	Die Anzahl der Elemente(Vertizes) im IndexBuffer.
Rückgabewert	void

drawElements veranlasst dass alle zuletzt gesetzten und aktivierten Puffer in den Shadern berechnet werden und letztlich gezeichnet werden. Im Unterschied zu drawArrays wird hier ein indizierter Puffer verwendet(d. h. die Elemente werden nicht in der Reihenfolge verwendet, in der sie im Puffer stehen, sondern in der Reihenfolge die im gebundenen ELEMENT_ARRAY_BUFFER festgelegt ist.) Ist zuvor kein ELEMENT_ARRAY_BUFFER gebunden, wird der INVALID_OPERATION Fehler erzeugt.

void enable(GLenum cap)

cap	CULL_FACE oder BLEND oder DITHER oder STENCIL_TEST oder DEPTH_TEST oder SCISSOR_TEST oder POLYGON_OFFSET_FILL oder SAMPLE_ALPHA_TO_COVERAGE oder SAMPLE_COVERAGE
Rückgabewert	void

enable schaltet einzelne Renderparameter ein. Siehe auch disable!

void enableVertexAttribArray(GLuint index)

index	Adresse des Attributs im Shader (siehe getAttribLocation)
Rückgabewert	void

enableVertexAttribArray aktiviert ein Attribut zur Verwendung im Shader.

GLint getAttribLocation(WebGLProgram program, DOMString uniformName)

program	Das WebGL-Program, in dem das Attribut gesucht werden soll.
uniformName	Bezeichner des Attributs im Shader
Rückgabewert	GLint Die Adresse falls ein Attribut anhand des Namens gefunden wurde oder -1.

getAttribLocation

GLenum getError()

Rückgabewert

GLenum

NO_ERROR oder INVALID_ENUM oder INVALID_VALUE oder INVALID_OPERATION oder OUT_OF_MEMORY

getError

DOMString getProgramInfoLog(WebGLProgram program)

program	Das WebGL-Program, dessen Log-Daten abgerufen werden sollen.
Rückgabewert	DOMString Das Log-Protokoll der letzten Program-Aktionen.

getProgramInfoLog ruft die Log-Daten der letzten Program-Aktionen ab.

verschieden getProgramParameter(WebGLProgram program, GLenum pname)

program	Das WebGL-Program, dessen Parameter abgerufen werden soll.
pname	DELETE_STATUS, LINK_STATUS, VALIDATE_STATUS, ATTACHED_SHADERS, ACTIVE_ATTRIBUTS, ACTIVE_UNIFORMS
Rückgabewert	verschieden

getProgramParameter ruft Parameter des angegebenen WebGLProgram-Objekts ab.

DOMString getShaderInfoLog(WebGLShader shader)

shader	der Shader dessen Log abgerufen werden soll.
Rückgabewert	DOMString Das ShaderInfoLog.

getShaderInfoLog

verschiedene getShaderParameter(WebGLShader shader, GLenum pname)

shader	der Shader
pname	Parametertyp der abgefrag werden soll. SHADER_TYPE oder DELETE_STATUS oder COMPILE_STATUS
Rückgabewert	verschiedene

getShaderParameter

WebGLUniformLocation getUniformLocation(WebGLProgram program, DOMString uniformName)

program	Das WebGL-Program, in dem die Uniform gesucht werden soll.
uniformName	Bezeichner der Uniform im Shader
Rückgabewert	WebGLUniformLocation Die Adresse falls eine Uniform anhand des Namens gefunden wurde oder -1.

getUniformLocation

void linkProgram(WebGLProgram program)

program	Das WebGL-Program, das gelinkt werden soll.
Rückgabewert	void

linkProgram

void shaderSource(WebGLShader shader, DOMString quelltext)

shader	der Shader.
quelltext	der Quelltext als String.
Rückgabewert	void

shaderSource

void texImage2D(GLenum ziel, GLint level, GLenum internalFormat, GLenum format, GLenum typ, HTMLImageElement image)

ziel	TEXTURE_2D oder TEXTURE oder TEXTURE_CUBE_MAP oder TEXTURE_BINDING_CUBE_MAP oder TEXTURE_CUBE_MAP_POSITIVE_X oder TEXTURE_CUBE_MAP_NEGATIVE_X oder TEXTURE_CUBE_MAP_POSITIVE_Y oder TEXTURE_CUBE_MAP_NEGATIVE_Y oder TEXTURE_CUBE_MAP_POSITIVE_Z oder TEXTURE_CUBE_MAP_NEGATIVE_Z oder MAX_CUBE_MAP_TEXTURE_SIZE
level	mip-level der Textur
internalFormat	DEPTH_COMPONENT oder ALPHA oder RGB oder RGBA oder LUMINANCE oder LUMINANCE_ALPHA
format	DEPTH_COMPONENT oder ALPHA oder RGB oder RGBA oder LUMINANCE oder LUMINANCE_ALPHA
typ	Format der einzelnen Werte UNSIGNED_BYTE
image	ein Image-Objekt aus dem HTML-DOM.
Rückgabewert	void

texImage2D

void texParameteri(GLenum ziel, GLenum pname, GLint param,  )

ziel	TEXTURE_2D oder TEXTURE oder TEXTURE_CUBE_MAP oder TEXTURE_BINDING_CUBE_MAP oder TEXTURE_CUBE_MAP_POSITIVE_X oder TEXTURE_CUBE_MAP_NEGATIVE_X oder TEXTURE_CUBE_MAP_POSITIVE_Y oder TEXTURE_CUBE_MAP_NEGATIVE_Y oder TEXTURE_CUBE_MAP_POSITIVE_Z oder TEXTURE_CUBE_MAP_NEGATIVE_Z oder MAX_CUBE_MAP_TEXTURE_SIZE
pname	TEXTURE_MAG_FILTER oder TEXTURE_MIN_FILTER oder TEXTURE_WRAP_S oder TEXTURE_WRAP_T
param	NEAREST oder LINEAR

Rückgabewert	void

texParameteri

void uniformMatrix4fv(WebGLUniformLocation  uniformAdresse, GLboolean transpose, Float32Array flatMatrix)

uniformAdresse	Adresse der Uniform-Matrix im Shader (siehe getUniformLocation)
transpose	muss laut Spezifikation false sein!
flatMatrix
Rückgabewert	void

uniformMatrix4fv

void useProgram(WebGLProgram program)

program	Das WebGL-Program, das aktiviert werden soll.
Rückgabewert	void

useProgram

^^nach oben^^

>> Startseite << ^ Seitenanfang ^

Fehler? Kommentare? webgl ([ät)] peter-strohm Punkt de