cocos creator 的流光效果

cocos creator 版本 1.9.0
流光效果的代码是在网上找的,但是效果太差,我做了一些修改
这是目前的效果:
cocos creator 的流光效果_第1张图片

支持调整流光中心光亮 强度,支持流光 偏移颜色调整

下面贴出 修改后的源码

/*************************************************************
*  流光效果 shader挂件
*  -----------------------------------------------------------
*  author : saint       |  email : [email protected]
*
*  create : 2017/09/12
*  -----------------------------------------------------------
*  
*  CopyRight(C) 2017-   |  All Right Reserved 
**************************************************************/
let vert_file = require("./bright_vert.js");
let frag_file = require("./bright_frag.js");

cc.Class({
    extends : cc.Component,

    properties : {
        _time : 0.0,

    },

    onLoad : function(){

        this._time = 0;
        this._sin = 0;
        this._use();
    },

    _use : function(){
        this._program = new cc.GLProgram();
        // this._program.initWithVertexShaderByteArray( vert_file, frag_file);
        this._program.initWithString(vert_file, frag_file);
        // 添加程序属性至GLSL中
        this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_POSITION, cc.macro.VERTEX_ATTRIB_POSITION);
        this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_COLOR, cc.macro.VERTEX_ATTRIB_COLOR);
        this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_TEX_COORD, cc.macro.VERTEX_ATTRIB_TEX_COORDS);

        this._program.link();
        this._program.updateUniforms();
        this._program.use();
        this.updateGLParameters();

        // this._program.setUniformLocationWith1f(this._program.getUniformLocationForName("sys_time"),this._time);
        gl.uniform1f(this._program.getUniformLocationForName("sys_time"),this._time);
        this.setProgram(this.node._sgNode, this._program);
    },

    update : function( dt){

        this._time += 2*dt;
        if(this._program){
            this._program.use();
            this._sin = Math.sin(this._time) * 10;
            if(this._sin >= 9.9){
                this._sin = 0;
                this._time = 0;
            }        
            this._sin = Math.ceil(this._sin);
                //  this._program.setUniformLocationWith1f(this._program.getUniformLocationForName("sys_time"), this._sin);
            gl.uniform1f(this._program.getUniformLocationForName("sys_time"), this._sin);
        }
    },

    updateGLParameters : function(){
        this._time = Math.sin(Date.now());
    },

    setProgram : function(node, program){
        node.setShaderProgram(program);  

        var children = node.children;
        if (!children)
            return;
        for (var i = 0; i < children.length; i++)
        {
            this.setProgram(children[i], program);
        }
    },
});

setUniformLocationWith1f 已经不存在了,用gl.uniform1f 代替,还有最蛋疼的,这个函数只接受 整数,所以在 片段着色器代码里面对它进行了除法。

module.exports =
`
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
varying vec2 v_texCoord;
varying vec4 v_fragmentColor;
void main()
{
    gl_Position = CC_PMatrix * a_position;
    v_fragmentColor = a_color;
    v_texCoord = a_texCoord;
}
`
module.exports = 
`
#ifdef GL_ES
precision mediump float;
#endif
varying vec2 v_texCoord;
uniform float sys_time;
void main()
{
    vec4 src_color = texture2D(CC_Texture0, v_texCoord).rgba;

    float width = 0.25;       //流光的宽度范围 (调整该值改变流光的宽度)
    float start = sys_time/7.0;  //流光的起始x坐标
    float strength = 0.01;   //流光增亮强度   (调整该值改变流光的增亮强度)
    float offset = 0.2;      //偏移值         (调整该值改变流光的倾斜程度)
    //if( start <= v_texCoord.x && v_texCoord.x <= (start + width))
    if( v_texCoord.x < (start - offset * v_texCoord.y) &&  v_texCoord.x > (start - offset * v_texCoord.y - width))
    {
        float center_l = (start - offset * v_texCoord.y - width) - (start - offset * v_texCoord.y);
        center_l = abs(center_l);
        float l = abs((start - offset * v_texCoord.y) - center_l/2.0 - v_texCoord.x);
        float a = 5.0 * (center_l/2.0-l)/(center_l/2.0); // tony 流光中心强度(只有调整这个值才会生效,*前面的数值)
        float strength = 0.005 * a;
        if (strength < 0.00392) strength = 0.00392;
        vec3 improve = strength * vec3(255, 100, 100); //颜色
        //tony 保证不变黑
        if (improve.x < 1.0) improve.x = 1.0;
        if (improve.y < 1.0) improve.y = 1.0;
        if (improve.z < 1.0) improve.z = 1.0;
        vec3 result = improve * vec3( src_color.r, src_color.g, src_color.b);
        gl_FragColor = vec4(result, src_color.a);

    }else{
        gl_FragColor = src_color;
    }
}
`

使用直接在组件中绑定脚本就行了。

原帖链接:https://blog.csdn.net/ST_DarkMoon/article/details/77977867

感谢作者的无私奉献。

我也等着被别人感谢。

你可能感兴趣的:(creator,js)