`
flyfox1982
  • 浏览: 81122 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

WebGL2系列之多采样渲染缓冲对象

阅读更多

在很久很久以前,盘古开辟了天地,他的头顶着天,脚踩着地,最后他挂了。他的毛发变成了森林,他的血液变成了河流,他的肌肉变成了大地。。。。。。
卡!
哦,不对,在很久很久以前,你属于我,我拥有你。
你还有没有程序员的自我修养啦。
不好意思,串戏了,下面进入。。。主题
本文适合对webgl、计算机图形学、前端可视化感兴趣的读者。

在很久很久以前,使用WebGL1的时候,只能在默认的绘制的缓冲区上面使用MSAA,而不能在帧缓冲区上面实现,更加形象的说就是:MSAA不能用于离屏渲染。
如果需要在帧缓冲区(离屏渲染)上面实现去锯齿效果,需要在贴图内容上使用自己实现的post -process的AA,比如:

  • FXAA: https://github.com/mattdesl/glsl-fxaa
  • SMAA http://threejs.org/examples/#webgl_postprocessing_smaa
    而且在WebGL1中,不能通过上下文来改变MSAA的采样数量,这对于WebGL1下的去锯齿效果有很大影响。

多采样渲染缓冲对象

在WebGL2中,有了一个新的特性,叫做Multisampled Renderbuffer,恩,中文呢就叫做: 多采样渲染缓冲对象吧;通过多采样渲染缓冲对象,可以在帧缓冲区的渲染缓冲对象上实现MSAA(multisampled antialiasing), 然后通过下面的流程实现最终实现渲染的去锯齿:

pre-z pass –> rendering pass to FBO –> postprocessing pass 
–> render to window

函数renderbufferStorageMultisample

和多采样渲染缓冲对象相关的一个重要的函数就是gl.renderbufferStorageMultisample,下面是函数的签名:

gl.renderbufferStorageMultisample(targetsamplesinternalFormatwidthheight);

该函数的第一个target是渲染缓冲对象的“目标”,samples表示采样数,internalFormat表示数据格式,width、height表示渲染缓冲对象的宽高。

下面是使用该函数的简单代码片段:

var frameBuffer = gl.createFrameBuffer();
var colorRenderbuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, colorRenderbuffer);
gl.renderbufferStorageMultisample(gl.RENDERBUFFER, 4, gl.RGBA8, FRAMEBUFFER_SIZE.x, FRAMEBUFFER_SIZE.y);

gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, colorRenderbuffer);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

这和webgl1 中创建帧缓冲区的代码类似,并没有太大差别,不同的是如下一行:

gl.renderbufferStorageMultisample(gl.RENDERBUFFER, 4, gl.RGBA8FRAMEBUFFER_SIZE.xFRAMEBUFFER_SIZE.y);

通过gl.renderbufferStorageMultisample方法指定了渲染缓冲对象的多重采样,采样数是4。

多采样纹理附件

多采样纹理附件又是什么东西呢,好吧,其实在WebGL2中,没有这个多采样纹理附件,在OPENGL才有,为什么提到这个多采样纹理附件,大部分时间,我们的离屏渲染都需要渲染到一个纹理对象上面,才能进一步使用。
在没有多采样纹理附件,只有多采样渲染缓冲对象的情况下,要实现MSAA,只能渲染到渲染缓冲对象上,但是渲染缓冲对象的内容不能直接传递给纹理对象。
那么应该怎么做呢? 需要使用另外一个重要的函数:

gl.blitFramebuffer函数

通过gl.blitFramebuffer函数,可以把多采样渲染缓冲对象的内容传递给纹理对象。下面是该函数的签名:

gl.blitFramebuffer(srcX0srcY0srcX1srcY1,
                        dstX0dstY0dstX1dstY1,
                        maskfilter);

该函数的作用就是,把一个帧缓冲区(read framebuffer)上的指定区域像素转移给另外一个帧缓冲区(draw framebuffer)上的指定区域。
其中参数srcX0, srcY0, srcX1, srcY1指定read framebuffer上的区域;
dstX0, dstY0, dstX1, dstY1 指定draw framebuffer上的区域; mask指定那个buffer的内容会被copy,可选值:

  • gl.COLOR_BUFFER_BIT
  • gl.DEPTH_BUFFER_BIT
  • gl.STENCIL_BUFFER_BIT
    filter 表示当两个区域大小不同的时候,插值的方式,可以是以下值:
  • gl.NEAREST
  • gl.LINEAR

下面是代码片段:

var renderableFramebuffer = gl.createFramebuffer();
......
var colorFramebuffer = gl.createFramebuffer();
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, FRAMEBUFFER_SIZE.x, FRAMEBUFFER_SIZE.y, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.bindTexture(gl.TEXTURE_2D, null);

gl.bindFramebuffer(gl.FRAMEBUFFER, colorFramebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

// ...

// After drawing to the multisampled renderbuffers
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, renderableFramebuffer);
gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, colorFramebuffer);
gl.clearBufferfv(gl.COLOR, 0, [0.00.00.01.0]);
gl.blitFramebuffer(
    00, FRAMEBUFFER_SIZE.x, FRAMEBUFFER_SIZE.y,
    00, FRAMEBUFFER_SIZE.x, FRAMEBUFFER_SIZE.y,
    gl.COLOR_BUFFER_BIT, gl.NEAREST
);

代码中,首先把场景渲染到renderableFramebuffer中,然后把renderableFramebuffer绑定到目标gl.READ_FRAMEBUFFER,把colorFramebuffer绑定到目标gl.DRAW_FRAMEBUFFER,之后清空DRAW_FRAMEBUFFER上面的颜色关联对象,然后调用gl.blitFramebuffer方法把renderableFramebuffer的颜色关联对象上的数据复制到colorFramebuffer的颜色管理对象,colorFramebuffer的颜色关联对象是一个纹理对象,这样就把数据从渲染缓冲对象复制到纹理对象上面了。

READ_FRAMEBUFFER和DRAW_FRAMEBUFFER

在webgl1中,帧缓冲区的对象的目标只能是gl.FRAMEBUFFER,而在WebGL2中,增加两种目标:

  • gl.READ_FRAMEBUFFER
  • gl.DRAW_FRAMEBUFFER
    以上两种目标分别表示FBO可以分别进行读操作和写操作;这在FBO复制到FBO的时候很有用,就像前文中所叙述的,可以把READ_FRAMEBUFFER上的数据复制到DRAW_FRAMEBUFFER上。

参考

https://github.com/mrdoob/three.js/pull/8120
https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/blitFramebuffer
https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/blitFramebuffer
http://www.realtimerendering.com/blog/webgl-2-new-features/
https://www.khronos.org/registry/webgl/specs/latest/2.0/#2.2

欢迎关注公众号“ITman彪叔”。彪叔,拥有10多年开发经验,现任公司系统架构师、技术总监、技术培训师、职业规划师。熟悉Java、JavaScript、Python语言,熟悉数据库。熟悉java、nodejs应用系统架构,大数据高并发、高可用、分布式架构。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。

ITman彪叔公众号ITman彪叔公众号

0
0
分享到:
评论

相关推荐

    在原始WebGL2中实现不同复杂度的渲染算法

    此外,WebGL2还支持帧缓冲对象(Framebuffer Objects)和多重渲染目标(MRT),这使得可以同时渲染到多个纹理,对于后期合成和复杂的图像处理算法非常有用。 更复杂的技术如着色器编程也至关重要。WebGL2支持GLSL...

    WebGL学习之路

    WebGL(Web Graphics Library)是一种JavaScript API,用于在任何兼容的Web浏览器中渲染交互式的2D和3D图形,无需插件。它基于OpenGL标准,是WebGL的主要灵感来源,但设计为完全与Web集成,使得开发人员可以利用...

    Webgl编程指南书上例子.zip

    8. **帧缓冲**:除了默认的帧缓冲,WebGL还支持自定义帧缓冲,这在实现复杂效果如后期处理或多重采样抗锯齿时非常有用。 9. **投影和视图矩阵**:在WebGL中,通过投影和视图矩阵可以将3D世界坐标转换为2D屏幕坐标,...

    mixmap交互式webgl地图注重直接访问渲染管道

    其背后的原理涉及WebGL的多个核心概念,如渲染管道、纹理管理、交互响应等,同时,Mixmap还通过各种优化策略确保了在不同环境下的高性能表现。对于JavaScript开发人员来说,理解和掌握Mixmap的工作机制,有助于创建...

    WebGL-Programming-Guide-master.zip

    1. **基本概念**:理解WebGL的基础,如渲染上下文、顶点、坐标系统、颜色、深度缓冲等。WebGL通过JavaScript调用,与HTML5 Canvas结合,实现2D和3D图形的绘制。 2. **着色语言GLSL**:GLSL(OpenGL Shading ...

    webgl2.0速查表

    以上仅是WebGL2.0 API的一部分,实际应用中还包括着色器(Shader)、纹理(Texture)、帧缓冲(Framebuffer)、渲染缓冲(Renderbuffer)等更多复杂的概念和功能。理解并熟练运用这些API,可以帮助开发者构建出高效...

    webgl-云彩效果

    WebGL是一种在网页浏览器中实现3D...综上所述,"webgl-云彩效果"项目涉及了WebGL的基础知识,包括图形渲染原理、着色器编程、纹理映射、光照处理、3D数学以及动画和交互设计等多个方面,是一个综合性的3D图形编程实践。

    《WebGL编程指南》自带光盘webgl-guide-code

    WebGL是一种基于OpenGL标准的JavaScript API,用于在任何兼容的Web浏览器中进行2D和3D图形渲染,无需插件。这个"WebGL编程指南"的光盘包含了丰富的代码示例,是学习WebGL的宝贵资源。让我们深入探讨WebGL的基础知识...

    WebGL滚动背景图片旋转动画特效

    接着,需要初始化WebGL上下文,这一步通常包括创建顶点缓冲区、颜色缓冲区以及设置着色器程序。着色器程序包含顶点着色器和片段着色器,它们决定了像素在屏幕上的最终颜色。 顶点着色器接收输入的顶点数据,进行...

    webgl-postprocess:WebGL的后处理效果实验

    2. 纹理采样:在后处理阶段,通常需要将先前渲染的图像作为纹理采样,这可以通过使用WebGL的`texImage2D`或`texSubImage2D`函数来实现。 3. 着色器语言(GLSL):GLSL是OpenGL Shading Language的缩写,用于编写...

    WebGL编程指南

    WebGL是一种基于OpenGL标准的JavaScript API,用于在任何兼容的Web浏览器中实现硬件加速的2D和3D图形渲染。这个“WebGL编程指南”很可能是一本深入介绍如何使用WebGL来创建交互式图形的资源,它可能包含了从基础知识...

    webgl:WebGL 实验

    WebGL是一种基于OpenGL标准的JavaScript API,用于在任何兼容的Web浏览器中实现硬件加速的2D和3D图形渲染。这个“webgl:WebGL 实验”项目显然旨在探索和学习WebGL技术,通过JavaScript来创建动态、交互式的网页图形...

    Beginning WebGL for HTML5 source code

    4. **缓冲区(Buffer)**:用于存储顶点信息、颜色、法线等数据,这些数据会被上传到GPU并用于渲染。 5. **纹理(Texture)**:WebGL支持纹理映射,可以将图像或者其他2D数据贴图到3D物体表面。 6. **状态管理(State ...

    glo-framebuffer:WebGL的帧缓冲区接口

    2. 配置附件:可以方便地设置颜色、深度和模板附件,包括纹理或渲染缓冲区。 3. 绑定和解绑:轻松切换当前活动的帧缓冲区,以便在帧缓冲区和屏幕之间切换渲染目标。 4. 扩展支持:可能包含对WebGL扩展的封装,如多重...

    WebGL-v2-

    3. **整数纹理和渲染缓冲**:除了浮点纹理,WebGL v2还支持整数纹理和整数渲染目标,这在处理像素数据或实现某些高级图像效果时非常有用。 4. **多采样抗锯齿(MSAA)**:WebGL v2增加了对多采样抗锯齿的支持,能更...

    pex-glu:pex库的WebGL相关代码

    5. **渲染和帧缓冲**:WebGL允许开发者使用多个帧缓冲进行复杂效果的渲染,如深度缓冲、多重采样抗锯齿等。Pex-glu可能提供了高级的渲染控制,使开发者能够更轻松地实现这些技术。 6. **数学和矩阵操作**:在3D图形...

    WebGL2_PlayGround

    7. **帧缓冲对象(framebuffer objects, FBOs)**:WebGL2扩展了FBO的功能,允许开发者创建多个离屏渲染目标,用于复杂的渲染技术,如多重采样抗锯齿(MSAA)、后期处理和屏幕空间环境光遮蔽(SSAO)。 8. **顶点...

    webgl-shader-jockey:webgl-visualizer 的小范围版本

    1. WebGL的基本概念和工作原理,如顶点缓冲对象(Vertex Buffer Objects)、帧缓冲对象(Frame Buffer Objects)等。 2. GLSL语言的语法,包括变量类型、运算符、控制流和纹理采样等。 3. 如何使用JavaScript与WebGL...

    用浏览器JS做路径跟踪渲染

    9. **实时更新**:利用WebGL的帧缓冲对象(Framebuffer)进行异步渲染,实时显示渲染进度。 **项目结构与文件** 在"PathTracingJS-master"压缩包中,可能包含以下文件和目录: 1. `index.html`:网页的入口,包含...

    webgl:与 WebGL 打交道

    WebGL是一种在网页上实现3D图形渲染的技术,它基于OpenGL标准,并且是JavaScript的一个扩展。WebGL使得浏览器可以直接在用户的设备上进行硬件加速的3D图形绘制,无需任何插件,大大增强了网页的交互性和视觉效果。在...

Global site tag (gtag.js) - Google Analytics