WebGLRenderingContext.frontFace() — Methode · JavaScript-Referenz

Signatur

WebGLRenderingContext.prototype.frontFace(mode)

Beschreibung

Mit frontFace() bestimmt man, in welcher Reihenfolge die Eckpunkte eines Dreiecks im Bildschirmraum liegen müssen, damit WebGL es als Vorderseite behandelt. Standardwert ist gl.CCW: Dreiecke, deren Eckpunkte gegen den Uhrzeigersinn angeordnet sind, gelten als vorderseitig.

Wichtig wird die Einstellung vor allem zusammen mit dem Face Culling (gl.enable(gl.CULL_FACE) und gl.cullFace()). Damit lassen sich Rückseiten geschlossener Körper verwerfen, bevor sie gerastert werden. Das spart Fragment-Shader-Arbeit. Außerdem wirkt sich die Einstellung auf gl_FrontFacing im Fragment-Shader aus und bei der Stencil-Operation auf stencilFuncSeparate und stencilOpSeparate mit getrennten Werten für Vorder- und Rückseite.

Man braucht frontFace(gl.CW) typischerweise, wenn Modelle aus einem Werkzeug oder Format stammen, das im Uhrzeigersinn modelliert, oder wenn eine Spiegelung (negative Skalierung, z. B. scale(-1, 1, 1)) die Wicklungsrichtung umkehrt. Die Einstellung ist ein globaler Zustand des Kontexts. Sie gilt so lange, bis sie erneut geändert wird.

Parameter

Name	Typ	Default	Beschreibung
$mode Pflicht	GLenum	gl.CCW	Wicklungsrichtung der Vorderseite: `gl.CW` (0x0900, im Uhrzeigersinn) oder `gl.CCW` (0x0901, gegen den Uhrzeigersinn).

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Rückseiten-Culling mit Standard-Wicklung

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

// Vorderseite = gegen den Uhrzeigersinn (Standard)
gl.frontFace(gl.CCW);
gl.enable(gl.CULL_FACE);
gl.cullFace(gl.BACK);

console.log(gl.getParameter(gl.FRONT_FACE) === gl.CCW);

true

Modell mit Uhrzeigersinn-Wicklung darstellen

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

// Das exportierte Modell nutzt Uhrzeigersinn für Vorderseiten
gl.frontFace(gl.CW);
gl.enable(gl.CULL_FACE);

const mode = gl.getParameter(gl.FRONT_FACE);
console.log(mode === gl.CW ? 'CW' : 'CCW');

CW

Gespiegeltes Objekt korrekt rendern

const gl = document.querySelector('canvas').getContext('webgl');
gl.enable(gl.CULL_FACE);

const drawMesh = (mesh, mirrored) => {
  // Negative Skalierung dreht die Wicklung um – ausgleichen
  gl.frontFace(mirrored ? gl.CW : gl.CCW);
  gl.bindBuffer(gl.ARRAY_BUFFER, mesh.buffer);
  gl.drawArrays(gl.TRIANGLES, 0, mesh.count);
  // Zustand zurücksetzen
  gl.frontFace(gl.CCW);
};

const mesh = { buffer: gl.createBuffer(), count: 0 };
drawMesh(mesh, true);
console.log(gl.getParameter(gl.FRONT_FACE) === gl.CCW);

true

// Wichtig · Fallstricke

Ungültige Werte für mode lösen den Fehler gl.INVALID_ENUM aus. Man kann ihn mit gl.getError() abfragen. Eine Exception wird nicht geworfen.
Ohne gl.enable(gl.CULL_FACE) werden keine Flächen verworfen. frontFace() beeinflusst dann nur gl_FrontFacing und das Stencil-Verhalten für Vorder- und Rückseite.
Maßgeblich ist die Wicklung nach der Projektion im Fensterkoordinatensystem. Transformationen mit negativer Determinante (Spiegelungen) kehren die Richtung um. Häufiger Fehler: Nach einer Spiegelung „verschwinden“ Objekte.
Den aktuellen Wert liefert gl.getParameter(gl.FRONT_FACE).
Die Methode ist in allen Browsern mit WebGL-Unterstützung verfügbar und funktioniert in WebGL2RenderingContext genauso.

Siehe auch

WebGLRenderingContext.cullFace() WebGLRenderingContext.enable() WebGLRenderingContext.getParameter() WebGLRenderingContext.stencilOpSeparate() WebGLRenderingContext WebGLRenderingContext.polygonOffset()