Design: जेएस/डब्ल्यूएएसएम संदर्भ डेटा पास करने का सबसे प्रभावी तरीका

आपको यह तय करना होगा कि आप जावास्क्रिप्ट और WebAssembly के बीच डेटा कॉपी करना चाहते हैं, या आप चाहते हैं कि WebAssembly डेटा का मालिक हो।

यदि आप डेटा की प्रतिलिपि बनाना चाहते हैं, तो आप स्वयं for लूप लिखने के बजाय TypedArray.prototype.set() का उपयोग कर सकते हैं:

let instance = ...;
let myJSArray = new Float32Array(...);
let length = myJSArray.length;
let myWasmArrayPtr = instance.exports.allocateF32Array(length);
let myWasmArray = new Float32Array(instance.exports.memory.buffer, myWasmArrayPtr, length);

// Copy data in to be used by WebAssembly.
myWasmArray.set(myJSArray);

// Process the data in the array.
instance.exports.processF32Array(myWasmArrayPtr, length);

// Copy data out to JavaScript.
myJSArray.set(myWasmArray);

यदि WebAssembly के पास डेटा है, तो आप WebAssembly.Memory बफ़र पर एक दृश्य बना सकते हैं और उसे अपने JavaScript फ़ंक्शन में भी पास कर सकते हैं:

let instance = ...;
let length = ...;
let myArrayPtr = instance.exports.allocateF32Array(length);
let myArray = new Float32Array(instance.exports.memory.buffer, myArrayPtr, length);

// Use myArray as a normal Float32Array in JavaScript, fill in data, etc.
...

// Process the data in the array.
instance.exports.processF32Array(myArrayPtr, length);

// No need to copy data back to JavaScript, just use myArray directly.

इसे उपयोग में थोड़ा आसान बनाने के लिए आप एंबिंड जैसे टूल का भी उपयोग कर सकते हैं।

वाह, धन्यवाद @binji यह बहुत बढ़िया लग रहा है। यह वही है जो मैं ढूंढ रहा था। उदाहरण कोड लिखने के लिए समय निकालने के लिए भी धन्यवाद। ये बहुत मददगार भी है. मैं आज शाम इसे आज़माउंगा और लोडर इंप के लिए कुछ सुधारों का अनुरोध करूंगा। जो https://github.com/AssemblyScript/assemblyscript में WASM के साथ इंटरफेसिंग के लिए उपयोग में है :)

क्या आपको इसके बारे में webassembly.org पर डॉक्स को विस्तारित करने का विकल्प दिखाई देता है?

उदाहरण के लिए यहाँ:

https://webassembly.org/docs/web/

यदि संभव हो तो मैं ऐसा करने को तैयार हूं।

मुझे लगता है, इसे यहाँ समझाना भी एक अच्छा विचार होगा:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory

@binji ऑफ-टॉपिक, अगर आपको प्रोजेक्ट के बारे में पहले से जानकारी नहीं है तो आप https://github.com/torch2424/wasmBoy को पसंद कर सकते हैं। और यह प्रोजेक्ट आपके द्वारा प्रस्तावित समाधान के रूप में भी लाभान्वित हो सकता है, क्योंकि वे ROM मेमोरी को सेट करने के लिए फॉर-लूप का उपयोग करते हैं।

क्या आपको इसके बारे में webassembly.org पर डॉक्स को विस्तारित करने का विकल्प दिखाई देता है?

सहमत हैं कि हमें webassembly.org को इस बदलाव के साथ और भी बहुत कुछ अपडेट करना चाहिए। वहां के दस्तावेज़ अभी भी डिज़ाइन रेपो से हैं, लेकिन स्पेक रेपो अधिक हालिया और सटीक है।

MDN में कुछ उदाहरण जोड़ना शायद आसान और बेहतर होगा, क्योंकि webassembly.org की तुलना में कई और वेब डेवलपर उस साइट का उपयोग करेंगे।

ऑफ-टॉपिक, यदि आप पहले से ही प्रोजेक्ट के बारे में नहीं जानते हैं, तो आप https://github.com/torch2424/wasmBoy को पसंद कर सकते हैं।

हां, मैं @torch2424 जानता हूं। :-) मेरे पास अपना स्वयं का वास-आधारित गेमबॉय एमुलेटर भी है: https://github.com/binji/binjgb

MDN में कुछ उदाहरण जोड़ना शायद आसान और बेहतर होगा, क्योंकि webassembly.org की तुलना में कई और वेब डेवलपर उस साइट का उपयोग करेंगे।

ठीक है, मैं आज रात एक अपडेट पोस्ट करूंगा। देखते हैं क्या यह प्रकाशित होता है।

हां, मैं @torch2424 जानता हूं। :-) मेरे पास अपना स्वयं का वास-आधारित गेमबॉय एमुलेटर भी है: https://github.com/binji/binjgb

ह हा बढिया! मैं डीईएफ़ करूँगा। इसे आज़माएं :) मैं शर्त लगाता हूं कि आपका एमुलेटर ज़ेल्डा में दुर्घटनाग्रस्त नहीं होता है - लिंक की जागृति जब आपको तलवार मिलती है (समुद्र तट पर);))

मुझे आशा है कि wasmBoy में भी दुर्घटना को ठीक करने के लिए कुछ समय मिलेगा :)

अरे! रेड जो आपको मिला वोमबॉय! हाँ, @binji का एमुलेटर निश्चित रूप से अधिक सटीक हाहा है! कुछ निश्चित रूप से मुझे काम करने की ज़रूरत है। लेकिन, विडंबना यह है कि मैं हर समय हाहा का परीक्षण करने के लिए लिंक के जागरण का उपयोग करता हूं! मुझे आश्चर्य है कि यह आप पर दुर्घटनाग्रस्त हो गया।

फीडबैक के आधार पर कुछ बग खोले:
https://github.com/torch2424/wasmBoy/issues/141 - मेमोरी पासिंग
https://github.com/torch2424/wasmBoy/issues/142 - ज़ेल्डा क्रैश (स्क्रीनशॉट के साथ यह मेरे लिए काम करता है)

वैसे भी, मैं बातचीत/मुद्दे को पटरी से नहीं उतारना चाहता, मैं उन मुद्दों पर आगे बढ़ूंगा जिन्हें मैंने खोला था। लेकिन प्रतिक्रिया के लिए धन्यवाद! मैं

यदि WebAssembly के पास डेटा है, तो आप WebAssembly.Memory बफ़र पर एक दृश्य बना सकते हैं और उसे अपने JavaScript फ़ंक्शंस में भी पास कर सकते हैं:

एक महत्वपूर्ण चेतावनी: यदि WebAssembly इंस्टेंस इसकी मेमोरी बढ़ाता है, तो मेमोरी बफर में दृश्य अमान्य हो जाएगा। उस दृश्य के किसी भी संदर्भ को संग्रहीत करने से बचें जो पिछले कॉल को WebAssembly उदाहरण में जारी रखता है।

@binji क्या आप मुझे बता सकते हैं कि जब आप इसका इस्तेमाल करते हैं तो आप

let myWasmArrayPtr = instance.exports.allocateF32Array(length);

मैं निम्नानुसार लिखता हूं और यह काम करता है, लेकिन मैं अभी भी जानना चाहता हूं कि यह सही तरीके से है या नहीं।

export function allocateF32Array(length: usize): usize {
    return memory.allocate(length * sizeof<f32>());
}

क्या मुझे इसे memory.free() से मुक्त करने के लिए एक और AS फ़ंक्शन लिखने की आवश्यकता है, और सरणी को JS पक्ष में स्थानांतरित करने के बाद इसे कॉल करें?

@fmkang तो @binji ने जो समझाया वह JS की तरफ था (अगर मैं गलत हूं तो कृपया मुझे सुधारें)।

टाइप किए गए एरेज़ का उपयोग करके, आप वासम ऐरे बफर के साथ सेट () का उपयोग करके जेएस की ओर से WASM मेमोरी में कुशल लेखन कर सकते हैं।

Wasm/AS के अंदर से Wasm मेमोरी को लिखना, मैं अभी भी लूप दृष्टिकोण के लिए मानक का उपयोग कर रहा हूं, जैसे: https://github.com/torch2424/wasmBoy/blob/master/core/memory/dma.ts#L29

हालांकि, शायद @MaxGraey या @dcodeIO शायद यह मदद कर सकता है कि AS या Wasm भूमि के अंदर से इसे सबसे अधिक कुशलता से कैसे किया जाए? 😄 हालांकि हम इसे एएस रेपो में ले जाने से बेहतर हो सकते हैं

@fmkang आप बस करेंगे

export function allocateF32Array(length: i32): Float32Array {
  return new Float32Array(length);
}

एएस की तरफ और

let myArray = module.getArray(Float32Array, module.allocateF32Array(length));

जेएस पक्ष पर, लोडर का उपयोग

@torch2424 हां, @binji का कोड JS की तरफ है, लेकिन let myWasmArrayPtr = instance.exports.allocateF32Array(length) Wasm मॉड्यूल में allocateF32Array नाम के फंक्शन को कॉल कर रहा है (संभवतः असेंबलस्क्रिप्ट द्वारा संकलित)। इस फ़ंक्शन का उल्लेख उनके स्निपेट में नहीं किया गया है और न ही एएस बिल्ट-इन फ़ंक्शंस का हिस्सा है, इसलिए मुझे लगता है कि इसे स्वयं लागू किया जाना चाहिए। मैं पूछ रहा हूं कि इस पॉइंटर को कैसे प्राप्त किया जाए, जो संबंधित वासम सरणी की ओर इशारा करता है।

@dcodeIO धन्यवाद। ऐसा लगता है कि यह गुजरने वाले सरणी को सरल बनाता है। यहां कोई भी नई टिप्पणी पोस्ट करने से पहले मैं इसका सावधानीपूर्वक प्रयोग करूंगा। लेकिन मेरे फ़ंक्शन को आपके साथ बदलने के बाद लोड होने पर मेरा मॉड्यूल क्रैश हो जाता है। कंसोल कहता है

astest.html:1 Uncaught (in promise) TypeError: WebAssembly Instantiation: Import #0 module="env" error: module is not an object or function

अगर मैं अपने एएस कोड में कहीं भी let a = new Float32Array(10); जैसा कुछ लिखता हूं तो यह भी दुर्घटनाग्रस्त हो जाता है।

@dcodeIO Wasm मॉड्यूल क्रैश हो जाता है जब हम अभिव्यक्तियों के साथ एक सरणी प्रारंभ करने का प्रयास कर रहे थे (शाब्दिक के बजाय, जैसे let c: f64[] = [a[0] + b[0], a[1] + b[1]]; ) या किसी सरणी के तत्वों को मान असाइन करें (जैसे let a: f64[] = [0, 0, 0]; a[0] = 1; या let array = new Array<i32>(); array.push(1); )।

सबसे पहले, हमने सोचा कि ऐसा इसलिए है क्योंकि हमने memory को env नहीं डाला है, इसलिए हमने लिखा:

var importObject = {
    env: { memory: new WebAssembly.Memory({initial:10}) },
    imports: { imported_func: arg => console.log(arg) }
};
WebAssembly.instantiate(wasmBinary, importObject).then(...);

लेकिन समस्या अभी भी मौजूद थी। तब हमने पाया कि यह abort की कमी के कारण है। हमने लिखा:

env: {
    abort(msg, file, line, column) {
        console.error("abort called at main.ts:" + line + ":" + column);
    }
}

या बस env: { abort: function(){} } , और समस्या हल हो गई। हालांकि, कोई त्रुटि संदेश नहीं है, और कोड का निष्पादन वास्तव में "निरस्त" नहीं हुआ। हम अभी भी इस समस्या का वास्तविक कारण नहीं जानते हैं।

हम वास्तव में WebAssembly में नए हैं। मैं यह पोस्ट सिर्फ अपडेट देने के लिए लिख रहा हूं। आपको वास्तव में उत्तर देने की आवश्यकता नहीं है।

@fmkang ऐसा प्रतीत होता है कि आप मॉड्यूल को तुरंत चालू करने के लिए लोडर का उपयोग नहीं कर रहे हैं। जबकि आप यह सब स्वयं लागू कर सकते हैं, लोडर पहले से ही एक मॉड्यूल के निर्यात के आसपास बुनियादी कार्यक्षमता जोड़ता है, जैसे निरस्त कार्य। यदि आपके पास असेंबलीस्क्रिप्ट के बारे में कोई और प्रश्न हैं, तो बेझिझक हमारे इश्यू ट्रैकर पर पूछें और हमें मदद करने में खुशी होगी :)

तो, मैंने इस तकनीक का उपयोग करने की कोशिश की है:

let myArrayPtr = instance.exports.allocateF32Array(length);
let myArray = new Float32Array(instance.exports.memory.buffer, myArrayPtr, length);

// Use myArray as a normal Float32Array in JavaScript, fill in data, etc.
...

// Process the data in the array.
instance.exports.processF32Array(myArrayPtr, length);

लेकिन मेरी प्रक्रियाF32Array फ़ंक्शन का परिणाम RuntimeError: memory access out of bounds । मैं लोडर, एफडब्ल्यूआईडब्ल्यू का उपयोग नहीं कर रहा हूं। मैंने भी कोशिश की है:

let myArray = module.getArray(Float32Array, module.allocateF32Array(length));

लेकिन मेरे मॉड्यूल में "getArray" नहीं है, और मुझे यकीन नहीं है कि इसे कैसे प्राप्त करना चाहिए।

मैं देख रहा था कि WebAssembly से सरणियों को कैसे कॉपी किया जाए और इस धागे में आया। किसी और के लिए, मैं का उपयोग करने पर सरणियों नकल करने में सक्षम था AssemblyScript और @ torch2424 के पुस्तकालय के रूप में बाँध

यहाँ मेरा सरल परीक्षण है:

असेंबली स्क्रिप्ट

export function sum(arr: Float64Array): f64 {
  let sum: f64 = 0;
  for(let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

जावास्क्रिप्ट (नोड)

const { AsBind } = require("as-bind");
const fs = require("fs");
const wasm = fs.readFileSync(__dirname + "/build/optimized.wasm");

const asyncTask = async () => {
  const asb = await AsBind.instantiate(wasm);

  // Make a large array
  console.time('Making array');
  let arr = new Float64Array(1e8).fill(1);
  console.timeEnd('Making array');

  // Find the sum using reduce
  console.time('Reduce');
  let sum1 = arr.reduce((acc, val) => acc + val, 0);
  console.timeEnd('Reduce');

  // Find the sum with for loops
  console.time('JS For');
  let sum2 = 0;
  for(let i = 0; i < arr.length; i++) sum2 += arr[i];
  console.timeEnd('JS For');

  // Find the sum with WebAssembly
  console.time('Wasm For');
  let sum3 = asb.exports.sum(arr);
  console.timeEnd('Wasm For');

  console.log(sum1, sum2, sum3);
};

asyncTask();

मेरी मशीन पर, मुझे निम्न आउटपुट मिला:

Making array: 789.086ms
Reduce: 2452.922ms
JS For: 184.818ms
Wasm For: 2008.482ms
100000000 100000000 100000000

ऐसा लगता है कि इस विधि के साथ WebAssembly पर सरणी की प्रतिलिपि बनाते समय ओवरहेड का एक अच्छा सा हिस्सा है, हालांकि मैं कल्पना कर सकता हूं कि ट्रेडऑफ एक योग से अधिक महंगे ऑपरेशन के लिए इसके लायक होगा।

संपादित करें:

मैंने केवल सरणी प्रतिलिपि के चलने के समय को अलग करने के लिए असेंबलीस्क्रिप्ट से सारांश हटा दिया:

export function sum(arr: Float64Array): f64 {
  let sum: f64 = 0;
  return sum;
}

और मैं बेंचमार्क को फिर से चलाता हूं।

वासम योग के बिना

Making array: 599.826ms
Reduce: 2810.395ms
JS For: 188.623ms
Wasm For: 762.481ms
100000000 100000000 0

तो ऐसा लगता है कि डेटा कॉपी को 100 मिलियन f64 s से अधिक कॉपी करने में 762.481ms का समय लगा।

@pwstegman मैंने एक और बेंचमार्क बनाया जो यादृच्छिक इनपुट डेटा का उपयोग करता है और जेएस इंजन को आपके लूप को ऑप्टिमाइज़ करने से रोकता है: https://webassembly.studio/?f=5ux4ymi345e

और परिणाम क्रोम और एफएफ के लिए भिन्न हैं:

Chrome 81.0.4044.129

js sum: 129.968017578125ms
sum result = 49996811.62100115

js reduce: 1436.532958984375ms
js reduce result = 49996811.62100115

wasm sum: 153.000244140625ms
wasm sum result = 49996811.62100115

wasm reduce: 125.009033203125ms
wasm reduce result = 49996811.62100115

wasm empty: 0.002685546875ms

नमस्ते।
मैं मूल रूप से WASM के साथ परिचित होने के संबंध में एक नवजात हूं, और मैं यहां और # 1162 में लोगों के समान समस्या पर ठोकर खाई। (मैं यहां बनाम #1162 पूछ रहा हूं क्योंकि इसमें हाल ही की गतिविधि है।)
संक्षिप्त शोध के बाद मैंने इसे समझने की कोशिश करते हुए एक डेमो बनाया, और एक विधि के साथ समाप्त हुआ जहां आप डेटा को अंदर और बाहर कॉपी करने से बचने के लिए टाइप किए गए सरणी के रूप में डब्ल्यूएएसएम मेमोरी में विचारों को उजागर करते हैं, यहां जेएस के दृष्टिकोण से इसका सार है :

// need to know the size in advance, that's OK since the impl makes some init 
const fft = new Module.KissFftReal(/*size=*/N);depending on the size anyway

// get view into WASM memory as Float64Array (of size=N in this case)
const input = fft.getInputTimeDataBuffer();

// fill 'input' buffer

// perform transformation, view into WASM memory is returned here (of size=(N + 2) in this case, +2 for Nyquist bin)
const output = fft.transform();

// use transformation result returned in 'output' buffer

क्या यह जाने का रास्ता है? क्या कोई बेहतर उपाय है? इस विषय पर किसी भी टिप्पणी/पुनश्चर्या की सराहना करेंगे।

पीएस हालांकि थोड़े बदसूरत यह अभ्यास में मेरे लिए शानदार काम करता है (जहां तक ​​​​मैं इसे समझ सकता हूं और इसकी सराहना करता हूं)