WebGLRenderingContext.hint() — Methode · JavaScript-Referenz

Signatur

WebGLRenderingContext.prototype.hint(target, mode)

Beschreibung

Mit hint() teilst du dem WebGL-Treiber mit, ob dir bei bestimmten Operationen Geschwindigkeit (gl.FASTEST) oder Qualität (gl.NICEST) wichtiger ist. Mit gl.DONT_CARE überlässt du die Wahl der Implementierung. Das ist auch der Standardwert.

In WebGL 1 gibt es nur ein gültiges Ziel: gl.GENERATE_MIPMAP_HINT. Es steuert die Qualität der Mipmaps, die gl.generateMipmap() erzeugt. Mit der Erweiterung OES_standard_derivatives kommt ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES hinzu. In WebGL 2 ist gl.FRAGMENT_SHADER_DERIVATIVE_HINT fest eingebaut. Dieses Ziel beeinflusst, wie genau dFdx, dFdy und fwidth im Fragment-Shader berechnet werden.

Wichtig: Ein Hinweis ist keine Verpflichtung. Browser und Treiber dürfen ihn komplett ignorieren. Verlass dich deshalb nicht auf sichtbare Unterschiede. Setze den Hinweis vor der betroffenen Operation, zum Beispiel vor generateMipmap().

Parameter

Name	Typ	Default	Beschreibung
$target Pflicht	GLenum		Das Verhalten, für das der Hinweis gilt: `gl.GENERATE_MIPMAP_HINT`, in WebGL 2 zusätzlich `gl.FRAGMENT_SHADER_DERIVATIVE_HINT`, mit `OES_standard_derivatives` auch `ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES`.
$mode Pflicht	GLenum	gl.DONT_CARE	Die gewünschte Priorität: `gl.FASTEST` (am schnellsten), `gl.NICEST` (beste Qualität) oder `gl.DONT_CARE` (keine Vorgabe).

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Mipmaps in hoher Qualität erzeugen

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

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// 2×2-Beispieltextur (RGBA)
const pixels = new Uint8Array([
  255, 0, 0, 255,   0, 255, 0, 255,
  0, 0, 255, 255,   255, 255, 0, 255
]);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

// Qualität bevorzugen – vor generateMipmap() setzen
gl.hint(gl.GENERATE_MIPMAP_HINT, gl.NICEST);
gl.generateMipmap(gl.TEXTURE_2D);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);

Aktuellen Hinweis abfragen

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

const names = {
  [gl.FASTEST]: 'FASTEST',
  [gl.NICEST]: 'NICEST',
  [gl.DONT_CARE]: 'DONT_CARE'
};

console.log(names[gl.getParameter(gl.GENERATE_MIPMAP_HINT)]);
gl.hint(gl.GENERATE_MIPMAP_HINT, gl.FASTEST);
console.log(names[gl.getParameter(gl.GENERATE_MIPMAP_HINT)]);

DONT_CARE FASTEST

Genauigkeit der Ableitungen im Fragment-Shader (WebGL 2 / Erweiterung)

const canvas = document.createElement('canvas');
const gl2 = canvas.getContext('webgl2');

if (gl2) {
  gl2.hint(gl2.FRAGMENT_SHADER_DERIVATIVE_HINT, gl2.NICEST);
  console.log('WebGL 2: Ableitungs-Hinweis gesetzt');
} else {
  const gl = canvas.getContext('webgl');
  const ext = gl.getExtension('OES_standard_derivatives');
  if (ext) {
    gl.hint(ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES, gl.NICEST);
    console.log('WebGL 1 + Erweiterung: Hinweis gesetzt');
  }
}

WebGL 2: Ableitungs-Hinweis gesetzt

// Wichtig · Fallstricke

Nur ein Hinweis: Viele Implementierungen (etwa ANGLE unter Windows) ignorieren den Wert. Das Rendering sieht dann trotz NICEST genauso aus. Rechne nicht mit sichtbaren Unterschieden.
Ein ungültiges target führt zu gl.INVALID_ENUM, ebenso ein ungültiger mode. Das kannst du mit gl.getError() prüfen. Ein typischer Fall: FRAGMENT_SHADER_DERIVATIVE_HINT in WebGL 1 ohne aktivierte Erweiterung.
Der Hinweis wirkt erst ab dem nächsten Aufruf der betroffenen Operation. Mipmaps, die bereits erzeugt wurden, bleiben unverändert.
Die Konstanten aus OpenGL wie PERSPECTIVE_CORRECTION_HINT oder LINE_SMOOTH_HINT gibt es in WebGL nicht.
Kompatibilität: hint() wird in allen modernen Browsern mit WebGL unterstützt.

Siehe auch

WebGLRenderingContext.generateMipmap() WebGLRenderingContext.getParameter() WebGLRenderingContext.getExtension() WebGLRenderingContext WebGL2RenderingContext TextEvent.initTextEvent()