It’s kind of fun to do the impossible. S You are a chef, and you have been asked to prepare milkshakes for your best friend’s baby shower. Because of the huge income chef’s usually have, you are a proud owner of a Cylindrical Automated Transformer( ) that you can use to make milkshakes and whatnot. o, Here’s the problem: CAT You could make the milkshakes yourself, and it will take you to do it. Option 1: 2 minutes You could use the , which takes about , no matter the request. Option 2: CAT 20 minutes You choose: Option 1 (good choice) Impressed by your speed in the kitchen, the Queen of Whales asks you to cook an eight course dinner, with appetizers, and dessert, and milkshakes on her son’s wedding. If you chose to have at it all by yourself now, not only will you not be able to complete the job, you will be barred from Whales and the Kingdom for the rest of your life. However, if you are a wee bit smart at Math, you’d choose the CAT, finish the job in (right!?!), and gain an all access pass to the fanciest hotels in the United Kingdom. 20 minutes Machine Learning is that eight-course dinner, in a catered wedding of the Prince of whales with 200,000 guests. Would you want to cook all that yourself(CPU) or use a service? ( gpu.js is that service.) Hint: In the GPU can help you cut the time to 1/100th of the original time taken. And maybe more. (Keep going! Results will show up.) Machine Learning, Introducing, gpu.js! If you are baffled and want to dive straight into the pool of , feel free to skip to the next section. brackets is a GPGPU(General purpose Programming on Graphical Processing Units) library that lets you hand over hefty calculations to the GPU for super fast operation and output. It currently runs on the browser and node.js, wherein it is using WebGl API’s in the browser, and a single threaded operation on node.js. is on the roadmap.(🎉) gpu.js OpenCL Github Stars ⭐️ You might ask: “But why? Aren’t Intel’s i7, or even i9 fast enough? They seem to work fine for me. I don’t need this.” Before you get bogged down by that, check out the results: MacBook Pro Retina 2015, Google Chrome times faster!?! 22.97 ( : MacBook Pro , 2015) Specs Retina Right, right! That’s a powerful machine, so here are the results on a system with Integrated Graphics Card ( ) and no dedicated GPU: Intel HD 3000 Intel HD 3000, Google Chrome All in all, the thing that separates form the lot is that it doesn’t chain you to use the library in a specific way. It does what the tagline says: It lets you your hefty JavaScript. gpu.js accelerate Let’s have some code now: We are going to perform Matrix Multiplication, and benchmark CPU’s performance vs GPU. Size of the Matrices: X 512 512 Code You are right. It’s hosted on GitHub: gpu.js-demo The source files, namely and can be downloaded from our website ( ) or github( ). gpu.min.js gpu-core.min.js gpu.rocks gpu.js I am assuming you have already initialized a prototype HTML/JS/CSS project ( , , ) Note: index.html index.js style.css Step 1. Import gpu lib files In your index.html, import the files, and you are good to go: Step 2. Matrix Multiplication on CPU To multiply two matrices, we need to make sure that the number of columns in the first matrix is equal to the number of rows in the second matrix. Matrix A: X (m X n) 512 512 Matrix B: X (n X r) 512 512 Result: X (m X r) 512 512 Here’s a generic Matrix Multiplication algorithm that runs on the CPU: The next step is where the magic begins. (WebGL magic 😆) Step 3. Setup GPU The lib files export a global function named that you can use to create a new gpu instance. A gpu GPU const gpu = new GPU({mode: 'webgl'}); A few options can be sent to the constructor, the complete list of which can be find on GitHub and the automatically generated . JSDocs The option specifies where the function will run. There are three options: mode “gpu” “webgl” “cpu” gpu and webgl are aliases, for the time being. We are targeting to incorporate for and then the gpu will solely mean use the gpu via OpenCL API on server. OpenCL v2 Currently, both webgl and gpu use WebGL API’s to defer work to the GPU. Step 4. Matrix Multiplication on GPU The gpu variable we just initialized has several different methods attached to it, all of which have varying use-cases. We’ll use the method which, essentially, creates a “kernel” (An abstract term for it could be, in fact, ) which you can call from JS. Behind the scenes, your code is compiled to GLSL shaders using an AST and a jison based parser. That ensures that the code written inside the kernel will be executed on a GPU. createKernel function You pass a JS Function as an argument to the kernel, and have access to the thread dimensions(As a mnemonic, you can think of the thread dimensions as the lengths of the for-loops we used in CPU mode.) sets the dimension of the loop. (See the API page for complete reference.) .setDimensions This is an inherent problem in the way most GPU written software works: . The GPU is like its own computer; a black box that we send commands to from the CPU. We can transfer things to it and read data back from it, but all that comes with a penalty. The overall penalty of transfer especially becomes a bottleneck if your case involves performing several mathematical operations on the GPU, and the net fine keeps increasing with every operation. Transfer Penalty You can, however, leave values on the GPU. They exist on the GPU as Textures. (You can think of Textures as sort of data containers, but, for the GPU.) By setting flag to , you can make sure that you incurring no transfer penalty thereby eliciting an important speed gain. outputToTexture true is where the happens! .setOutputToTexture REAL STUFF WiffleGif.com And as important as they are**, A** and are matrices which we’ll create in the next step. B Step 5. Initialize Matrices This code is taken from the demo you saw on our website. If you don’t get it, no problem. Here’s what it does: It adds elements to a JavaScript Array. ( ) and then divides them into parts, which means, in the end, we have a array of size . (Every array element has child elements.) 512*512 1D 512 2D 512*512 All done! Let’s hit the gas. Step 6. Run it and Benchmark For simplicity, we are going to use the Web performance API to benchmark this but you can use as well. (Our website uses that.) benchmark.js First we generate the matrices by calling the above function, and then we run the methods for both and . matMult CPU GPU BAM! Open in the browser and see for yourself. Here is what I got: (Support for is coming soon!) index.html Safari Chrome: Firefox(What’s up, ): Chrome? And that’s just If you change that number to 1024, you’ll notice that the GPU is a powerful beast and can run your code much faster than the CPU. 512 X 512. much We would like to let the community know that JavaScript has been gifted a rocket. 🚀 What will you do with it? All the code is on GitHub and the team will be thrilled to have more users and contributors. — Go have some epiphanies. 🎉 gpu.js
