My Minecraft-like game uses a texture containing four block IDs in each pixel (RGBA). These IDs are used in the shader to determine what color each whole block should be.
I'm having an issue with anti-aliasing because WebGL is assuming that vertices are flat with the texture, which isn't the case. As you can see from this image, green pixels are visible on the edges (as the next pixel on the texture is green):
Here's my code:
gl.activeTexture(gl.TEXTURE1); var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.FLOAT, float32Array); gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.bindTexture(gl.TEXTURE_2D, texture); var z = gl.getUniformLocation(material.program, "uSampler"); gl.uniform1i(z, 1);
Does anyone know how I would solve this? From what I've read, is this something that overdrawing would fix? Thanks.