soya2d
soya2d copied to clipboard
请问下有没有对纹理加入滤镜的计划?
首先先对大大的引擎点个赞,已经用到了公司的项目里。 最近有对图片进行对图片填充颜色的需求,类似于那种剪影的效果。但是从引擎的API上面没有找到对应的方法,再查引擎也没有响应的实现。 针对这个问题我参照纹理fromColor的实现,在原型dispose方法下面新建了一个fillColor方法,原理是把纹理图片转成canvas再进行像素处理,希望大大可以考虑一下更好的实现。
fillColor: function(RGBA, repaint) {
var data = document.createElement('canvas'),
ctx = data.getContext('2d'),
imageData,
brightness;
repaint = _.isUndefined(repaint) ? true : repaint;
data.width = this.__data.width;
data.height = this.__data.height;
ctx.drawImage(this.__data, 0, 0, data.width, data.height, 0, 0, data.width, data.height);
imageData = ctx.getImageData(0, 0, data.width, data.height);
for (i = 0; i < imageData.data.length; i += 4) {
brightness = repaint ? 1 :
((0.34 * imageData.data[i] + 0.5 * imageData.data[i + 1] + 0.16 * imageData.data[i + 2]) / 255);
imageData.data[i] = brightness * RGBA[0]; // r
imageData.data[i + 1] = brightness * RGBA[1]; // g
imageData.data[i + 2] = brightness * RGBA[2]; // b
imageData.data[i + 3] = imageData.data[i + 3]; // alpha
}
ctx.putImageData(imageData, 0, 0);
this.__data = data;
}
滤镜很早的版本有,后来去掉了。计划在webgl渲染器上线后才会实现。纯canvas的滤镜性能太低了