OES_texture_half_float_linear extension — Schnittstelle · JavaScript-Referenz

Signatur

interface OES_texture_half_float_linear

Beschreibung

OES_texture_half_float_linear gehört zur WebGL-API. Die Erweiterung erlaubt lineares Filtern (gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR usw.) bei Texturen, deren Pixeltyp HALF_FLOAT_OES ist. Diesen Typ stellt die Erweiterung OES_texture_half_float bereit. Ohne OES_texture_half_float_linear dürfen Half-Float-Texturen nur mit gl.NEAREST abgetastet werden.

Die Schnittstelle hat keine eigenen Methoden oder Konstanten. Du aktivierst sie mit gl.getExtension('OES_texture_half_float_linear'). Danach gilt der geänderte Filterumfang für den gesamten Kontext. Typische Einsatzfälle:

HDR-Rendering und Tone-Mapping
Bloom- und Weichzeichner-Effekte in Render-to-Texture-Pipelines
Partikel- und Physiksimulationen auf der GPU, bei denen Zwischenwerte weich interpoliert werden sollen

Half-Float-Texturen brauchen nur halb so viel Speicher wie 32-Bit-Float-Texturen. Deshalb sind sie auf Mobilgeräten oft die bessere Wahl. Dort wird lineares Filtern bei 16 Bit auch häufiger unterstützt als bei 32 Bit.

Die Erweiterung gibt es nur in WebGL-1-Kontexten. In WebGL 2 sind 16-Bit-Float-Formate wie RGBA16F schon im Kern filterbar, die Erweiterung ist dort also überflüssig.

Parameter

Name	Typ	Default	Beschreibung
$name Pflicht	string		Argument für `WebGLRenderingContext.getExtension()`. Es muss genau `'OES_texture_half_float_linear'` lauten.

Rückgabewert

Typ

OES_texture_half_float_linear | null

Beschreibung

getExtension() gibt ein (leeres) Erweiterungsobjekt zurück, wenn Browser und GPU die Erweiterung unterstützen. Sonst ist der Rückgabewert null. Schon der Aufruf aktiviert das lineare Filtern.

Beispiele

Erweiterung aktivieren und Unterstützung prüfen

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

// Liefert den Typ HALF_FLOAT_OES
const halfFloat = gl.getExtension('OES_texture_half_float');
// Erlaubt LINEAR-Filter für diesen Typ
const halfFloatLinear = gl.getExtension('OES_texture_half_float_linear');

console.log('Half-Float:', !!halfFloat);
console.log('Half-Float linear filterbar:', !!halfFloatLinear);

Half-Float: true Half-Float linear filterbar: true

Linear gefilterte HDR-Textur mit Rückfall auf NEAREST

const gl = document.querySelector('canvas').getContext('webgl');
const halfFloat = gl.getExtension('OES_texture_half_float');
const linear = gl.getExtension('OES_texture_half_float_linear');

if (!halfFloat) throw new Error('Half-Float-Texturen werden nicht unterstützt');

const filter = linear ? gl.LINEAR : gl.NEAREST;
const width = 512, height = 512;

const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0,
  gl.RGBA, halfFloat.HALF_FLOAT_OES, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

console.log('Filter:', filter === gl.LINEAR ? 'LINEAR' : 'NEAREST');

Filter: LINEAR

Hilfsfunktion für WebGL 1 und WebGL 2

const supportsHalfFloatLinear = (gl) => {
  // In WebGL 2 sind 16-Bit-Float-Texturen immer filterbar
  if (typeof WebGL2RenderingContext !== 'undefined' &&
      gl instanceof WebGL2RenderingContext) {
    return true;
  }
  return !!gl.getExtension('OES_texture_half_float') &&
         !!gl.getExtension('OES_texture_half_float_linear');
};

const gl = document.createElement('canvas').getContext('webgl2')
  ?? document.createElement('canvas').getContext('webgl');
console.log(supportsHalfFloatLinear(gl));

true

// Wichtig · Fallstricke

Stiller Fehler: Wenn du eine Half-Float-Textur ohne aktivierte Erweiterung mit LINEAR filterst, gilt sie als unvollständig. Beim Abtasten liefert sie dann Schwarz (0, 0, 0, 1), und du bekommst keine Fehlermeldung. Prüfe den Rückgabewert von getExtension() deshalb immer.
Den Pixeltyp HALF_FLOAT_OES (0x8D61) liefert nur OES_texture_half_float. Die Linear-Erweiterung allein reicht nicht aus.
Nur in WebGL 1 verfügbar. In WebGL 2 nimmst du gl.HALF_FLOAT mit internen Formaten wie gl.RGBA16F. Diese sind ohne Erweiterung filterbar.
Das Filtern und das Rendern in Half-Float-Texturen sind getrennte Fähigkeiten. Um in eine Half-Float-Textur zu rendern, brauchst du in WebGL 1 zusätzlich EXT_color_buffer_half_float. In WebGL 2 ist es EXT_color_buffer_float.
Für 32-Bit-Float-Texturen gilt eine eigene Erweiterung: OES_texture_float_linear. Sie ist auch in WebGL 2 nötig und wird auf Mobilgeräten oft nicht unterstützt.
Browser-Unterstützung: Chrome, Firefox, Safari und Edge unterstützen die Erweiterung weitgehend. Ob sie tatsächlich verfügbar ist, hängt aber von GPU und Treiber ab.

Siehe auch

WebGLRenderingContext.getExtension() WebGL2RenderingContext OES_texture_float_linear extension OES_texture_half_float extension OES_texture_float extension