javascript - Why is Firefox 30 times slower than Chrome, when calculating Perlin noise? -
i have written map generator in javascript, using classical perlin noise scripts have found in various places, functionality want. have been working in chrome, , have not experienced problems map. however, when tested in firefox, incredibly slow - hanging system. fared better in nightly build, still 30 times slower chrome.
you can find test page of here: http://jsfiddle.net/7gq3s/
here html code:
<!doctype html> <html> <head> <title>perlinmaptest</title> </head> <body> <canvas id="map" width="100" height="100" style="border: 1px solid red">my canvas</canvas> <script src="//code.jquery.com/jquery-2.0.0.min.js"></script> <script> $(document).ready(function(){ //log time in 2 ways var starttime = new date().gettime(); console.time("map generated in: "); var canvas = $("#map")[0]; var ctx = canvas.getcontext("2d"); var id = ctx.createimagedata(canvas.width, canvas.height); var noisemap = new perlinnoise(500); var startx = 0; var starty = 0; var value = 0; for(var = startx; < canvas.width; i++){ for(var j = starty; j < canvas.height; j++){ value = noisemap.noise(i,j, 0, 42); value = linear(value,-1,1,0,255); setpixel(id, i, j, 0,0,0,value); } } ctx.putimagedata(id,0,0); var endtime = new date().gettime(); console.timeend("map generated in: "); alert("map generated in: " + (endtime - starttime) + "milliseconds"); }); function setpixel(imagedata, x, y, r, g, b, a) { index = (x + y * imagedata.width) * 4; imagedata.data[index+0] = r; imagedata.data[index+1] = g; imagedata.data[index+2] = b; imagedata.data[index+3] = a; } //this port of ken perlin's "improved noise" //http://mrl.nyu.edu/~perlin/noise/ //originally http://therandomuniverse.blogspot.com/2007/01/perlin-noise-your-new-best-friend.html //but site appears down, here mirror of //converted php javascript christian moe //patched errors code here: http://asserttrue.blogspot.fi/2011/12/perlin-noise-in-javascript_31.html var perlinnoise = function(seed) { this._default_size = 64; this.seed = seed; //initialize permutation array. this.p = new array(512); this.permutation = [ 151,160,137,91,90,15, 131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23, 190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33, 88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166, 77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244, 102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196, 135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123, 5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42, 223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9, 129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228, 251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107, 49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254, 138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180 ]; (var i=0; < 256 ; i++) { this.p[256+i] = this.p[i] = this.permutation[i]; } }; perlinnoise.prototype.noise = function(x,y,z,size) { if (size == undefined) { size = this._default_size; } //set initial value , initial size var value = 0.0; var initialsize = size; //add finer , finer hues of smoothed noise while(size >= 1) { value += this.smoothnoise(x / size, y / size, z / size) * size; size /= 2.0; } //return result on initial size return value / initialsize; }; //this function determines cube point passed resides in //and determines value. perlinnoise.prototype.smoothnoise = function(x, y, z){ //offset each coordinate seed value x += this.seed; y += this.seed; z += this.seed; var orig_x = x; var orig_y = y; var orig_z = z; var x = math.floor(x) & 255, // find unit cube y = math.floor(y) & 255, // contains point. z = math.floor(z) & 255; x -= math.floor(x); // find relative x,y,z y -= math.floor(y); // of point in cube. z -= math.floor(z); var u = this.fade(x), // compute fade curves v = this.fade(y), // each of x,y,z. w = this.fade(z); var = this.p[x ]+y, aa = this.p[a]+z, ab = this.p[a+1]+z, // hash coordinates of b = this.p[x+1]+y, ba = this.p[b]+z, bb = this.p[b+1]+z; // 8 cube corners, return this.lerp(w, this.lerp(v, this.lerp(u, this.grad(this.p[aa ], x , y , z ), // , add this.grad(this.p[ba ], x-1, y , z )), // blended this.lerp(u, this.grad(this.p[ab ], x , y-1, z ), // results this.grad(this.p[bb ], x-1, y-1, z ))),// 8 this.lerp(v, this.lerp(u, this.grad(this.p[aa+1], x , y , z-1 ), // corners this.grad(this.p[ba+1], x-1, y , z-1 )), // of cube this.lerp(u, this.grad(this.p[ab+1], x , y-1, z-1 ), this.grad(this.p[bb+1], x-1, y-1, z-1 )))); }; perlinnoise.prototype.fade = function(t) { return t * t * t * ( ( t * ( (t * 6) - 15) ) + 10); }; perlinnoise.prototype.lerp = function(t, a, b) { //make weighted interpolaton between points return + t * (b - a); }; perlinnoise.prototype.grad = function(hash, x, y, z) { h = hash & 15; // convert lo 4 bits of hash code u = h<8 ? x : y; // 12 gradient directions. v = h<4 ? y : (h==12||h==14 ? x : z); return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v); }; perlinnoise.prototype.scale = function(n) { return (1 + n)/2; }; function linear(int, s1, s2, t1, t2) { t = [t1, t2]; s = [s1, s2]; ranges = s1 - s2; ranget = t1 - t2; if((s1 < s2 && t1 > t2) || (s1>s2 && t1<t2)) { interpolated = ((int - s1) / ranges*ranget) + t1; } else { interpolated = ((int - s1) / ranges)*ranget + t1; } if(interpolated > math.max.apply(math, t)) { interpolated = math.max.apply(math, t); } if(interpolated < math.min.apply(math, t)) { interpolated = math.min.apply(math, t); } return interpolated; } </script> </body> </html> i 33 ms on chrome, , 1051ms on firefox 24 nightly
the results inconsistent though. nightly results fast chrome...
do know why there variation in particular instance? don't know enough theory of perlin noise try optimizing code, don't know do.
i have found culprit. slowdown occurs when have firebug enabled. extension must weigh down.
Comments
Post a Comment