|
1 | 1 | [](http://gpu.rocks/) |
2 | 2 |
|
3 | | -[Link to website](http://gpu.rocks/) |
4 | | - |
5 | | -**TODO: Add more stuff to this README =# ** |
6 | | - |
7 | | -# Documentation |
8 | | -Automatically built via a butler. Note that these documentations are quite prelimary, and **needs much cleanup** |
9 | | -- Usr Docs : http://gpujs.github.io/usr-docs/ |
10 | | -- Dev Docs : http://gpujs.github.io/dev-docs/ |
11 | | - |
12 | | -# HOWTO: Build / Generate Docs |
13 | | -- The following is required to be installed |
14 | | - - node.js |
15 | | - - ant |
16 | | -- `ant setup` Run the setup function once, this will do the following |
17 | | - - `ant setup-gulp` Install gulp inside node.js global |
18 | | - - `ant setup-naturalDocs` Download and NaturalDocs into the docs folder |
19 | | -- `ant build-docs` To build the HTML documentation inside doc folder |
20 | | -- `gulp` To build the gpu.js file inside bin folder |
| 3 | +gpu.js is a single-file JavaScript library for GPGPU using WebGL. There is graceful fallback to JavaScript if WebGL is not available. |
| 4 | + |
| 5 | +# Getting Started |
| 6 | + |
| 7 | +## Installation |
| 8 | +Download the latest version of gpu.js and include the file in your HTML page using the following tags: |
| 9 | + |
| 10 | +```html |
| 11 | +<script src="/path/to/js/gpu.min.js"></script> |
| 12 | +``` |
| 13 | + |
| 14 | +In JavaScript, initialise the library: |
| 15 | + |
| 16 | +```js |
| 17 | +var gpu = new GPU(); |
| 18 | +``` |
| 19 | + |
| 20 | +### Creating and Running Functions |
| 21 | +Depnding on your output type, specify the intended dimensions of your output. You cannot have a accelerated function that does not specify any dimensions. |
| 22 | + |
| 23 | +Dimensions of Output | How to specify dimensions |
| 24 | +--- | --- |
| 25 | +1D | `[length]` |
| 26 | +2D | `[width, height]` |
| 27 | +3D | `[width, height, depth]` |
| 28 | + |
| 29 | +```js |
| 30 | +var opt = { |
| 31 | + dimensions: [100] |
| 32 | +}; |
| 33 | +``` |
| 34 | + |
| 35 | +Create the function you want to run on the GPU. The first input parameter to `createKernel` is a kernel function which will compute a single number in the output. The thread identifiers, `this.thread.x`, `this.thread.y` or `this.thread.z` will allow you to specify the appropriate behavior of the kernel function at specific positions of the output. |
| 36 | + |
| 37 | +```js |
| 38 | +var myFunc = gpu.createKernel(function() { |
| 39 | + return this.thread.x; |
| 40 | +}, opt); |
| 41 | +``` |
| 42 | + |
| 43 | +The created function is a regular JavaScript function, you can use like regular functions. |
| 44 | + |
| 45 | +```js |
| 46 | +myFunc(); |
| 47 | +// Result: [0, 1, 2, 3, ... 100] |
| 48 | +``` |
| 49 | + |
| 50 | +Note: Instead of creating an object, you can use the chainable shortcut methods as a neater way of specificying options. |
| 51 | + |
| 52 | +```js |
| 53 | +var myFunc = gpu.createKernel(function() { |
| 54 | + return this.thread.x; |
| 55 | +}).dimensions([100]); |
| 56 | + |
| 57 | +myFunc(); |
| 58 | +// Result: [0, 1, 2, 3, ... 100] |
| 59 | +``` |
| 60 | +### Accepting Input |
| 61 | + |
| 62 | +Kernel functions may accept numbers, or 1D, 2D or 3D array of numbers as input. To define an argument, simply add it to the kernel function like regular JavaScript. |
| 63 | + |
| 64 | +```js |
| 65 | +var myFunc = gpu.createKernel(function(x) { |
| 66 | + return x; |
| 67 | +}).dimensions([100]); |
| 68 | + |
| 69 | +myFunc(42); |
| 70 | +// Result: [42, 42, 42, 42, ... 42] |
| 71 | +``` |
| 72 | + |
| 73 | +Similarly, with array inputs: |
| 74 | + |
| 75 | +```js |
| 76 | +var myFunc = gpu.createKernel(function(X) { |
| 77 | + return X[this.thread.x % 3]; |
| 78 | +}).dimensions([100]); |
| 79 | + |
| 80 | +myFunc([1, 2, 3]); |
| 81 | +// Result: [1, 2, 3, 1, ... 1 ] |
| 82 | +``` |
| 83 | + |
| 84 | +### Graphical Output |
| 85 | + |
| 86 | +Sometimes, you want to produce a `canvas` image instead of doing numeric computations. To achieve this, set the `graphical` flag to `true` and the output dimensions to `[width, height]`. The thread identifiers will now refer to the `x` and `y` coordinate of the pixel you are producing. Inside your kernel function, use `this.color(r,g,b)` or `this.color(r,g,b,a)` to specify the color of the pixel. |
| 87 | + |
| 88 | +For performance reasons, the return value for your function will no longer be anything useful. Instead, to add the image input your page, retrieve the `canvas` DOM node and insert it into your page. |
| 89 | + |
| 90 | +```js |
| 91 | +var render = gpu.createKernel(function(X) { |
| 92 | + this.color(0, 0, 0, 1); |
| 93 | +}).dimensions([20, 20]).graphical(true); |
| 94 | + |
| 95 | +render(); |
| 96 | + |
| 97 | +var canvas = render.getCanvas(); |
| 98 | +document.getElementsByTagName('body')[0].appendChild(canvas); |
| 99 | +``` |
| 100 | + |
| 101 | +Note: To animate the rendering, use requestAnimationFrame instead of setTimeout for optimal performance. For more information, see [this link](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). |
| 102 | + |
| 103 | +# Full API Reference |
| 104 | + |
| 105 | +You can find a [complete API reference here](http://gpu.rocks/api/). |
| 106 | + |
| 107 | +# Automatically-built Documentation |
| 108 | + |
| 109 | +Documentation of the codebase is [automatically built](https://github.com/gpujs/gpu.js/wiki/Automatic-Documentation). |
| 110 | + |
| 111 | +# License |
| 112 | + |
| 113 | +The MIT License |
| 114 | + |
| 115 | +Copyright (c) 2016 Fazli Sapuan, Matthew Saw, Eugene Cheah and Julia Low |
| 116 | + |
| 117 | +Permission is hereby granted, free of charge, to any person obtaining a copy |
| 118 | +of this software and associated documentation files (the "Software"), to deal |
| 119 | +in the Software without restriction, including without limitation the rights |
| 120 | +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
| 121 | +copies of the Software, and to permit persons to whom the Software is |
| 122 | +furnished to do so, subject to the following conditions: |
| 123 | + |
| 124 | +The above copyright notice and this permission notice shall be included in |
| 125 | +all copies or substantial portions of the Software. |
| 126 | + |
| 127 | +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| 128 | +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
| 129 | +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
| 130 | +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
| 131 | +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
| 132 | +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
| 133 | +THE SOFTWARE. |
0 commit comments