抛砖引玉 mv中使用shader

yagami · 发表于 2017-10-4 11:54:00

加入我们，或者，欢迎回来。

您需要登录才可以下载或查看，没有帐号？注册会员

x

虽然我已经不用rm了为了庆祝论坛复活国庆期间看了下mv 于是就有了这东西

JAVASCRIPT 代码复制

function Sprite_Shader() {
    this.initialize.apply(this, arguments);
}
Sprite_Shader.defultfrag = " \
    varying vec2 vTextureCoord; \
    uniform sampler2D uSampler; \
    void main(void) \
    { \
        gl_FragColor = texture2D(uSampler, vTextureCoord); \
    } \
";
 
 
Sprite_Shader.defultvert= " \
    attribute vec2 aVertexPosition; \
    attribute vec2 aTextureCoord; \
    uniform mat3 projectionMatrix; \
    varying vec2 vTextureCoord; \
    void main(void) \
    { \
        gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); \
        vTextureCoord = aTextureCoord; \
    } \
    ";
 
Sprite_Shader.prototype = Object.create(Sprite.prototype);
Sprite_Shader.prototype.constructor = Sprite_Shader;
 
Sprite_Shader.prototype.initialize = function(bitmap) {
    Sprite.prototype.initialize.call(this);
    this.bitmap = bitmap; 
    this.mode = -1;   
};
 
 
Sprite_Shader.prototype.gray = function() {
    this.mode= 1;
    var frag = " \
        varying vec2 vTextureCoord; \
        uniform sampler2D uSampler; \
        void main(void) \
        { \
            gl_FragColor = texture2D(uSampler, vTextureCoord); \
            float  gray = (gl_FragColor.r + gl_FragColor.g + gl_FragColor.b)/3.0; \
            gl_FragColor.r = gray; \
            gl_FragColor.g = gray; \
            gl_FragColor.b = gray; \
        } \
    ";
    var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag);
    this._filters = [simpleShader];
};
 
 
 
Sprite_Shader.prototype.shadow = function() {
    this.mode= 2;
    var uniform = {};
 
    var frag = " \
        varying vec2 vTextureCoord; \
        uniform sampler2D uSampler; \
        const vec2 step = vec2(0.015, 0.002); \
        void main(void) \
        { \
            vec3 color = texture2D(uSampler, vTextureCoord).rgb; \
            float olda =  texture2D(uSampler, vTextureCoord).a; \
            float weight = 10.0; \
            float assess = texture2D(uSampler, vTextureCoord).a * weight; \
            float alpha = assess; \
            alpha += texture2D( uSampler, vTextureCoord.xy + vec2( -3.0*step.x, -3.0*step.y ) ).a; \
            alpha /= (2.0+assess);  \
            gl_FragColor = vec4(color, alpha); \
        } \
    ";
    var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag,uniform);
    this._filters = [simpleShader];
};
 
 
 
Sprite_Shader.prototype.twist = function() {
    this.mode= 3;
    this.uniform = {};
    this.uniform.iGlobalTime = {
        type:"f",
        value:0
    }
 
    frag = " \
        varying vec2 vTextureCoord; \
        uniform sampler2D uSampler; \
        uniform float iGlobalTime; \
        void main(void) \
        { \
            vec2 uv = vTextureCoord.xy; \
            float w = (0.5 - (uv.x)); \
            float h = 0.5 - uv.y; \
            float distanceFromCenter = sqrt(w * w + h * h); \
            float sinArg = distanceFromCenter * 10.0 - iGlobalTime * 10.0; \
            float slope = cos(sinArg) ; \
            vec4 color = texture2D(uSampler, uv + normalize(vec2(w, h)) * slope * 0.05); \
            gl_FragColor = color; \
        } \
    ";
    var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag,this.uniform);
    this._filters = [simpleShader];
};
 
Sprite_Shader.prototype.magic = function(mode) {
    this.mode= 4;
    this.uniform = {};
    this.uniform._Angle = {
        type:"f",
        value:0
    };
      this.uniform._Radius = {
        type:"f",
        value:0
    };
      this.uniform._mode = {
        type:"f",
        value:mode
    };
 
    frag = " \
        varying vec2 vTextureCoord; \
        uniform sampler2D uSampler; \
        uniform float _Angle;  \
        uniform float _Radius;  \
        uniform float _mode;  \
        void main(void) \
        { \
            vec2 uv = vTextureCoord; \
            uv -= vec2(0.25, 0.5); \
            float dist = length(uv); \
            float percent = (_Radius - dist) / _Radius; \
            if (percent < 1.0 && percent >= 0.0) \
            {  \
                float theta = percent * percent * _Angle * 3.0; \
                float s = sin(theta); \
                float c = cos(theta); \
                uv = vec2(uv.x*c - uv.y*s*_mode , uv.x*s + uv.y*c); \
            } \
            uv += vec2(0.25, 0.5); \
            gl_FragColor = texture2D(uSampler, uv); \
        } \
    ";
    var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag,this.uniform);
    this._filters = [simpleShader];
};
 
 
Sprite_Shader.prototype.update = function() {
    Sprite.prototype.update.call(this);
    if(this.mode == 3){
        this._filters[0].uniforms.iGlobalTime += 0.01;
    }
    else if(this.mode == 4){
        this._filters[0].uniforms._Angle += 0.01;
        this._filters[0].uniforms._Radius += 0.001;
        if (this._filters[0].uniforms._Radius >= 0.6)
        {
            this._filters[0].uniforms._Angle = 0;
            this._filters[0].uniforms._Radius = 0.1;
        }
    }
};

function Sprite_Shader() {


    this.initialize.apply(this, arguments);


}


Sprite_Shader.defultfrag = " \


    varying vec2 vTextureCoord; \


    uniform sampler2D uSampler; \


    void main(void) \


    { \


        gl_FragColor = texture2D(uSampler, vTextureCoord); \


    } \


";


 


 


Sprite_Shader.defultvert= " \


    attribute vec2 aVertexPosition; \


    attribute vec2 aTextureCoord; \


    uniform mat3 projectionMatrix; \


    varying vec2 vTextureCoord; \


    void main(void) \


    { \


        gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); \


        vTextureCoord = aTextureCoord; \


    } \


    ";


 


Sprite_Shader.prototype = Object.create(Sprite.prototype);


Sprite_Shader.prototype.constructor = Sprite_Shader;


 


Sprite_Shader.prototype.initialize = function(bitmap) {


    Sprite.prototype.initialize.call(this);


    this.bitmap = bitmap; 


    this.mode = -1;   


};


 


 


Sprite_Shader.prototype.gray = function() {


    this.mode= 1;


    var frag = " \


        varying vec2 vTextureCoord; \


        uniform sampler2D uSampler; \


        void main(void) \


        { \


            gl_FragColor = texture2D(uSampler, vTextureCoord); \


            float  gray = (gl_FragColor.r + gl_FragColor.g + gl_FragColor.b)/3.0; \


            gl_FragColor.r = gray; \


            gl_FragColor.g = gray; \


            gl_FragColor.b = gray; \


        } \


    ";


    var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag);


    this._filters = [simpleShader];


};


 


 


 


Sprite_Shader.prototype.shadow = function() {


    this.mode= 2;


    var uniform = {};


 


    var frag = " \


        varying vec2 vTextureCoord; \


        uniform sampler2D uSampler; \


        const vec2 step = vec2(0.015, 0.002); \


        void main(void) \


        { \


            vec3 color = texture2D(uSampler, vTextureCoord).rgb; \


            float olda =  texture2D(uSampler, vTextureCoord).a; \


            float weight = 10.0; \


            float assess = texture2D(uSampler, vTextureCoord).a * weight; \


            float alpha = assess; \


            alpha += texture2D( uSampler, vTextureCoord.xy + vec2( -3.0*step.x, -3.0*step.y ) ).a; \


            alpha /= (2.0+assess);  \


            gl_FragColor = vec4(color, alpha); \


        } \


    ";


    var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag,uniform);


    this._filters = [simpleShader];


};


 


 


 


Sprite_Shader.prototype.twist = function() {


    this.mode= 3;


    this.uniform = {};


    this.uniform.iGlobalTime = {


        type:"f",


        value:0


    }


 


    frag = " \


        varying vec2 vTextureCoord; \


        uniform sampler2D uSampler; \


        uniform float iGlobalTime; \


        void main(void) \


        { \


            vec2 uv = vTextureCoord.xy; \


            float w = (0.5 - (uv.x)); \


            float h = 0.5 - uv.y; \


            float distanceFromCenter = sqrt(w * w + h * h); \


            float sinArg = distanceFromCenter * 10.0 - iGlobalTime * 10.0; \


            float slope = cos(sinArg) ; \


            vec4 color = texture2D(uSampler, uv + normalize(vec2(w, h)) * slope * 0.05); \


            gl_FragColor = color; \


        } \


    ";


    var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag,this.uniform);


    this._filters = [simpleShader];


};


 


Sprite_Shader.prototype.magic = function(mode) {


    this.mode= 4;


    this.uniform = {};


    this.uniform._Angle = {


        type:"f",


        value:0


    };


      this.uniform._Radius = {


        type:"f",


        value:0


    };


      this.uniform._mode = {


        type:"f",


        value:mode


    };


 


    frag = " \


        varying vec2 vTextureCoord; \


        uniform sampler2D uSampler; \


        uniform float _Angle;  \


        uniform float _Radius;  \


        uniform float _mode;  \


        void main(void) \


        { \


            vec2 uv = vTextureCoord; \


            uv -= vec2(0.25, 0.5); \


            float dist = length(uv); \


            float percent = (_Radius - dist) / _Radius; \


            if (percent < 1.0 && percent >= 0.0) \


            {  \


                float theta = percent * percent * _Angle * 3.0; \


                float s = sin(theta); \


                float c = cos(theta); \


                uv = vec2(uv.x*c - uv.y*s*_mode , uv.x*s + uv.y*c); \


            } \


            uv += vec2(0.25, 0.5); \


            gl_FragColor = texture2D(uSampler, uv); \


        } \


    ";


    var simpleShader = new PIXI.AbstractFilter(Sprite_Shader.defultvert,frag,this.uniform);


    this._filters = [simpleShader];


};


 


 


Sprite_Shader.prototype.update = function() {


    Sprite.prototype.update.call(this);


    if(this.mode == 3){


        this._filters[0].uniforms.iGlobalTime += 0.01;


    }


    else if(this.mode == 4){


        this._filters[0].uniforms._Angle += 0.01;


        this._filters[0].uniforms._Radius += 0.001;


        if (this._filters[0].uniforms._Radius >= 0.6)


        {


            this._filters[0].uniforms._Angle = 0;


            this._filters[0].uniforms._Radius = 0.1;


        }


    }


};

至于用法我随便找了个地方addchild
var test1 = new Sprite_Shader(ImageManager.loadPicture("Actor1_3"));
test1.magic(-1);
this.addChild(test1);

var test2 = new Sprite_Shader(ImageManager.loadPicture("Actor1_3"));
test2.magic(1);
test2.x = 280;
test2.y = 0;
this.addChild(test2);

var test3 = new Sprite_Shader(ImageManager.loadPicture("Actor1_3"));
test3.twist();
test3.x = 560;
test3.y = 0;
this.addChild(test3);

var test4 = new Sprite_Shader(ImageManager.loadPicture("Actor1_3"));
test4.shadow();
test4.x = 0;
test4.y = 300;
this.addChild(test4);

var test5 = new Sprite_Shader(ImageManager.loadPicture("Actor1_3"));
test5.gray();
test5.x = 560;
test5.y = 300;
this.addChild(test5);

fux2 · 发表于 2017-10-4 17:56:06

果然有人把pixi里的这玩意拿出来玩

越前リョーマ · 发表于 2017-10-4 21:33:54

变化范围不能超过原图尺寸是不是有点遗憾了

walf_man · 发表于 2017-10-6 19:35:22

强，只能膜拜，已经挖不动了

hiten227 · 发表于 2018-11-30 05:08:20

感谢楼主分享

帐号		自动登录	找回密码
密码			注册会员

[原创发布] 抛砖引玉 mv中使用shader

加入我们，或者，欢迎回来。

评分

点评

点评

点评

开拓者

贵宾

第3届短篇游戏大赛主流游戏组亚军

第5届短篇游戏比赛亚军