WebGL 创建纹理

Posted 2023-03-05

【中文标题】WebGL 创建纹理

【英文标题】：WebGL create Texture

【发布时间】：2012-02-21 05:31:27

【问题描述】：

我成功地从图像创建了 WebGL 纹理并将其绘制到画布元素中。

function initTexture(src) 
  texture = gl.createTexture();
  texture.image = new Image();
  texture.image.onload = function() 
    handleLoadedTexture(texture)
  

  texture.image.src = src;

我也尝试从其中一种数据类型创建纹理，但没有成功。

[对象图像数据] [对象 CanvasPixelArray] [对象 CanvasRenderingContext2D]

是否可以仅使用图像的像素阵列创建纹理？ 或者换句话说：是否可以从像素数组中创建 JS Image 对象？

编辑：

像素数组如下所示[r,g,b,a,r,g,b,a,r,g,b,a,...]，每个值都在 0..255 的范围内。 我想用给定数组中的像素创建一个纹理。

【问题讨论】：

抱歉，我的意思可能不太清楚。我更新了 Q。

如果您的数据在 ArrayBuffer 中，您可以使用 WebGL 中的一个函数（我现在不记得了）

@Chiguireitor 你能给我举个例子来说明如何创建这样一个arrayBuffer吗？

【参考方案1】：

用像素数组创建纹理是绝对可能的！我一直在我的代码中使用以下代码来创建单像素纯色纹理。

function createSolidTexture(gl, r, g, b, a) 
    var data = new Uint8Array([r, g, b, a]);
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    return texture;

编辑：为了进一步推断，您需要知道的大部分内容都在gl.texImage2d 调用中。为了从原始 RGB(A) 数据创建纹理，您需要一个无符号字节值数组，您需要向 WebGL 指定数据代表什么（RGB 或 RGBA），并且您需要知道纹理的尺寸。更通用的函数如下所示：

function textureFromPixelArray(gl, dataArray, type, width, height) 
    var dataTypedArray = new Uint8Array(dataArray); // Don't need to do this if the data is already in a typed array
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, type, width, height, 0, type, gl.UNSIGNED_BYTE, dataTypedArray);
    // Other texture setup here, like filter modes and mipmap generation
    return texture;


// RGB Texture:
// For a 16x16 texture the array must have at least 768 values in it (16x16x3)
var rgbTex = textureFromPixelArray(gl, [r,g,b,r,g,b...], gl.RGB, 16, 16);

// RGBA Texture:
// For a 16x16 texture the array must have at least 1024 values in it (16x16x4)
var rgbaTex = textureFromPixelArray(gl, [r,g,b,a,r,g,b,a...], gl.RGBA, 16, 16);

【讨论】：

太棒了。我有一个像这样的像素数组 [r,g,b,a,r,g,b,a,...] （范围 0..255）。也许你可以给我一些例子来说明如何用它来制作实体纹理？

第 2 行的注释是什么意思：如果数据已经在类型化数组中，则不需要这样做