2016-06-28 74 views
0

我正在讀取具有圖像數據的DICOM文件的Alpha通道,之後我使用this tutorial解析並呈現它,除此之外,我正在轉發Alpha通道到一個webgl程序來渲染紋理。無法在WebGL中呈現Alpha通道作爲紋理

但是,它適用於少數圖像,它也失敗了一些。 這裏有一些用例:

SNO寬度高度狀態

  1. 寬度:628,高度:888,α通道的長度:557664(正常工作)。

  2. 寬度:448,高度:612,alpha通道長度:274176(正常工作)。

  3. 寬度:446,高度:612,alpha通道長度:272952(不起作用)。

  4. 寬度:2219,高度:1200,alpha通道長度:2662800(不起作用)。

及使用情況下,3和4,我得到這些錯誤消息:

  • 錯誤:WebGL的:texImage2D:提供的緩衝區太小。 (需要2663999,有2662800)
  • 錯誤:WebGL:generateMipmap:紋理的基本級別不具有兩個冪的冪。

有什麼建議嗎?

回答

0

錯誤實際上是他們所說的。

  1. Error: WebGL: texImage2D: Provided buffer is too small. (needs 2663999, has 2662800)

    你叫gl.texImage2D但質地的尺寸比你所提供的數據大。

    例如,如果你這樣做

    var width = 16; 
    var height = 16; 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, 
           gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(10)); 
    

    你會得到相同的區域。您指定了一個紋理16x16xRGBA(4),其中 表示數據必須是16 * 16 * 4或1024字節,但上面的代碼只能通過10個字節

    有一點需要注意的是UNPACK_ALIGNMENT。它默認爲4 ,這意味着每行數據將被填充到4個字節。換言之和7x3的阿爾法紋理將成爲

    width = 7 
    height = 3 
    bytesPerPixel = 1 // gl.ALPHA 
    unpaddedRowSize = width * bytesPerPixel 
    paddedRowSize = Math.floor((minBytesPerRow + 3)/4) * 4; // = 8 
    requiredDataSize = (height - 1 * paddedRowSize) + unpaddedRowSize 
    

    你可能會認爲你只需要ALPHA 7x3或21字節,但你確實需要8 + 8 + 7或23字節,因爲除了最後的每一行是填充4

    多你可以告訴WebGL的調用

    gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); 
    

    設置UNPACK_ALIGNMENT 1現在只需要21個字節,因爲它不會再墊行。除非紋理是2在兩個維度上的功率

  2. Error: WebGL: generateMipmap: The base level of the texture does not have power-of-two dimensions

    WebGL的1.0不能用MIPS。你的示例紋理在任何一個維度中都不是2的冪,所以你不能使用mips,也不能爲它們調用gl.generateMipmap

    相反,你必須設置你的紋理過濾,只使用頂部(0級)MIP

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); // or gl.NEAREST 
    

    ,你必須將包裝到CLAMP_TO_EDGE

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 
    

    的WebGL 2.0消除這些限制

+0

我嘗試了你提供的所有建議,但遺憾的是沒有任何工作,但如果我保存了alpha c通道到一個單獨的畫布,並嘗試將該畫布渲染爲webgl中的紋理,它可以工作 –