cocos2d-js Shader系列3:多重纹理 multiple textures multiple samplers

上一篇,我们学习了怎么便捷的控制sprite的颜色,而这个都是默认一个texture的,如果要实现类似mask的效果,或者更个性化的多纹理效果,怎么实现呢?

这就是这一节需要介绍的内容。

例如上图的效果,下方2个球是原图,而上方的图就是由2个球通过某个公式合成的效果了。这里重点不是怎么合成,而是怎么把多个纹理推送到fragment shader中。

相信大家都会想到,首先需要在fragment shader中添加多一个Sample2D:

uniform sampler2D CC_Texture0
uniform 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后)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

Java设计模式之简单工厂、工厂方法和抽象工厂

封装变化 多用组合,少用继承 针对接口/超类编程,不针对实现编程 松耦合 开闭原则 让我们从一个简单的类开始,看看如何将之改造成符合OO原则的类以及工厂模式在...

3097
来自专栏java技术学习之道

最通俗易懂的java注解讲解

1143
来自专栏JAVA后端开发

JAVA实现编写平台代码生成器

[项目中经常写CRUD,但实际这些工作,我觉得如果有一个完整的代码规范,完全可以自动生成,加快开发效率. 代码生成器技术原理不复杂,一般就是写好一个模板生成一...

1822
来自专栏Android原创

Android OpenGL ES滤镜开发设计

按照正常的Android OpenGL开发,一般只需引入两个“主角”:GLSurfaceView和Renderer。

1564
来自专栏GIS讲堂

用GeoTools实现shp+sld导出图片

633
来自专栏Android开发指南

用最简单的例子说明设计模式(二)之模版方法、策略模式、组合模式、观察者模式

4907
来自专栏菩提树下的杨过

spring mvc4的日期/数字格式化、枚举转换

日期、数字格式化显示,是web开发中的常见需求,spring mvc采用XXXFormatter来处理,先看一个最基本的单元测试:

623
来自专栏猿天地

Spring Cloud Gateway重试机制

重试,我相信大家并不陌生。在我们调用Http接口的时候,总会因为某种原因调用失败,这个时候我们可以通过重试的方式,来重新请求接口。

1553
来自专栏郭霖

Android图片加载框架最全解析(二),从源码的角度理解Glide的执行流程

在本系列的上一篇文章中,我们学习了Glide的基本用法,体验了这个图片加载框架的强大功能,以及它非常简便的API。还没有看过上一篇文章的朋友,建议先去阅读 An...

45210
来自专栏Linyb极客之路

Java高级特性——注解,这也许是最简单易懂的文章了

博主在初学注解的时候看到网上的介绍大部分都是直接介绍用法或者功能,没有实际的应用场景,篇幅又很长导致学习的时候难以理解其意图,而且学完就忘QAQ。本篇文章中我将...

592

扫码关注云+社区