WebGL create Texture

Question

イメージからWebGLテクスチャを正常に作成し、キャンバス要素に描画しました。

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

    texture.image.src = src; 
} 

また、これらのデータ型の1つからテクスチャを作成しようとしましたが、成功しませんでした。

• [オブジェクトのImageData]
• [オブジェクトCanvasPixelArray]
• [オブジェクトCanvasRenderingContext2D]

それだけで画像の画素アレイでテクスチャを作成することは可能ですか？ つまり、JS Imageオブジェクトをピクセル配列から作成することはできますか？

編集：

画素アレイがこの[r,g,b,a,r,g,b,a,r,g,b,a,...]ように見え、各値は{0 255}の範囲です。 与えられた配列のピクセルを使ってテクスチャを作成したいと思います。

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

EDIT：は少しさらにこれを推定する、あなたが知っておくべきことのほとんどはgl.texImage2d呼び出しです。生のRGB（A）データからテクスチャを作成するには、符号なしバイト値の配列が必要です。データを表すもの（RGBまたはRGBA）をWebGLに指定する必要があり、テクスチャの寸法を知る必要があります。より一般化された関数は、次のようになります。

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