Question

我自建了自己的 < code> flip 命令, 慢慢地, 慢慢地进行下去。我想知道 Javascript 是否有一个 < code> blit 或 < code> memcpy 样式命令。现在我正在逐项检查项目, 以便循环复制副本, 它需要“ 永远 ” 。

< a href=> "http://justinzaun.com/" rel=" noreferrer" > 这里是使用我的翻转函数的一个例子。我运行3层, 只有1层, 如果完全高度, 3个简单的动画和它被挂在大约35 FPS 上。理想的情况是, 3层应该放在远高的FPS上, 在200+我预期的距离内。

v: 36.8 l0: 36.8 l1: 57.8 l2: 36.8 层 S FPS 正在向缓冲带传递, v 是在 < code> flip 函数下向画布传递。 (这些FPS 是来自Chrome 的 mac)

v = the screen update, the main flip function listed below.
l0 = The bottom fire, its a full height layer
l2 = The static noise, its a 1/2 height layer
l3 = The top fire, its a 1/4 height layet

想象有9或10层, FPS 会像石头一样掉下来。在 FF 版本 12 中, 它已经无法使用... 甚至没有两位数的 FPS 率。歌剧至少是双倍的 digets 。

v:4.2 l0:4.2 l1:4.2 l2:4.2 (FF 12 OSX)
v:15.5 l0:15.5 l1:15.5 l2:15.5  (Opera latest OSX)

< 加固 > 我的翻转函数

flip : function() {
    var fps =   ;
    // Combine the layers onto the back buffer
    for (var l = 0; l < this.layers.length; l++)
    {
        fps +=  l  + l +  :  + this.layers[l].fps.toFixed(1) +    ;
        var layerWidth = this.layers[l].options.width;
        var layerHeight = this.layers[l].options.height;
        for (var x = 0; x < layerWidth; x++)
        {
            for (var y = 0; y < layerHeight; y++)
            {
                var index = (y*this.layers[l].options.width + x)*4;
                var r = this.layers[l].buffer[index+0];
                var g = this.layers[l].buffer[index+1];
                var b = this.layers[l].buffer[index+2];
                var a = this.layers[l].buffer[index+3];
                if (r|g|b|a != 0) {
                    this.buffer.data[index+0] = r;
                    this.buffer.data[index+1] = g;
                    this.buffer.data[index+2] = b;
                    this.buffer.data[index+3] = a;
                }
            }
        }
    }
    fps =  v:  + this.fps.toFixed(1) +     + fps;
    this.$fps.html(fps);

    // blit the buffer
    this.context.putImageData(this.buffer, 0, 0);

    // Calculate fps
    var now = new Date;
    var thisFrameFPS = 1000 / (now - this.last);
    this.fps += (thisFrameFPS - this.fps) / 50;
    this.last = now;


    var t = this;
    setTimeout(function() {t.flip.apply(t);}, this.speed);
}

Answer 1

There is a memcpy.js that uses TypedArray.prototype.subarray() if available.
The browser support is good and even IE10 have subarray.

function memcpy (src, srcOffset, dst, dstOffset, length) {
    var i

    src = src.subarray || src.slice ? src : src.buffer
    dst = dst.subarray || dst.slice ? dst : dst.buffer

    src = srcOffset ? src.subarray ?
        src.subarray(srcOffset, length && srcOffset + length) :
        src.slice(srcOffset, length && srcOffset + length) : src

    if (dst.set) {
        dst.set(src, dstOffset)
    } else {
        for (i=0; i<src.length; i++) {
            dst[i + dstOffset] = src[i]
        }
    }

    return dst
}

Answer 2

你的代码是可以改进的但我怀疑加速的速度会很大

在这里,我要指出的是,它是未经测试的。我假设,如果用您的版本取代第一个循环版本,处理层的顺序并不重要。

function flip () {
    var fps =   ;
    // Combine the layers onto the back buffer
    for (var l = this.layers.length; l--;) {
        fps +=  l  + l +  :  + this.layers[l].fps.toFixed (1) +    ;
        var layerWidth = this.layers[l].options.width;
        var layerHeight = this.layers[l].options.height;
        for (var index = 0, x = layerWidth; x--;) {
            for (var y = layerHeight; y--; index += 4) {
                var r = this.layers[l].buffer[index+0];
                var g = this.layers[l].buffer[index+1];
                var b = this.layers[l].buffer[index+2];
                var a = this.layers[l].buffer[index+3];
                if (r|g|b|a != 0) {
                    this.buffer.data[index+0] = r;
                    this.buffer.data[index+1] = g;
                    this.buffer.data[index+2] = b;
                    this.buffer.data[index+3] = a;
                }
            }
        }
    }
};

假设r,g,b 和 a 全部是 8 位量, 您可以考虑把它们包装成一个整数。这将减少内部循环的处理。更有效率的办法是使用新的< a href=> https:// developmenter. mozilla. org/ en/ JavaScript_typed_ arrays" rel = “ nofollow” >aryBuffer 设施。

友情链接