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

또한 이러한 데이터 유형 중 하나에서 텍스처를 만들려고했지만 성공하지 못했습니다.

• [개체 imageData의]
• [개체 CanvasPixelArray]
• [개체 CanvasRenderingContext2D]

단지 이미지의 픽셀 어레이과 텍스처를 생성 할 수 있습니까? 또는 다른 말로하면, JS 이미지 객체을 픽셀 배열에서 만들 수 있습니까?

편집 :

픽셀 어레이 [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; 
} 

편집

:이 조금 더, 당신이 알아야 할의 대부분이 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);