webgl中RenderTexture的抗锯齿的解决办法

      webgl1.0中仅对canvas的抗锯齿的功能,对framebuffer都没有,更不谈自己创建的RenderTexture了。好在webgl2.0中增加了renderbufferStorageMultisample这个函数让在自己的RenderTexture中实现抗锯齿有了可以实现的可能。

       大致思路,第一步:创建一个framebuffer和texture,调用framebufferTexture2D将二者绑定在一起。另创建一个framebuffer和renderbuffer,调用renderbufferStorageMultisample将二者绑定在一起,同时指定采样数,就是用来抗锯齿。代码如下:

创建RTT:

this._webGLTexture = this._gl.createTexture();

bindTexture(this._gl, this._webGLTexture);

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

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

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

gl.texImage2D(gl.TEXTURE_2D, 0, this._gl.RGBA8, width, height, 0, this._gl.RGBA, this._gl.UNSIGNED_BYTE, null);

var framebuffer = gl.createFramebuffer();

this._framebuffer = framebuffer;

this._gl.bindFramebuffer(t

你可能感兴趣的:(WebGL)