cocos2dx文献翻译.docx
- 文档编号:30320588
- 上传时间:2023-08-13
- 格式:DOCX
- 页数:9
- 大小:154.87KB
cocos2dx文献翻译.docx
《cocos2dx文献翻译.docx》由会员分享,可在线阅读,更多相关《cocos2dx文献翻译.docx(9页珍藏版)》请在冰豆网上搜索。
cocos2dx文献翻译
cocos2dx文献翻译
[Cocos3.8Tutorial]RenderTexture+Blur
Thistutorialwillhelpyoutounderstandhowyoucanuseshadersandrendertexturesincocos2d-x3.0andwillgiveyousomeinsightsintheunderlyingmath.InoneofmyprojectsIfacedanecessitytomakeablurredversionofsomebackgroundlandscape,whichcompositiondependsonthescreensize,thatiscloudsarestickedtothetopofthescreenandgroundisstickedtothebottom,soit'snotanoptiontojustputablurredimageintheresourcefolder.Thelandscapemustbecomposed,drawninaRenderTexture,thendrawnagainwithblurringshader,savedtodiskandusedinconsequentlaunches.Theimagecanbeprettybigandtheblurradiuscanbeprettybigaswell,soweneedsomethingfast.
Thistutorialcanbedividedintofollowingsteps:
1.Divingintomathandcalculatinggaussian
weights
Thenicefactisthatthatsumwillequaltosomethingnear1andtheprecisionwillgrowtogetherwithR.Theonlyproblemlefttosolveisthatwewantcoefficientstosumupexactlyto1,otherwisetheblurredimagewillhavesomeproblemswithopacity(totallyopaqueimageswillbecomealittlebittransparent).Thiscanbeguaranteedbycalculatingthecentralcoefficientas1-sumofalltheothers.
So,tothecodes.Theideaistopre-calculategaussiancoefficientsonstart,passthemtotheshaderanddonomathotherthanmultiplicationinside.
Besidesthestandardv_fragmentColorandv_texCoordwehavefouradditionalparameters:
1.pixelSize-inGLSLtherearenopixels,onlydecimals,forinstance0denotestheleftorthelowerborderofthetextureand1-therightortheupperborder.Thismeanswehavetoknowthedecimalsteptomaketothenextpixel.
2.radius-ourblurradius
3.weights-arrayofprecalculatedgaussianweights
4.direction-2dvectordenotinghorizontalorverticalblur
Theword"uniform"infrontofthesevaluesmeanthattheyarenotgoingtochangeduringtherun.Therestoftheshaderbodyisprettystraightforward:
takeapixel,accumulatesurroundingpixelswithsomecoefficientsandvoila.Ihadtohardcodemaximumarraysizetobe64asIfoundnowaytouseadynamicarrayasauniforminshader.
Everythingisprettymuchself-explanatoryhere.WecreateanewGLProgramusingthestandardvertexshaderandourblurshader,passadditionalparametersusingGLProgramStateclassandeverythingisreadytogo.OnemayencounteranotherwayofassigningtheshaderbodytoGLchar*variable,somethinglikethis:
IpreferusingString:
:
createWithContentsOfFilebecauseitfreesyoufromnecessitytowrite\n\attheendofeverylinewhichisquiteannoying.
Theonlythinglefttodoisactuallyblurringatexture.Ourstrategyherewillbeasfollows:
1.Createaspritefromthetexturepassedasaparameter
2.DrawittoaRenderTexturewithhorizontalblurshader
3.Createaspritefromresultingtexture
4.DrawthisspritetoaRendertexturewithverticalshader
5.Saveimagetofile
6.Waituntilsavingisdone,cleanupandnotifythecaller
Now,tothemainmethod.Weneedthefollowingthingstobepassedasarguments:
texturetoblur,blurradius,resultingpicturefilename,acallbacktoinvokewheneverythingisdoneandstepasanoptionalparameter,we'llgettoitinamatterofseconds.
HereIusedalambdavariable-oneofthecoolestfeaturesofC++11.RecitationofthestepX,stepYetc.meansthatwewantthesevariablestobecapturedbytheirvalue.Thatmeansthatwhenweusethesevariablesinlambda,weactuallyusetheirlocalcopies.Anotheroptionistocapturevariablesbereference,butinourcasethesevariableswillbedestroyedatthemomentwhenthecallbackwillbeexecuted,thuscausingundefinedbehavior.InCocos2d-xsourcesyoucanfind[&]or[=]designations.Theymean,correspondingly,thatallvariablesshouldbecapturedbyreferenceorbyvalue.SomeoftheC++safetystandardsrecommendtobeasexplicitaspossiblewhendeclaringlambdacapturingmethod,whichmaybedifferentforeveryvariable.
Finally,letsgetTextureBlurtowork!
Somesampledrawinginpaint,alittlebitofadditionalcodetoHelloWorldsce
neandherewego.That'showinitialpaysagelookslike:
Andhereisit'sblurredversion:
[Cocos3.8Tutorial]渲染纹理和虚化
这个教程将帮助你理解如何使用cocos2d-x3.0的着色器和渲染纹理并且给你一些关于数学基础的独特见解。
在我的其中一项项目中我需要制造一个根据屏幕大小关于背景和地形的模糊版本。
云层固定在屏幕上方,地面固定在底部,所以并不能简单的把一个模糊版本的图像放到资源Resource文件夹中。
如果你这么做的话地形图片肯定是静态的,要先经过渲染纹理处理后再进行模糊着色处理,并保存到硬盘上在一系列的应用中使用。
图像可能会非常大而且模糊范围也可能会非常大,所以我们需要一些能够运行更为快捷迅速的东西。
这篇教程能够分解为以下几个步骤:
1.深入数学研究之中并计算高斯权重。
2.创建模糊材质
3.渲染纹理并保存到文件夹中
4.在样本程序中使用纹理模糊
我们开始吧。
要模糊一个像素我们需要计算附近的像素的权重,权重总和为1。
另一个我们需要的属性是中心点权重必须比周边大。
为什么高斯函数经常被用来制作模糊效果?
因为他有三个非常好的特性。
1.它的整体为1
2.它的最大值在对称点上
3.他有着以下特性:
二维高斯方程能够拆开成两个一维函数的乘积。
这会给我们带来什么样的便利呢?
试想,如果我们直接计算出模糊像素的颜色及坐标(I,j)的方法,我们需要把(i-R,i+R)x(j-R,j+R)这个范围内的像素相加起来,R是模糊半径。
这将执行一个嵌套循环。
嵌套循环意味着他有着n*n的时间复杂度(译者注:
算法的时间复杂度,即该算法对n个数据进行处理所需要的时间是哪个数量级。
)而这并不是我们所想要加进着色器shader里的结果。
记住这个方程的高斯分布的第三个特性,我们能把嵌套循环分裂成两个相关的循环。
首先我们处理水平模糊,而后垂直模糊。
因此我们在这里就能获得n的时间复杂度。
这个方法的神奇之处在于简化后的结果与之前运行较慢的嵌套循环相比没有差别。
我们开始使用参数sigma=3和mu=0,以及范围从-1到1的x来计算高斯函数的积分。
得到结果0.9973,接近于1。
现在我们用一个常用的技术来计算数值积分:
我们要画出范围-1 好消息是和接近于1,精度也会随着R值增长。 唯一的问题是我们需要让和恰好为1的系数,不然模糊图像在透明度上会出些问题(完全不透明的物体会变得有那么一点透明)。 通过计算中央系数1减去其他所有的和来确保这个问题的解决。 所以,对于代码。 方法就是在开始的时候预先计算高斯系数,把他们的数值传到着色器shader上然后只需在里面做乘法即可。 此外,对于标准的v_fragmentColor,v_texCoordandCC_Texture0我们有四个额外的参数: 1.pixelSize–在OpenGL着色语言中并没有像素,只有十进制数,比如,0代表着材质边框的左边或右边1代表着右边框或上边框。 这意味着我们需要知道十进制数来制作接下来的像素点。 2.半径—我们的模糊范围。 3.权重—用于高斯预计算的权重数组。 4.Direction—用于指示水平和垂直模糊的2D矢量。 前面代码里的“uniform”意思是这些值在运行的过程中不会改变。 剩下的shader部分就比较直接了当了: 取得一个像素,用一些系数来积累附近的像素。 我不得不将数组最大尺寸硬编码成64因为我找不到将动态数组在shader中写成uniform类。 我更喜欢使用代码String: : createWithContentsOfFile因为它让你从每行结尾都要写\n的杯具中解脱了出来。 唯一剩下还没做的就是实质上去模糊一张材质。 下面就是我们的步骤: 1.从将其作为一个参数材质中创建一个精灵。 2.把它用水平模糊shader绘制到RenderTexture。 3.从得到的材质中创建一个精灵。 4.用垂直shader绘制这个精灵。 5.把图像保存到文件。 6.等至存储完毕,清理并通知caller. 在这里我用了一个lambda变量——C++11里最酷的一个特性。 记下stepX,stepY这些东西,这表示我们要这些变量通过他们的值被捕获。 这意味着我们以lambda变量使用他们时,我们实际上使用的是他们的本地文件的备份。 另一个方法是捕获那些相关的变量。 但在我们的这个例子中,在返回函数执行的时候这些变量就将会被全部消除。 因此导致错误: 未定义的行为。 在Cocos2d-x资源里你能找到[&]和[=]的文件构架。 他们相应的表示所有的变量都应通过他们的相关性和值以此被捕获。 一些C++的安全标准要求在声明lambda捕获方法时对语法尽可能的细致,这个标准对不同的变量可能你会有所不同。 最后,我们让TextureBlur开始工作。 样本图像已画出,还有一些在HelloScene里额外的代码。 这就是刚开始打开时的样子。 Andhereisit'sblurredversion:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- cocos2dx 文献 翻译
![提示](https://static.bdocx.com/images/bang_tan.gif)