javascript WebGL 创建纹理
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9046643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WebGL create Texture
提问by alex
I successfully created a WebGL texture from an image and drew it into a canvas element.
我成功地从图像创建了一个 WebGL 纹理并将其绘制到画布元素中。
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]
- [对象图像数据]
- [对象 CanvasPixelArray]
- [对象 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 objectout of a pixel array?
是否可以仅使用图像的像素阵列创建纹理？或者换句话说：是否可以从像素数组中创建一个JS Image 对象？
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.
像素阵列看起来像这样[r,g,b,a,r,g,b,a,r,g,b,a,...]，每个值都在 {0..255} 的范围内。我想用给定数组中的像素创建一个纹理。
回答by Toji
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.texImage2dcall. 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:
编辑：为了进一步推断这一点，您需要知道的大部分内容都在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);
