Computer Programming Calling WebAssembly from JavaScript (জাভাস্ক্রিপ্ট থেকে WebAssembly কল করা) গাইড ও নোট

Calling WebAssembly from JavaScript (জাভাস্ক্রিপ্ট থেকে WebAssembly কল করা)

WebAssembly (WASM) ব্রাউজারের স্যান্ডবক্স পরিবেশে দ্রুত এবং কার্যকরী কোড রান করার জন্য ব্যবহৃত হয়। JavaScript থেকে WebAssembly কোড কল করার মাধ্যমে আপনি ওয়েব অ্যাপ্লিকেশনগুলিতে উচ্চ পারফরম্যান্সের গাণিতিক এবং অন্যান্য জটিল কাজ করতে পারেন। এখানে আমরা WebAssembly কে JavaScript থেকে কল করার প্রক্রিয়া, বিভিন্ন উদাহরণ এবং গুরুত্বপূর্ণ ধাপগুলো আলোচনা করব।

WebAssembly মডিউল থেকে ফাংশন কল করা

WebAssembly মডিউল সাধারণত একটি .wasm ফাইল আকারে থাকে, এবং JavaScript ব্যবহার করে সেটি ইনস্ট্যানশিয়েট এবং এক্সিকিউট করা হয়। এরপর, JavaScript কোড WebAssembly মডিউল থেকে এক্সপোর্ট করা ফাংশনগুলো কল করতে পারে এবং WebAssembly এর ডেটা প্রসেসিং এর ফলাফল পেতে পারে।

1. WebAssembly মডিউল ইনস্ট্যানশিয়েট করা

WebAssembly মডিউল ইনস্ট্যানশিয়েট করার জন্য প্রথমে JavaScript ফাইলটি লোড করতে হবে, তারপর সেটি ওয়েব অ্যাসেম্বলি কোডের সাথে যুক্ত করতে হবে। এটি সাধারণত WebAssembly.instantiate() বা WebAssembly.instantiateStreaming() এর মাধ্যমে করা হয়।

1.1 .wasm ফাইল লোড এবং এক্সিকিউট করা

// WebAssembly ফাইল লোড করা
fetch('your_program.wasm')
  .then(response => response.arrayBuffer())  // ফাইলটি ArrayBuffer আকারে রিড করা
  .then(bytes => WebAssembly.instantiate(bytes))  // WebAssembly মডিউল ইনস্ট্যানশিয়েট করা
  .then(wasmModule => {
      const { instance } = wasmModule;

      // WebAssembly মডিউল থেকে এক্সপোর্ট করা ফাংশন কল করা
      const result = instance.exports.yourFunction(5, 3);  // 5 এবং 3 প্যারামিটার হিসেবে পাঠানো হচ্ছে
      console.log('Result from WASM:', result);  // আউটপুট দেখানো হবে
  })
  .catch(console.error);

এখানে, your_program.wasm WebAssembly ফাইলটি লোড করা হচ্ছে, তারপর yourFunction(5, 3) কল করা হচ্ছে যা WebAssembly মডিউল থেকে এক্সপোর্ট করা ফাংশন। এই ফাংশনটি JavaScript থেকে প্যারামিটার হিসেবে ডেটা গ্রহণ করে এবং তার ফলাফল ফিরিয়ে দেয়।

WebAssembly মডিউলে ফাংশন এক্সপোর্ট এবং JavaScript থেকে কল করা

WebAssembly মডিউল ফাংশন এক্সপোর্ট করার জন্য (export) কীওয়ার্ড ব্যবহার করা হয়। এটির মাধ্যমে JavaScript এই ফাংশনটি কল করতে পারে।

2. WebAssembly মডিউল (WASM) - ফাংশন এক্সপোর্ট

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add)  ;; দুটি পূর্ণসংখ্যা যোগ করার ফাংশন
  
  (export "add" (func $add))  ;; add ফাংশন এক্সপোর্ট
)

এখানে, add নামক একটি ফাংশন দুটি পূর্ণসংখ্যা প্যারামিটার গ্রহণ করে এবং তাদের যোগফল প্রদান করে। WebAssembly মডিউল থেকে এটি এক্সপোর্ট করা হয়েছে, যাতে JavaScript এটি ব্যবহার করতে পারে।

2.1 JavaScript থেকে ফাংশন কল করা

fetch('add_program.wasm')  // WebAssembly ফাইল লোড করা
  .then(response => response.arrayBuffer())  // ArrayBuffer আকারে ফাইল রিড করা
  .then(bytes => WebAssembly.instantiate(bytes))  // WebAssembly ইনস্ট্যানশিয়েট করা
  .then(wasmModule => {
      const { instance } = wasmModule;

      // WebAssembly মডিউল থেকে add ফাংশন কল করা
      const result = instance.exports.add(10, 5);  // 10 এবং 5 প্যারামিটার পাস করা
      console.log('Addition result from WASM:', result);  // আউটপুট হবে 15
  })
  .catch(console.error);

এখানে, instance.exports.add(10, 5) ফাংশনটি WebAssembly মডিউল থেকে এক্সপোর্ট করা add ফাংশনকে কল করে এবং দুটি পূর্ণসংখ্যা যোগ করে তার ফলাফল JavaScript এ আউটপুট হিসাবে দেয়।

Memory Buffer এবং Data Sharing

WebAssembly মডিউল মেমরি বাফার এক্সপোর্ট করতে পারে, যার মাধ্যমে JavaScript এবং WebAssembly এর মধ্যে ডেটা শেয়ার করা যায়। এই মেমরি বাফারটি সাধারণত Uint8Array বা Int32Array হিসেবে অ্যাক্সেস করা হয় এবং এটি WebAssembly কোডে ডেটা স্টোর এবং রিট্রিভ করার জন্য ব্যবহৃত হয়।

3. WebAssembly মেমরি বাফার এক্সপোর্ট

(module
  (memory 1)
  (export "memory" (memory 0))

  (func $writeMemory (param $ptr i32) (param $value i32)
    local.get $ptr
    local.get $value
    i32.store
  )

  (export "writeMemory" (func $writeMemory))
)

এখানে, writeMemory ফাংশনটি একটি পয়েন্টার এবং একটি মান প্যারামিটার হিসেবে গ্রহণ করে এবং নির্দিষ্ট মেমরি অবস্থানে সেই মানটি স্টোর করে।

3.1 JavaScript থেকে মেমরি বাফার অ্যাক্সেস

fetch('memory_program.wasm')  // WebAssembly ফাইল লোড করা
  .then(response => response.arrayBuffer())  // ফাইল রিড করা
  .then(bytes => WebAssembly.instantiate(bytes))  // মডিউল ইনস্ট্যানশিয়েট করা
  .then(wasmModule => {
      const { instance } = wasmModule;

      // WebAssembly মেমরি বাফার এক্সপোর্ট করা
      const memory = new Int32Array(instance.exports.memory.buffer);

      // মেমরির প্রথম সেলে ডেটা লেখা
      instance.exports.writeMemory(0, 100);  // পয়েন্টার 0 তে 100 লেখো

      // মেমরি থেকে ডেটা রিড করা
      console.log('Memory at position 0:', memory[0]);  // আউটপুট হবে 100
  })
  .catch(console.error);

এখানে, writeMemory(0, 100) WebAssembly ফাংশনটি মেমরির প্রথম সেলে 100 লিখছে, এবং তারপর memory[0] দিয়ে সেই মানটি JavaScript তে এক্সপোর্ট করা হচ্ছে।

WebAssembly এবং JavaScript এর মধ্যে Data Sharing

WebAssembly মডিউল থেকে ডেটা পাঠানোর জন্য মেমরি বাফার ব্যবহার করা হয়। এটি JavaScript তে প্রসেস করা ডেটা সংগ্রহ করে, তারপর WebAssembly মডিউল থেকে সেই ডেটা শেয়ার করা হয়।

4. JavaScript to WebAssembly Data Passing (Complex Data)

fetch('complex_program.wasm')  // WebAssembly ফাইল লোড করা
  .then(response => response.arrayBuffer())  // ফাইল রিড করা
  .then(bytes => WebAssembly.instantiate(bytes))  // ইনস্ট্যানশিয়েট করা
  .then(wasmModule => {
      const { instance } = wasmModule;

      // WebAssembly মেমরি এক্সপোর্ট করা
      const memory = new Int32Array(instance.exports.memory.buffer);

      // একটি অ্যারে ডেটা তৈরি করা
      const data = new Int32Array([1, 2, 3, 4, 5]);

      // মেমরিতে ডেটা কপি করা
      memory.set(data, 0);  // মেমরির প্রথম 5টি সেলে ডেটা কপি করা

      // WebAssembly ফাংশন কল করা
      instance.exports.processArray(0, data.length);

      // মেমরি থেকে প্রসেস করা ডেটা বের করা
      console.log('Processed Data:', memory.slice(0, data.length));
  })
  .catch(console.error);

এখানে, JavaScript WebAssembly মডিউলে একটি অ্যারে পাস করছে এবং processArray ফাংশন কল করে সেই ডেটা প্রসেস করছে।

Summary

• WebAssembly Functions: WebAssembly মডিউল থেকে ফাংশন এক্সপোর্ট করে JavaScript তে কল করা যায়, এবং JavaScript প্যারামিটার হিসেবে ডেটা পাঠিয়ে WebAssembly কোডের মাধ্যমে ডেটা প্রসেস করতে পারে।
• Memory Buffer: WebAssembly মেমরি বাফার ব্যবহার করে JavaScript এবং WebAssembly এর মধ্যে ডেটা শেয়ার করা যায়। WebAssembly কোড মেমরিতে ডেটা স্টোর করতে পারে এবং JavaScript সেই ডেটা রিট্রিভ করতে পারে।
• Data Sharing: JavaScript থেকে WebAssembly তে জ

টিল ডেটা (যেমন অ্যারে) পাঠানো এবং প্রসেসিং করা সম্ভব, এবং ফলাফল JavaScript এ ফেরত পাঠানো যায়।

JavaScript এবং WebAssembly একে অপরের সাথে কাজ করে ওয়েব অ্যাপ্লিকেশনগুলিতে উচ্চ পারফরম্যান্সের কোড এক্সিকিউশন এবং ডেটা প্রসেসিংকে সম্ভব করে তোলে।

JavaScript থেকে WebAssembly মডিউল লোড করা

WebAssembly (WASM) কোডটি JavaScript থেকে লোড করা এবং এক্সিকিউট করা একটি সাধারণ প্রক্রিয়া, যা ব্রাউজারে JavaScript এবং WebAssembly একে অপরের সাথে ইন্টারঅ্যাক্ট করতে সক্ষম করে। WebAssembly মডিউল লোড করার জন্য JavaScript এ WebAssembly.instantiate() বা WebAssembly.instantiateStreaming() API ব্যবহার করা হয়।

এখানে আমরা বিস্তারিতভাবে দেখব কিভাবে JavaScript থেকে WebAssembly মডিউল লোড করা যায়।

1. WebAssembly মডিউল লোড করার প্রক্রিয়া

1.1 WebAssembly.instantiate()

WebAssembly.instantiate() ব্যবহার করে WebAssembly মডিউল লোড এবং এক্সিকিউট করা হয়। এই পদ্ধতিটি প্রথমে WebAssembly ফাইল (যেমন .wasm) একটি ArrayBuffer হিসেবে লোড করে, তারপর সেটি WebAssembly.Module এ রূপান্তর করে, এবং তারপর তা এক্সপোর্ট করা হয়।

// WebAssembly মডিউল লোড করার উদাহরণ
fetch('your_module.wasm')  // WebAssembly ফাইল লোড করা
    .then(response => response.arrayBuffer())  // ফাইলটিকে ArrayBuffer তে রূপান্তর করা
    .then(bytes => WebAssembly.instantiate(bytes))  // WebAssembly মডিউল ইনস্ট্যানশিয়েট করা
    .then(wasmModule => {
        console.log(wasmModule);  // WebAssembly মডিউলটি কনসোলে দেখানো হবে
        // মডিউল থেকে এক্সপোর্ট করা ফাংশনগুলি ব্যবহার করা
        const add = wasmModule.instance.exports.add;  // WebAssembly থেকে এক্সপোর্ট করা ফাংশন
        console.log(add(10, 20));  // WebAssembly ফাংশন কল
    })
    .catch(console.error);  // ত্রুটি হলে কনসোলে দেখানো হবে

ব্যাখ্যা:

• fetch(): প্রথমে fetch() API দিয়ে your_module.wasm ফাইলটি লোড করা হয়।
• response.arrayBuffer(): লোড করা ফাইলটি ArrayBuffer তে রূপান্তর করা হয়, যা WebAssembly মডিউল লোড করতে সক্ষম।
• WebAssembly.instantiate(): এরপর WebAssembly.instantiate() ফাংশন দিয়ে এই ArrayBuffer থেকে WebAssembly মডিউল তৈরি করা হয়।
• wasmModule.instance.exports: এক্সপোর্ট করা ফাংশন বা ডেটা অ্যাক্সেস করার জন্য exports ব্যবহার করা হয়।

1.2 WebAssembly.instantiateStreaming()

WebAssembly.instantiateStreaming() ফাংশনটি WebAssembly মডিউলটি লোড করার জন্য একটি অপটিমাইজড পদ্ধতি, যেখানে ফাইলটি ডাউনলোড করার সাথে সাথে তা ইনস্ট্যানশিয়েট (instantiate) করা হয়। এটি দ্রুত এবং কার্যকরী কারণ এটি WebAssembly ফাইলটি ডাউনলোড করার সাথে সাথে ইন্সট্যানশিয়েশন প্রক্রিয়া শুরু করে।

// WebAssembly.instantiateStreaming() ব্যবহার করার উদাহরণ
WebAssembly.instantiateStreaming(fetch('your_module.wasm'))
    .then(wasmModule => {
        console.log(wasmModule);  // WebAssembly মডিউলটি কনসোলে দেখানো হবে
        const multiply = wasmModule.instance.exports.multiply;  // WebAssembly থেকে এক্সপোর্ট করা ফাংশন
        console.log(multiply(5, 4));  // WebAssembly ফাংশন কল
    })
    .catch(console.error);  // ত্রুটি হলে কনসোলে দেখানো হবে

ব্যাখ্যা:

• WebAssembly.instantiateStreaming(): এটি ফাইল ডাউনলোড করার সাথে সাথে ইনস্ট্যানশিয়েট করে এবং এটি সাধারণত fetch() API ব্যবহার করে WebAssembly ফাইল লোড করে।
• এই পদ্ধতিটি response.arrayBuffer() এর চেয়ে দ্রুত, কারণ এটি ডাউনলোড এবং ইন্সট্যানশিয়েশন একসাথে করে।

2. WebAssembly মডিউল থেকে ফাংশন এক্সপোর্ট এবং কল করা

WebAssembly মডিউল এক্সপোর্ট করা ফাংশন JavaScript এ কল করা যেতে পারে। মডিউল থেকে ফাংশন এক্সপোর্ট করার জন্য, আপনাকে WebAssembly কোডে সেই ফাংশনগুলো ডিফাইন করতে হবে এবং তারপর JavaScript এ সেগুলো কল করতে হবে।

2.1 WebAssembly কোড (C)

ধরা যাক, আপনার WebAssembly মডিউলে একটি add ফাংশন রয়েছে, যা দুটি সংখ্যার যোগফল প্রদান করবে:

// WebAssembly C কোড
#include <stdio.h>

int add(int a, int b) {
    return a + b;
}

এই C কোডটিকে Emscripten ব্যবহার করে .wasm ফাইল তৈরি করতে হবে:

emcc your_file.c -o your_module.wasm

2.2 JavaScript কোড দিয়ে ফাংশন কল

JavaScript কোডে WebAssembly মডিউলটি লোড করার পর, আপনি এক্সপোর্ট করা ফাংশন কল করতে পারবেন:

fetch('your_module.wasm')
    .then(response => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes))
    .then(wasmModule => {
        // add() ফাংশন কল করা
        const addFromWasm = wasmModule.instance.exports.add;
        console.log(addFromWasm(5, 10));  // WebAssembly থেকে ফাংশন কল এবং আউটপুট দেখানো
    })
    .catch(console.error);

এখানে, addFromWasm(5, 10) ফাংশনটি WebAssembly মডিউল থেকে এক্সপোর্ট করা add ফাংশনকে কল করছে।

3. WebAssembly ফাংশন Import করা JavaScript থেকে

আপনি JavaScript কোডের ফাংশনও WebAssembly মডিউলে import করতে পারেন। এজন্য আপনাকে WebAssembly.instantiate() বা WebAssembly.instantiateStreaming() ফাংশনের দ্বিতীয় আর্গুমেন্টে imports প্রদান করতে হবে।

3.1 JavaScript থেকে WebAssembly মডিউলে ফাংশন Import করা

// JavaScript ফাংশন
function multiply(a, b) {
    return a * b;
}

fetch('your_module.wasm')
    .then(response => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes, {
        env: {
            multiply: multiply // JavaScript ফাংশন WebAssembly এ ইম্পোর্ট করা
        }
    }))
    .then(wasmModule => {
        const result = wasmModule.instance.exports.multiply(5, 10);
        console.log(result);  // WebAssembly ফাংশন কল
    })
    .catch(console.error);

এখানে, multiply ফাংশনটি JavaScript থেকে WebAssembly মডিউলে ইম্পোর্ট করা হয়েছে এবং তারপর WebAssembly মডিউল থেকে multiply ফাংশন কল করা হয়েছে।

সারসংক্ষেপ

• WebAssembly.instantiate(): এটি একটি WebAssembly মডিউল লোড এবং ইনস্ট্যানশিয়েট করতে ব্যবহৃত হয়। এটি মডিউলকে একটি ArrayBuffer থেকে তৈরি করে এবং এক্সপোর্ট করা ফাংশনগুলি ব্যবহার করার সুযোগ দেয়।
• WebAssembly.instantiateStreaming(): এটি দ্রুত এবং কার্যকরী উপায়ে WebAssembly মডিউল লোড এবং ইনস্ট্যানশিয়েট করে, কারণ এটি ডাউনলোড এবং ইনস্ট্যানশিয়েশন একসাথে করে।
• WebAssembly থেকে JavaScript ফাংশন এক্সপোর্ট এবং JavaScript থেকে WebAssembly ফাংশন ইম্পোর্ট করার মাধ্যমে JavaScript এবং WebAssembly একে অপরের সাথে ইন্টারঅ্যাক্ট করতে সক্ষম হয়।

WebAssembly Instance তৈরি এবং ব্যবহার

WebAssembly Instance হলো একটি WebAssembly মডিউলের কার্যকরী এক্সিকিউশন ইউনিট যা মেমোরি, ফাংশন, এবং ডাটা এক্সপোর্ট করে। WebAssembly.instantiate ব্যবহার করে মডিউলটিকে রান করার জন্য একটি instance তৈরি করা হয়, যা নির্দিষ্ট মেমোরি এবং ইমপোর্ট অবজেক্টগুলির সাথে যুক্ত থাকে।

WebAssembly instance তৈরি করার মাধ্যমে, আপনি মডিউলটির কার্যকারিতা ব্রাউজারে রান করাতে এবং বাইরের কোডের সাথে যোগাযোগ করতে পারেন। WebAssembly instance এর মধ্যে মডিউলটির ফাংশনগুলো কল করা যেতে পারে, এবং এর মধ্যে থাকা মেমোরি বা অন্যান্য রিসোর্সগুলো এক্সেস করা সম্ভব হয়।

1. WebAssembly Instance তৈরি করা

WebAssembly instance তৈরি করতে, প্রথমে আপনাকে WebAssembly মডিউল লোড এবং ইনস্ট্যানশিয়েট করতে হয়। JavaScript এ এই প্রক্রিয়া করার জন্য WebAssembly.instantiate মেথড ব্যবহৃত হয়। এটি একটি মডিউল বা বাইটকোড গ্রহণ করে এবং একটি instance তৈরি করে যা WebAssembly ফাংশন এবং ডাটা এক্সপোর্ট করে।

উদাহরণ: WebAssembly মডিউল লোড এবং Instance তৈরি করা

const importObject = {
  env: {
    log: (msg) => console.log(msg) // বাইরের JavaScript ফাংশন ইমপোর্ট
  }
};

fetch('your_wasm_module.wasm') // WASM ফাইলটি লোড করা
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes, importObject)) // WASM মডিউল ইনস্ট্যানশিয়েট করা
  .then(wasmModule => {
    // ওয়েব অ্যাসেম্বলি ইনস্ট্যান্স থেকে এক্সপোর্ট করা ফাংশন কল করা
    const { add } = wasmModule.instance.exports;
    const result = add(5, 7); // 5 + 7 করবে
    console.log("Result from WebAssembly:", result); // 12 আউটপুট
  })
  .catch(console.error);

এখানে:

• fetch দিয়ে WASM ফাইলটি লোড করা হচ্ছে।
• WebAssembly.instantiate মেথড দিয়ে মডিউলটি ইনস্ট্যানশিয়েট করা হচ্ছে এবং importObject প্যারামিটার হিসেবে বাইরের ফাংশন (যেমন log) দেয়া হচ্ছে।
• wasmModule.instance.exports এর মাধ্যমে WASM ফাংশন add এক্সপোর্ট করা হচ্ছে এবং কল করা হচ্ছে।

2. WebAssembly Instance এর উপাদান

2.1 Exports

WebAssembly মডিউলে ডিফাইন করা ফাংশন এবং ডাটা বাইরের কোডের জন্য export করা হয়। এগুলি ইনস্ট্যান্স থেকে এক্সপোর্ট করা হয় এবং আপনি JavaScript থেকে সেগুলির অ্যাক্সেস পেতে পারেন।

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    (i32.add
      (local.get $a)
      (local.get $b)
    )
  )
  (export "add" (func $add))
)

এখানে add ফাংশনটি এক্সপোর্ট করা হয়েছে, যা বাইরের কোডে ব্যবহৃত হতে পারে।

2.2 Imports

WebAssembly.instantiate মেথডের দ্বিতীয় প্যারামিটার হিসেবে একটি importObject পাস করা হয়, যা বাইরের ফাংশন বা ডাটা (যেমন JavaScript এর ফাংশন) মডিউলে সরবরাহ করে।

const importObject = {
  env: {
    log: (msg) => console.log(msg)
  }
};

এখানে log ফাংশনটি env অবজেক্টের মাধ্যমে WebAssembly মডিউলে ইনপুট হিসাবে দেয়া হয়েছে, যাতে WebAssembly কোড log ফাংশন কল করতে পারে।

2.3 Memory

WebAssembly instance এর মধ্যে একটি memory থাকে, যা একটি বিশেষ ধরনের মেমোরি, যা JavaScript থেকে অ্যাক্সেস করা যায়। WebAssembly মডিউলে মেমোরি এক্সপোর্ট করা হলে, আপনি এটি ব্যবহার করতে পারেন।

const { memory } = wasmModule.instance.exports;

এখানে memory হলো মডিউল থেকে এক্সপোর্ট করা একটি মেমোরি, যা JavaScript থেকে ব্যবহৃত হতে পারে।

2.4 Tables

WebAssembly মডিউল টেবিল ব্যবহার করতে পারে যা ফাংশন পয়েন্টার ধারণ করে। এটি সাধারণত ডাইনামিক ফাংশন কলের জন্য ব্যবহৃত হয়, কিন্তু এটি তুলনামূলকভাবে কম ব্যবহৃত হয়।

3. WebAssembly Instance ব্যবহার করার উদাহরণ

ধরা যাক, আপনার একটি WebAssembly মডিউল রয়েছে যা দুটি পূর্ণসংখ্যার যোগফল নির্ণয় করে, এবং আপনি সেই ফাংশনটি JavaScript এর মাধ্যমে কল করতে চান। এটি করতে আপনার প্রথমে WASM ফাইল লোড এবং ইনস্ট্যানশিয়েট করতে হবে।

WebAssembly মডিউল (WAT):

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    (i32.add
      (local.get $a)
      (local.get $b)
    )
  )
  (export "add" (func $add))
)

JavaScript কোড:

const importObject = {
  env: {
    log: (msg) => console.log(msg)
  }
};

fetch('your_module.wasm') // WebAssembly মডিউল লোড
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes, importObject)) // ইনস্ট্যানশিয়েট করা
  .then(wasmModule => {
    const { add } = wasmModule.instance.exports;
    const result = add(10, 20); // WebAssembly ফাংশন কল
    console.log("Result from WebAssembly:", result); // 30 আউটপুট হবে
  })
  .catch(console.error);

এখানে:

• add ফাংশন WebAssembly থেকে এক্সপোর্ট করা হয়েছে এবং JavaScript কোডে কল করা হয়েছে।
• WebAssembly মডিউল env.log ফাংশন ইমপোর্ট করছে যা JavaScript থেকে WebAssembly কোডকে কল করতে সাহায্য করে।

4. WebAssembly Instance এর জন্য বিশেষ ফিচার

• WebAssembly Threads: কিছু পরিস্থিতিতে, আপনি WebAssembly মডিউলে থ্রেড ব্যবহারের জন্য use_threads ফ্ল্যাগ ব্যবহার করতে পারেন। এই ক্ষেত্রে, WASI এর pthread সাপোর্ট প্রয়োজন হতে পারে।
• Memory Management: WebAssembly মডিউল নিজেই মেমোরি পরিচালনা করে, তবে আপনি JavaScript এর মাধ্যমে মেমোরি অ্যাক্সেস করে ডেটা ম্যানিপুলেশন করতে পারেন।

সারসংক্ষেপ

WebAssembly instance তৈরি করা হলো একটি WebAssembly মডিউলকে কার্যকরভাবে রান করার জন্য একটি কার্যকরী এক্সিকিউশন ইউনিট তৈরি করা। JavaScript দিয়ে WebAssembly.instantiate মেথড ব্যবহার করে আপনি মডিউলটি লোড এবং ইনস্ট্যানশিয়েট করতে পারেন। এই instance এর মাধ্যমে আপনি মডিউলটির ফাংশন কল করতে পারেন, মেমোরি এবং অন্যান্য রিসোর্স অ্যাক্সেস করতে পারেন। WASM কোডের সাথে বাইরের কোডের ইন্টারঅ্যাকশন সহজ করে WebAssembly instance।

JavaScript এর মাধ্যমে WebAssembly এর সাথে ডেটা শেয়ার করা

JavaScript এবং WebAssembly এর মধ্যে ডেটা শেয়ার করা একটি গুরুত্বপূর্ণ বিষয়, কারণ এটি JavaScript থেকে WebAssembly মডিউলগুলোর সাথে যোগাযোগ এবং তাদের মধ্যে ডেটা আদান-প্রদান করতে সাহায্য করে। WebAssembly কোডে সাধারণত বাইনারি ডেটা থাকে, যা JavaScript থেকে সহজে অ্যাক্সেস করা যায়। এই প্রক্রিয়াটি WebAssembly Memory এবং Function Exports ব্যবহার করে করা হয়।

এখানে JavaScript এবং WebAssembly এর মধ্যে ডেটা শেয়ার করার কিছু সাধারণ কৌশল এবং উদাহরণ দেওয়া হলো।

1. WebAssembly Memory এবং JavaScript এ শেয়ারিং

WebAssembly মডিউল এবং JavaScript এর মধ্যে ডেটা শেয়ার করতে হলে আপনাকে WebAssembly Memory ব্যবহার করতে হবে। WebAssembly.Memory একটি মেমোরি অবজেক্ট, যা ডেটা স্টোর এবং রিড/রাইট অপারেশন চালানোর জন্য ব্যবহৃত হয়।

1.1 Memory Definition in WebAssembly (WAT)

ধরা যাক, আপনি WebAssembly মডিউল তৈরি করেছেন যা মেমোরি এক্সপোর্ট করবে। এখানে একটি উদাহরণ দেওয়া হলো যেখানে একটি মেমোরি 1 পৃষ্ঠার আকারে ডিফাইন করা হচ্ছে এবং একটি ফাংশন যা মেমোরিতে ডেটা লেখে এবং পড়ে।

(module
  (memory 1)  ;; 1 page (64KB)
  (export "memory" (memory 0))  ;; Memory export
  (func $set_value (param $index i32) (param $value i32)
    (i32.store
      (local.get $index)
      (local.get $value)
    )
  )
  (export "set_value" (func $set_value))  ;; Function export
)

এখানে, memory এক্সপোর্ট করা হয়েছে এবং একটি set_value ফাংশন তৈরি করা হয়েছে যা মেমোরির নির্দিষ্ট স্থানে মান রাখে।

2. JavaScript কোড থেকে WebAssembly Memory অ্যাক্সেস

WebAssembly এর মেমোরি WebAssembly.Memory অবজেক্টের মাধ্যমে JavaScript থেকে অ্যাক্সেস করা যায়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে JavaScript থেকে WebAssembly মেমোরিতে ডেটা পাঠানো এবং পড়া হচ্ছে।

2.1 JavaScript কোড:

fetch('memory.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(wasmModule => {
    const { memory, set_value } = wasmModule.instance.exports; // Memory and function

    // মেমোরি ব্যবহারের জন্য Int32Array ভিউ তৈরি করা হচ্ছে
    const view = new Int32Array(memory.buffer);

    // মেমোরির প্রথম স্থানে মান লেখা হচ্ছে
    set_value(0, 42);
    
    // মেমোরির প্রথম স্থান থেকে মান পড়া হচ্ছে
    console.log(view[0]);  // আউটপুট: 42
  })
  .catch(console.error);

ব্যাখ্যা:

• fetch('memory.wasm'): এটি WebAssembly মডিউল memory.wasm ফাইলটি লোড করে।
• WebAssembly.instantiate(bytes): ফাইলটি ইন্সট্যান্সিয়েট করে একটি WebAssembly মডিউল তৈরি করা হয়।
• memory: WebAssembly মডিউল থেকে এক্সপোর্ট করা মেমোরি অবজেক্ট।
• set_value(0, 42): set_value ফাংশনটি ব্যবহার করে মেমোরির প্রথম স্থানে 42 মান লিখা হয়।
• Int32Array(memory.buffer): মেমোরি বাফারকে Int32Array হিসেবে অ্যাক্সেস করা হয়, যাতে 32-বিট পূর্ণসংখ্যাগুলি এক্সেস করা যায়।

3. WebAssembly এর মধ্যে ডেটা পাঠানো এবং ফেরত আনা

WebAssembly থেকে JavaScript এ ডেটা ফেরত আনার জন্য, আপনি এক্সপোর্ট করা ফাংশনগুলো ব্যবহার করতে পারেন, যেগুলি WebAssembly থেকে JavaScript এ মান পাঠায়।

3.1 WebAssembly ফাংশন এর মাধ্যমে JavaScript এ ডেটা ফেরত আনা

ধরা যাক, WebAssembly কোডে একটি ফাংশন আছে যা দুটি মান যোগ করবে এবং ফলাফল JavaScript এ ফিরিয়ে দেবে।

WebAssembly কোড (WAT):

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    (i32.add
      (local.get $a)
      (local.get $b)
    )
  )
  (export "add" (func $add))
)

JavaScript কোড:

fetch('add.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(wasmModule => {
    const { add } = wasmModule.instance.exports;

    // WebAssembly ফাংশন থেকে ডেটা ফেরত আনা
    const result = add(5, 7);
    console.log(result);  // আউটপুট: 12
  })
  .catch(console.error);

এখানে add ফাংশনটি দুটি সংখ্যা গ্রহণ করে তাদের যোগফল ফেরত দেয় এবং JavaScript এ সেই ফলাফল ব্যবহার করা হয়।

4. WebAssembly এবং JavaScript এর মধ্যে ডেটা শেয়ার করার টেকনিক

1. Memory Buffer Access: JavaScript এবং WebAssembly এর মধ্যে মেমোরি বাফার শেয়ার করা সম্ভব। JavaScript এর মাধ্যমে WebAssembly মেমোরি এক্সপোর্ট করা হয় এবং JavaScript এর মাধ্যমে সেই মেমোরিতে ডেটা পাঠানো বা পড়া যায়।
2. Function Export: JavaScript থেকে WebAssembly মডিউলের এক্সপোর্ট করা ফাংশনগুলো কল করা যেতে পারে। এর মাধ্যমে JavaScript থেকে WebAssembly মডিউল পরিচালনা করা হয়।
3. Typed Arrays: JavaScript থেকে WebAssembly মেমোরি অ্যাক্সেস করার জন্য Typed Arrays যেমন Int32Array, Float64Array ইত্যাদি ব্যবহার করা হয়। এগুলি JavaScript এর বাফারকে WebAssembly মেমোরি হিসেবে ব্যাখ্যা করতে সহায়ক।
4. Interfacing with External Resources: WebAssembly মডিউলগুলি বাইরের JavaScript কোডের সাথে ডেটা শেয়ার করতে পারে, যেমন API কল, ডেটাবেস অ্যাক্সেস বা ফাইল অপারেশন।

5. WebAssembly এর সাথে ডেটা শেয়ারের সুবিধা

1. Performance: WebAssembly ডেটা প্রসেসিংয়ে দ্রুত, তাই JavaScript এর সাথে মেমোরি শেয়ার করার মাধ্যমে পারফরম্যান্স উন্নত হয়।
2. Low-Level Memory Access: JavaScript WebAssembly এর মেমোরিতে ডেটা পাঠাতে পারে এবং সেগুলি বাইনারি ফরম্যাটে প্রসেস করতে পারে, যা JavaScript এর তুলনায় দ্রুত।
3. Cross-language Support: WebAssembly বিভিন্ন ভাষার মধ্যে ডেটা শেয়ার করার জন্য এক্সপোর্ট এবং ইমপোর্ট ফাংশন সমর্থন করে, যেমন C, C++, Rust ইত্যাদি।
4. Memory Efficiency: মেমোরি শেয়ারিংয়ের মাধ্যমে কম সিস্টেম রিসোর্স ব্যবহার করা সম্ভব, যা বড় ওয়েব অ্যাপ্লিকেশনের জন্য উপকারী।

সারসংক্ষেপ

WebAssembly এবং JavaScript এর মধ্যে ডেটা শেয়ার করার জন্য আপনি WebAssembly.Memory ব্যবহার করতে পারেন, যেখানে আপনি JavaScript কোডে WebAssembly মেমোরি অ্যাক্সেস করতে পারেন এবং ডেটা শেয়ার করতে পারেন। এছাড়াও, এক্সপোর্ট করা ফাংশনগুলির মাধ্যমে JavaScript এবং WebAssembly এর মধ্যে তথ্য আদান-প্রদান করা যায়। এই প্রক্রিয়া পারফরম্যান্স বৃদ্ধির পাশাপাশি ওয়েব অ্যাপ্লিকেশনগুলিকে আরও কার্যকরী করে তোলে।

JavaScript এর মাধ্যমে WebAssembly ফাংশন কল করা

WebAssembly (WASM) কোড এবং JavaScript একে অপরের সাথে ইন্টিগ্রেটেডভাবে কাজ করতে পারে, যেখানে JavaScript ব্যবহার করে WebAssembly মডিউলের মধ্যে ফাংশন কল করা হয় এবং তাদের ফলাফল ফিরে পাওয়া যায়। WebAssembly মডিউল থেকে এক্সপোর্ট করা ফাংশনগুলি JavaScript দ্বারা সহজেই অ্যাক্সেস করা যেতে পারে।

এখানে JavaScript এর মাধ্যমে WebAssembly ফাংশন কল করার প্রক্রিয়া বিস্তারিতভাবে দেখানো হয়েছে।

1. WebAssembly মডিউল তৈরি এবং ফাংশন এক্সপোর্ট করা

প্রথমে, একটি WebAssembly মডিউল তৈরি করা হবে, যাতে কিছু ফাংশন এক্সপোর্ট করা হয়েছে, যেমন একটি গাণিতিক অপারেশন যেমন যোগফল বের করা।

1.1 WebAssembly (WASM) কোড উদাহরণ

ধরা যাক, আপনি একটি add নামক ফাংশন তৈরি করেছেন যা দুটি সংখ্যা যোগ করবে।

(module
  (export "add" (func $add))   ;; "add" ফাংশন এক্সপোর্ট করা
  (func $add (param $a i32) (param $b i32) (result i32) 
    local.get $a
    local.get $b
    i32.add)  ;; দুটি সংখ্যা যোগ করা
)

এখানে, WebAssembly মডিউলটি একটি add নামক ফাংশন এক্সপোর্ট করছে, যা দুটি ইনপুট প্যারামিটার নেবে এবং তাদের যোগফল প্রদান করবে।

2. JavaScript থেকে WebAssembly ফাংশন কল করা

একবার WebAssembly মডিউল তৈরি হলে, JavaScript ব্যবহার করে WebAssembly কোডের ফাংশন কল করা যাবে। প্রথমে, আপনাকে WebAssembly ফাইলটি লোড করতে হবে, এবং তারপরে সেই মডিউল থেকে ফাংশন এক্সপোর্ট করতে হবে।

2.1 JavaScript কোড উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebAssembly Function Call Example</title>
</head>
<body>
    <h1>WebAssembly with JavaScript</h1>
    <button id="addNumbers">Add Numbers</button>
    <p id="output"></p>

    <script>
        document.getElementById('addNumbers').addEventListener('click', function() {
            // WebAssembly ফাইল লোড করা
            fetch('your_program.wasm')
                .then(response => response.arrayBuffer())
                .then(bytes => WebAssembly.instantiate(bytes))  // WebAssembly ইনস্ট্যানশিয়েট করা
                .then(wasmModule => {
                    const { instance } = wasmModule;

                    // WebAssembly থেকে ফাংশন কল করা
                    const result = instance.exports.add(5, 3);  // দুটি সংখ্যা (5, 3) পাস করা
                    document.getElementById('output').innerText = 'Result from WASM: ' + result;
                })
                .catch(console.error);
        });
    </script>
</body>
</html>

2.2 JavaScript এবং WebAssembly এক্সপোর্ট করা ফাংশন কল করা

1. fetch: প্রথমে, fetch ব্যবহার করে WebAssembly ফাইলটি (যেমন your_program.wasm) লোড করা হচ্ছে।
2. WebAssembly.instantiate: তারপর, এই ফাইলটিকে ইনস্ট্যানশিয়েট করা হয় এবং একটি wasmModule ইনস্ট্যান্স তৈরি হয়।
3. instance.exports.add(5, 3): এখানে, instance.exports.add ফাংশনটি WebAssembly মডিউল থেকে এক্সপোর্ট করা হচ্ছে এবং JavaScript এর মাধ্যমে কল করা হচ্ছে, যেখানে দুটি প্যারামিটার (5 এবং 3) পাঠানো হচ্ছে।
4. Result Output: ফাংশনটির ফলাফল (result) HTML পেজে প্রদর্শিত হবে।

3. WebAssembly ফাংশন কলের বিভিন্ন উদাহরণ

3.1 Multiple Function Calls

একাধিক ফাংশন কল করতে পারলে, JavaScript কোডের মাধ্যমে একাধিক ফাংশন এক্সপোর্ট করে ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, add এবং subtract ফাংশন এক্সপোর্ট করে:

WebAssembly (WASM) কোড:

(module
  (export "add" (func $add))
  (export "subtract" (func $subtract))
  
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add)
  
  (func $subtract (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.sub)
)

JavaScript (Calling Multiple Functions):

fetch('your_program.wasm')
    .then(response => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes))
    .then(wasmModule => {
        const { instance } = wasmModule;
        
        // প্রথমে যোগফল কল
        const addResult = instance.exports.add(10, 5);
        console.log('Addition Result: ', addResult);  // আউটপুট হবে 15
        
        // তারপর বিয়োগফল কল
        const subtractResult = instance.exports.subtract(10, 5);
        console.log('Subtraction Result: ', subtractResult);  // আউটপুট হবে 5
    })
    .catch(console.error);

এখানে, add এবং subtract দুটি আলাদা ফাংশন WebAssembly মডিউল থেকে এক্সপোর্ট করা হচ্ছে এবং JavaScript থেকে কল করা হচ্ছে।

4. WebAssembly এবং JavaScript এর মধ্যে ডেটা আদান-প্রদান

WebAssembly এবং JavaScript এর মধ্যে ডেটা আদান-প্রদান করার জন্য, মেমরি বা গ্লোবাল ভ্যারিয়েবলস ব্যবহার করা যেতে পারে। WebAssembly মডিউল থেকে মেমরি এক্সপোর্ট করা এবং তা JavaScript এ অ্যাক্সেস করা খুবই সাধারণ।

4.1 WebAssembly Memory Access via JavaScript

WebAssembly (WASM) কোড:

(module
  (memory 1)  ;; মেমরি এক্সপোর্ট
  (export "memory" (memory 0))
  
  (export "writeToMemory" (func $writeToMemory))
  
  (func $writeToMemory (param $index i32) (param $value i32)
    local.get $index
    local.get $value
    i32.store)  ;; মেমরিতে ডেটা স্টোর
)

JavaScript (Memory Access Example):

fetch('your_program.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(wasmModule => {
      const { instance } = wasmModule;

      // মেমরি এক্সপোর্ট করা
      const memory = new Int32Array(instance.exports.memory.buffer);

      // WebAssembly মেমরিতে ডেটা লিখা
      instance.exports.writeToMemory(0, 42);  // মেমরির প্রথম সেলে 42 লেখা

      // মেমরি থেকে ডেটা রিড করা
      console.log('Data from WASM Memory:', memory[0]);  // আউটপুট হবে 42
  })
  .catch(console.error);

এখানে, writeToMemory ফাংশনটি WebAssembly মেমরির নির্দিষ্ট সেলে ডেটা লেখে এবং JavaScript এর মাধ্যমে সেই ডেটা রিড করা হয়।

Conclusion

• WebAssembly Functions: WebAssembly ফাংশনগুলি JavaScript দ্বারা এক্সপোর্ট এবং কল করা হয়। JavaScript থেকে প্যারামিটার পাঠিয়ে এবং WebAssembly মডিউল থেকে ফাংশন কল করে ফলাফল পাওয়া যায়।
• Memory Access: WebAssembly মেমরি এক্সপোর্ট করে এবং JavaScript কোড সেই মেমরি অ্যাক্সেস করে, যা ডেটা শেয়ারিং এবং প্রসেসিং করতে সাহায্য করে।
• JavaScript-WebAssembly Integration: JavaScript এবং WebAssembly একে অপরের সাথে শক্তিশালীভাবে কাজ করতে পারে, JavaScript কোড থেকে WebAssembly ফাংশন কল করা, এবং ফাংশন দ্বারা প্রসেস করা ডেটা ফেরত পাওয়ার মাধ্যমে উন্নত ওয়েব অ্যাপ্লিকেশন তৈরি করা সম্ভব।