2d:null 2e:["$","title",null,{"children":"gpu.js: Check execution time | Roger Veciana i Rovira | Observable"}] 33:[] 31:{"id":"6ce44aa3adf87135","slug":"gpu-js-check-execution-time","title":"gpu.js: Check execution time","thumbnail":"e2f243a8a28dc99d2cd3283bc7f11549985697822f2e340384707ee5e18a3b57","access_level":"public","create_time":"$D2018-02-13T13:27:51.823Z","update_time":"$D2018-02-13T16:04:40.068Z","view_time":null,"first_public_time":"$D2018-02-16T10:21:56.531Z","has_unpublished_edits":null,"fork":{"id":"43b57bb41b64c384","slug":"most-basic-gpu-js-example","title":"Most basic gpu.js example","owner":{"id":"84c194f738aa2fd0","login":"rveciana","name":"Roger Veciana i Rovira"}},"stars":0,"starred":false,"owner":{"type":"team","id":"84c194f738aa2fd0","login":"rveciana","name":"Roger Veciana i Rovira","avatar_url":"https://avatars-next.observableusercontent.com/3d41fc7154bfd9017ccebf2744e03c955d78bc31819f90c700dd263c3f301e07","tier":"starter_2024"},"version":179,"publish_version":179,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c469cbe1fd30687","login":"rveciana","name":"Roger Veciana i Rovira","avatar_url":"https://avatars-next.observableusercontent.com/3d41fc7154bfd9017ccebf2744e03c955d78bc31819f90c700dd263c3f301e07","tier":null}],"members":[{"type":"individual","id":"4c469cbe1fd30687","login":"rveciana","name":"Roger Veciana i Rovira","avatar_url":"https://avatars-next.observableusercontent.com/3d41fc7154bfd9017ccebf2744e03c955d78bc31819f90c700dd263c3f301e07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"gpu.js: Check execution time","cells":[{"id":0,"value":"md`# gpu.js: Check execution time`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`[gpu.js](http://gpu.rocks/) is a JavaScript Acceleration library for GPGPU (General purpose computing on GPUs) in Javascript. When a GPU is not available, the functions will still run in regular JavaScript.\n\nThis observable shows the use of the [website example](https://github.com/gpujs/gpu.js#what-is-this-sorcery). Note that [wzrd.in](wzrd.in) has to be used for the import.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"finalResult = {\n var start = performance.now();\n let result = matMult(matrices.A, matrices.B);\n let calculationTime = performance.now() - start;\n document.querySelector(\"div[id='calculationTime']\").firstChild.nodeValue = 'Ellapsed time: ' + calculationTime.toFixed(1) + ' ms';\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"md`Select if you want to run the example using GPU or CPU and look at the performance differences at the cell below. If you don't have GPU, no GPU option will appear.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"viewof processorType = {if(webglChecker) {return html``;} else {\nreturn html``;\n}\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"calculationTime = html`

0 ms

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"matrices = generateMatrices()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"matMult = gpu.createKernel(function(a, b) {\n var sum = 0;\n for (var i = 0; i < 512; i++) {\n sum += a[this.thread.y][i] * b[i][this.thread.x];\n }\n return sum;\n}).setOutput([512, 512])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"function generateMatrices() {\n let matSize = 512;\n let A = [];\n let B = [];\n for (let n = 0; n < matSize * matSize; n++) {\n const randA = Math.random();\n const randB = Math.random();\n A.push(randA);\n B.push(randB);\n }\n\n A = splitArray(A, matSize);\n B = splitArray(B, matSize);\n\n function splitArray(array, part) {\n var tmp = [];\n for (var i = 0; i < array.length; i += part) {\n tmp.push(array.slice(i, i + part));\n }\n return tmp;\n }\n return {\n A,\n B\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"gpu = new GPU({mode: processorType}) //webgl-validator","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"GPU = require('https://wzrd.in/standalone/gpu.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"webglChecker = {let canvas = document.createElement('canvas');\n let ctx = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');\n return ctx!==null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"