关于MV的BlendMode问题

じ☆ve冰风

一直以来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: {        NORMAL:         0,        ADD:            1,        MULTIPLY:       2,        SCREEN:         3,        OVERLAY:        4,        DARKEN:         5,        LIGHTEN:        6,        COLOR_DODGE:    7,        COLOR_BURN:     8,        HARD_LIGHT:     9,        SOFT_LIGHT:     10,        DIFFERENCE:     11,        EXCLUSION:      12,        HUE:            13,        SATURATION:     14,        COLOR:          15,        LUMINOSITY:     16    },复制代码

复制代码

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

1. bit2 = new Bitmap(640,480);bit2.fillAll("#FFFFFF");sp2 = new Sprite(bit2);sp2.blendMode = 11;//11是差值模式SceneManager._scene.addChild(sp2);复制代码

复制代码

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

1.         PIXI.blendModesWebGL[PIXI.blendModes.NORMAL]        = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];        PIXI.blendModesWebGL[PIXI.blendModes.ADD]           = [gl.SRC_ALPHA, gl.DST_ALPHA];        PIXI.blendModesWebGL[PIXI.blendModes.MULTIPLY]      = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA];        PIXI.blendModesWebGL[PIXI.blendModes.SCREEN]        = [gl.SRC_ALPHA, gl.ONE];        PIXI.blendModesWebGL[PIXI.blendModes.OVERLAY]       = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];        PIXI.blendModesWebGL[PIXI.blendModes.DARKEN]        = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];        PIXI.blendModesWebGL[PIXI.blendModes.LIGHTEN]       = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];        PIXI.blendModesWebGL[PIXI.blendModes.COLOR_DODGE]   = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];        PIXI.blendModesWebGL[PIXI.blendModes.COLOR_BURN]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];        PIXI.blendModesWebGL[PIXI.blendModes.HARD_LIGHT]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];        PIXI.blendModesWebGL[PIXI.blendModes.SOFT_LIGHT]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];        PIXI.blendModesWebGL[PIXI.blendModes.DIFFERENCE]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];        PIXI.blendModesWebGL[PIXI.blendModes.EXCLUSION]     = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];        PIXI.blendModesWebGL[PIXI.blendModes.HUE]           = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];        PIXI.blendModesWebGL[PIXI.blendModes.SATURATION]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];        PIXI.blendModesWebGL[PIXI.blendModes.COLOR]         = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];        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 这次好像没有截图的方法了，大大的差评
             本帖来自P1论坛作者trentswd，因Project1站服务器在国外有时候访问缓慢不方便作者交流学习，经联系P1站长fux2同意署名转载一起分享游戏制作经验，共同为国内独立游戏作者共同创造良好交流环境，原文地址：https://rpg.blue/forum.php?mod=viewthread&tid=384578  若有侵权，发帖作者可联系底部站长QQ在线咨询功能删除，谢谢。