On 4/23/2012 6:18 PM, Boris Zbarsky wrote:
On 4/23/12 5:57 PM, Charles Pritchard wrote:
Currently, if you want to do "fast" operations on a Canvas, you need to
load it into WebGL and use GLSL to do your quick vector math.
It'd be nice to see a math object for Typed Arrays with similar power.
http://software.intel.com/en-us/articles/opencl-river-trail/ is worth
looking at in this context.
-Boris
Neither introduce multiply/add methods. They do improve on typical JS
methods.
http://cloud.github.com/downloads/RiverTrail/RiverTrail/rivertrail-api-draft-02-2012.pdf
https://github.com/sheremetyev/w16
Example from RiverTrail:
var myPA = new ParallelArray([1.0, 2.0, 3,0]); // <1.0, 2.0, 3.0>
var myPlusPA = myPA(function(element){return element+1;}; // <2.0, 3.0,
4.0> [sic]
The partition method (for map):
pa = new ParallelArray([1,2,3,4]) // <1,2,3,4>
pa.partition(2) // <<1,2>,<3,4>>
W16 looks a little more like typical processing, chunked into batches.
https://github.com/sheremetyev/w16/blob/master/w16/primes.js
ParallelArray(TypedArray) seems ok; it'd be nice though to have methods
on that object, instead of relying on callbacks.
Seems like convolution would go something like this:
var d = ctx.getImageData(0,0,ctx.width,ctx.height);
var pa = new ParallelArray(new Float32Array(d.data));
pa.partition(d.width);
pa.combine(2,function(y,i) {
this[y][i] = this[y][i-1]... etc;
});
It's just that our methods are typically in a for loop, such as the W16
primes.js example.
We'd probably end up with something like this instead of the cleaner
combine:
if(pa.isReal) { pa.batchSize = 1; pa.stride = 1; }
else { pa.batchSize = d.height; pa.stride = d.width; }
pa.combine(2, function(y,i) {
for(var height=pa.batchSize,width=pa.stride; y<height y++) for(;
i<width; i++) { var offset = y * width;
this[offset + i] = this[offset + (i-1)]... etc;
}});
The for loop could be optimized out for items like RiverTrail, W16 could
use batchSize for its own batch semantics, typical polyfill/JS
implementations would just run apply or call.
It'd be nice to have progress events:
pa.onprogressevent = function() {
if(!e.readyState) console.log("processing");
if(e.readyState == 4) {
ctx.putImageData(d.data,0,0);
}
else {
console.log(".");
}
};
And it'd be nice to have basic matrix operations anyway. I'd like to see
mul and add. I've tried to abuse CSSMatrix for that purpose. It works,
but it's slow and not really intended for that purpose. It could be sped
up, if nothing else comes up.
-Charles
