ดูวิธีที่ WebGPU ปลดล็อกความสามารถของ GPU เพื่อประสิทธิภาพแมชชีนเลิร์นนิงที่เร็วขึ้นและการแสดงภาพกราฟิกที่ดียิ่งขึ้น
WebGPU API ใหม่ช่วยปลดล็อกประสิทธิภาพการทำงานที่เพิ่มขึ้นอย่างมากในภาระงานด้านกราฟิกและแมชชีนเลิร์นนิง บทความนี้จะสำรวจว่า WebGPU เป็นการปรับปรุงจากโซลูชันของ WebGL ในปัจจุบันอย่างไร พร้อมแสดงให้เห็นการพัฒนาในอนาคตอย่างคร่าวๆ แต่ก่อนอื่น เราให้บริบทเกี่ยวกับเหตุผลที่พัฒนา WebGPU ขึ้นมา
บริบทเกี่ยวกับ WebGPU
WebGL เข้าสู่ Chrome ในปี 2011 WebGL ช่วยให้เว็บแอปพลิเคชันได้ใช้ประโยชน์จาก GPU เพื่อช่วยสร้างประสบการณ์ที่น่าทึ่งบนเว็บ ตั้งแต่ Google Earth, มิวสิกวิดีโอแบบอินเทอร์แอกทีฟ, คำแนะนำแบบทีละขั้นเกี่ยวกับอสังหาริมทรัพย์ 3 มิติ และอื่นๆ อีกมากมาย WebGL อิงตามกลุ่ม API ตระกูล OpenGL ที่พัฒนาครั้งแรกในปี 1992 นานมาแล้ว และคุณรู้ได้เลยว่าฮาร์ดแวร์ GPU เปลี่ยนแปลงไปอย่างมากนับตั้งแต่เวลานั้น
เราจึงได้พัฒนา API สายพันธุ์ใหม่เพื่อให้โต้ตอบกับฮาร์ดแวร์ GPU สมัยใหม่ได้อย่างมีประสิทธิภาพมากยิ่งขึ้น เพื่อก้าวให้ทันวิวัฒนาการนี้ API เช่น Direct3D 12, Metal และ Vulkan API ใหม่เหล่านี้รองรับกรณีการใช้งานใหม่ๆ ที่ต้องใช้ความพยายามอย่างมากสำหรับการเขียนโปรแกรม GPU เช่น การระเบิดของแมชชีนเลิร์นนิงและอัลกอริทึมการแสดงภาพขั้นสูง WebGPU เป็นผู้สืบทอดจาก WebGL ที่นำความก้าวหน้าของ API สมัยใหม่นี้มาสู่เว็บ
WebGPU ปลดล็อกความสามารถในการเขียนโปรแกรม GPU ใหม่ๆ มากมายในเบราว์เซอร์ ทั้งยังสะท้อนถึงวิธีการทำงานของฮาร์ดแวร์ GPU สมัยใหม่ได้ดียิ่งขึ้น ขณะเดียวกันก็วางรากฐานสำหรับความสามารถของ GPU ขั้นสูงขึ้นในอนาคตด้วย API นี้ได้เบเกอรี่ในกลุ่ม "GPU for the Web" ของ W3C มาตั้งแต่ปี 2017 และเป็นการทำงานร่วมกันระหว่างบริษัทหลายแห่ง เช่น Apple, Google, Mozilla, Microsoft และ Intel และตอนนี้เรายินดีที่จะประกาศว่าหนึ่งในแพลตฟอร์มเว็บเพิ่มเติมที่ดีที่สุดอย่างหนึ่งก็พร้อมให้บริการแล้วหลังจากทำงานมา 6 ปี
ปัจจุบัน WebGPU พร้อมให้ใช้งานแล้วใน Chrome 113 บน ChromeOS, macOS และ Windows ส่วนแพลตฟอร์มอื่นๆ จะพร้อมให้บริการในเร็วๆ นี้ ขอขอบคุณเป็นอย่างยิ่งสำหรับผู้ร่วมให้ข้อมูล Chromium และ Intel โดยเฉพาะที่ช่วยดำเนินการในเรื่องนี้
ตอนนี้เรามาดูกรณีการใช้งานที่น่าตื่นเต้นที่ WebGPU เปิดใช้กัน
ปลดล็อกภาระงาน GPU ใหม่สำหรับการแสดงผล
ฟีเจอร์ของ WebGPU เช่น ตัวปรับแสงเงาประมวลผล ช่วยให้สามารถถ่ายโอนคลาสใหม่ของอัลกอริทึมบน GPU ได้ เช่น อัลกอริทึมที่สามารถเพิ่มรายละเอียดที่มีชีวิตชีวาลงในฉาก จำลองปรากฏการณ์ทางกายภาพ และอื่นๆ นอกจากนี้ยังมีภาระงานซึ่งก่อนหน้านี้ทำได้เฉพาะใน JavaScript ซึ่งย้ายไปยัง GPU ได้แล้ว
วิดีโอต่อไปนี้แสดงอัลกอริทึมลูกบาศก์มาร์ชิ่งที่ใช้ในการวิเคราะห์พื้นผิวของเมตาบอลเหล่านี้ ในช่วง 20 วินาทีแรกของวิดีโอ อัลกอริทึมที่เรียกใช้ใน JavaScript มีความยากลำบากในการปรับให้หน้าทำงานตามความเร็วที่ 8 FPS ทำให้ภาพเคลื่อนไหวไม่ราบรื่น เพื่อคงประสิทธิภาพใน JavaScript เราต้องลดระดับรายละเอียดลงอย่างมาก
เราย้ายอัลกอริทึมเดียวกันไปยังตัวปรับแสงเงาการประมวลผล ซึ่งจะเห็นในวิดีโอหลังผ่านไป 20 วินาที โดยมีความแตกต่างในเวลากลางคืนและกลางวัน ประสิทธิภาพดีขึ้นอย่างมากโดยที่ปัจจุบันหน้าเว็บทำงานใน 60 FPS ที่ราบรื่น และยังมีศักยภาพด้านประสิทธิภาพอีกมากสำหรับผลกระทบอื่นๆ นอกจากนี้ ลูป JavaScript หลักของหน้าจะว่างสำหรับงานอื่นๆ ทั้งหมด เพื่อให้แน่ใจว่าการโต้ตอบกับหน้าเว็บคงการปรับเปลี่ยนอยู่เสมอ
นอกจากนี้ WebGPU ยังทำให้เกิดเอฟเฟกต์ภาพที่ซับซ้อนในแบบที่ไม่เคยทำได้จริงมาก่อน ในตัวอย่างต่อไปนี้ สร้างขึ้นในไลบรารี Babylon.js ยอดนิยม มีการจำลองผิวน้ำมหาสมุทรทั้งหมดบน GPU พลวัตที่สมจริงจะสร้างขึ้นจากคลื่นอิสระหลายคลื่นที่เพิ่มเข้ามาซึ่งกันและกัน แต่การจำลองแต่ละคลื่นโดยตรงจะมีราคาแพงเกินไป
เดโมจึงใช้อัลกอริทึมขั้นสูงที่เรียกว่า Fast Fourier Transform แทนที่การแสดงคลื่นทั้งหมดเป็นข้อมูลตำแหน่งที่ซับซ้อน จะใช้ข้อมูลสเปกตรัมซึ่งมีประสิทธิภาพมากกว่าในการคำนวณ จากนั้นแต่ละเฟรมจะใช้การแปลงฟูรีเยเพื่อแปลงจากข้อมูลสเปกตรัมเป็นข้อมูลตำแหน่งที่แสดงความสูงของคลื่น
อนุมาน ML ได้เร็วขึ้น
WebGPU ยังมีประโยชน์ในการเร่งการทำงานของแมชชีนเลิร์นนิง ซึ่งเป็นการใช้งาน GPU หลักในช่วงไม่กี่ปีที่ผ่านมา
เป็นเวลานานมาแล้วที่นักพัฒนาครีเอทีฟโฆษณาได้นำ API การแสดงผลของ WebGL กลับมาใช้ใหม่เพื่อทำการทำงานแบบไม่ใช่การแสดงผล เช่น การคำนวณของแมชชีนเลิร์นนิง อย่างไรก็ตาม การดำเนินการนี้จะต้องมีการวาดพิกเซลของรูปสามเหลี่ยมเพื่อเริ่มการคำนวณ และค่อยๆ บรรจุและคลายข้อมูล tensor ในพื้นผิวแทนการเข้าถึงหน่วยความจำสำหรับจุดประสงค์ทั่วไปมากขึ้น
การใช้ WebGL ในลักษณะนี้กำหนดให้นักพัฒนาซอฟต์แวร์ต้องปรับโค้ดให้สอดคล้องกับความคาดหวังของ API ที่ออกแบบมาเพื่อการวาดเท่านั้น เมื่อประกอบกับไม่มีฟีเจอร์พื้นฐาน เช่น การเข้าถึงหน่วยความจำที่ใช้ร่วมกันระหว่างการคำนวณ ก็จะทำให้งานซ้ำซ้อนและได้ประสิทธิภาพการทำงานที่ด้อยประสิทธิภาพ
ตัวปรับแสงเงาสำหรับการประมวลผลเป็นฟีเจอร์ใหม่หลักของ WebGPU และช่วยขจัดปัญหาเหล่านี้ ตัวปรับเฉดสีสำหรับการประมวลผลมีโมเดลโปรแกรมที่ยืดหยุ่นมากขึ้นซึ่งใช้ประโยชน์จากลักษณะคู่ขนานของ GPU ในขณะเดียวกันก็ไม่ถูกจำกัดจากโครงสร้างการดำเนินการการแสดงผลที่เข้มงวด
ตัวปรับแสงเงาในการประมวลผลมอบโอกาสมากขึ้นในการแชร์ข้อมูลและผลลัพธ์การคำนวณภายในกลุ่มของตัวปรับแสงเงาเพื่อประสิทธิภาพที่ดีขึ้น ซึ่งสามารถนำไปสู่การเพิ่มขึ้นอย่างเห็นได้ชัดกว่าความพยายามครั้งก่อนหน้าในการใช้ WebGL เพื่อวัตถุประสงค์เดียวกัน
สำหรับตัวอย่างของประสิทธิภาพที่เพิ่มขึ้นมาได้ พอร์ตเริ่มต้นของโมเดลการกระจายภาพใน TensorFlow.js จะแสดงประสิทธิภาพที่เพิ่มขึ้น 3 เท่าบนฮาร์ดแวร์หลากหลายประเภทเมื่อย้ายจาก WebGL ไปยัง WebGPU ในอุปกรณ์บางรุ่นที่ทดสอบ รูปภาพแสดงผลภายในเวลาไม่ถึง 10 วินาที และเนื่องจากนี่เป็นโอกาสในช่วงแรก เราเชื่อว่าคุณจะปรับปรุง WebGPU และ TensorFlow.js ได้มากยิ่งขึ้นไปอีก ดูข้อมูลเกี่ยวกับมีอะไรใหม่ใน Web ML ในปี 2023 เซสชัน Google I/O
แต่ WebGPU ไม่เพียงเป็นการนำฟีเจอร์ของ GPU มาสู่เว็บ
ออกแบบมาสำหรับ JavaScript ก่อน
ฟีเจอร์ที่ช่วยให้ใช้ Use Case เหล่านี้ได้มีให้บริการแก่นักพัฒนาซอฟต์แวร์เดสก์ท็อปและอุปกรณ์เคลื่อนที่เฉพาะแพลตฟอร์มมาระยะหนึ่งแล้ว และการเปิดตัวฟีเจอร์ดังกล่าวในลักษณะที่ให้ความรู้สึกเหมือนเป็นส่วนหนึ่งของแพลตฟอร์มเว็บนั้นเป็นเรื่องที่ท้าทาย
WebGPU ได้รับการพัฒนาขึ้นโดยใช้ประโยชน์จากมุมมองเบื้องหลังจากนักพัฒนาซอฟต์แวร์กว่าทศวรรษที่ทำผลงานอันยอดเยี่ยมด้วย WebGL เราสามารถนำปัญหาที่พบ จุดคอขวดที่พบ และปัญหาที่นักเรียนรายงานเข้ามาและนำความคิดเห็นทั้งหมดมาไว้ใน API ใหม่นี้
เราพบว่าโมเดลสถานะทั่วโลกของ WebGL ทำให้การสร้างไลบรารีที่มีประสิทธิภาพและคอมโพสเซอร์ได้นั้นยากและง่าย WebGPU จึงลดปริมาณสถานะที่นักพัฒนาซอฟต์แวร์ต้องติดตามในขณะที่ส่งคำสั่ง GPU ได้อย่างมาก
เราทราบว่าการแก้ไขข้อบกพร่องในแอปพลิเคชัน WebGL เป็นเรื่องยุ่งยาก WebGPU จึงมีกลไกการจัดการข้อผิดพลาดที่ยืดหยุ่นกว่าซึ่งจะไม่กระทบต่อประสิทธิภาพของคุณ และเรายังได้พยายามทำให้ทุกข้อความที่คุณได้รับจาก API เข้าใจและนำไปดำเนินการได้ง่ายดาย
นอกจากนี้เรายังเห็นด้วยว่าบ่อยครั้งที่ค่าใช้จ่ายในการเรียกใช้ JavaScript มากเกินไปก็เป็นคอขวดสำหรับแอปพลิเคชัน WebGL ที่ซับซ้อน ด้วยเหตุนี้ WebGPU API จึงไม่มีความคุยแชทมากนัก คุณจึงทำสิ่งต่างๆ ได้มากขึ้นโดยใช้ฟังก์ชันการเรียกใช้ที่น้อยลง เราจะมุ่งเน้นที่การตรวจสอบแบบยกสูงเป็นหลัก เพื่อทำให้วงจรการดึงรอบสำคัญเป็นไปอย่างราบรื่นที่สุด และเรายังมี API ใหม่ๆ เช่น Render Bundles ซึ่งจะช่วยให้คุณบันทึกคำสั่งการวาดจำนวนมากได้ล่วงหน้า และเล่นซ้ำได้ด้วยการเรียกเพียงครั้งเดียว
มาสาธิตให้เห็นว่าฟีเจอร์อย่างแพ็กเกจการแสดงภาพสร้างความแตกต่างอย่างชัดเจนกันอย่างไรอีกตัวอย่างหนึ่งจาก Babylon.js ตัวแสดงผล WebGL 2 สามารถเรียกใช้ JavaScript ทั้งหมดเพื่อแสดงผลฉากของแกลเลอรีศิลปะนี้ได้ประมาณ 500 ครั้งต่อวินาที ซึ่งดีทีเดียว
อย่างไรก็ตาม ตัวแสดงผล WebGPU ของลูกค้าได้เปิดใช้งานฟีเจอร์ที่เรียกใช้การแสดงผลสแนปชอต ฟีเจอร์นี้สร้างขึ้นบนการรวมกลุ่มการแสดง WebGPU ทำให้สามารถส่งฉากเดียวกันได้เร็วกว่า 10 เท่า โอเวอร์เฮดที่ลดได้อย่างมากนี้ช่วยให้ WebGPU แสดงผลฉากที่ซับซ้อนขึ้นได้ ในขณะเดียวกันก็ช่วยให้แอปพลิเคชันใช้ JavaScript ทำอะไรได้มากขึ้นไปพร้อมๆ กัน
API กราฟิกสมัยใหม่มีชื่อเสียงด้านความซับซ้อน ความเรียบง่ายในการซื้อขายสำหรับโอกาสในการเพิ่มประสิทธิภาพสูงสุด ในทางกลับกัน WebGPU จะมุ่งเน้นไปที่ความเข้ากันได้แบบข้ามแพลตฟอร์ม การจัดการหัวข้อที่ยากๆ แบบดั้งเดิม เช่น การซิงค์ทรัพยากร โดยอัตโนมัติในกรณีส่วนใหญ่
ซึ่งจะส่งผลข้างเคียงที่น่าพอใจเนื่องจากเรียนรู้และใช้งาน WebGPU ได้ง่าย โดยอาศัยฟีเจอร์ที่มีอยู่ของแพลตฟอร์มเว็บสำหรับการดำเนินการต่างๆ เช่น การโหลดรูปภาพและวิดีโอ และเปลี่ยนไปใช้รูปแบบ JavaScript ที่เป็นที่รู้จักกันดี เช่น Promises สำหรับการดำเนินการแบบอะซิงโครนัส ซึ่งจะช่วยรักษาจำนวนโค้ดต้นแบบให้น้อยที่สุด คุณสามารถแสดงรูปสามเหลี่ยมแรกบนหน้าจอได้ในโค้ดไม่เกิน 50 บรรทัด
<canvas id="canvas" width="512" height="512"></canvas>
<script type="module">
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext("webgpu");
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format });
const code = `
@vertex fn vertexMain(@builtin(vertex_index) i : u32) ->
@builtin(position) vec4f {
const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
return vec4f(pos[i], 0, 1);
}
@fragment fn fragmentMain() -> @location(0) vec4f {
return vec4f(1, 0, 0, 1);
}`;
const shaderModule = device.createShaderModule({ code });
const pipeline = device.createRenderPipeline({
layout: "auto",
vertex: {
module: shaderModule,
entryPoint: "vertexMain",
},
fragment: {
module: shaderModule,
entryPoint: "fragmentMain",
targets: [{ format }],
},
});
const commandEncoder = device.createCommandEncoder();
const colorAttachments = [
{
view: context.getCurrentTexture().createView(),
loadOp: "clear",
storeOp: "store",
},
];
const passEncoder = commandEncoder.beginRenderPass({ colorAttachments });
passEncoder.setPipeline(pipeline);
passEncoder.draw(3);
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);
</script>
บทสรุป
เราตื่นเต้นที่ได้เห็นความเป็นไปได้ใหม่ๆ ทั้งหมดที่ WebGPU มีต่อแพลตฟอร์มเว็บ และเราหวังเป็นอย่างยิ่งว่าจะได้เห็นกรณีการใช้งานใหม่ๆ สุดเจ๋งที่คุณจะได้พบใน WebGPU
ระบบนิเวศที่มีชีวิตชีวาของไลบรารีและเฟรมเวิร์กสร้างขึ้นจาก WebGL และระบบนิเวศเดียวกันนี้ก็มีความกระตือรือร้นที่จะยอมรับ WebGPU การสนับสนุนสำหรับ WebGPU อยู่ระหว่างดำเนินการหรือเสร็จสมบูรณ์แล้วในไลบรารี JavaScript WebGL ยอดนิยมจำนวนมาก และในบางกรณีการใช้ประโยชน์จาก WebGPU ก็อาจทำได้ง่ายๆ อย่างการเปลี่ยนการตั้งค่าสถานะเพียงครั้งเดียว
และรุ่นแรกใน Chrome 113 เป็นเพียงจุดเริ่มต้นเท่านั้น แม้ว่ารุ่นแรกของเราจะเป็นเวอร์ชันสำหรับ Windows, ChromeOS และ MacOS แต่เราวางแผนที่จะนำ WebGPU ไปใช้กับแพลตฟอร์มที่เหลือ เช่น Android และ Linux ในอนาคตอันใกล้นี้
ไม่ใช่แค่ทีม Chrome ที่ทำหน้าที่เปิดตัว WebGPU เท่านั้น การติดตั้งก็กำลังดําเนินการใน Firefox และ WebKit เช่นกัน
นอกจากนี้ ยังมีการออกแบบฟีเจอร์ใหม่ๆ ใน W3C อยู่แล้ว โดยสามารถเปิดเผยได้เมื่อพร้อมใช้งานในฮาร์ดแวร์ ตัวอย่างเช่น ใน Chrome เราวางแผนที่จะเปิดใช้การรองรับเลขทศนิยม 16 บิตในตัวให้เฉดสีและคลาส DP4a ของวิธีการในเร็วๆ นี้ เพื่อปรับปรุงประสิทธิภาพของแมชชีนเลิร์นนิงให้ดียิ่งขึ้น
WebGPU เป็น API ขนาดใหญ่ที่ปลดล็อกประสิทธิภาพการทำงานที่ยอดเยี่ยมหากคุณลงทุนกับ WebGPU ในวันนี้เราจะพูดถึงประโยชน์ในระดับสูงเท่านั้น แต่หากคุณอยากเริ่มต้นใช้งาน WebGPU ลองดู Codelab แนะนำของเรา แอป WebGPU แรกของคุณ ใน Codelab นี้ คุณจะได้สร้างเวอร์ชัน GPU ของ Game of Life ของ Conway สุดคลาสสิก Codelab นี้จะแนะนำขั้นตอนต่างๆ อย่างละเอียดเพื่อให้คุณลองใช้งานได้แม้จะเพิ่งพัฒนา GPU เป็นครั้งแรกก็ตาม
ตัวอย่าง WebGPU ก็เป็นที่ที่เหมาะสำหรับการทำความรู้จักกับ API เช่นกัน มีตั้งแต่ "hello Triangle" แบบดั้งเดิม ไปจนถึงการแสดงภาพและไปป์ไลน์การประมวลผลที่สมบูรณ์ยิ่งขึ้น ซึ่งแสดงให้เห็นถึงเทคนิคที่หลากหลาย สุดท้าย โปรดดูแหล่งข้อมูลอื่นๆ ของเรา