วิธีที่เรานำ Google Earth มาสู่เว็บ

ปรับปรุงการเข้าถึง Google Earth แบบข้ามเบราว์เซอร์ด้วย WebAssembly

ในทางที่ดีที่สุด แอปพลิเคชันที่นักพัฒนาซอฟต์แวร์สร้างขึ้นไม่ว่าจะมีเทคโนโลยีหรือไม่ก็ตาม จะมีอยู่ในเบราว์เซอร์ แต่มีอุปสรรคต่อการนำโครงการเข้าสู่เว็บ ซึ่งขึ้นอยู่กับเทคโนโลยีที่สร้างด้วย และผู้ให้บริการเบราว์เซอร์ต่างๆ สนับสนุนเทคโนโลยีนั้นได้ดีเพียงใด WebAssembly (Wasm) คือเป้าหมายคอมไพล์ที่ได้มาตรฐานโดย W3C ซึ่งช่วยเราแก้ไขปัญหานี้โดยอนุญาตให้เราเรียกใช้โค้ดเบสจากภาษาอื่นที่ไม่ใช่ JavaScript บนเว็บ

เราได้ทำให้ Google Earth พร้อมแสดงผลแล้วในพรีวิวรุ่นเบต้าบน WebAssembly โปรดทราบว่า Google Earth เวอร์ชันนี้ยังเป็นรุ่นเบต้าอยู่ และอาจไม่ลื่นไหลเท่าที่คุณคุ้นเคย (ลองใช้ Earth สำหรับเว็บเวอร์ชันปกติ) คุณสามารถทดลองใช้รุ่นเบต้านี้ใน Chrome และเบราว์เซอร์อื่นๆ ที่ใช้ Chromium รวมถึง Edge (เวอร์ชัน Canary) และ Opera รวมถึง Firefox ลองนึกถึงแรงบันดาลใจในรุ่นเบต้านี้หากคุณกำลังมองหาการสนับสนุนข้ามเบราว์เซอร์ที่ดียิ่งขึ้นสำหรับแอปพลิเคชันเฉพาะแพลตฟอร์ม

เหตุผลที่เราเลือก WebAssembly สำหรับ Google Earth

เดิมทีเราเขียน Google Earth ส่วนใหญ่ไว้ใน C++ เนื่องจากเป็นแอปพลิเคชันบนเดสก์ท็อปที่มีไว้ติดตั้ง จากนั้นเราก็สามารถย้ายระบบไปยัง Android และ iOS ขณะที่สมาร์ทโฟนถือครอง ส่วนโค้ดเบส C++ ส่วนใหญ่ของเรานั้นใช้ NDK และ Objective-C++ ในปี 2017 เมื่อเรานำ Earth เข้าสู่เว็บ เราใช้ Native Client (NaCl) ในการคอมไพล์โค้ด C++ และเรียกใช้ในเบราว์เซอร์ Chrome

ในตอนนั้น NaCl เป็นเทคโนโลยีเบราว์เซอร์เพียงชนิดเดียวที่ช่วยให้เราสามารถพอร์ตโค้ด C++ ของเราไปยังเบราว์เซอร์ และให้ประสิทธิภาพในระดับที่ Earth ต้องการ แต่ NaCl เป็นเทคโนโลยีที่ใช้ได้ใน Chrome เท่านั้นซึ่งไม่เคยเห็นการปรับใช้งานในเบราว์เซอร์ต่างๆ ตอนนี้เรากำลังเริ่มเปลี่ยนไปใช้ WebAssembly ซึ่งจะช่วยให้เรานำโค้ดเดียวกันไปเรียกใช้ในเบราว์เซอร์ต่างๆ ได้ ซึ่งหมายความว่า Earth จะเปิดให้บริการแก่ผู้ใช้มากขึ้นทั่วทั้งอินเทอร์เน็ต

ภาพหน้าจอแสดงภาพหอไอเฟลของโลก

ชุดข้อความเกี่ยวกับการแยกชุดข้อความ

WebAssembly ยังคงมีวิวัฒนาการตามมาตรฐาน และเบราว์เซอร์ต่างๆ ก็ขยายขีดความสามารถอย่างต่อเนื่องด้วยฟีเจอร์และฟังก์ชันการทํางานที่หลากหลายมากขึ้น จากมุมมองของ Earth ความแตกต่างที่เห็นได้ชัดที่สุดในการรองรับ WebAssembly ระหว่างเบราว์เซอร์คือการรองรับการแยกชุดข้อความ บางเบราว์เซอร์รองรับชุดข้อความแบบหลายรายการและบางเบราว์เซอร์ไม่รองรับ ให้คิดว่าโลกเป็นวิดีโอเกม 3 มิติขนาดยักษ์ของโลกนั้น ด้วยเหตุนี้ เราจึงทำการสตรีมข้อมูลไปยังเบราว์เซอร์อย่างต่อเนื่อง คลายการบีบอัดข้อมูล และทำให้พร้อมสำหรับการแสดงผลบนหน้าจอ ความสามารถในการทำงานนี้ในชุดข้อความในเบื้องหลังได้แสดงให้เห็นถึงการปรับปรุงประสิทธิภาพของ Earth ในเบราว์เซอร์อย่างชัดเจน

WebAssembly แบบมัลติเทรดอาศัยฟีเจอร์ของเบราว์เซอร์ที่เรียกว่า SharedArrayBuffer ซึ่งดึงมาจากเบราว์เซอร์หลังจากมีการเปิดเผยช่องโหว่ด้านความปลอดภัยของ Spectre และ Meltdown ทีมความปลอดภัยของ Chrome ได้เปิดตัวการแยกเว็บไซต์ใน Chrome สำหรับระบบปฏิบัติการเดสก์ท็อปทุกระบบ เพื่อลดความเสียหายที่อาจเกิดขึ้นจากการโจมตี การแยกเว็บไซต์จะจำกัดกระบวนการของตัวแสดงผลแต่ละกระบวนการไว้ที่เอกสารจากเว็บไซต์เดียว คุณลักษณะความปลอดภัยนี้ทำให้ Chrome ได้เปิดใช้ SharedArrayBuffer สำหรับเดสก์ท็อปอีกครั้ง ซึ่งทำให้เราใช้ WebAssembly แบบมัลติเทรดกับ Earth สำหรับ Chrome ได้

เบราว์เซอร์อื่นๆ กำลังแก้ปัญหาการแยกเว็บไซต์หรือมีการลดความเสี่ยงอื่นๆ เพื่อเปิดใช้ SharedArrayBuffer อีกครั้ง ในระหว่างนี้ Earth จะทำงานแบบเทรดเดียวในเบราว์เซอร์เหล่านั้น

WebAssembly ทำงานร่วมกับเบราว์เซอร์ต่างๆ อย่างไร

เราได้เรียนรู้มากมายเกี่ยวกับสถานะของการรองรับ WebAssembly ในเบราว์เซอร์ที่พอร์ต Earth หากคุณต้องการพัฒนาแอปพลิเคชันโดยใช้ WebAssembly คุณควรทำความเข้าใจสถานะปัจจุบันของ WebAssembly กับเบราว์เซอร์ต่างๆ ก่อน

Edge

Edge กำลังใกล้จะได้เป็นประสบการณ์การพัฒนา 2 รูปแบบ โดยอิงจากสิ่งที่ Microsoft เลือกที่จะเปลี่ยนจากโหมดแสดงภาพ EdgeHTML ไปใช้โหมดแสดงผลแบบ Chromium ในตอนนี้ Google Earth รุ่นเบต้าใน WebAssembly จะไม่ทำงานใน Edge เวอร์ชันสาธารณะปัจจุบันเนื่องจากขาดการรองรับ WebGL2 เราจะแก้ไขปัญหาดังกล่าวเมื่อ Edge เวอร์ชันใหม่ที่อิงตาม Chromium พร้อมให้บริการในอนาคตอันใกล้ ในระหว่างนี้ คุณสามารถดาวน์โหลด Edge เวอร์ชัน Canary และดูว่า Earth ทำงานได้ค่อนข้างดี

Chrome

Chrome รองรับ WebAssembly เป็นอย่างดี รวมถึงเทรดแบบมัลติเทรดบนเดสก์ท็อป คุณจึงคาดหวังได้ว่า Earth จะทำงานได้อย่างราบรื่นขึ้น อย่างไรก็ตาม เราหวังว่า Chrome จะเพิ่มการรองรับการจัดสรรหน่วยความจำแบบไดนามิกด้วยชุดข้อความหลายชุดใน WebAssembly ในระหว่างนี้ Earth อาจเริ่มทำงานไม่สำเร็จในอุปกรณ์ที่มีหน่วยความจำจำกัด (เช่น เครื่อง 32 บิต)

Firefox

Firefox มีการรองรับ WebAssembly เป็นอย่างดี แต่ได้ปิดใช้การรองรับชุดข้อความแบบหลายรายการ ด้วยเหตุนี้ คุณจึงอาจคาดหวังได้ว่าประสบการณ์การใช้งาน Earth จะช้าลง เราหวังว่า Mozilla จะให้บริการสนับสนุนชุดข้อความแบบหลายรายการในเวอร์ชันต่อๆ ไป ในทางกลับกัน Firefox จะสนับสนุนการจัดสรรหน่วยความจำแบบไดนามิก

โอเปร่า

Opera นั้นใช้ Chromium เช่นเดียวกับ Chrome พร้อมกับ Edge เวอร์ชันที่กำลังจะเปิดตัว อย่างไรก็ตาม เวอร์ชันปัจจุบันของ Opera รองรับเฉพาะ WebAssembly แบบชุดข้อความเดียว Earth ทำงานใน Opera แต่มีประสบการณ์ที่แย่ลง หวังว่า Opera เวอร์ชันใหม่จะรองรับ WebAssembly แบบหลายรายการและการรองรับ WebAssembly ที่มีประสิทธิภาพมากขึ้น

Safari

Safari มีการใช้งาน WebAssembly อย่างแรง แต่ขาดการรองรับ WebGL2 อย่างเต็มรูปแบบ ดังนั้น Earth ที่มี WebAssembly จะไม่ทำงานใน Safari โดยเฉพาะอย่างยิ่ง เฉดสีของเราบางตัวต้องใช้ GLSL 1.2 เราหวังว่า Earth จะมีให้ใช้งานใน Safari เช่นกัน เมื่อมีการเพิ่มการรองรับ WebGL2 ที่ดียิ่งขึ้น

หวังเป็นอย่างยิ่งว่าจะได้นำฟีเจอร์ WebAssembly มาใช้เพิ่มเติม

เป็นระยะทางที่ยาวนานเพื่อทำให้ Earth พร้อมใช้งานบนเว็บได้ เมื่อประมาณ 6 ปีที่แล้ว เราเริ่มต้นจากการสาธิตภายในแบบ asm.js ในช่วงแรกที่ดูแลและขยายตัวในช่วงหลายปีที่ผ่านมา แล้วแปลงหน่วยนี้ให้เป็นรุ่น WebAssembly ของ Earth เมื่อ WebAssembly กลายเป็นมาตรฐานที่ใช้ W3C

เรายังมีอีกหลายวิธีสำหรับ WebAssembly และ Earth เราต้องการย้ายไปยังแบ็กเอนด์ LLVM โดยใช้ Emscripten (เชนเครื่องมือในการสร้าง WebAssembly จากโค้ด C++) การเปลี่ยนแปลงนี้จะทำให้รองรับ SIMD ในอนาคต รวมถึงเครื่องมือแก้ไขข้อบกพร่องที่มีประสิทธิภาพมากขึ้น เช่น การแมปแหล่งที่มาสำหรับซอร์สโค้ด สิ่งอื่นๆ ที่เราคาดหวังว่าจะได้เห็นคือการใช้ OffscreenCanvas และการสนับสนุนอย่างเต็มรูปแบบสำหรับการจัดสรรหน่วยความจำแบบไดนามิกใน WebAssembly แต่เรารู้ว่ามาถูกทางแล้ว WebAssembly คืออนาคตในระยะยาวของ Earth บนเว็บ

โปรดสละเวลาสักครู่เพื่อลองใช้งาน เบต้า บอกให้เราทราบว่าวิธีการทำงานเป็นอย่างไรโดยแสดงความคิดเห็นใน Earth โดยตรง