3

WebGL での画像レンダリングに問題があります。キャンバス全体を占めるクワッドと、クワッド全体にマップされるはずのテクスチャを備えたキャンバスがあります (正しいテクスチャ座標を設定しました)。

画像は、RGB データを (この順序で) 含む Uint8array であり、画像は 1024*768 ピクセルです。私は正しいバッファを持っています。画像へのリンクはこちらです。

元の画像

問題は次のとおりです。WebGL にレンダリングすると、画像のサイズのキャンバスがある場合でも、画像がぼやけてぼやけてしまいます。以下の結果を参照してください。

WebGL 経由でレンダリング

コードについて: テクスチャ ハンドルを作成するために使用するコードは次のとおりです。

//texture
that.Texture = that.gl.createTexture();         
that.gl.bindTexture(that.gl.TEXTURE_2D, that.Texture);                          

// Set the parameters so we can render any size image.
that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_WRAP_S, that.gl.CLAMP_TO_EDGE);
that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_WRAP_T, that.gl.CLAMP_TO_EDGE);
that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_MIN_FILTER, that.gl.NEAREST);
that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_MAG_FILTER, that.gl.NEAREST);

データは次のようにテクスチャにロードされます。

this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGB, this.m_iImageWidth, this.m_iImageHeight,
0, this.gl.RGB, this.gl.UNSIGNED_BYTE, this.m_aImage);

最後に、使用するフラグメント シェーダーを次に示します。

precision mediump float;
uniform sampler2D u_image;
varying vec2 v_texCoord;
void main() 
{
   gl_FragColor = texture2D(u_image, v_texCoord);
}

フィルタリングからスタイルオプションの画像レンダリングピクセル化の設定、画像をRGBAに変換してRGBA値を与えるまで、多くのオプションを試しましたが、結果は常に同じくだらないテクスチャレンダリングです。キャンバスがテクスチャとまったく同じサイズであっても、WebGL がデータを正しく補間していないようです。

誰にもヒントはありますか?

前もって感謝します。

4

2 に答える 2