WebGL创建纹理 [英] WebGL create Texture

问题描述

  function initTexture（src）{ 
 texture = gl.createTexture（）; 
 texture.image = new Image（）; 
 texture.image.onload = function（）{
 handleLoadedTexture（texture）
} 
 
 texture.image.src = src; 
} 
  

我还试图从这些数据类型之一创建一个纹理，但没有成功。

• [object ImageData]


• [object CanvasPixelArray]


• [object CanvasRenderingContext2D]

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

：

像素阵列看起来像这样 [r，g，b，a，r，g，b，a，r ，g，b，a，...] ，每个值在{0..255}的范围内。
我想创建一个纹理与给定数组中的像素。

解决方案

这是绝对可能创建一个纹理与像素阵列！我在代码中使用以下代码创建单个像素，纯色纹理。

  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; 
} 
  

EDIT：要进一步推断，你需要知道的大部分是在 gl.texImage2d 调用。为了从原始RGB（A）数据创建纹理，您需要一个无符号字节值数组，您需要向WebGL指定数据表示什么（RGB或RGBA），您需要知道纹理的尺寸。更广泛的函数如下：

  function textureFromPixelArray（gl，dataArray，type，width，height）{
 var dataTypedArray = new Uint8Array（dataArray）; //不需要这样做，如果数据已经在一个类型数组
 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）; 
 //这里的其他纹理设置，像过滤器模式和mipmap生成
 return texture; 
} 
 
 // RGB纹理：
 //对于16x16纹理，数组中必须至少有768个值（16x16x3）
 var rgbTex = textureFromPixelArray gl，[r，g，b，r，g，b ...]，gl.RGB，16,16）; 
 
 // RGBA纹理：
 //对于16x16纹理，数组必须至少有1024个值（16x16x4）
 var rgbaTex = textureFromPixelArray（gl，[r， g，b，a，r，g，b，a ...]，gl.RGBA，16,16） 
  

I successfully created a WebGL texture from an image and drew it into a canvas element.

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

  texture.image.src = src;
}

I also tried to create a texture from one of these datatypes, but without success.

• [object ImageData]
• [object CanvasPixelArray]
• [object CanvasRenderingContext2D]

Is it possible to create a texture just with an image's pixel array? Or in other words: Is it possible to create a JS Image object out of a pixel array?

Edit:

The pixel array looks like this [r,g,b,a,r,g,b,a,r,g,b,a,...] and each value is in a range of {0..255}. I want to create a texture with the pixels in the given array.

解决方案

It's absolutely possible to create a texture with a pixel array! I use the following in my code all the time to create a single pixel, solid color texture.

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;
}

EDIT: To extrapolate this a little further, most of what you need to know is in the gl.texImage2d call. In order to create a texture from raw RGB(A) data you need an array of unsigned byte values, you need to specify to WebGL what the data represents (RGB or RGBA), and you need to know the dimensions of the texture. A more generalized function would look like this:

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);

这篇关于WebGL创建纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！