mirror of
https://github.com/gpujs/gpu.js.git
synced 2026-01-25 16:08:02 +00:00
140 lines
7.3 KiB
HTML
140 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Demo!!</title>
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
|
|
<!-- webclgl scripts -->
|
|
<script src="../lib/webclgl/WebCLGLUtils.class.js"></script>
|
|
<script src="../lib/webclgl/WebCLGLBuffer.class.js"></script>
|
|
<script src="../lib/webclgl/WebCLGLBufferItem.class.js"></script>
|
|
<script src="../lib/webclgl/WebCLGLKernel.class.js"></script>
|
|
<script src="../lib/webclgl/WebCLGLKernelProgram.class.js"></script>
|
|
<script src="../lib/webclgl/WebCLGL.class.js"></script>
|
|
|
|
<!-- gpu.js scripts -->
|
|
<script src="../src/js-fallback.js"></script>
|
|
<script src="../src/webclgl-js-parser.js"></script>
|
|
<script src="../src/js-to-webclgl.js"></script>
|
|
<script src="../src/gpu.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<h1>GPU.js! <small>CUDA for the Browser</small></h1>
|
|
</div>
|
|
<pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> _length <span style='color:#808030; '>=</span> <span style='color:#008c00; '>2048</span><span style='color:#800080; '>;</span>
|
|
<span style='color:#800000; font-weight:bold; '>var</span> a <span style='color:#808030; '>=</span> <span style='color:#808030; '>[</span><span style='color:#808030; '>]</span><span style='color:#800080; '>;</span>
|
|
<span style='color:#800000; font-weight:bold; '>var</span> b <span style='color:#808030; '>=</span> <span style='color:#808030; '>[</span><span style='color:#808030; '>]</span><span style='color:#800080; '>;</span>
|
|
<span style='color:#800000; font-weight:bold; '>for</span><span style='color:#808030; '>(</span><span style='color:#800000; font-weight:bold; '>var</span> n <span style='color:#808030; '>=</span> <span style='color:#008c00; '>0</span><span style='color:#800080; '>;</span> n <span style='color:#808030; '><</span> _length<span style='color:#800080; '>;</span> n<span style='color:#808030; '>++</span><span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span>
|
|
<span style='color:#800000; font-weight:bold; '>var</span> randA <span style='color:#808030; '>=</span> <span style='color:#797997; '>Math</span><span style='color:#808030; '>.</span><span style='color:#800000; font-weight:bold; '>random</span><span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>/</span><span style='color:#008000; '>2.0</span><span style='color:#800080; '>;</span>
|
|
<span style='color:#800000; font-weight:bold; '>var</span> randB <span style='color:#808030; '>=</span> <span style='color:#797997; '>Math</span><span style='color:#808030; '>.</span><span style='color:#800000; font-weight:bold; '>random</span><span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>/</span><span style='color:#008000; '>2.0</span><span style='color:#800080; '>;</span>
|
|
a<span style='color:#808030; '>.</span>push<span style='color:#808030; '>(</span>randA<span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
|
b<span style='color:#808030; '>.</span>push<span style='color:#808030; '>(</span>randB<span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
|
<span style='color:#800080; '>}</span>
|
|
|
|
<span style='color:#800000; font-weight:bold; '>var</span> f <span style='color:#808030; '>=</span> GPU<span style='color:#808030; '>(</span><span style='color:#800000; font-weight:bold; '>function</span><span style='color:#808030; '>(</span>a<span style='color:#808030; '>,</span> b<span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span>
|
|
<span style='color:#800000; font-weight:bold; '>return</span> a<span style='color:#808030; '>[</span>threadX<span style='color:#808030; '>]</span> <span style='color:#808030; '>+</span> b<span style='color:#808030; '>[</span>threadY<span style='color:#808030; '>]</span><span style='color:#800080; '>;</span>
|
|
<span style='color:#800080; '>}</span><span style='color:#808030; '>,</span> <span style='color:#800080; '>{</span>
|
|
thread <span style='color:#800080; '>:</span> <span style='color:#808030; '>[</span><span style='color:#008c00; '>2048</span><span style='color:#808030; '>]</span>
|
|
<span style='color:#800080; '>}</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
|
|
|
c <span style='color:#808030; '>=</span> f<span style='color:#808030; '>(</span>a<span style='color:#808030; '>,</span> b<span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
|
</pre>
|
|
|
|
<div class="result hide">
|
|
<div class="alert alert-success" role="alert">
|
|
CPU: 1298ms<br>
|
|
GPU: 21ms
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
/**
|
|
* Figure out how long it takes for a method to execute.
|
|
*
|
|
* @param {Function} method to test
|
|
* @param {number} iterations number of executions.
|
|
* @param {Array} args to pass in.
|
|
* @param {T} context the context to call the method in.
|
|
* @return {number} the time it took, in milliseconds to execute.
|
|
*/
|
|
var bench = function (method, iterations, args, context) {
|
|
|
|
var time = 0;
|
|
var timer = function (action) {
|
|
var d = Date.now();
|
|
if (time < 1 || action === 'start') {
|
|
time = d;
|
|
return 0;
|
|
} else if (action === 'stop') {
|
|
var t = d - time;
|
|
time = 0;
|
|
return t;
|
|
} else {
|
|
return d - time;
|
|
}
|
|
};
|
|
|
|
var result = [];
|
|
var i = 0;
|
|
timer('start');
|
|
while (i < iterations) {
|
|
result.push(method.apply(context, args));
|
|
i++;
|
|
}
|
|
|
|
var execTime = timer('stop');
|
|
|
|
if ( typeof console === "object") {
|
|
console.log("Mean execution time was: ", execTime / iterations);
|
|
console.log("Sum execution time was: ", execTime);
|
|
console.log("Result of the method call was:", result[0]);
|
|
}
|
|
|
|
return execTime;
|
|
};
|
|
|
|
function f(mode) {
|
|
var _length = 2048;
|
|
var a = [];
|
|
var b = [];
|
|
for(var n = 0; n < _length; n++) {
|
|
var randA = Math.random()*100.0;
|
|
var randB = Math.random()*100.0;
|
|
a.push(randA);
|
|
b.push(randB);
|
|
}
|
|
|
|
var f = GPU(function(a, b) {
|
|
var res = 0.0;
|
|
var i = 0.0;
|
|
for(i = 0.0; i < 200000; ++i) {
|
|
res += Math.sqrt( Math.pow( a[this.thread.x] , b[this.thread.x] ) );
|
|
}
|
|
|
|
return res;
|
|
}, {
|
|
thread : [2048],
|
|
mode : mode
|
|
});
|
|
|
|
c = f(a, b);
|
|
}
|
|
|
|
bench(function(){
|
|
f('auto');
|
|
}, 100, [], this);
|
|
|
|
bench(function(){
|
|
f('cpu');
|
|
}, 100, [], this);
|
|
|
|
</script>
|
|
<button class="btn btn-default" onclick="$('.result').removeClass('hide');">Run!</button>
|
|
</div>
|
|
</body>
|
|
</html>
|