{"id":22294,"date":"2020-08-12T07:45:23","date_gmt":"2020-08-12T05:45:23","guid":{"rendered":"https:\/\/savinol.sg-host.com\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/"},"modified":"2020-08-12T07:45:23","modified_gmt":"2020-08-12T05:45:23","slug":"gpu-js-laccelerazione-hardware-della-gpu-in-javascript","status":"publish","type":"post","link":"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/","title":{"rendered":"GPU.js: l&#8217;accelerazione hardware della GPU in JavaScript"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div>\n<p>L\u2019utilizzo della potenza di calcolo delle <strong><abbr title=\"Graphic Processing Unit\">GPU<\/abbr><\/strong> \u00e8 diventato sempre pi\u00f9 frequente, non solo quando si ha a che fare con la grafica 3D. Per molte applicazioni di <strong>machine learning<\/strong> e analisi dei dati, \u00e8 infatti divenuto cruciale il supporto di questi dispositivi, dotati di processori in grado di effettuare operazioni algebriche e matriciali in maniera estremamente efficiente, grazie al <strong>calcolo parallelo<\/strong> che sono in grado di supportare.<\/p>\n<p>Molti linguaggi di programmazione permettono, in effetti, di sfruttare le potenzialit\u00e0 delle GPU, tramite l\u2019uso di librerie specifiche, o in qualche caso addirittura di appositi costrutti nativi. Ci\u00f2 \u00e8 per\u00f2 meno intuitivo in <a href=\"https:\/\/www.html.it\/guide\/guida-javascript-di-base\/\">JavaScript<\/a>. In effetti, essendosi diffuso inizialmente come linguaggio per i browser, la necessit\u00e0 dell\u2019accelerazione hardware per le applicazioni basate su JavaScript \u00e8 rimasta sempre un po\u2019 in secondo piano.<\/p>\n<p>Oggi, con i nuovi trend e le nuove applicazioni di questo linguaggio in contesti diversi dal semplice sviluppo di front-end, questa necessit\u00e0 ha portato alla realizzazione di <strong>GPU.js<\/strong>, una libreria che ha esattamente lo scopo di fornire le potenzialit\u00e0 della GPU anche agli sviluppatori JavaScript.<\/p>\n<p>Nel seguito vedremo come ottenere GPU.js, e un breve esempio di utilizzo, rimandando alla <a href=\"https:\/\/github.com\/gpujs\/gpu.js\/#readme\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">documentazione ufficiale<\/a> chi fosse interessato ad un maggiore approfondimento.<\/p>\n<h2>Come installare GPU.js<\/h2>\n<p>GPU.js \u00e8 disponibile su <a href=\"https:\/\/github.com\/gpujs\/gpu.js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">GitHub<\/a>, da cui possiamo quindi scaricare il codice sorgente. \u00c8 per\u00f2 pi\u00f9 semplice utilizzare uno dei seguenti <attr title=\"Content Delivery Network\">CDN:<\/attr><\/p>\n<pre><code class=\"language-markup\">\nhttps:\/\/unpkg.com\/gpu.js@latest\/dist\/gpu-browser.min.js\nhttps:\/\/cdn.jsdelivr.net\/npm\/gpu.js@latest\/dist\/gpu-browser.min.js\n<\/code><\/pre>\n<p>Fatto ci\u00f2, siamo pronti all\u2019uso di GPU.js.<\/p>\n<h2>Utilizzare GPU.js<\/h2>\n<p>Partendo dal presupposto che utilizzare al meglio la GPU non \u00e8 semplice, e che ci\u00f2 pu\u00f2 richiedere anche anni di esperienza per arrivare a risultati significativi, l\u2019uso di GPU.js \u00e8 relativamente semplice.<\/p>\n<p>Partiamo dal codice seguente, pensato per l\u2019esecuzione all\u2019interno di un browser:<\/p>\n<pre><code class=\"language-markup\">\n&lt;script src=\"http:\/\/feedproxy.google.com\/dist\/gpu-browser.min.js\"&gt;&lt;\/script&gt;\n&lt;script&gt;\n    const gpu = new GPU();\n    const multiplyMatrix = gpu.createKernel(function(a, b) {\n        let sum = 0;\n        for (let i = 0; i &lt; 512; i++) {\n            sum += a[this.thread.y][i] * b[i][this.thread.x];\n        }\n        return sum;\n    }).setOutput([512, 512]);\n    const c = multiplyMatrix(a, b);\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>Abbiamo creato un\u2019istanza di <code>GPU<\/code>, usando quindi il metodo <code>createKernel<\/code> per <strong>definire un kernel<\/strong>, cio\u00e8 una funzione che verr\u00e0 eseguita sfruttando l\u2019esecuzione parallela dalla GPU. Si pu\u00f2 notare che, all\u2019interno del codice, \u00e8 utilizzata la propriet\u00e0 <code>thread<\/code>, rappresentante una delle esecuzioni parallele eseguite dalla nostra scheda grafica. \u00c8 bene sottolineare, infatti, che l\u2019uso di una libreria come GPU.js ha senso solo quando il numero di operazioni da parallelizzare \u00e8 molto elevato. D\u2019altronde, le singole unit\u00e0 di processing all\u2019interno della GPU non sono migliori dei singoli core della nostra CPU: ci\u00f2 che rende l\u2019intero processo sensato \u00e8 il maggior numero di unit\u00e0 che possono lavorare sui nostri dati.<\/p>\n<h2>Conclusioni<\/h2>\n<p>L\u2019uso di GPU.js permette di raggiungere performance decisamente superiori rispetto a codice basato unicamente sull\u2019uso della CPU, soprattutto all\u2019aumentare della quantit\u00e0 di dati da processare. A dimostrazione di ci\u00f2, si osservi il grafico seguente:<\/p>\n<div class=\"boximg\"><span>Performance di CPU e GPU a confronto, al variare della dimensione dei dati (click per ingrandire)<\/span><a href=\"https:\/\/tbm-html.s3.amazonaws.com\/app\/uploads\/2020\/08\/cattura.png\" class=\"fan_img\" rel=\"fan_group\"><img src=\"https:\/\/tbm-html.s3.amazonaws.com\/app\/uploads\/2020\/08\/cattura.png\" alt=\"Performance di CPU e GPU a confronto, al variare della dimensione dei dati\"\/><\/a><\/div>\n<p>Va detto, per\u00f2, che l\u2019uso di questa libreria richiede una preparazione non banale. A tale scopo, rimandiamo alla <a href=\"https:\/\/github.com\/gpujs\/gpu.js\/#readme\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">documentazione ufficiale<\/a> del progetto, in cui \u00e8 possibile partire dai concetti chiave del calcolo basato su GPU, fino ad arrivare ai moltissimi esempi gi\u00e0 pronti che mostrano, in pratica, come sfruttare GPU.js.<\/p>\n<p><em>Fonte<\/em>: <a href=\"https:\/\/gpu.rocks\/\" class=\"text-link text-link--special\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><span class=\"underline\">GPU.js<\/span><i class=\"ico-external\"\/><\/a><\/p>\n<\/div>\n<p><br \/>\n<br \/><a href=\"http:\/\/feedproxy.google.com\/~r\/htmlitedit\/~3\/SKhdqgu-6aI\/\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>L\u2019utilizzo della potenza di calcolo delle GPU \u00e8 diventato sempre pi\u00f9 frequente, non solo quando si ha a che fare con la grafica 3D. Per molte applicazioni di machine learning e analisi dei dati, \u00e8 infatti divenuto cruciale il supporto di questi dispositivi, dotati di processori in grado di effettuare operazioni algebriche e matriciali in&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_s2mail":""},"categories":[37],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>GPU.js: l&#039;accelerazione hardware della GPU in JavaScript - AGENZIA WEB Italia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"GPU.js: l&#039;accelerazione hardware della GPU in JavaScript - AGENZIA WEB Italia\" \/>\n<meta property=\"og:description\" content=\"L\u2019utilizzo della potenza di calcolo delle GPU \u00e8 diventato sempre pi\u00f9 frequente, non solo quando si ha a che fare con la grafica 3D. Per molte applicazioni di machine learning e analisi dei dati, \u00e8 infatti divenuto cruciale il supporto di questi dispositivi, dotati di processori in grado di effettuare operazioni algebriche e matriciali in...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"AGENZIA WEB Italia\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-12T05:45:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tbm-html.s3.amazonaws.com\/app\/uploads\/2020\/08\/cattura.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42\"},\"headline\":\"GPU.js: l&#8217;accelerazione hardware della GPU in JavaScript\",\"datePublished\":\"2020-08-12T05:45:23+00:00\",\"dateModified\":\"2020-08-12T05:45:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/\"},\"wordCount\":510,\"publisher\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization\"},\"articleSection\":[\"News\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/\",\"name\":\"GPU.js: l'accelerazione hardware della GPU in JavaScript - AGENZIA WEB Italia\",\"isPartOf\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#website\"},\"datePublished\":\"2020-08-12T05:45:23+00:00\",\"dateModified\":\"2020-08-12T05:45:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"GPU.js: l&#8217;accelerazione hardware della GPU in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#website\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/\",\"name\":\"AGENZIA WEB Italia\",\"description\":\"Web design Web agency Italia\",\"publisher\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization\",\"name\":\"Multimedia Web\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png\",\"contentUrl\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png\",\"width\":200,\"height\":57,\"caption\":\"Multimedia Web\"},\"image\":{\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"GPU.js: l'accelerazione hardware della GPU in JavaScript - AGENZIA WEB Italia","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/","og_locale":"it_IT","og_type":"article","og_title":"GPU.js: l'accelerazione hardware della GPU in JavaScript - AGENZIA WEB Italia","og_description":"L\u2019utilizzo della potenza di calcolo delle GPU \u00e8 diventato sempre pi\u00f9 frequente, non solo quando si ha a che fare con la grafica 3D. Per molte applicazioni di machine learning e analisi dei dati, \u00e8 infatti divenuto cruciale il supporto di questi dispositivi, dotati di processori in grado di effettuare operazioni algebriche e matriciali in...","og_url":"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/","og_site_name":"AGENZIA WEB Italia","article_published_time":"2020-08-12T05:45:23+00:00","og_image":[{"url":"https:\/\/tbm-html.s3.amazonaws.com\/app\/uploads\/2020\/08\/cattura.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"admin","Tempo di lettura stimato":"3 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/"},"author":{"name":"admin","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42"},"headline":"GPU.js: l&#8217;accelerazione hardware della GPU in JavaScript","datePublished":"2020-08-12T05:45:23+00:00","dateModified":"2020-08-12T05:45:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/"},"wordCount":510,"publisher":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization"},"articleSection":["News"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/","name":"GPU.js: l'accelerazione hardware della GPU in JavaScript - AGENZIA WEB Italia","isPartOf":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#website"},"datePublished":"2020-08-12T05:45:23+00:00","dateModified":"2020-08-12T05:45:23+00:00","breadcrumb":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/gpu-js-laccelerazione-hardware-della-gpu-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.nycwebdesign.eu\/webdesign\/"},{"@type":"ListItem","position":2,"name":"GPU.js: l&#8217;accelerazione hardware della GPU in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#website","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/","name":"AGENZIA WEB Italia","description":"Web design Web agency Italia","publisher":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.nycwebdesign.eu\/webdesign\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#organization","name":"Multimedia Web","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/","url":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png","contentUrl":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-content\/uploads\/2016\/05\/multimediaweb1.png","width":200,"height":57,"caption":"Multimedia Web"},"image":{"@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/c0748e23499fac2fd73b79d1379fdf42","name":"admin","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.nycwebdesign.eu\/webdesign\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/991cd68bbfd6f946517378a63fc3a1f7?s=96&d=mm&r=g","caption":"admin"}}]}},"_links":{"self":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/posts\/22294"}],"collection":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/comments?post=22294"}],"version-history":[{"count":0,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/posts\/22294\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/media?parent=22294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/categories?post=22294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nycwebdesign.eu\/webdesign\/wp-json\/wp\/v2\/tags?post=22294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}