Verwendung von Texturen in WebGL

Das Erste, was zu tun ist, ist Code hinzuzufügen, um die Texturen zu laden. In unserem Fall verwenden wir eine einzige Textur, die auf alle sechs Seiten unseres rotierenden Würfels abgebildet wird, aber die gleiche Technik kann für jede Anzahl von Texturen verwendet werden.

//
// Initialize a texture and load an image.
// When the image finished loading copy it into the texture.
//
function loadTexture(gl, url) {
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // Because images have to be downloaded over the internet
  // they might take a moment until they are ready.
  // Until then put a single pixel in the texture so we can
  // use it immediately. When the image has finished downloading
  // we'll update the texture with the contents of the image.
  const level = 0;
  const internalFormat = gl.RGBA;
  const width = 1;
  const height = 1;
  const border = 0;
  const srcFormat = gl.RGBA;
  const srcType = gl.UNSIGNED_BYTE;
  const pixel = new Uint8Array([0, 0, 255, 255]); // opaque blue
  gl.texImage2D(
    gl.TEXTURE_2D,
    level,
    internalFormat,
    width,
    height,
    border,
    srcFormat,
    srcType,
    pixel,
  );

  const image = new Image();
  image.onload = () => {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(
      gl.TEXTURE_2D,
      level,
      internalFormat,
      srcFormat,
      srcType,
      image,
    );

    // WebGL1 has different requirements for power of 2 images
    // vs. non power of 2 images so check if the image is a
    // power of 2 in both dimensions.
    if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
      // Yes, it's a power of 2. Generate mips.
      gl.generateMipmap(gl.TEXTURE_2D);
    } else {
      // No, it's not a power of 2. Turn off mips and set
      // wrapping to clamp to edge
      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);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    }
  };
  image.src = url;

  return texture;
}

function isPowerOf2(value) {
  return (value & (value - 1)) === 0;
}

Die loadTexture()-Routine beginnt mit der Erstellung eines WebGL-Texturobjekts texture durch Aufruf der WebGL-Funktion createTexture(). Dann lädt es einen einzigen blauen Pixel mit texImage2D() hoch. Dies macht die Textur sofort als Volltonfarbe verwendbar, auch wenn es einige Momente dauern kann, bis unser Bild heruntergeladen ist.

Um die Textur aus der Bilddatei zu laden, erstellt es dann ein Image-Objekt und weist die src der URL für unser Bild zu, das wir als Textur verwenden möchten. Die Funktion, die wir image.onload zuweisen, wird aufgerufen, sobald das Bild fertig heruntergeladen wurde. Zu diesem Zeitpunkt rufen wir erneut texImage2D() auf, diesmal unter Verwendung des Bildes als Quelle für die Textur. Danach richten wir das Filtern und Verkleiden der Textur basierend darauf ein, ob das Bild, das wir herunterladen, eine Potenz von 2 in beiden Dimensionen war oder nicht.

WebGL1 kann nur Nicht-Potenz-von-2-Texturen mit einem Filter auf NEAREST oder LINEAR verwenden und kann kein Mipmap dafür generieren. Ihr Wrap-Modus muss ebenfalls auf CLAMP_TO_EDGE gesetzt werden. Andererseits, wenn die Textur eine Potenz von 2 in beiden Dimensionen ist, kann WebGL ein qualitativ höherwertiges Filtern durchführen, es kann Mipmap verwenden und es kann den Wrap-Modus auf REPEAT oder MIRRORED_REPEAT setzen.

Ein Beispiel für eine wiederholte Textur ist das Kacheln eines Bildes von ein paar Ziegelsteinen, um eine Ziegelmauer zu bedecken.

Mipmapping und UV-Wiederholung können mit texParameteri() deaktiviert werden. Dadurch werden Texturen, die keine Potenz von zwei (NPOT) haben, auf Kosten von Mipmapping, UV-Wrapping, UV-Tiling und Ihrer Kontrolle darüber ermöglicht, wie das Gerät Ihre Textur handhabt.

// gl.NEAREST is also allowed, instead of gl.LINEAR, as neither mipmap.
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
// Prevents s-coordinate wrapping (repeating).
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
// Prevents t-coordinate wrapping (repeating).
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

Wiederum werden mit diesen Parametern kompatible WebGL-Geräte automatisch jede Auflösung für diese Textur akzeptieren (bis zu ihren maximalen Abmessungen). Ohne die oben genannte Konfiguration verlangt WebGL, dass alle Proben von NPOT-Texturen fehlschlagen, indem sie transparentes Schwarz zurückgeben: rgb(0 0 0 / 0%).

Um das Bild zu laden, fügen Sie in unserer main()-Funktion einen Aufruf unserer loadTexture()-Funktion hinzu. Dies kann nach dem Aufruf von initBuffers(gl) hinzugefügt werden.

Beachten Sie auch: Browser kopieren Pixel aus dem geladenen Bild in Top-zu-Bottom-Reihenfolge – von der oberen linken Ecke; aber WebGL möchte die Pixel in Bottom-zu-Top-Reihenfolge – beginnend von der unteren linken Ecke. (Für mehr Details siehe Warum ist meine WebGL-Textur auf dem Kopf?.)

Um zu verhindern, dass die resultierende Bildtextur beim Rendern die falsche Orientierung hat, müssen wir auch pixelStorei() mit dem Parameter gl.UNPACK_FLIP_Y_WEBGL auf true gesetzt aufrufen – um zu bewirken, dass die Pixel in die von WebGL erwartete Bottom-zu-Top-Reihenfolge umgekehrt werden.

// Load texture
const texture = loadTexture(gl, "cubetexture.png");
// Flip image pixels into the bottom-to-top order that WebGL expects.
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

An diesem Punkt ist die Textur geladen und einsatzbereit. Aber bevor wir sie verwenden können, müssen wir die Zuordnung der Texturkoordinaten zu den Scheitelpunkten der Flächen unseres Würfels festlegen. Dies ersetzt den gesamten zuvor vorhandenen Code zur Konfiguration der Farben für jede der Flächen des Würfels in initBuffers().

function initTextureBuffer(gl) {
  const textureCoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);

  const textureCoordinates = [
    // Front
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Back
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Top
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Bottom
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Right
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Left
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
  ];

  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array(textureCoordinates),
    gl.STATIC_DRAW,
  );

  return textureCoordBuffer;
}

Zuerst erstellt dieser Code einen WebGL-Puffer, in den wir die Texturkoordinaten für jede Fläche speichern, dann binden wir diesen Puffer als das Array, in das wir schreiben werden.

Das textureCoordinates-Array definiert die Texturkoordinaten, die jedem Scheitelpunkt jeder Fläche entsprechen. Beachten Sie, dass sich die Texturkoordinaten im Bereich von 0,0 bis 1,0 bewegen; Die Dimensionen der Texturen werden unabhängig von ihrer tatsächlichen Größe für den Zweck der Texturabbildung auf einen Bereich von 0,0 bis 1,0 normalisiert.

Sobald wir das Texturabbildungsarray eingerichtet haben, übergeben wir das Array in den Puffer, damit WebGL diese Daten zur Verfügung hat.

Dann geben wir den neuen Puffer zurück.

Als nächstes müssen wir initBuffers() aktualisieren, um den Texturkoordinatenpuffer anstelle des Farbpuffers zu erstellen und zurückzugeben.

const textureCoordBuffer = initTextureBuffer(gl);

return {
  position: positionBuffer,
  textureCoord: textureCoordBuffer,
  indices: indexBuffer,
};

Das Shader-Programm muss ebenfalls aktualisiert werden, um die Texturen anstelle von Vollfarben zu verwenden.

Wir müssen den Vertex-Shader ersetzen, sodass er statt der Farbdaten die Texturkoordinaten-Daten abruft.

const vsSource = `
    attribute vec4 aVertexPosition;
    attribute vec2 aTextureCoord;

    uniform mat4 uModelViewMatrix;
    uniform mat4 uProjectionMatrix;

    varying highp vec2 vTextureCoord;

    void main(void) {
      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
      vTextureCoord = aTextureCoord;
    }
  `;

Die entscheidende Änderung hier ist, dass wir anstelle der Scheitelpunktfarbe die Texturkoordinaten abrufen und an den Vertex-Shader übergeben; dies zeigt den Ort in der Textur an, der dem Scheitelpunkt entspricht.

Auch der Fragment-Shader muss aktualisiert werden.

const fsSource = `
    varying highp vec2 vTextureCoord;

    uniform sampler2D uSampler;

    void main(void) {
      gl_FragColor = texture2D(uSampler, vTextureCoord);
    }
  `;

Statt einen Farbwert der Fragmentfarbe zuzuweisen, wird die Fragmentfarbe berechnet, indem die Texel (das heißt, das Pixel innerhalb der Textur) basierend auf dem Wert von vTextureCoord abgerufen wird, dieser wird wie die Farben zwischen den Scheitelpunkten interpoliert.

Da wir ein Attribut geändert und ein Uniform hinzugefügt haben, müssen wir deren Orte nachschlagen.

const programInfo = {
  program: shaderProgram,
  attribLocations: {
    vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
    textureCoord: gl.getAttribLocation(shaderProgram, "aTextureCoord"),
  },
  uniformLocations: {
    projectionMatrix: gl.getUniformLocation(shaderProgram, "uProjectionMatrix"),
    modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"),
    uSampler: gl.getUniformLocation(shaderProgram, "uSampler"),
  },
};

Die Änderungen an der Funktion drawScene() sind einfach.

// tell webgl how to pull out the texture coordinates from buffer
function setTextureAttribute(gl, buffers, programInfo) {
  const num = 2; // every coordinate composed of 2 values
  const type = gl.FLOAT; // the data in the buffer is 32-bit float
  const normalize = false; // don't normalize
  const stride = 0; // how many bytes to get from one set to the next
  const offset = 0; // how many bytes inside the buffer to start from
  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
  gl.vertexAttribPointer(
    programInfo.attribLocations.textureCoord,
    num,
    type,
    normalize,
    stride,
    offset,
  );
  gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);
}

setTextureAttribute(gl, buffers, programInfo);

Fügen Sie dann Code hinzu, um anzugeben, welche Textur auf die Flächen abgebildet wird.

// Tell WebGL we want to affect texture unit 0
gl.activeTexture(gl.TEXTURE0);

// Bind the texture to texture unit 0
gl.bindTexture(gl.TEXTURE_2D, texture);

// Tell the shader we bound the texture to texture unit 0
gl.uniform1i(programInfo.uniformLocations.uSampler, 0);

WebGL bietet mindestens 8 Textureinheiten; die erste von ihnen ist gl.TEXTURE0. Wir sagen WebGL, dass wir Einheit 0 beeinflussen wollen. Dann rufen wir bindTexture() auf, das die Textur an den TEXTURE_2D-Bindungspunkt von Textureinheit 0 bindet. Dann sagen wir dem Shader, dass er für den uSampler Textureinheit 0 verwenden soll.

Letztlich fügen Sie texture als Parameter zur drawScene()-Funktion hinzu, sowohl wo sie definiert als auch wo sie aufgerufen wird.

function drawScene(gl, programInfo, buffers, texture, cubeRotation) {

drawScene(gl, programInfo, buffers, texture, cubeRotation);

An diesem Punkt sollte der rotierende Würfel einsatzbereit sein.

Sehen Sie sich den vollständigen Code an | Öffnen Sie dieses Demo auf einer neuen Seite

Das Laden von WebGL-Texturen unterliegt den Zugriffssteuerungen für Cross-Domain-Zugriffe. Damit Ihr Inhalt eine Textur von einer anderen Domain laden kann, muss eine CORS-Zulassung eingeholt werden. Siehe HTTP-Zugriffskontrolle für Details zu CORS.

Da WebGL jetzt verlangt, dass Texturen aus sicheren Kontexten geladen werden, können Sie keine Texturen von file:///-URLs in WebGL verwenden. Das bedeutet, dass Sie einen sicheren Webserver benötigen, um Ihren Code zu testen und bereitzustellen. Für lokale Tests siehe unseren Leitfaden Wie richtet man einen lokalen Testserver ein? für Hilfe.

Lesen Sie diesen hacks.mozilla.org Artikel, um eine Erklärung dafür zu erhalten, wie man CORS-genehmigte Bilder als WebGL-Texturen verwendet.

Beschädigte (nur lesbare) 2D-Canvases können nicht als WebGL-Texturen verwendet werden. Ein 2D-<canvas> wird beispielsweise beschädigt, wenn ein Cross-Domain-Bild darauf gezeichnet wird.

• Zurück
• Weiter