ดูวิธีที่ WebGPU ปลดล็อกความสามารถของ GPU เพื่อประสิทธิภาพของแมชชีนเลิร์นนิงที่รวดเร็วขึ้นและการแสดงผลกราฟิกที่ดีขึ้น
WebGPU API ใหม่ปลดล็อกประสิทธิภาพที่เพิ่มขึ้นอย่างมากสำหรับภาระงานด้านกราฟิกและแมชชีนเลิร์นนิง บทความนี้จะสำรวจว่า WebGPU ได้รับการพัฒนาให้เหนือกว่าโซลูชัน WebGL ปัจจุบันได้อย่างไร โดยดูตัวอย่างการพัฒนาในอนาคตได้ แต่ก่อนอื่น เราจะอธิบายบริบทเกี่ยวกับเหตุผลที่พัฒนา WebGPU ขึ้นมา
บริบทบน WebGPU
WebGL เปิดตัวใน Chrome ในปี 2011 เมื่ออนุญาตให้เว็บแอปพลิเคชันใช้ประโยชน์จาก GPU ได้ WebGL จึงทำให้เกิดประสบการณ์อันน่าทึ่งบนเว็บ ตั้งแต่ Google Earth, มิวสิกวิดีโอแบบอินเทอร์แอกทีฟ, คำแนะนำแบบทีละขั้นเกี่ยวกับอสังหาริมทรัพย์ 3 มิติ และอีกมากมาย WebGL สร้างขึ้นในตระกูล OpenGL ของ API ที่พัฒนาขึ้นในปี 1992 นานมากแล้วนะ จะเห็นได้ว่าฮาร์ดแวร์ GPU ได้พัฒนาไปอย่างมากตั้งแต่นั้นเป็นต้นมา
เพื่อให้ก้าวทันวิวัฒนาการนี้ API สายใหม่จึงได้รับการพัฒนาให้สามารถโต้ตอบกับฮาร์ดแวร์ GPU ที่ทันสมัยได้อย่างมีประสิทธิภาพมากขึ้น API เช่น Direct3D 12, Metal และ Vulkan API ใหม่เหล่านี้รองรับกรณีการใช้งานที่ใหม่และมีการใช้งานมากสำหรับการเขียนโปรแกรม GPU เช่น การระเบิดของแมชชีนเลิร์นนิงและความก้าวหน้าด้านอัลกอริทึมการแสดงผล WebGPU คือสิ่งที่สืบทอดจาก WebGL เป็นการนำความก้าวหน้าของ API สมัยใหม่ประเภทใหม่นี้มาสู่เว็บ
WebGPU ปลดล็อกความเป็นไปได้ในการเขียนโปรแกรม GPU ใหม่ๆ มากมายในเบราว์เซอร์ ซึ่งจะสะท้อนให้เห็นวิธีการทำงานของฮาร์ดแวร์ GPU ที่ทันสมัยได้ชัดเจนขึ้น ขณะเดียวกันก็เป็นการวางรากฐานสำหรับความสามารถของ GPU ขั้นสูงขึ้นในอนาคต API นี้พัฒนาขึ้นในกลุ่ม "GPU สำหรับเว็บ" ของ 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 ในขณะที่ไม่ถูกจำกัดโดยโครงสร้างที่เข้มงวดของการดำเนินการแสดงผล
ตัวปรับแสงเงา Compute มอบโอกาสมากขึ้นในการแชร์ข้อมูลและผลลัพธ์การคำนวณภายในกลุ่มการทำงานของตัวปรับแสงเงาเพื่อประสิทธิภาพที่ดียิ่งขึ้น ซึ่งอาจนำไปสู่ประโยชน์ที่มากขึ้นอย่างมีนัยสำคัญจากการใช้ WebGL เพื่อจุดประสงค์เดียวกันก่อนหน้านี้
ตัวอย่างของประสิทธิภาพที่เพิ่มขึ้นนี้ก็คือ พอร์ตเริ่มต้นของโมเดลการกระจายภาพใน TensorFlow.js จะแสดงประสิทธิภาพที่เพิ่มขึ้น 3 เท่าบนฮาร์ดแวร์หลากหลายประเภทเมื่อย้ายจาก WebGL ไปยัง WebGPU ฮาร์ดแวร์บางส่วนที่ทดสอบว่ารูปภาพแสดงผลภายในเวลาไม่ถึง 10 วินาที และเนื่องจากนี่เป็นพอร์ตในระยะแรก เราจึงเชื่อว่ายังมีการปรับปรุงอีกมากมายที่เป็นไปได้ทั้งใน WebGPU และ TensorFlow.js ดูว่ามีอะไรใหม่ใน Web ML ในปี 2023 เซสชัน Google I/O
WebGPU ไม่ได้มีแค่การนำฟีเจอร์ GPU มาใช้กับเว็บเท่านั้น
ออกแบบมาสำหรับ JavaScript เป็นลำดับแรก
ฟีเจอร์ที่เปิดใช้กรณีการใช้งานเหล่านี้มีให้ใช้งานสำหรับนักพัฒนาซอฟต์แวร์บนเดสก์ท็อปและอุปกรณ์เคลื่อนที่เฉพาะแพลตฟอร์มมาระยะหนึ่งแล้ว และเราก็ท้าทายให้เปิดเผยฟีเจอร์เหล่านั้นให้รู้สึกเหมือนเป็นส่วนหนึ่งของแพลตฟอร์มบนเว็บอย่างแท้จริง
WebGPU ได้รับการพัฒนาขึ้นโดยใช้ประโยชน์จากความสามารถในการมองย้อนกลับจากนักพัฒนาซอฟต์แวร์กว่า 1 ทศวรรษที่ทำงานได้อย่างดีเยี่ยมด้วย 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 นำมาให้แพลตฟอร์มเว็บ และเรากำลังรอดู Use Case เจ๋งๆ ใหม่ๆ ทั้งหมดที่คุณจะได้พบสำหรับ WebGPU!
ระบบนิเวศที่มีชีวิตชีวาของไลบรารีและเฟรมเวิร์กสร้างขึ้นโดยใช้ WebGL และระบบนิเวศเดียวกันนี้ก็พร้อมที่จะใช้ WebGPU เช่นกัน การรองรับ WebGPU อยู่ระหว่างดำเนินการหรือเสร็จสมบูรณ์แล้วในไลบรารี JavaScript WebGL ยอดนิยมจำนวนมาก และในบางกรณีการใช้ประโยชน์จาก WebGPU อาจเป็นเรื่องง่ายพอๆ กับการเปลี่ยน Flag เพียงครั้งเดียว
และรุ่นแรกใน Chrome 113 นี้เป็นเพียงจุดเริ่มต้นเท่านั้น แม้ว่ารุ่นแรกของเรามีไว้สำหรับ Windows, ChromeOS และ MacOS แต่เราวางแผนที่จะนำ WebGPU ไปใช้ในแพลตฟอร์มที่เหลือ เช่น Android และ Linux ในอนาคตอันใกล้
และไม่ใช่เพียงทีม Chrome เท่านั้นที่ทำงานในการเปิดตัว WebGPU ส่วน Firefox และ WebKit ก็กำลังอยู่ระหว่างดำเนินการ
นอกจากนี้ ยังมีการออกแบบฟีเจอร์ใหม่ใน W3C แล้ว ซึ่งสามารถใช้ในฮาร์ดแวร์ได้ด้วย ตัวอย่างเช่น ใน Chrome เราวางแผนที่จะเปิดใช้การรองรับเลขทศนิยม 16 บิตในตัวสร้างเฉดสีและวิธีการระดับ DP4a ในเร็วๆ นี้ เพื่อปรับปรุงประสิทธิภาพแมชชีนเลิร์นนิงให้ดียิ่งขึ้น
WebGPU เป็น API ที่ครอบคลุมซึ่งปลดล็อกประสิทธิภาพอันน่าทึ่งหากคุณลงทุนกับมัน วันนี้เราจะพูดถึงประโยชน์ในระดับสูงเท่านั้น แต่หากคุณต้องการเริ่มต้นใช้งาน WebGPU โปรดดู Codelab แนะนำแอป WebGPU แรกของคุณ ใน Codelab นี้ คุณจะได้สร้าง Game of Life คลาสสิกของ Conway ในเวอร์ชัน GPU Codelab นี้จะแนะนำกระบวนการแบบทีละขั้นตอน คุณจึงนำไปลองใช้ได้แม้ว่าจะเพิ่งพัฒนา GPU เป็นครั้งแรก
ตัวอย่าง WebGPU ยังเป็นช่องทางที่ดีในการตรวจสอบ API ด้วย มีตั้งแต่คำว่า " Hello Triangle" แบบดั้งเดิม สู่ไปป์ไลน์การประมวลผลและแสดงภาพที่สมบูรณ์ยิ่งขึ้น ซึ่งแสดงให้เห็นถึงเทคนิคที่หลากหลาย สุดท้ายนี้ โปรดดูแหล่งข้อมูลอื่นๆ ของเรา