mirror of
https://github.com/gpujs/gpu.js.git
synced 2026-01-25 16:08:02 +00:00
Merge branch 'master' of bitbucket.org:fuzzie/gpu.js
This commit is contained in:
Eugene Cheah
commit
16f10eec50
133
demo/gpu.html
Normal file
133
demo/gpu.html
Normal file
@ -0,0 +1,133 @@
|
||||
<!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()/2.0;
|
||||
var randB = Math.random()/2.0;
|
||||
a.push(randA);
|
||||
b.push(randB);
|
||||
}
|
||||
|
||||
var f = GPU(function(a, b) {
|
||||
return a[threadX] + b[threadY];
|
||||
}, {
|
||||
thread : [2048],
|
||||
mode : mode
|
||||
});
|
||||
|
||||
c = f(a, b);
|
||||
}
|
||||
|
||||
bench(function(){
|
||||
f('gpu');
|
||||
}, 1, [], this);
|
||||
|
||||
bench(function(){
|
||||
f('cpu');
|
||||
}, 1, [], this);
|
||||
|
||||
</script>
|
||||
<button class="btn btn-default" onclick="$('.result').removeClass('hide');">Run!</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user