hanyeah

我们想在使用pixi的时候，使用自己写的shader。

之前尝试过两种方式实现。

自己实现了一个Renderer，然后使用自己实现的renderer进行render。

使用Mesh。

第一种方式，有些复杂，如果不是特别需要的话还是简单一点好。

第二种方式要自己处理顶点数据，索引数据等等。也比较麻烦。

我们想要使用PIXI.Sprite的功能，只是重写一下片段着色器。

最近发现BatchPluginFactory可以满足需求。

官网demo如下：

PixiJS API Documentation

const fragment = `
 varying vec2 vTextureCoord;
 varying vec4 vColor;
 varying float vTextureId;
 uniform sampler2D uSamplers[%count%];

 void main(void){
     vec4 color;
     %forloop%
     gl_FragColor = vColor * vec4(color.a - color.rgb, color.a);
 }
 `;
 const InvertBatchRenderer = PIXI.BatchPluginFactory.create({ fragment });
 PIXI.Renderer.registerPlugin('invert', InvertBatchRenderer);
 const sprite = new PIXI.Sprite();
 sprite.pluginName = 'invert';

%count%和%forloop%必须有，创建shader的时候会自动替换成官方指定的代码（有兴趣可以查看）。

PIXI默认是支持同时传入多个Texture的，本身是为了提高效率，但是我们可以利用它来做一些其它操作，这里先不展开。

这里有一个坑：使用PIXI.Renderer.registerPlugin注册插件必须在创建Application之前，否则无效，因为在获取webgl的上下文之后，contextChange的时候会创建Shader，如果是在创建Application之后，就需要手动去注册（创建实例，调用contextChange）了。