WebGL图像渲染质量差 [英] WebGL image rendering bad quality

问题描述

我在WebGL中进行图像渲染时遇到问题:我有一个画布，它具有一个可以容纳整个画布的四边形，以及一个应该映射到整个四边形上的纹理(我已经设置了正确的纹理坐标).

I have a problem with image rendering in WebGL: I have a canva, with a quad that takes the whole canvas, and a texture which is supposed to be mapped onto the whole quad (I have set the correct texture coordinates).

图像是包含RGB数据(按此顺序)的Uint8array，图像为1024 * 768像素.我有正确的缓冲区.这是图像的链接.

The image is a Uint8array containing RGB data (in this order) and the image is 1024*768 pixels. I have the correct buffer. Here is the link to the image.

问题如下:当渲染到WebGL中时，即使我的画布大小等于图像大小，我的图片也变得模糊不清.看到下面的结果:

The problem is the following: when rendered into WebGL, my picture becomes blurry and fuzzy, even if I have a canva that is the size of the image. See the result below:

现在输入代码:这是我用来创建纹理句柄的代码:

Now for the code: Here is the code I use to create the texture handle:

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

数据将按以下方式加载到纹理上:

The data is loaded onto the texture as follows:

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

最后，这是我使用的片段着色器:

And finally, here is the fragment shader I use:

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

我尝试了很多选项，从过滤到设置样式选项，将图像渲染为像素化，将图像转换为RGBA并为其提供RGBA值，结果始终是糟糕的纹理渲染.即使画布的大小与纹理的大小完全相同，WebGL似乎也无法正确插入数据.

I have tried a lot of options, from filtering to setting style option image-rendering pixelated, converting the image in RGBA and giving it RGBA values and the results is always the same crappy texture rendering. It looks like WebGL does not correctly interpolates the data even though the canvas is the exact same size as the texture.

有人提示吗?

谢谢.

推荐答案

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

Make sure that the canvas width and height match the pixel display size. The display size is set via the style width and height.

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

Resolution is the number of pixels in the image. Display size is the amount of space that it occupies on the page. The two should match for the best results.

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

如果显示尺寸大于分辨率，则会将画布拉长并引起模糊

The display size if larger than the resolution will stretch the canvas out and cause the bluring

这篇关于WebGL图像渲染质量差的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！