กรณีใช้งาน WASM: การประมวลผลภาพและการคำนวณ

กระบวนการประมวลผลภาพมาตรฐานด้วย WASM มีขั้นตอนดังนี้ รับออบเจ็กต์ ImageData จากแคนวาส แปลงข้อมูลพิกเซลเป็นอาร์เรย์ที่มีชนิดข้อมูล (Uint8Array) คัดลอกข้อมูลลงในหน่วยความจำเชิงเส้นของ WASM เรียกฟังก์ชัน WASM เพื่อใช้ตัวกรอง คัดลอกผลลัพธ์กลับออกมา และใช้ putImageData() เพื่อแสดงภาพที่ประมวลผลแล้วบนแคนวาส

ผลการเปรียบเทียบประสิทธิภาพแสดงอย่างสม่ำเสมอว่าการใช้งานตัวกรองแปลงเป็นระดับสีเทาและเบลอด้วย WASM ทำงานได้เร็วกว่าการใช้งาน JavaScript ที่เทียบเท่ากัน 5-10 เท่าในภาพขนาดใหญ่ สำหรับภาพขนาด 4000x3000 พิกเซล ตัวกรองแปลงเป็นระดับสีเทาด้วย JavaScript อาจใช้เวลา 80 มิลลิวินาที ในขณะที่เวอร์ชัน WASM ของรัสต์ทำงานเสร็จภายในเวลาไม่ถึง 10 มิลลิวินาที ความแตกต่างนี้ผู้ใช้จะสังเกตเห็นได้ในสถานการณ์แก้ไขแบบเรียลไทม์

การประมวลผลเสียงแบบเรียลไทม์ใช้ AudioWorklet ของ API เสียงบนเว็บ ซึ่งทำงานในเธรดเสียงเฉพาะที่แยกจากเธรดหลัก WASM สามารถทำงานภายใน AudioWorklet เพื่อสร้างเอฟเฟกต์เสียงที่ใกล้เคียงระดับเนทีฟ เช่น รีเวิร์บ การบีบอัด และการปรับสมดุลเสียง วิธีนี้ทำให้เส้นทางเสียงไม่ต้องผ่านรีแอกต์เลย โดยรีแอกต์จะจัดการเฉพาะตัวควบคุมส่วนติดต่อผู้ใช้ที่ใช้กำหนดพารามิเตอร์เสียง

ปาปา พาร์สจัดการการแยกวิเคราะห์ CSV ด้วย JavaScript ได้ดีสำหรับไฟล์ขนาดเล็กถึงปานกลาง แต่สำหรับไฟล์ที่มีหลายล้านแถว ตัวแยกวิเคราะห์ CSV ของรัสต์ที่คอมไพล์เป็น WASM จะทำงานได้เร็วกว่าอย่างมาก ตัวแยกวิเคราะห์ WASM จะประมวลผลอาร์เรย์ไบต์ดิบ ใช้การกรองและการแปลงข้อมูลในรัสต์ แล้วส่งกลับเฉพาะผลลัพธ์ที่ประมวลผลแล้วให้ JavaScript จึงหลีกเลี่ยงการสร้างออบเจ็กต์ JavaScript ชั่วคราวหลายล้านรายการ

สำหรับการค้นหาข้อความเต็มรูปแบบอย่างรวดเร็วในเอกสารขนาดใหญ่ เช่น ไฟล์บันทึก โค้ดเบส และชุดข้อมูลขนาดใหญ่ เอนจินนิพจน์ปกติของรัสต์ที่คอมไพล์เป็น WASM จะให้ประสิทธิภาพการค้นหาใกล้เคียงระดับเนทีฟ ไลบรารีอย่างไลบรารี regex ของรัสต์ที่คอมไพล์เป็น WASM สามารถค้นหาหลายล้านบรรทัดได้ภายในเวลาไม่กี่มิลลิวินาที รีแอกต์เรนเดอร์ผลการค้นหา ส่วน WASM ทำหน้าที่ค้นหา

ฟังก์ชันแฮชเข้ารหัสลับ (SHA-256, SHA-512) และการเข้ารหัสแบบสมมาตร (เออีเอส) ที่ใช้งานด้วย WASM ของรัสต์ให้ประสิทธิภาพที่รวดเร็วและให้ผลแน่นอนโดยไม่ขึ้นกับการปรับปรุงประสิทธิภาพของเอนจิน JavaScript สำหรับแอปพลิเคชันที่เข้ารหัสข้อมูลฝั่งไคลเอนต์ เช่น การส่งข้อความแบบเข้ารหัสตั้งแต่ต้นทางถึงปลายทาง หรือการสร้างคีย์รหัสผ่านด้วยอาร์กอน2 ไลบรารีการเข้ารหัสที่ใช้ WASM จะทำงานได้ดีกว่าการใช้งาน JavaScript ล้วนอย่างมาก

เอนจินฟิสิกส์เรเปียร์ (rapier.rs) เขียนด้วยรัสต์และคอมไพล์เป็น WASM ทำให้พร้อมใช้งานสำหรับเกมบนเบราว์เซอร์และการจำลองแบบโต้ตอบ รีแอกต์เรนเดอร์ส่วนติดต่อผู้ใช้ของเกมและแผงสถานะ ส่วนโมดูล WASM ของเรเปียร์จะจำลองฟิสิกส์ในแต่ละเฟรม รูปแบบนี้แยกข้อกังวลด้านส่วนติดต่อผู้ใช้ออกจากข้อกังวลด้านเอนจินเกมได้อย่างชัดเจน

จากมุมมองของรีแอกต์ ฟังก์ชัน WASM เป็นฟังก์ชันคำนวณบริสุทธิ์ กล่าวคือรับข้อมูลอินพุตและส่งคืนผลลัพธ์ รีแอกต์เรียกใช้ฟังก์ชัน รับผลลัพธ์ และอัปเดตสถานะ: const result = await runWasm(inputData); setState(result) จากนั้นรีแอกต์จะเรนเดอร์ใหม่เพื่อแสดงผลลัพธ์ การแยกส่วนอย่างชัดเจนนี้ช่วยให้โค้ดคอมโพเนนต์ตรงไปตรงมา ไม่ว่าการคำนวณจะซับซ้อนเพียงใด

การคำนวณ WASM แบบซิงโครนัสบนเธรดหลักของรีแอกต์จะบล็อกเบราว์เซอร์ ทำให้ไม่มีการอัปเดตส่วนติดต่อผู้ใช้ ไม่มีการจัดการเหตุการณ์ และไม่มีภาพเคลื่อนไหวจนกว่าการคำนวณจะเสร็จสิ้น สำหรับการดำเนินการ WASM ใด ๆ ที่ใช้เวลานานกว่า 16 มิลลิวินาที (หนึ่งเฟรมที่ 60 เฟรมต่อวินาที) ให้ย้ายการคำนวณไปยังเวิร์กเกอร์เว็บ รีแอกต์จะสื่อสารกับเวิร์กเกอร์ผ่านข้อความและอัปเดตสถานะเมื่อได้รับผลลัพธ์

เมื่อส่งอาร์เรย์ขนาดใหญ่ระหว่าง JavaScript กับ WASM ให้หลีกเลี่ยงการคัดลอกเมื่อทำได้ เข้าถึงหน่วยความจำเชิงเส้นของ WASM โดยตรงผ่าน memory.buffer ซึ่งเป็น ArrayBuffer เขียนข้อมูลอินพุตโดยใช้มุมมองอาร์เรย์ที่มีชนิดข้อมูล (new Uint8Array(wasmMemory.buffer, offset, length)) เรียกใช้ฟังก์ชัน WASM แล้วอ่านผลลัพธ์จากบัฟเฟอร์เดียวกัน รูปแบบที่ไม่คัดลอกข้อมูลนี้สำคัญอย่างยิ่งสำหรับบัฟเฟอร์ภาพและเสียงขนาดใหญ่

อัลกอริทึมการบีบอัด Brotli และ Zstd ที่คอมไพล์เป็น WASM ช่วยให้บีบอัดข้อมูลบนฝั่งไคลเอ็นต์ได้อย่างรวดเร็ว ตัวอย่างการใช้งานในแอปพลิเคชัน React ได้แก่ การบีบอัดข้อมูล JSON ขนาดใหญ่ก่อนอัปโหลดเพื่อประหยัดแบนด์วิดท์ การคลายการบีบอัดข้อมูลไบนารีจากเซิร์ฟเวอร์เพื่อแสดงผล และการสร้างแอปพลิเคชันแบบออฟไลน์ที่มีความสามารถหลากหลายโดยจัดเก็บข้อมูลที่บีบอัดไว้ใน IndexedDB

เหตุใดจึงควรย้ายการคำนวณ WASM ที่ทำงานเป็นเวลานานไปไว้ใน Web Worker

WASM ทำงานได้ดีเยี่ยมกับการจัดการพิกเซล (เร็วกว่า JS 5–10 เท่าสำหรับฟิลเตอร์รูปภาพ) เสียงแบบเรียลไทม์ใน AudioWorklets การแยกวิเคราะห์ CSV/ข้อความขนาดใหญ่ การดำเนินการเข้ารหัส และการจำลองฟิสิกส์ รูปแบบการใช้งานกับ React นั้นเรียบง่าย คือให้ React เรียก WASM เป็นฟังก์ชันคำนวณบริสุทธิ์ แล้วแสดงผลลัพธ์ ควรเรียกใช้การคำนวณที่ใช้เวลานานกว่า 16 มิลลิวินาทีใน Web Worker เสมอ เพื่อให้เธรดหลักว่างอยู่ ใช้เทคนิคการคัดลอกข้อมูลเป็นศูนย์ (ArrayBuffer ที่แชร์ร่วมกัน) สำหรับการถ่ายโอนข้อมูลขนาดใหญ่ เพื่อลดค่าใช้จ่ายส่วนเกิน