国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

WebGL2系列之多采樣渲染緩沖對(duì)象

vpants / 708人閱讀

摘要:在很久很久以前,使用的時(shí)候,只能在默認(rèn)的繪制的緩沖區(qū)上面使用,而不能在幀緩沖區(qū)上面實(shí)現(xiàn),更加形象的說(shuō)就是不能用于離屏渲染。下面是該函數(shù)的簽名該函數(shù)的作用就是,把一個(gè)幀緩沖區(qū)上的指定區(qū)域像素轉(zhuǎn)移給另外一個(gè)幀緩沖區(qū)上的指定區(qū)域。

在很久很久以前,盤(pán)古開(kāi)辟了天地,他的頭頂著天,腳踩著地,最后他掛了。他的毛發(fā)變成了森林,他的血液變成了河流,他的肌肉變成了大地。。。。。。
卡!
哦,不對(duì),在很久很久以前,你屬于我,我擁有你。
你還有沒(méi)有程序員的自我修養(yǎng)啦。
不好意思,串戲了,下面進(jìn)入。。。主題
本文適合對(duì)webgl、計(jì)算機(jī)圖形學(xué)、前端可視化感興趣的讀者。

在很久很久以前,使用WebGL1的時(shí)候,只能在默認(rèn)的繪制的緩沖區(qū)上面使用MSAA,而不能在幀緩沖區(qū)上面實(shí)現(xiàn),更加形象的說(shuō)就是:MSAA不能用于離屏渲染。
如果需要在幀緩沖區(qū)(離屏渲染)上面實(shí)現(xiàn)去鋸齒效果,需要在貼圖內(nèi)容上使用自己實(shí)現(xiàn)的post -process的AA,比如:

FXAA: https://github.com/mattdesl/g...

SMAA http://threejs.org/examples/#...

而且在WebGL1中,不能通過(guò)上下文來(lái)改變MSAA的采樣數(shù)量,這對(duì)于WebGL1下的去鋸齒效果有很大影響。

多采樣渲染緩沖對(duì)象

在WebGL2中,有了一個(gè)新的特性,叫做Multisampled Renderbuffer,恩,中文呢就叫做: 多采樣渲染緩沖對(duì)象吧;通過(guò)多采樣渲染緩沖對(duì)象,可以在幀緩沖區(qū)的渲染緩沖對(duì)象上實(shí)現(xiàn)MSAA(multisampled antialiasing), 然后通過(guò)下面的流程實(shí)現(xiàn)最終實(shí)現(xiàn)渲染的去鋸齒:
?`
pre-z pass –> rendering pass to FBO –> postprocessing pass –> render to window

##renderbufferStorageMultisample
和多采樣渲染緩沖對(duì)象相關(guān)的一個(gè)重要的函數(shù)就是gl.renderbufferStorageMultisample,下面是函數(shù)的簽名:

gl.renderbufferStorageMultisample(target, samples, internalFormat, width, height);

該函數(shù)的第一個(gè)target是渲染緩沖對(duì)象的“目標(biāo)”,samples表示采樣數(shù),internalFormat表示數(shù)據(jù)格式,width、height表示渲染緩沖對(duì)象的寬高。

下面是使用該函數(shù)的簡(jiǎn)單代碼片段:

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 中創(chuàng)建幀緩沖區(qū)的代碼類(lèi)似,并沒(méi)有太大差別,不同的是如下一行:

gl.renderbufferStorageMultisample(gl.RENDERBUFFER, 4, gl.RGBA8, FRAMEBUFFER_SIZE.x, FRAMEBUFFER_SIZE.y);

通過(guò)gl.renderbufferStorageMultisample方法指定了渲染緩沖對(duì)象的多重采樣,采樣數(shù)是4。
#多采樣紋理附件
多采樣紋理附件又是什么東西呢,好吧,其實(shí)在WebGL2中,沒(méi)有這個(gè)多采樣紋理附件,在OPENGL才有,為什么提到這個(gè)多采樣紋理附件,大部分時(shí)間,我們的離屏渲染都需要渲染到一個(gè)紋理對(duì)象上面,才能進(jìn)一步使用。
在沒(méi)有多采樣紋理附件,只有多采樣渲染緩沖對(duì)象的情況下,要實(shí)現(xiàn)MSAA,只能渲染到渲染緩沖對(duì)象上,但是渲染緩沖對(duì)象的內(nèi)容不能直接傳遞給紋理對(duì)象。
那么應(yīng)該怎么做呢? 需要使用另外一個(gè)重要的函數(shù):
##gl.blitFramebuffer函數(shù)
通過(guò)gl.blitFramebuffer函數(shù),可以把多采樣渲染緩沖對(duì)象的內(nèi)容傳遞給紋理對(duì)象。下面是該函數(shù)的簽名:

gl.blitFramebuffer(srcX0, srcY0, srcX1, srcY1,

                    dstX0, dstY0, dstX1, dstY1,
                    mask, filter);
該函數(shù)的作用就是,把一個(gè)幀緩沖區(qū)(read framebuffer)上的指定區(qū)域像素轉(zhuǎn)移給另外一個(gè)幀緩沖區(qū)(draw framebuffer)上的指定區(qū)域。
其中參數(shù)srcX0, srcY0, srcX1, srcY1指定read framebuffer上的區(qū)域;
dstX0, dstY0, dstX1, dstY1 指定draw framebuffer上的區(qū)域; mask指定那個(gè)buffer的內(nèi)容會(huì)被copy,可選值:
* gl.COLOR_BUFFER_BIT
* gl.DEPTH_BUFFER_BIT
* gl.STENCIL_BUFFER_BIT
filter 表示當(dāng)兩個(gè)區(qū)域大小不同的時(shí)候,插值的方式,可以是以下值:
*  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.0, 0.0, 0.0, 1.0]);
gl.blitFramebuffer(

0, 0, FRAMEBUFFER_SIZE.x, FRAMEBUFFER_SIZE.y,
0, 0, FRAMEBUFFER_SIZE.x, FRAMEBUFFER_SIZE.y,
gl.COLOR_BUFFER_BIT, gl.NEAREST

);

代碼中,首先把場(chǎng)景渲染到renderableFramebuffer中,然后把renderableFramebuffer綁定到目標(biāo)gl.READ_FRAMEBUFFER,把colorFramebuffer綁定到目標(biāo)gl.DRAW_FRAMEBUFFER,之后清空DRAW_FRAMEBUFFER上面的顏色關(guān)聯(lián)對(duì)象,然后調(diào)用gl.blitFramebuffer方法把renderableFramebuffer的顏色關(guān)聯(lián)對(duì)象上的數(shù)據(jù)復(fù)制到colorFramebuffer的顏色管理對(duì)象,colorFramebuffer的顏色關(guān)聯(lián)對(duì)象是一個(gè)紋理對(duì)象,這樣就把數(shù)據(jù)從渲染緩沖對(duì)象復(fù)制到紋理對(duì)象上面了。

##READ_FRAMEBUFFER和DRAW_FRAMEBUFFER
在webgl1中,幀緩沖區(qū)的對(duì)象的目標(biāo)只能是gl.FRAMEBUFFER,而在WebGL2中,增加兩種目標(biāo):
* gl.READ_FRAMEBUFFER
* gl.DRAW_FRAMEBUFFER
以上兩種目標(biāo)分別表示FBO可以分別進(jìn)行讀操作和寫(xiě)操作;這在FBO復(fù)制到FBO的時(shí)候很有用,就像前文中所敘述的,可以把READ_FRAMEBUFFER上的數(shù)據(jù)復(fù)制到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

歡迎關(guān)注公眾號(hào)“ITman彪叔”。彪叔,擁有10多年開(kāi)發(fā)經(jīng)驗(yàn),現(xiàn)任公司系統(tǒng)架構(gòu)師、技術(shù)總監(jiān)、技術(shù)培訓(xùn)師、職業(yè)規(guī)劃師。熟悉Java、JavaScript、Python語(yǔ)言,熟悉數(shù)據(jù)庫(kù)。熟悉java、nodejs應(yīng)用系統(tǒng)架構(gòu),大數(shù)據(jù)高并發(fā)、高可用、分布式架構(gòu)。在計(jì)算機(jī)圖形學(xué)、WebGL、前端可視化方面有深入研究。對(duì)程序員思維能力訓(xùn)練和培訓(xùn)、程序員職業(yè)規(guī)劃有濃厚興趣。

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/105668.html

相關(guān)文章

  • WebGL2系列之實(shí)例數(shù)組(Instanced Arrays)

    摘要:實(shí)例化數(shù)組實(shí)例化是一種只調(diào)用一次渲染函數(shù)卻能繪制出很多物體的技術(shù),它節(jié)省渲染一個(gè)物體時(shí)從到的通信時(shí)間。實(shí)例化如果能夠講數(shù)據(jù)一次性發(fā)送給,然后告訴使用一個(gè)繪制函數(shù),繪制多個(gè)物體,就會(huì)更方便。因此可以看出減少了繪制的遍歷。 實(shí)例化數(shù)組 實(shí)例化是一種只調(diào)用一次渲染函數(shù)卻能繪制出很多物體的技術(shù),它節(jié)省渲染一個(gè)物體時(shí)從CPU到GPU的通信時(shí)間。實(shí)例數(shù)組是這樣的一個(gè)對(duì)象,使用它,可以把原來(lái)的的un...

    Tony 評(píng)論0 收藏0
  • 剖析虛幻渲染體系(12)- 移動(dòng)端專(zhuān)題Part 3(渲染優(yōu)化)

    摘要:管線優(yōu)化管線優(yōu)化曲面細(xì)分期間消除子像素。然而,高級(jí)別的曲面細(xì)分可以產(chǎn)生子像素三角形,這導(dǎo)致光柵化利用率降低。另外,如果合并或批處理之后的物體包圍盒過(guò)大,反而會(huì)造成性能下降,因?yàn)闊o(wú)法有效使用遮擋剔除等技術(shù)進(jìn)行剔除。? 目錄 12.6 移動(dòng)端渲染優(yōu)化 12.6.1 渲染管線優(yōu)化 12.6.1.1 使用新特性 12.6.1.2 管線優(yōu)化 ...

    defcon 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<