Javascript WebGL图像渲染质量差

我在WebGL中的图像渲染有一个问题：我有一个canva，一个四边形占据整个画布，一个纹理应该映射到整个四边形上（我设置了正确的纹理坐标）

图像是包含RGB数据（按此顺序）的UINT8阵列，图像为1024*768像素。我有正确的缓冲器。这是图片的链接

问题在于：当渲染到WebGL时，我的图片变得模糊，即使我有一个与图像大小相同的canva。请参见下面的结果：

下面是我用来创建纹理控制柄的代码：

//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无法正确插值数据，即使画布与纹理的大小完全相同

有人有什么暗示吗

---

提前感谢。

确保画布的宽度和高度与像素显示大小匹配。显示大小通过样式宽度和高度设置

分辨率是图像中的像素数。显示大小是它在页面上占用的空间量。这两种方法应该匹配以获得最佳结果

canvas = document.createElement("canvas");
canvas.width = 1024; // set the canvas resolution
canvas.height = 784;

canvas.style.width = "1024px"; // set the display size.
canvas.style.height = "784px";

如果显示尺寸大于分辨率，则会拉伸画布并导致模糊，让我们试试

var-vs=`
属性向量4位置；
属性向量2 texcoord；
可变矢量2 v_texCoord；
void main（）{
gl_Position=vec4（Position.xy*vec2（1，-1），0,1）；
v_texCoord=texCoord；
}
`;
var fs=`
精密中泵浮子；
均匀采样二维u_图像；
可变矢量2 v_texCoord；
void main（）
{
gl_FragColor=纹理2D（u_图像，v_texCoord）；
}`
;
var gl=document.querySelector（“canvas”）.getContext（“webgl”）；
var={
德国劳埃德船级社：德国劳埃德船级社，
};
var img=新图像（）；
img.crossOrigin=“”；
img.onload=函数（）{
即m_aImage=img；
即m_iImageWidth=img.width；
即m_iImageHeight=img.height；
gl.canvas.width=img.width；
gl.canvas.height=img.height；
控制台日志（“尺寸：”，img.width，“x”，img.height）；
打电话给（那个）；
}
img.src=”https://i.imgur.com/ZCfccZh.png";
函数render（）{
//质地
that.Texture=that.gl.createTexture（）；
that.gl.bindTexture（that.gl.TEXTURE_2D，that.TEXTURE）；
//设置参数，以便我们可以渲染任意大小的图像。
that.gl.texParameteri（that.gl.TEXTURE\u 2D，that.gl.TEXTURE\u WRAP\u S，that.gl.CLAMP\u TO\u EDGE）；
that.gl.texParameteri（that.gl.TEXTURE\u 2D，that.gl.TEXTURE\u WRAP\T，that.gl.CLAMP\u TO\u EDGE）；
that.gl.texParameteri（that.gl.TEXTURE\u 2D，that.gl.TEXTURE\u MIN\u FILTER，that.gl.NEAREST）；
that.gl.texParameteri（that.gl.TEXTURE\u 2D，that.gl.TEXTURE\u MAG\u FILTER，that.gl.NEAREST）；
//直接上传图片。
//this.gl.texImage2D（this.gl.TEXTURE_2D，0，this.gl.RGB，this.gl.RGB，this.gl.UNSIGNED_字节，img）；
//间接上传图片
var ctx=document.createElement（“canvas”）.getContext（“2d”）；
ctx.canvas.width=此.m_iImageWidth；
ctx.canvas.height=此.m_iImageHeight；
ctx.drawImage（本m_图像，0,0）；
var imageData=ctx.getImageData（0，0，this.m_iImageWidth，this.m_iImageHeight）；
var numPixels=此.m_iImageWidth*此.m_iImageHeight；
var像素=新的Uint8Array（numPixels*3）；
var-src=0；
var-dst=0；
对于（变量i=0；i

谢谢您的评论。但是，这不会改变画布显示区域吗？如果是的话，这是我想要避免的。还有，我不明白为什么要这么做。我获得的纹理渲染质量比我预期的纹理质量差得多。。。我明天回去工作的时候会做一个完整的测试。再次感谢@德里克您需要将画布分辨率与显示大小相匹配的货币。这并不意味着您需要更改显示区域，只需要更改画布的分辨率。如果您使用的是

gl.NEAREST

，您应该期望高质量的渲染

gl.LINEAR

如果图像与画布分辨率或Mip贴图不匹配，或使用纹理扩展\u MAX\u各向异性\u EXTHi，则会在一定程度上提高质量。谢谢您的回答！正如@Blindman67所说，我认为问题在于画布的宽度和高度。至于图像大小，我必须手动减小它以使其进入stackoverflow:-）并且对于图像上载，我不能使用它。此图像来自文件，但大多数情况下，图像不会来自bmp或png，而是来自相机。图片缓冲区通过一个WebSooCutsPosivices从一个定制的C++服务器传送到网站。你尝试切换到<代码>线性< /代码>过滤吗？