[ Leksykon ] [ JavaScript ] [ Właściwości ] [ canvas ] [ WebGL ]

WebGLRenderingContext.unpackColorSpace

[_] [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]

Przykłady: 

<script>

 window.onload = () => {

 const szer = 300;
 const wys = 400;

 const offscreen = new OffscreenCanvas(szer, wys);
 canvas.width = szer;
 canvas.height = wys; 
 
 const gl = canvas.getContext("webgl");

 console.log(gl.canvas); // HTMLCanvasElement
 
 gl.drawingBufferColorSpace = "display-p3";
 gl.unpackColorSpace = "display-p3";
 
 const arr = new Uint8ClampedArray(10_000);

 // Wypełnij tablicę wartościami RGBA
 for (let i = 0; i < arr.length; i += 4) {
 arr[i + 0] = 250; // R
 arr[i + 1] = 100; // G
 arr[i + 2] = 0; // B
 arr[i + 3] = 255; // A
 }

 const obraz2 = new ImageData(arr, 50);

 console.log(obraz2.height); // 50
 console.log(obraz2.width); // 50 

 width = obraz2.height;
 height = obraz2.width;

 var temp = new Uint8Array(obraz2); // temp
 
 const tekstura = gl.createTexture();
 gl.bindTexture(gl.TEXTURE_2D, tekstura);

 const pixel = new Uint8Array([0, 0, 255, 255]);
 gl.texImage2D(
 gl.TEXTURE_2D,
 0,
 gl.RGBA,
 1,
 1,
 0,
 gl.RGBA,
 gl.UNSIGNED_BYTE,
 pixel
 );

 const obraz = new Image();
 obraz.onload = () => {
 gl.bindTexture(gl.TEXTURE_2D, tekstura);
 gl.texImage2D(
 gl.TEXTURE_2D,
 0,
 gl.RGBA,
 gl.RGBA,
 gl.UNSIGNED_BYTE,
 obraz
 );

 if (isPowerOf2(obraz.width) && isPowerOf2(obraz.height)) {
 gl.generateMipmap(gl.TEXTURE_2D);
 } else {
 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);
 }
 };

 function isPowerOf2(value) {
 return (value & (value - 1)) === 0;
 }
 obraz.src = "dom.png";
 console.log(tekstura); // WebGLTexture{}
 
 }

</script>

<canvas id="canvas" width="100" height="100"></canvas>

Opis:
Właściwość WebGLRenderingContext.unpackColorSpace włađciwość eksperymentalna, określa przestrzeń kolorów do konwersji podczas importowania tekstur. Oprócz domyślnej srgb, można używać przestrzeni kolorów display-p3. Źródła obrazu tekstury mogą być następujące:

ImageBitmap
ImageData
HTMLImageElement
HTMLCanvasElement
HTMLVideoElement
OffscreenCanvas
VideoFrame

Tekstury importuje się za pomocą metod WebGLRenderingContext.texImage2D() i WebGLRenderingContext.texSubImage2D(), a podczas importu następuje konwersja do określonej unpackColorSpace przestrzeni kolorów. Należy pamiętać, że nie ma to zastosowania w HTMLImageElement, gdy UNPACK_COLORSPACE_CONVERSION_WEBGL parametr przechowywania pikseli jest ustawiony na NONE. Ta właściwość może przyjmować następujące wartości "srgb" wybiera przestrzeń kolorów sRGB. Jest to wartość domyślna. "display-p3" wybiera przestrzeń kolorów display-p3. Jeśli zostanie podana nieprawidłowa wartość, wartość unpackColorSpace pozostanie niezmieniona.

Zobacz też:
WebGLRenderingContext texImage2D() -
WebGLRenderingContext texSubImage2D() -