PDA

View Full Version : Rendering a textured rectangle diaganol artifact



ceptri
03-23-2012, 10:13 PM
I'm been writing a text library for webgl and I was noticing some strange artifacting along the diagonal of several of my letters. While trying to investigate this, I rendered out the entire texture containing my letter set (a 256x256 texture) and noticed that it too had an artifact along the diagonal. This of course matches the diagonal that separates the two triangles that compose my rectangle. My rectangle is being drawn by creating a buffer with four points and make a 0,1,2 index and a 0,2,3 index. When I was doing directX work I never noticed a diagonal artifact when rendering a textured rectangle, but I am in this case. Is there some texture sampling setting I need to do to eliminate this?

My fragment shader is dirt simple:


precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void)
{
gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}

Maybe texture sampler is set up wrong:

gl.uniform1i(manta.m_render.m_shaderMgr.m_hudTextu reShader.samplerUniform, 0);

Any info would be greatly appreciated, thanks

ceptri
03-24-2012, 02:43 PM
Just as one more data point I changed my text texture from:

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D);

to

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

And while that didn't completely fix it, it did seem to improve it substantially.