soya2d icon indicating copy to clipboard operation
soya2d copied to clipboard

请问下有没有对纹理加入滤镜的计划?

Open willove opened this issue 8 years ago • 1 comments

首先先对大大的引擎点个赞,已经用到了公司的项目里。 最近有对图片进行对图片填充颜色的需求,类似于那种剪影的效果。但是从引擎的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;
    }

willove avatar Apr 07 '16 07:04 willove

滤镜很早的版本有,后来去掉了。计划在webgl渲染器上线后才会实现。纯canvas的滤镜性能太低了

MrSoya avatar Apr 11 '16 05:04 MrSoya