cocos2d-js Shader系列2:在cc.Sprite上使用Shader(黑白、灰度、造旧效果)

在Sprite中使用Shader做特殊的颜色处理比较简单,只需要把Shader程序绑定到Sprite上即可:

sprite.shaderProgram = alphaTestShader;

Cocos2d内置了一些Shader,详细可以看代码:

其中,CCShaderCache缓存了一些Shader实例,而GLProgram则对gl的api做了简单的封装让接口更友好。

需要注意的是,使用GLProgram编译shader程序时,cocos2d会自动加入了一些参数。

    _compileShader: function (shader, type, source) { 
        if (!source || !shader) 
            return false; 
        //var preStr = (type == this._glContext.VERTEX_SHADER) ? "precision highp float;\n" : "precision mediump float;\n"; 
        source = "precision highp float;        \n" 
            + "uniform mat4 CC_PMatrix;         \n" 
            + "uniform mat4 CC_MVMatrix;        \n" 
            + "uniform mat4 CC_MVPMatrix;       \n" 
            + "uniform vec4 CC_Time;            \n" 
            + "uniform vec4 CC_SinTime;         \n" 
            + "uniform vec4 CC_CosTime;         \n" 
            + "uniform vec4 CC_Random01;        \n" 
            + "//CC INCLUDES END                \n" + source; 
        this._glContext.shaderSource(shader, source); 
        this._glContext.compileShader(shader); 
        var status = this._glContext.getShaderParameter(shader, this._glContext.COMPILE_STATUS); 
        if (!status) { 
            cc.log("cocos2d: ERROR: Failed to compile shader:\n" + this._glContext.getShaderSource(shader)); 
            if (type == this._glContext.VERTEX_SHADER) 
                cc.log("cocos2d: \n" + this.vertexShaderLog()); 
            else 
                cc.log("cocos2d: \n" + this.fragmentShaderLog()); 
        } 
        return ( status == 1 ); 
    }

另外,绑定到sprite之后,cocos2d会自动设置一些值,我们只需要事先做个绑定即可,而这个绑定操作,也是有友好封装的。具体可以顺藤摸瓜看代码。

                program.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION); 
                program.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR); 
                program.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS);

在sprite上做效果,无非就是一些颜色变换或者说是滤镜而已。由于cocos没有原生的滤镜,不像flash那么方便,那么我们就要自己动手丰衣足食了。

下边实现两个灰度和造旧sepia的效果,类似Flash的ShaderFilter一样。

(绿色球就是原图,上下2个小球分别用不同的sepia参数得到的造旧效果)

var sugar4 = Sugar.create(0,0,2); 
        sugar4.x = size.width/4; 
        sugar4.y = size.height/1.5; 
        this.addChild(sugar4); 
        sugar4.scale = 3; 
        var sugar = Sugar.create(0,0,2); 
        sugar.x = size.width/2; 
        sugar.y = size.height/2; 
        this.addChild(sugar); 
        sugar.scale = 3; 
        var sugar2 = Sugar.create(0,0,2); 
        sugar2.x = size.width/3; 
        sugar2.y = size.height/3; 
        this.addChild(sugar2); 
        sugar2.scale = 2; 
        var sugar3 = Sugar.create(0,0,2); 
        sugar3.x = size.width/3*2; 
        sugar3.y = size.height/3*2; 
        this.addChild(sugar3); 
        sugar3.scale = 2; 
        Filter.grayScale(sugar); 
        Filter.sepia(sugar2, 0.5); 
        Filter.sepia(sugar3, 0.9);

Filter类的代码:

/** 
* Created by kenkozheng on 2014/11/4. 
*/ 
/** 
* 只能用于控制Sprite的色调等,目标是实现类似Flash的内置基本滤镜 
* 静态类 
*/ 
var Filter = { 
    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" 
        + "}", 
    GRAY_SCALE_FRAGMENT_SHADER: 
        "varying vec2 v_texCoord;   \n" 
        + "uniform sampler2D CC_Texture0; \n" 
        + "void main() \n" 
        + "{  \n" 
        + "    vec4 texColor = texture2D(CC_Texture0, v_texCoord);  \n" 
        + "    float gray = texColor.r * 0.299 + texColor.g * 0.587 + texColor.b * 0.114; \n" 
        + "    gl_FragColor = vec4(gray, gray, gray, texColor.a);  \n" 
        + "}", 
    SEPIA_FRAGMENT_SHADER: 
        "varying vec2 v_texCoord;   \n" 
        + "uniform sampler2D CC_Texture0; \n" 
        + "uniform float u_degree; \n" 
        + "void main() \n" 
        + "{  \n" 
        + "    vec4 texColor = texture2D(CC_Texture0, v_texCoord);  \n" 
        + "    float r = texColor.r * 0.393 + texColor.g * 0.769 + texColor.b * 0.189; \n" 
        + "    float g = texColor.r * 0.349 + texColor.g * 0.686 + texColor.b * 0.168; \n" 
        + "    float b = texColor.r * 0.272 + texColor.g * 0.534 + texColor.b * 0.131; \n" 
        + "    gl_FragColor = mix(texColor, vec4(r, g, b, texColor.a), u_degree);  \n" 
        + "}", 
    programs:{}, 
    /** 
     * 灰度 
     * @param sprite 
     */ 
    grayScale: function (sprite) { 
        var program = Filter.programs["grayScale"]; 
        if(!program){ 
            program = new cc.GLProgram(); 
            program.initWithVertexShaderByteArray(Filter.DEFAULT_VERTEX_SHADER, Filter.GRAY_SCALE_FRAGMENT_SHADER); 
            program.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION);        //cocos会做初始化的工作 
            program.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS); 
            program.link(); 
            program.updateUniforms(); 
            Filter.programs["grayScale"] = program; 
        } 
        gl.useProgram(program.getProgram()); 
        sprite.shaderProgram = program; 
    }, 
    /** 
     * 造旧 
     * @param sprite 
     * @param degree 旧的程度 0~1 
     */ 
    sepia: function (sprite, degree) { 
        var program = Filter.programs["sepia"+degree]; 
        if(!program){ 
            program = new cc.GLProgram(); 
            program.initWithVertexShaderByteArray(Filter.DEFAULT_VERTEX_SHADER, Filter.SEPIA_FRAGMENT_SHADER); 
            program.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION);        //cocos会做初始化的工作 
            program.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS); 
            program.link(); 
            program.updateUniforms(); 
            var degreeLocation = program.getUniformLocationForName("u_degree"); 
            program.setUniformLocationF32(degreeLocation, degree); 
            Filter.programs["sepia"+degree] = program; 
        } 
        gl.useProgram(program.getProgram()); 
        sprite.shaderProgram = program; 
    } 
};

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hbbliyong

socket 通信 多线程调用窗体(委托)的几个知识点,记录在案,以备查阅

1.socket 通信传输汉字的方法:Encoding.GetEncoding("GB2312").GetString(Receivebyte) 发送接收都这样...

2687
来自专栏哈雷彗星撞地球

RunLoop总结:RunLoop的应用场景(四)App卡顿监测

今天要介绍的RunLoop使用场景很有意思,在做长期项目,需要跟踪解决用户问题非常有用。 使用RunLoop 监测主线程的卡顿,并将卡顿时的线程堆栈信息保存下...

692
来自专栏技术之路

wcf webHttpBinding Post 大数据量提交 ios c#客户端

一直在为安卓和苹果写服务,刚开始的时候全用的Get请求用url传所有的参数,由于url长度的限制大的数据量 无法传到服务器,提交图片什么的就更不用说了,后来用的...

19110
来自专栏向治洪

使用LRU算法缓存图片,android 3.0

在您的UI中显示单个图片是非常简单的,如果您需要一次显示很多图片就有点复杂了。在很多情况下 (例如使用 ListView, GridView 或者 View...

1778
来自专栏Golang语言社区

Golang:使用 httprouter 构建 API 服务器

我 10 个月前开始成为一名 Gopher,没有回头。像许多其他 gopher 一样,我很快发现简单的语言特性对于快速构建快速、可扩展的软件非常有用。当我刚开始...

57814
来自专栏DOTNET

asp.net web api 版本控制

版本控制 版本控制的方法有很多,这里提供一种将Odata与普通web api版本控制机制统一的方法,但也可以单独控制,整合控制与单独控制主要的不同是:整合控制通...

3936
来自专栏ascii0x03的安全笔记

PySide——Python图形化界面入门教程(三)

PySide——Python图形化界面入门教程(三)          ——使用内建新号和槽               ——Using Built-In S...

2948
来自专栏编程坑太多

springboot (六) 多数据源

1143
来自专栏草根专栏

从头编写 asp.net core 2.0 web api 基础框架 (5) EF CRUD

Github源码地址:https://github.com/solenovex/Building-asp.net-core-2-web-api-starter-...

3786
来自专栏进击的程序猿

doctrine缘来 之 造轮子

本系列是读php data persistence with doctrine2 orm的笔记,本文是第一篇:自己造轮子。

571

扫码关注云+社区