抛砖引玉 mv中使用shader

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

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

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

×

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

[pre lang="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;
      }
}
};
[/pre]

至于用法我随便找了个地方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);