[ Leksykon ] [ JavaScript ] [ Metody ] [ canvas ] [ WebGL ]

WebGLRenderingContext.createTexture()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

createTexture()

 

Przykłady: 

xxx
xxx
xxx

  

Opis:
Metoda WebGLRenderingContext.createTexture() tworzy i inicjuje WebGLTexture obiekt. Wartość zwracana obiekt WebGLTexture, do którego można przypisać obrazy. Tworzenie tekstury:

const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const texture = gl.createTexture();

Pierwszą rzeczą do zrobienia jest dodanie kodu do załadowania tekstur. Użyjemy pojedynczej tekstury, zmapowanej na wszystkich sześciu bokach naszego obracającego się sześcianu, ale ta sama technika może być użyta do dowolnej liczby tekstur.

// Zainicjuj teksturę i załaduj obraz.
// Po zakończeniu ładowania obrazu skopiuj go do tekstury.
function loadTexture(gl, url) {

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

 // Ponieważ obrazy należy pobierać przez Internet
 // może minąć trochę czasu, zanim będą gotowe.
 // Do tego czasu umieść pojedynczy piksel w teksturze, 
 // abyśmy mogli użyć go natychmiast, 
 // po zakończeniu pobierania obrazu zaktualizujemy teksturę o zawartość obrazu.
 
 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]); // nieprzezroczysty niebieski
 
 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,
 );

 // WebGL ma inne wymagania dotyczące mocy 2 obrazów vs. brak potęgi 2 obrazów, 
 // więc sprawdź, czy obraz jest a potęga liczby 2 w obu wymiarach.
 if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
 
 // Tak, to jest potęga liczby 2. Generuj mipsy.
 gl.generateMipmap(gl.TEXTURE_2D);
 
 } else {
 
 // Nie, to nie jest potęga liczby 2. Wyłącz mipsy i ustaw
 // zawijanie w celu zamocowania do krawędzi
 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;
}

const texture = loadTexture(gl, "test.png");
// Odwróć piksele obrazu w kolejności od dołu do góry, jakiej oczekuje WebGL.
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

loadTexture() zaczyna się od utworzenia obiektu tekstury WebGL texturepoprzez wywołanie funkcji WebGL createTexture(). Następnie przesyła pojedynczy niebieski piksel za pomocą texImage2D(). Dzięki temu tekstura jest natychmiast gotowa do użycia jako jednolity niebieski kolor, nawet jeśli pobranie naszego obrazu może potrwać jakiś czas.

Aby załadować teksturę z pliku obrazu, tworzy Image obiekt i przypisuje src do adresu URL naszego obrazu, którego chcemy użyć jako tekstury. Funkcja, którą przypisujemy, image.onload zostanie wywołana po zakończeniu pobierania obrazu. W tym momencie wywołujemy ją ponownie, texImage2D() tym razem używając obrazu jako źródła tekstury. Następnie ustawiamy filtrowanie i zawijanie dla tekstury w oparciu o to, czy pobrany obraz był potęgą liczby 2 w obu wymiarach, czy nie.

WebGL1 może używać tylko tekstur niebędących potęgą 2 z filtrowaniem ustawionym na NEARESTlub LINEAR i nie może generować dla nich mipmapy. Ich tryb zawijania musi być również ustawiony na CLAMP_TO_EDGE. Z drugiej strony, jeśli tekstura jest potęgą 2 w obu wymiarach, WebGL może wykonywać filtrowanie wyższej jakości, może używać mipmapy i może ustawić tryb zawijania na REPEAT lub MIRRORED_REPEAT.

Mipmapping i powtarzanie UV można wyłączyć za pomocą texParameteri(). Pozwoli to na tekstury niebędące potęgą dwóch (NPOT) kosztem mipmappingu, zawijania UV, kafelkowania UV i kontroli nad tym, jak urządzenie będzie obsługiwać teksturę. 

// gl.NEAREST jest również dozwolona zamiast gl.LINEAR, ponieważ nie jest to żadna mipmapa
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
// Zapobiega zawijaniu (powtarzaniu) współrzędnych s.
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
// Zapobiega zawijaniu współrzędnych t (powtarzaniu)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

Ponownie, z tymi parametrami, zgodne urządzenia WebGL automatycznie zaakceptują dowolną rozdzielczość dla tej tekstury (aż do ich maksymalnych wymiarów). Bez wykonywania powyższej konfiguracji, WebGL wymaga, aby wszystkie próbki tekstur NPOT nie powiodły się, zwracając transparentną czerń: rgb(0 0 0 / 0%). Aby załadować obraz, dodaj wywołanie do naszej loadTexture() funkcji w naszej main()funkcji. Można to dodać po initBuffers(gl) wywołaniu. Ale pamiętaj: Przeglądarki kopiują piksele z załadowanego obrazu w kolejności od góry do dołu - od lewego górnego rogu; natomiast WebGL wymaga, aby piksele były w kolejności od dołu do góry - zaczynając od lewego dolnego rogu.

Aby zapobiec niewłaściwej orientacji powstałej tekstury obrazu po renderowaniu, musimy również wywołać funkcję pixelStorei() z gl.UNPACK_FLIP_Y_WEBGL parametrem ustawionym na true, aby spowodować odwrócenie pikseli w kolejności od dołu do góry, jakiej oczekuje WebGL. 

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

Dodaj następujący kod, zaraz po wywołaniu initBuffers():

const texture = loadTexture(gl, "test.png");
// Odwróć piksele obrazu w kolejności od dołu do góry, jakiej oczekuje WebGL.
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

 

 

 

 

 

Zobacz też:

WebGLRenderingContext.attachShader() - 
WebGLRenderingContext.bindAttribLocation() - 
WebGLRenderingContext.compileShader() - 
createProgram() - tworzy i inicjuje WebGLProgram obiekt, tworzenie programu WebGL
WebGLRenderingContext.createShader() - 
WebGLRenderingContext.deleteProgram() - 
WebGLRenderingContext.deleteShader() - 
WebGLRenderingContext.detachShader() - 
WebGLRenderingContext.getAttachedShaders() - 
WebGLRenderingContext.getProgramParameter() - 
WebGLRenderingContext.getProgramInfoLog() - 
WebGLRenderingContext.getShaderParameter() - 
WebGLRenderingContext.getShaderPrecisionFormat() - 
WebGLRenderingContext.getShaderInfoLog() - 
WebGLRenderingContext.getShaderSource() - 
WebGLRenderingContext.isProgram() - 
WebGLRenderingContext.isShader() - 
WebGLRenderingContext.linkProgram() - 
WebGLRenderingContext.shaderSource() - 
WebGLRenderingContext.useProgram() - 
WebGLRenderingContext.validateProgram() -