cocos2d-js Shader系列3:多重纹理 multiple textures multiple samplers
来源:互联网 发布:照片故事软件 编辑:程序博客网 时间:2024/06/08 18:45
拂晓风起
专注前端技术cocos2d、js、flash、html5,联系:kenkofox@qq.com
cocos2d-js Shader系列3:多重纹理 multiple textures multiple samplers
上一篇,我们学习了怎么便捷的控制sprite的颜色,而这个都是默认一个texture的,如果要实现类似mask的效果,或者更个性化的多纹理效果,怎么实现呢?
这就是这一节需要介绍的内容。
例如上图的效果,下方2个球是原图,而上方的图就是由2个球通过某个公式合成的效果了。这里重点不是怎么合成,而是怎么把多个纹理推送到fragment shader中。
相信大家都会想到,首先需要在fragment shader中添加多一个Sample2D:
uniform sampler2D CC_Texture0uniform sampler2D CC_Texture1
但是通过简单的绑定纹理,只能绑定到第一个sampler上:
this.tex1 = cc.textureCache.addImage("res2/item_2.png");gl.bindTexture(gl.TEXTURE_2D, this.tex1)
那么关键点来了,我们需要利用gl的32个texture缓存。
this.tex1Location = gl.getUniformLocation(p, "CC_Texture0"); this.tex2Location = gl.getUniformLocation(p, "CC_Texture1");gl.activeTexture(gl.TEXTURE0); //webgl中一共32个,可以看cocos2d列的常量 gl.bindTexture(gl.TEXTURE_2D, this.tex1.getName()); gl.uniform1i(this.tex1Location, 0); //把CC_Texture0指向gl.TEXTURE0 gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, this.tex2.getName()); gl.uniform1i(this.tex1Location, 1);核心是先激活某个纹理缓存,然后绑定sampler2D到对应的位置。最后,我们需要记得在draw之后清空,否则会影响下一个Node的绘制。
gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, null); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, null); gl.bindBuffer(gl.ARRAY_BUFFER, null);
全部代码:
var MultiTexturesLayer = cc.Layer.extend({ ctor:function() { this._super(); if( 'opengl' in cc.sys.capabilities ) { var node1 = new cc.Sprite("res2/item_2.png"); var node2 = new cc.Sprite("res2/item_3.png"); this.addChild(node1); this.addChild(node2); node1.x = 500; node2.x = 200; node1.y = node2.y = 400; var glnode = new cc.Node(); this.addChild(glnode,10); this.glnode = glnode; var winSize = cc.director.getWinSize(); glnode.x = winSize.width/2; glnode.y = winSize.height/2; glnode.width = 128; glnode.height = 128; glnode.anchorX = 0.5; glnode.anchorY = 0.5; var MULTI_TEXTURES_FRAGMENT_SHADER = "precision lowp float; \n" + "varying vec2 v_texCoord; \n" + "uniform sampler2D CC_Texture0; \n" + "uniform sampler2D CC_Texture1; \n" + "void main() \n" + "{ \n" + " vec4 color1 = texture2D(CC_Texture0, v_texCoord); \n" + " vec4 color2 = texture2D(CC_Texture1, v_texCoord); \n" + " gl_FragColor = vec4(color1.r*color2.r, color1.g*color2.g, color1.b*color2.b, color1.a*color2.a); \n" + "}"; var DEFAULT_VERTEX_SHADER = "attribute vec4 a_position; \n" + "attribute vec2 a_texCoord; \n" + "varying mediump vec2 v_texCoord; \n" + "void main() \n" + "{ \n" + " gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position; \n" + " v_texCoord = a_texCoord; \n" + "}"; this.shader = new cc.GLProgram(); this.shader.initWithVertexShaderByteArray(DEFAULT_VERTEX_SHADER, MULTI_TEXTURES_FRAGMENT_SHADER); this.shader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION); this.shader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS); this.shader.link(); this.shader.updateUniforms(); //绑定位置,这个是cocos封装后必须做的事。详细可以看代码 this.initGL(); var p = this.shader.getProgram(); this.tex1Location = gl.getUniformLocation(p, "CC_Texture0"); //如果frag shader最终没有用某个uniform,该uniform会被优化删掉 this.tex2Location = gl.getUniformLocation(p, "CC_Texture1"); trace(this.tex1Location, this.tex2Location); glnode.draw = function() { this.shader.use(); //使用这个shader来绘制,封装了gl的use。跟指定glnode.shaderProgram类似 this.shader.setUniformsForBuiltins(); //设置坐标系变换 gl.activeTexture(gl.TEXTURE0); //webgl中一共32个,可以看cocos2d列的常量 gl.bindTexture(gl.TEXTURE_2D, this.tex1.getName()); gl.uniform1i(this.tex1Location, 0); //把CC_Texture0指向gl.TEXTURE0 gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, this.tex2.getName()); gl.uniform1i(this.tex2Location, 1); cc.glEnableVertexAttribs( cc.VERTEX_ATTRIB_FLAG_TEX_COORDS | cc.VERTEX_ATTRIB_FLAG_POSITION); //实际对gl的api做了封装,增加了这两个属性的位置映射。用于vertexAttribPointer // Draw fullscreen Square gl.bindBuffer(gl.ARRAY_BUFFER, this.squareVertexPositionBuffer); gl.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, this.squareVertexTextureBuffer); gl.vertexAttribPointer(cc.VERTEX_ATTRIB_TEX_COORDS, 2, gl.FLOAT, false, 0, 0); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, null); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, null); //使用完必须置为空,否则影响其他node gl.bindBuffer(gl.ARRAY_BUFFER, null); }.bind(this); } }, initGL:function() { var tex1 = cc.textureCache.addImage("res2/item_2.png"); var tex2 = cc.textureCache.addImage("res2/item_3.png"); this.tex1 = tex1; this.tex2 = tex2; // // Square // var squareVertexPositionBuffer = this.squareVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); var vertices = [ 128, 128, 0, 128, 128, 0, 0, 0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); var squareVertexTextureBuffer = this.squareVertexTextureBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexTextureBuffer); var texcoords = [ 0, 0, 1, 0, 0, 1, 1, 1 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texcoords), gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); } });
2014.11.07 补充:
由于3.1版本关于坐标系的计算发生了改变,上述例子不会正常显示。
需要扩展cc.Node为cc.GLNode。
cc.GLNode = cc.GLNode || cc.Node.extend({ ctor:function(){ this._super(); this.init(); }, _initRendererCmd:function(){ this._rendererCmd = new cc.CustomRenderCmdWebGL(this, function(){ cc.kmGLMatrixMode(cc.KM_GL_MODELVIEW); cc.kmGLPushMatrix(); cc.kmGLLoadMatrix(this._stackMatrix); this.draw(); cc.kmGLPopMatrix(); }); }});
另外,在new cc.GLProgram后retain一下就可以兼容jsb了(cocos2d-js 3.1后)
kenkofox@qq.com https://github.com/kenkozheng
0 0
- cocos2d-js Shader系列3:多重纹理 multiple textures multiple samplers
- Cocos2D中的纹理(textures)的解释
- Multiple
- Shader山下(二十一)多重变体(Multiple Variants)
- Shader Compilation for Multiple Platforms
- OpenGL ES Shader 多重纹理
- 纹理(Textures)
- 多重纪录集Multiple Recordset的应用
- C++ - 多重继承(multiple inheritance)歧义(ambiguous)
- unity 多重纹理 绘制 shader处理
- 【Modern OpenGL】纹理 Textures
- Creating Multiple APKs for Different GL Textures 创建多个APK给不同的GL结构
- 探cocos2dx纹理模块(textures),源码版本(2.2.3)
- C++ - 多重继承(multiple inheritance) 的 名称歧义(name ambiguity)
- scala类型系统:14) multiple bounds-多重界定
- vim-multiple-cursors:支持多重选取内容的 Vim 插件
- js 两个 multiple select 添加 删除 option
- JS Input File Multiple 文件格式限制
- ios8上的更新
- Java日期
- Ubuntu 12.04下安装MySQL图解
- 征服redis
- java.io
- cocos2d-js Shader系列3:多重纹理 multiple textures multiple samplers
- iOS8修改状态栏StatusBar字体颜色
- idTab直接跳转And隐藏(js)
- 大数据之道 HMM系列
- Hello Cassandra
- Android textview实现删除线
- fileno
- HTTP 状态码
- Win8 配置局域网可以访问IIS网站