关于MV的BlendMode问题

trentswd

一直以来RM的BlendMode的数量都很少（正常，加法，减法）。这次MV实际上是CEF + WebGl，我想应该通用的BlendMode都能支持了吧？

翻翻帮助文档。有几个假惺惺的方法canUseDifferenceBlend 、canUseSaturationBlend 。但是并没有用，默认提供的BlendMode只有四种：BLEND_ADD BLEND_MULTIPLY  BLEND_NORMAL BLEND_SCREEN
整整增加了一种！真是感天动地！感谢娇喘！感谢Chunsoft！

我趴在地上冷静了一下，考虑到MV操作WebGl实际上是通过pixi库，这些枚举也是pixi库的alias，是不是查找一下pixi库里面的blendMode的枚举会有更多呢？
搜了一下，高兴地跳起来

1.   BLEND_MODES: {
   
2.         NORMAL:         0,
   
3.         ADD:            1,
   
4.         MULTIPLY:       2,
   
5.         SCREEN:         3,
   
6.         OVERLAY:        4,
   
7.         DARKEN:         5,
   
8.         LIGHTEN:        6,
   
9.         COLOR_DODGE:    7,
   
10.         COLOR_BURN:     8,
    
11.         HARD_LIGHT:     9,
    
12.         SOFT_LIGHT:     10,
    
13.         DIFFERENCE:     11,
    
14.         EXCLUSION:      12,
    
15.         HUE:            13,
    
16.         SATURATION:     14,
    
17.         COLOR:          15,
    
18.         LUMINOSITY:     16
    
19.     },

复制代码

真的常见的都有了。
赶紧写段代码测试一下：

1. bit2 = new Bitmap(640,480);
   
2. bit2.fillAll("#FFFFFF");
   
3. sp2 = new Sprite(bit2);
   
4. sp2.blendMode = 11;//11是差值模式
   
5. SceneManager._scene.addChild(sp2);
   
6. 
   

复制代码

测试结果是： 0 1 2 3都有效果  后面的都和0一样，什么鬼。
继续找代码，发现了pixi坑爹的地方：

1.         PIXI.blendModesWebGL[PIXI.blendModes.NORMAL]        = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
   
2.         PIXI.blendModesWebGL[PIXI.blendModes.ADD]           = [gl.SRC_ALPHA, gl.DST_ALPHA];
   
3.         PIXI.blendModesWebGL[PIXI.blendModes.MULTIPLY]      = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA];
   
4.         PIXI.blendModesWebGL[PIXI.blendModes.SCREEN]        = [gl.SRC_ALPHA, gl.ONE];
   
5.         PIXI.blendModesWebGL[PIXI.blendModes.OVERLAY]       = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
   
6.         PIXI.blendModesWebGL[PIXI.blendModes.DARKEN]        = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
   
7.         PIXI.blendModesWebGL[PIXI.blendModes.LIGHTEN]       = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
   
8.         PIXI.blendModesWebGL[PIXI.blendModes.COLOR_DODGE]   = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
   
9.         PIXI.blendModesWebGL[PIXI.blendModes.COLOR_BURN]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
   
10.         PIXI.blendModesWebGL[PIXI.blendModes.HARD_LIGHT]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
    
11.         PIXI.blendModesWebGL[PIXI.blendModes.SOFT_LIGHT]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
    
12.         PIXI.blendModesWebGL[PIXI.blendModes.DIFFERENCE]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
    
13.         PIXI.blendModesWebGL[PIXI.blendModes.EXCLUSION]     = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
    
14.         PIXI.blendModesWebGL[PIXI.blendModes.HUE]           = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
    
15.         PIXI.blendModesWebGL[PIXI.blendModes.SATURATION]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
    
16.         PIXI.blendModesWebGL[PIXI.blendModes.COLOR]         = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
    
17.         PIXI.blendModesWebGL[PIXI.blendModes.LUMINOSITY]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];

复制代码

可以看出后面的数组是WebGL的blendFunc的参数。这3后面的都和第一个一样，pixi挖了坑居然不填！
于是我打算自己改一改。就拿11,Difference来说。通过http://www.andersriggelsen.dk/glblendfunc.php这个页面可以测试blendFunc参数的效果。按照测试差值模式应该是

1. PIXI.blendModesWebGL[PIXI.blendModes.DIFFERENCE] = [gl.ONE_MINUS_DEST_COLOR, gl.ONE_MINUS_SRC_COLOR];

复制代码

我以为就万事大吉了，没想到，pixi的挖坑不填是有原因的。
这么改了之后确实是有效果，然而结果并不是和背景合成，而是和一个白色画布进行合成直接叠加在背景上
举个例子：
和背景合成应该是这样：

和白色画布合成就会变成这样：

查了一下资料，blend的时候是新图和buffer进行计算，可能是渲染合成的时候没有保留之前渲染的背景，直接用默认底色进行的合成。但是pixi的渲染代码实在是看不懂，也不知道怎么改比较好。
希望比较熟悉js和pixi以及webgl的各位大大指点一下

ps 这次好像没有截图的方法了，大大的差评

trentswd

踢一脚，希望有办法

另外现在虽然有官方插件可是还是荒芜的厉害，好用的对话脚本都没有

taroxd

截图？Bitmap.snap 不是吗？