WebGLRenderingContext.lineWidth() — Methode · JavaScript-Referenz

Signatur

WebGLRenderingContext.prototype.lineWidth(width)

Beschreibung

Die Methode lineWidth() des WebGLRenderingContext legt fest, wie breit Linien beim Zeichnen mit den Primitivtypen gl.LINES, gl.LINE_STRIP und gl.LINE_LOOP gerastert werden. Der Wert wird in Pixeln angegeben und gehört zum globalen WebGL-Zustand. Er gilt also für alle folgenden Zeichenaufrufe, bis er wieder geändert wird.

Wichtig: In der Praxis bringt die Methode fast nie etwas. Die meisten Implementierungen, besonders ANGLE unter Windows (Chrome, Edge, Firefox) und alle Core-Profile-Umgebungen unter macOS, unterstützen nur die Linienbreite 1. Den tatsächlich unterstützten Bereich liefert gl.getParameter(gl.ALIASED_LINE_WIDTH_RANGE). Werte außerhalb dieses Bereichs werden stillschweigend auf den Bereich begrenzt.

Für dicke oder stilisierte Linien sollte man deshalb nicht auf lineWidth() setzen. Üblich ist es, Linien als Dreiecksstreifen (Quads) zu erzeugen und sie im Vertex-Shader zum Bildschirm hin auszurichten. Die Methode ist trotzdem nützlich, um einen Wert explizit zu setzen und abzufragen, zum Beispiel bei Debug-Ausgaben mit Breite 1.

Parameter

Name	Typ	Default	Beschreibung
$width Pflicht	number (GLfloat)	1	Gewünschte Linienbreite in Pixeln. Muss größer als `0` sein und wird auf `ALIASED_LINE_WIDTH_RANGE` begrenzt.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Linienbreite setzen und abfragen

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

gl.lineWidth(5);

// Aktuell gesetzten Wert lesen
console.log(gl.getParameter(gl.LINE_WIDTH));

1 (bei den meisten Implementierungen, da nur Breite 1 unterstützt wird) 5 (nur wenn die Implementierung breitere Linien kann)

Unterstützten Bereich prüfen, bevor man sich darauf verlässt

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

const [minWidth, maxWidth] = gl.getParameter(gl.ALIASED_LINE_WIDTH_RANGE);
console.log(`Linienbreite: ${minWidth} bis ${maxWidth}`);

const wunsch = 4;
if (wunsch <= maxWidth) {
  gl.lineWidth(wunsch);
} else {
  console.warn('Dicke Linien nicht unterstützt – Fallback auf Dreiecke nötig.');
}

Linienbreite: 1 bis 1 Dicke Linien nicht unterstützt – Fallback auf Dreiecke nötig.

Linie zeichnen mit lineWidth()

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

const vsSource = `
  attribute vec2 aPos;
  void main() { gl_Position = vec4(aPos, 0.0, 1.0); }`;
const fsSource = `
  precision mediump float;
  void main() { gl_FragColor = vec4(1.0, 0.3, 0.0, 1.0); }`;

const compile = (type, src) => {
  const s = gl.createShader(type);
  gl.shaderSource(s, src);
  gl.compileShader(s);
  return s;
};

const program = gl.createProgram();
gl.attachShader(program, compile(gl.VERTEX_SHADER, vsSource));
gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fsSource));
gl.linkProgram(program);
gl.useProgram(program);

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-0.8, -0.8, 0.8, 0.8]), gl.STATIC_DRAW);

const loc = gl.getAttribLocation(program, 'aPos');
gl.enableVertexAttribArray(loc);
gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);

gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.lineWidth(3); // wird ggf. auf 1 begrenzt
gl.drawArrays(gl.LINES, 0, 2);

// Wichtig · Fallstricke

Kaum portabel: Unter ANGLE (Windows) und auf macOS ist ALIASED_LINE_WIDTH_RANGE fast immer [1, 1]. Größere Werte haben dann keine sichtbare Wirkung, und es gibt auch keine Fehlermeldung.
Werte kleiner oder gleich 0 sowie NaN lösen den Fehler gl.INVALID_VALUE aus. Er lässt sich mit gl.getError() abfragen.
Die Methode wirkt nur auf Linien-Primitive. Punkte (gl.POINTS) und Dreiecke beeinflusst sie nicht. Die Punktgröße setzt man im Shader über gl_PointSize.
Für dicke Linien, die überall gleich aussehen, erzeugt man die Linien als Dreiecke. Bibliotheken wie Three.js (Line2/LineMaterial) verwenden genau diese Technik.
Die Methode steht auch in WebGL2RenderingContext zur Verfügung und verhält sich dort gleich.

Siehe auch

WebGLRenderingContext.getParameter() WebGLRenderingContext.drawArrays() WebGLRenderingContext.drawElements() WebGLRenderingContext.getError() WebGLRenderingContext