Әзірлеушілер ретінде біз әрқашан қосымшаның өнімділігін жақсарту мүмкіндіктерін іздейміз. Web қосымшасы туралы айтатын болсақ, біз негізінен кодты жақсартамыз.

Бірақ сіз өзіңіздің веб-қосымшаларыңыздағы GPU қуатын өнімділікті жақсарту үшін біріктіру туралы ойландыңыз ба?

Бұл мақала сізді GPU деп аталатын JavaScript жеделдету кітапханасымен таныстырады.js және күрделі есептеулерді қалай жақсартуға болатындығын көрсетеді.

***

GPU дегеніміз не.js және біз оны не үшін қолданамыз?

Дереккөз: https://gpu.rocks/#/

Қысқаша, GPU.js-JavaScript үдеткіш кітапханасы, оны JavaScript көмегімен GPU-де жалпы мақсатты есептеу үшін пайдалануға болады. Ол браузерлерде, Node-да қолдау көрсетіледі.js және TypeScript.

Өнімділікті арттырудан басқа, GPU қолдануды ұсынамын.js бірнеше себептерге байланысты:

GPU.js JavaScript синтаксисін қолдануға мүмкіндік беретін негіз ретінде JavaScript қолданады;
Ол JavaScript-ті шейдер тіліне автоматты түрде аудару үшін жауапкершілікті өз мойнына алады және оларды құрастырады;
Егер құрылғыда GPU болмаса, ол әдеттегі JavaScript қозғалтқышына оралуы мүмкін. Сондықтан, GPU пайдалану қолайсыздықтар.js. жоқ;
GPU.JS-ті параллель есептеу үшін де қолдануға болады. Сонымен қатар, сіз бір уақытта CPU-да да, GPU-де де бірнеше асинхронды есептеулер жүргізе аласыз.
Осының бәрін ескере отырып, GPU-ны пайдаланбауға ешқандай себеп жоқ.js. Сонымен, мұны қалай бастауға болатынын көрейік.

***

GPU қалай орнатуға болады.js?
GPU орнату.js кез-келген басқа JavaScript кітапханасын орнатуға ұқсас.

Node Үшін.жобаның js:

npm install gpu.js --save
--- немесе ---
yarn add gpu.js

const { GPU } = require('gpu.js')
--- немесе ---
import { GPU } from 'gpu.js'

const gpu = new GPU()
Браузер үшін:

GPU жүктеп алыңыз.js жергілікті немесе CDN қолданыңыз.

<script src="dist/gpu-browser.min.js"></script>
--- немесе ---
<script src="//unpkg.com/gpu.js@latest/dist/gpu- browser.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/gpu.js@latest/dist/gpu-browser.min.js"></script>

<script>
const gpu = new GPU()
...
</script>
Ескерту. Егер сіз Linux-ті қолдансаңыз, дұрыс файлдардың орнатылғанына көз жеткізуіңіз керек: sudo apt install mesa-common-dev libxi-dev

GPU орнату және импорттау туралы білуіңіз керек барлық нәрсе.js. Енді сіз GPU-ны қолданбада қолдана бастай аласыз.

Сонымен қатар, мен GPU-дің негізгі функциялары мен тұжырымдамаларын түсінуге кеңес беремін.js. Сонымен, бірнеше GPU негіздерінен бастайық.js.

***

Кеңес: bit-пен тәуелсіз компоненттерді жасаңыз және бөлісіңіз
Bit-бұл өздігінен жасалған, өңделген және қолдау көрсетілетін компоненттері бар шынымен модульдік қосымшаларды жасауға мүмкіндік беретін ультра кеңейтілетін құрал.

Оны модульдік қосымшалар мен дизайн жүйелерін құру, микро интерфейстерді құру және жеткізу немесе жай ғана қосымшалар арасында компоненттермен бөлісу үшін пайдаланыңыз.

Материалдық UI компоненттері Bit-те жеке қол жетімді.dev

***

Функцияны құру
GPU-де функцияларды анықтауға болады.жалпы JavaScript синтаксисін қолдана отырып, GPU-да іске қосу үшін js.

const exampleKernel = gpu.createKernel(function () {
...
}, settings);
Жоғарыда келтірілген код мысалы GPU функциясының негізгі құрылымын көрсетеді.js. Мен exampleKernel функциясын атадым. Көріп отырғаныңыздай, мен GPU көмегімен есептеулер жүргізетін createKernel әдісін қолдандым.

Шығару мөлшерін де анықтаңыз. Жоғарыдағы мысалда мен Шығыс өлшемін тағайындау үшін settings деп аталатын параметрді қолдандым.

const settings = {
output: [100]
};
Ядро функциясының шығуы бір өлшемді, екі өлшемді немесе үш өлшемді болуы мүмкін, яғни ол 3 ағынға дейін болуы мүмкін. Сіз бұл ағындарға осы команданың көмегімен қол жеткізе аласыз.thread.

1D: [ұзындығы] - мәні [осы.thread.x]
2D: [ені, биіктігі] - мәні [осы.thread.y] [this.thread.x]
3D: [ені, биіктігі, тереңдігі] – value [this.thread.z] [this.thread.y] [this.thread.x]
Соңында, жасалған функцияны, кез-келген басқа JavaScript функциясы сияқты, функция атауын қолдана отырып шақыруға болады: exampleKernel()

***

Ядродағы қолдау көрсетілетін айнымалылар
Сандар
GPU функциясында.js кез-келген бүтін санды немесе өзгермелі нүкте санын қолдана алады.
const exampleKernel = gpu.createKernel(function () {
const number1 = 10;
const number2 = 0.10;

return number1 + number2;
}, settings);

Булевые
GPU-де логикалық мәндер де сақталады.JS, JavaScript сияқты.
const kernel = gpu.createKernel(function () {
const bool = true;

if (bool) {
return 1;
} else {
return 0;
}
},settings);

Массивтер
Сіз kernel функцияларындағы кез-келген мөлшердегі сандық массивтерді анықтап, оларды қайтара аласыз.
const exampleKernel = gpu.createKernel(function () {
const array1 = [0.01, 1, 0.1, 10];
return array1;
}, settings);

Функциялар
Жеке функцияларды ядро функциясы ішінде пайдалану GPU-де де мүмкін.js.
const exampleKernel = gpu.createKernel(function () {
function privateFunction() {
return [0.01, 1, 0.1, 10];
}

return privateFunction();
}, settings);

***

Қолдау көрсетілетін кіріс түрлері
Жоғарыда аталған айнымалы түрлерден басқа, сіз kernel функцияларына бірнеше кіріс түрлерін жібере аласыз.

Сандар
Айнымалы декларацияға ұқсас, сіз бүтін сандарды немесе өзгермелі нүктелерді төменде көрсетілгендей кернель функциясына жібере аласыз.

const exampleKernel = gpu.createKernel(function (x) {
return x;
}, settings);

exampleKernel(25);

Сандардың бір өлшемді, екі өлшемді немесе үш өлшемді массивтері
Сіз array, Float32Array, Int16Array, Int8Array, Uint16Array, uInt8Array массивтерінің түрлерін ядро GPU-ға жібере аласыз.js.

const exampleKernel = gpu.createKernel(function (x) {
return x;
}, settings);

exampleKernel([1, 2, 3]);
Алдын ала тураланған екі өлшемді және үш өлшемді массивтер де ядро функциялары арқылы қабылданады. Бұл тәсіл жүктеуді едәуір жылдамдатады және ол үшін GPU енгізу опциясын пайдалану керек.js.

const { input } = require('gpu.js');

const value = input(flattenedArray, [width, height, depth]);

HTML суреттері
Суреттерді функцияларға беру-бұл GPU-да көруге болатын жаңа нәрсе.js дәстүрлі JavaScript-пен салыстырғанда. GPU көмегімен.js сіз бір немесе бірнеше HTML кескіндерін ядро функциясының массиві ретінде бере аласыз.

// Бір сурет
const kernel = gpu.createKernel(function (image) {
...
})
.setGraphical(true)
.setOutput([100, 100]);

const image = document.createElement('img');
image.src = 'image1.png';
image.onload = () => {
kernel(image);
document.getElementsByTagName('body')[0].appendChild(kernel.canvas);
};

// Бірнеше суреттер
const kernel = gpu.createKernel(function (image) {
const pixel = image[this.thread.z][this.thread.y][this.thread.x];
this.color(pixel[0], pixel[1], pixel[2], pixel[3]);
})
.setGraphical(true)
.setOutput([100, 100]);

const image1 = document.createElement('img');
image1.src = 'image1.png';
image1.onload = onload;
....
// Қосымша суреттер қосыңыз
....
const totalImages = 3;
let loadedImages = 0;
function onload () {
loadedImages++;
if (loadedImages === totalImages) {
kernel([image1, image2, image3]);
document.getElementsByTagName('body')[0].appendChild(kernel.canvas);
}
};
Жоғарыда келтірілген конфигурациялардан басқа, GPU-мен тәжірибе жасау үшін көптеген қызықты нәрселер бар.js. Сіз оларды құжаттамадан таба аласыз. Енді сіз бірнеше конфигурацияларды түсінгендіктен, GPU көмегімен функцияны жазайық.js және оның жұмысын салыстырыңыз.

***

GPU көмегімен бірінші функция.js
Біз бұрын талқылағанның бәрін біріктіре отырып, мен екі массивті 1000 элементке көбейту арқылы GPU және CPU есептеулерінің өнімділігін салыстыруға арналған Кішкентай Angular қосымшасын жаздым.

1-қадам-1000 элементтен тұратын сандық массивтерді құру функциясы
Мен әр элемент үшін 1000 саны бар 2D массивін жасап, оларды келесі қадамдарда есептеу үшін қолданамын.

generateMatrices() {
this.matrices = [[], []];
for (let y = 0; y < this.matrixSize; y++) {
this.matrices[0].push([])
this.matrices[1].push([])
for (let x = 0; x < this.matrixSize; x++) {
const value1 = parseInt((Math.random() * 10).toString())
const value2 = parseInt((Math.random() * 10).toString())
this.matrices[0][y].push(value1)
this.matrices[1][y].push(value2)
}
}
}
2-қадам-ядро функциясы
Бұл қолданбадағы ең маңызды функция, өйткені барлық GPU есептеулері оның ішінде жүреді. Мұнда multiplyMatrix функциясы кіріс ретінде екі сандық массив пен матрица өлшемін алады. Содан кейін ол екі массивті көбейтеді және Performance API көмегімен уақытты өлшеу арқылы жалпы соманы қайтарады.

gpuMultiplyMatrix() {
const gpu = new GPU();
const multiplyMatrix = gpu.createKernel(function (a: number[][], b: number[][], matrixSize: number) {
let sum = 0;

for (let i = 0; i < matrixSize; i++) {
sum += a[this.thread.y][i] * b[i][this.thread.x];
}

return sum;
}).setOutput([this.matrixSize, this.matrixSize])
const startTime = performance.now();
const resultMatrix = multiplyMatrix(this.matrices[0], this.matrices[1], this.matrixSize);

const endTime = performance.now();
this.gpuTime = (endTime - startTime) + " ms";

console.log("GPU TIME : "+ this.gpuTime);
this.gpuProduct = resultMatrix as number[][];
}
3-қадам-процессорды көбейту функциясы.
Бұл бірдей массивтер үшін есептеу уақытын өлшеу үшін қолданылатын дәстүрлі TypeScript функциясы.

cpuMutiplyMatrix() {
const startTime = performance.now();
const a = this.matrices[0];
const b = this.matrices[1];