WebGL中图片多级处理（FrameBuffer）

在webgl的使用过程中，我们通常会想对texture进行多级处理并对其贴在表面显示

如对较精准的边缘检测，要先后使用灰度shader、模糊shader、边缘shader来进行处理，而每次的处理对象则是上一次处理后的texture，这就要对处理后的结果进行覆盖保存。

在众多webgl库中，直接有选项rederToTarget来实现将shader处理后的texture渲染并覆盖原texture，其是怎么完成这个步骤的呢？

这就要引出本文的主角——FrameBuffer

FrameBuffer是什么


FBO(Frame Buffer Object)是被推荐用于将数据渲染到纹理对象的扩展。

FrameBuffer就像是一个webgl显示容器一样，平时我们使用gl.drawArrays或者gl.drawElements都是将对象绘制在了默认的窗口中，而当我们指定一个FrameBuffer为当前窗口时，则用这两个方法去绘制，则会将对象绘制于指定的FrameBuffer中。

FrameBuffer的使用


internalformat, int x, int y, sizei width,
sizei height, int border);
target: TEXTURE_2D, TEXTURE_

FBO的创建：

//创建一个Framebuffer
var fb = gl.createFramebuffer();
//将fb绑定为目前的窗口
gl.bindFramebuffer(gl.FRAMEBUFFER,fb);

这样，我们则创建了一个新的可以绘制的buffer了，且其并不会被显示出来

但是，这样就可以了吗？我们想到的是将经过shader渲染后的texture渲染出来并交给下一个shader，这时则引入方法framebufferTexture2D

Reference from《OpenGL ES Reference Pages about FramebufferTexture2D》:

To render directly into a texture image, a specified image from a texture object can be attached as one of the logical buffers of the currently bound framebuffer object by calling the command

为了直接渲染至纹理图片中，一个纹理对象中指定的图片可用下面的方法绑定在当前使用的FBO上一个逻辑缓存中

void FramebufferTexture2D( enum target, enum attachment, enum textarget, uint texture, int level );

 

target:

• FRAMEBUFFER

attachment:

• If attachment is COLOR_ATTACHMENT0, then image must have a colorrenderable internal format.（色彩）

• If attachment is DEPTH_ATTACHMENT, then image must have a depthrenderable internal format.（深度）

• If attachment is STENCIL_ATTACHMENT, then image must have a stencilrenderable internal format.（模板）

textarget:

• TEXTURE_2D    （two-dimensional texture）

• TEXTURE_CUBE_MAP_POSITIVE_X  （three-dimensional +x texture）

• TEXTURE_CUBE_MAP_POSITIVE_Y  （three-dimensional +y texture）

• TEXTURE_CUBE_MAP_POSITIVE_Z  （three-dimensional +z texture）

• TEXTURE_CUBE_MAP_NEGATIVE_X  （three-dimensional -x texture）

• TEXTURE_CUBE_MAP_NEGATIVE_Y  （three-dimensional -y texture）

• TEXTURE_CUBE_MAP_NEGATIVE_Z  （three-dimensional -z texture）

texture:

　　texture object

level:

　　specifies the mipmap level of the texture image to be attached to the framebuffer and must be 0.

我们使用这个方法来进行绑定（本文只介绍色彩的绑定，尝试和模板类似，但是有不同之处，不在此讨论）

//创建一个纹理对象
var texture = gl.createTexture();
//使用如下的设置来创建texture，这样对texture的设置可以使我们对任何尺寸的图片进行处理
gl.bindTexture(gl.TEXTURE_2D, texture);
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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

var fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER,fb);
//使用该方法将texture的颜色值与FBO进行绑定
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

绑定后，当我们执行gl.drawArrays或gl.drawElements方法时，则会将直接渲染至目前绑定的FBO上，而FBO又与texture的色彩进行了绑定，所以绘制时则也将色彩渲染至了texture中

这样，我们则可用两个FBO来进行队列加工：

OriginalImage --> texture1

texture1 --> gray --> texture2

texture2 --> blur --> texture1

texture1 --> edge --> texture2

下面是具体实现过程

var FBOs = [],
    textures = [];

for(var i = 0; i < 2; i++){
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

    var fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER,fb);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

    //store corresponding texture and fb
    textures.push(texture);
    FBOs.push(fb);
}

gl.bindTexture(gl.TEXTURE_2D, originalImageTexture);

for(var i = 0; i < 4; i++){
    switch(i){
        case 0:
            //set show shader to current shader program
            //handle arguments to vs shader and fs shader
            //draw original image into texture which was bound to a FBO
            break;
        case 1:
            //set gray shader to current shader program
            //handle arguments to vs shader and fs shader
            break;
        case 2:
            //set blur shader to current shader program
            //handle arguments to vs shader and fs shader
            break;
        case 3:
            //set edge shader to current shader program
            //handle arguments to vs shader and fs shader
            break;
    }

    gl.bindFramebuffer(gl.FRAMEBUFFER, FBOs[i%2]);
    //set the viewport fits the images size
    gl.viewport(0, 0, imgWidth, imgHeight);
    gl.drawArrays(....); //or gl.drawElements(....);

    //set the rendered texture to current texture for next frambuffer using
    gl.bindTexture(gl.TEXTURE_2D, texture[i%2]);
}

完整的过程为：

originalTexture --> show program --> set FBO1 --> draw --> FBO1 --> set texture1

texture1 --> gray program --> set FBO2 --> draw --> FBO2 --> set texture2

texture2 --> blur program --> set FBO1 --> draw --> FBO1 --> set texture1

texture1 --> edge program --> set FBO2 --> draw --> FBO2 --> set texture2

该过程中，FBO1与texture1是进行色彩渲染绑定的，所以set FBO1后进行渲染则会直接渲染至texture1

当我们完成了整个绘制的时候，要正常显示处理后的图片，则要从FBO中跳出来：

//set FBO to null to use default framebuffer
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

FrameBuffer的其它用处

gl.readPixels

从FrameBuffer中读取像素颜色数据

Reference from 《webgl_2.0_reference_card》/《OpenGL ES Reference Pages about readPixels》:

Pixels in the current framebuffercan be read back into an ArrayBufferView object.

void readPixels(int x, int y, long width, long height,enum format, enum type, Object pixels)

x,y

• Specify the window coordinates of the first pixel that is read from the frame buffer. This location is the lower left corner of a rectangular block of pixels.

width,height

• Specify the dimensions of the pixel rectangle. width and height of one correspond to a single pixel.

format

• Specifies the format of the pixel data. The following symbolic values are accepted  RGBA in WebGL

type

• Specifies the data type of the pixel data. Must be UNSIGNED_BYTEin WebGL

pixels

　　• Returns the pixel data.

在使用过程中，我们要先创建pixels对象来储存数据

//using ArrayBufferView to store pixels data only, Unit8Array is the best because each color data is a byte
var pixels = new Uint8Array(ImageWidth * ImageHeight * 4);

gl.readPixels(0, 0, ImageWidth, ImageHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

这样，我们则可以得到整个FBO中的色彩数据

gl.CopyTexImage2D

gl.CopyTexSubImage2D

这两个函数都是用来从FBO中将数据复制至当前绑定的texture中的

CopyTexImage2D方法：

Reference from 《OpenGL ES Reference Pages about CopyTexImage2D》:

 

copy pixels into a 2D texture image

void CopyTexImage2D(enum target, int level,enum internalformat, int x, int y, sizei width,sizei height, int border);

target:

• TEXTURE_2D

• TEXTURE_CUBE_MAP_POSITIVE_{X, Y, Z},

• TEXTURE_CUBE_MAP_NEGATIVE_{X, Y, Z}

internalformat:

• ALPHA

• LUMINANCE

• LUMINANCE_ALPHA

• RGB

• RGBA

x,y

Specify the window coordinates of the lower left corner of the rectangular region of pixels to be copied.

width

Specifies the width of the texture image. Must be 0 or 2 n + 2 ? border for some integer n.

height

Specifies the height of the texture image. Must be 0 or 2 m + 2 ? border for some integer m.

border

Specifies the width of the border. Must be either 0 or 1.

CopyTexSubImage2D方法：

Reference from 《OpenGL ES Reference Pages about CopyTexSubImage2D》:

 

copy a two-dimensional texture subimage

void CopyTexSubImage2D(enum target, int level, int xoffset,int yoffset, int x, int y, sizei width, sizei height);

 

target:

• TEXTURE_2D

• TEXTURE_CUBE_MAP_POSITIVE_{X, Y, Z},

• TEXTURE_CUBE_MAP_NEGATIVE_{X, Y, Z}

level:

Specifies the level-of-detail number. Level 0 is the base image level. Level n is the nth mipmap reduction image.

xoffset:

Specifies a texel offset in the x direction within the texture array.

yoffset:

Specifies a texel offset in the y direction within the texture array.

x,y:

Specify the window coordinates of the lower left corner of the rectangular region of pixels to be copied.

width:

Specifies the width of the texture subimage.

height:

Specifies the height of the texture subimage.

这两个方法的不同之处相信大家已经看得出来了

CopyTexSubImage2D相对CopyTexImage2D增加了offset来改变复制区域

其最终复制区域为：[x, xoffset + width - 1]与[y, yoffset + height -1]。

而CopyTexImage2D则是比CopyTexSubImage2D多了internelformat参数来控制对像素数据复制的种类。

结语：

有了对texture灵活的操作，则我们才能做出更有趣的东西出来，而framebuffer在里面也是相当重要的一个角色。

附：

WebGL-1.0参考卡片：http://files.cnblogs.com/files/zhiyishou/webgl-reference-card-1_0.pdf

OpenGL-ES-2.0参考卡片：http://files.cnblogs.com/files/zhiyishou/OpenGL-ES-2_0-Reference-card.pdf

OpenGL-ES-2.0参考手册：https://www.khronos.org/opengles/sdk/docs/man/

The end.

时间： 2024-11-03 20:58:28

WebGL中图片多级处理（FrameBuffer）的相关文章

C#中图片.BYTE[]和base64string的转换

在C#中 图片到byte[]再到base64string的转换: Bitmap bmp = new Bitmap(filepath); MemoryStream ms = new MemoryStream(); bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Gif); byte[] arr = new byte[ms.Length]; ms.Position = 0; ms.Read(arr, 0, (int)ms.Length); ms.Clo

Cocos2d-x优化中图片优化

在2D游戏中图片无疑是最为重要的资源文件,它会被加载到内存中转换为纹理,由GPU贴在精灵之上渲染出来.它能够优化的方面很多,包括:图片格式.拼图和纹理格式等,下面我们从这几个方面介绍一下图片和纹理的优化.1.选择图片格式要回答这个问题,我们需要先了解一下目前在移动平台所使用的图片文件格式,以及这些图片格式Cocos2d-x是否支持.图片格式有很多,但是在移动平台主要推荐使用的PNG,JPG也可以考虑,而其它的文件格式最好转化成为PNG格式.我们先了解一下它们的特点.1.PNG文件PNG文件格式设

微信端网页中图片的展示方式

一.微信端网页中图片的展示方式 微信端网页中图片有两种展示方式:平铺与图集.平铺的时候文档内的所有图片全部展开,点击图片则放大.图集的时候只展示一张图片,点击图片的时候以翻页的方式展示一组图片.实现原理对于如下一个图片标签,data-gid用于存放组标识,同一组的data-gid相同.data-index用于存放组中图片的展示顺序,不能相同.onclick中根据data-src处理图片展示.对于图集就只显示一张其他的img设置为隐藏,src与第一个图片一样,或者为空,这样可以减少网页的加载量,提

php获取网页中图片与DIV内容实例

分享下php获取网页中图片.DIV内容的简单方法,都是通过正则表达式实现的. 1.获取网页中所有的图片: <?php //取得指定位址的內容,并储存至 $text $text=file_get_contents('http://www.jbxue.com/'); //取得所有img标签,并储存至二维数组 $match 中 preg_match_all('/<img[^>]*>/i', $text, $match); //打印出match print_r($match); ?>

关于Android应用中图片占用内存浅谈

从事过移动端应用开发的童鞋应该都清楚,内存是非常宝贵的资源.如果能很好的利用有限的内存,对应用性能的提升会有很大的帮助.在实际应用开发中图片内存占整个应用非常大的比重,我们只有了解图片是如何加载到内存中,才能更好的优化图片所占的内存. 那么对于图片在Android应用中的使用进行探讨一下. 图片所占内存大小=内存中图片高 * 内存中图片宽 * 每个像素所占字节数   1,那么图片的物理高宽和加载到内存中的高宽是否是一样的呢? 在应用中关于图片的加载一般分为两种情况,其加载到内存中的大小也是不一样

PHP限制HTML内容中图片必须是本站的方法

本文实例讲述了PHP限制HTML内容中图片必须是本站的方法.分享给大家供大家参考.具体实现方法如下: 1. PHP代码如下: <?php $dom = new DOMDocument; $dom->loadHTML(file_get_contents('input.html')); $xpath = new DOMXpath($dom); $img = $xpath->query('//img'); foreach($img as $i) { $url = parse_url($i-&g

kindeditor文本编辑器删除文本中图片路径出错

string[] imgname; MODEL.Strategy modelMenu = bllMenu.GetModel(int.Parse(strId)); imgname = getPicUrl.getPicUrls(modelMenu.SContent).Split('|'); foreach (string c in imgname) { ImageHelper.DeleteImg(HttpContext.Current.Server.MapPath(c)); } kindeditor

WPF - 如何引用external dll中图片

前几天一直想引用别的DLL里面的一个图片.总是出现各种各样问题,一气之下将图片拷贝到当前Project中,运行良好.虽然知道引用图片,就1.2.列出来的2点就够了. 1. The Build Action should be Resource instead of Embedded Resource. 2. In the WPF application with the following XAML: <Image Source="/ClassLibraryName;Component/i

css如何实现未知宽高div中图片垂直水平居中效果

css如何实现未知宽高div中图片垂直水平居中效果:在有时候可能有这样的情况,那就是想让一个图片在div中实现垂直水平居中效果,但是有时候div的尺寸是位置的,下面通过代码实例介绍一下在这种情况下如何实现图片的垂直水平居中效果.代码如下:实例一: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&q