WebGPU: ปลดล็อกการเข้าถึง GPU สมัยใหม่ในเบราว์เซอร์

ดูวิธีที่ WebGPU ปลดล็อกความสามารถของ GPU เพื่อประสิทธิภาพแมชชีนเลิร์นนิงที่เร็วขึ้นและการเรนเดอร์กราฟิกที่ดีขึ้น

Corentin Wallez

Brandon Jones

François Beaufort

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 ใหม่เหล่านี้รองรับ Use Case ใหม่ๆ ที่ต้องใช้การเขียนโปรแกรม GPU เช่น แมชชีนเลิร์นนิงที่ได้รับความนิยมอย่างแพร่หลายและอัลกอริทึมการแสดงผลขั้นสูง WebGPU เป็น API รุ่นใหม่ที่เข้ามาแทนที่ 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 เช่น Compute Shader ช่วยให้พอร์ตอัลกอริทึมคลาสใหม่ไปยัง GPU ได้ เช่น อัลกอริทึมที่เพิ่มรายละเอียดแบบไดนามิกให้กับฉาก จำลองปรากฏการณ์ทางกายภาพ และอื่นๆ นอกจากนี้ ยังมีเวิร์กโหลดที่ก่อนหน้านี้ทำได้ใน JavaScript เท่านั้น แต่ตอนนี้ย้ายไปยัง GPU ได้แล้ว

วิดีโอต่อไปนี้แสดงการใช้อัลกอริทึม Marching Cubes เพื่อหาสามเหลี่ยมพื้นผิวของเมตาบอลเหล่านี้ ในช่วง 20 วินาทีแรกของวิดีโอ อัลกอริทึมจะทำงานใน JavaScript ได้อย่างยากลำบากเมื่อหน้าเว็บทำงานที่ 8 FPS เท่านั้น ส่งผลให้ภาพเคลื่อนไหวกระตุก หากต้องการให้มีประสิทธิภาพใน JavaScript เราจะต้องลดระดับรายละเอียดลงอย่างมาก

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

WebGPU ยังช่วยให้แสดงเอฟเฟกต์ภาพที่ซับซ้อนได้ ซึ่งก่อนหน้านี้ไม่สามารถทำได้ ในตัวอย่างต่อไปนี้ซึ่งสร้างขึ้นในไลบรารี Babylon.js ยอดนิยม ระบบจะจำลองพื้นผิวมหาสมุทรทั้งหมดใน GPU เสียงที่สมจริงสร้างขึ้นจากคลื่นอิสระหลายรายการที่นำมารวมกัน แต่การจําลองแต่ละคลื่นโดยตรงนั้นแพงเกินไป

ด้วยเหตุนี้ การแสดงตัวอย่างจึงใช้อัลกอริทึมขั้นสูงที่เรียกว่า Fast Fourier Transform แทนที่จะแสดงคลื่นทั้งหมดเป็นข้อมูลตำแหน่งที่ซับซ้อน ข้อมูลนี้จะใช้ข้อมูลสเปกตรัมที่มีประสิทธิภาพมากกว่าในการคํานวณ จากนั้นแต่ละเฟรมจะใช้ Fourier Transform เพื่อแปลงจากข้อมูลสเปกตรัมเป็นข้อมูลตำแหน่งที่แสดงถึงระดับความสูงของคลื่น

การทำนายด้วย ML ที่เร็วขึ้น

WebGPU ยังมีประโยชน์ในการเร่งความเร็วแมชชีนเลิร์นนิงด้วย ซึ่งกลายเป็นการใช้งานหลักของ GPU ในช่วงไม่กี่ปีที่ผ่านมา

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

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

คอมพิวตเชดเดอร์เป็นฟีเจอร์ใหม่หลักของ WebGPU ที่จะช่วยขจัดปัญหาเหล่านี้ เชดเดอร์การประมวลผลมีรูปแบบการเขียนโปรแกรมที่ยืดหยุ่นมากขึ้น ซึ่งใช้ประโยชน์จากลักษณะการทำงานแบบขนานจำนวนมากของ GPU โดยไม่มีข้อจำกัดจากโครงสร้างที่เข้มงวดของการดำเนินการแสดงผล

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

ตัวอย่างประสิทธิภาพที่เพิ่มขึ้นที่ได้จากการดำเนินการนี้ ได้แก่ พอร์ตเริ่มต้นของโมเดลการแพร่กระจายรูปภาพใน TensorFlow.js แสดงประสิทธิภาพที่เพิ่มขึ้น 3 เท่าในฮาร์ดแวร์ต่างๆ เมื่อย้ายจาก WebGL ไปยัง WebGPU ฮาร์ดแวร์บางรุ่นที่ทดสอบแสดงผลภาพได้ภายใน 10 วินาที และเนื่องจากนี่เป็นพอร์ตเวอร์ชันแรก เราจึงเชื่อว่ายังมีการปรับปรุงเพิ่มเติมได้ทั้งใน WebGPU และ TensorFlow.js ดูมีอะไรใหม่เกี่ยวกับ ML บนเว็บในปี 2023 เซสชัน Google I/O

แต่ WebGPU ไม่ได้มีไว้เพื่อนำฟีเจอร์ GPU มาใช้กับเว็บเท่านั้น

ออกแบบมาเพื่อ JavaScript ก่อน

ฟีเจอร์ที่เปิดใช้กรณีการใช้งานเหล่านี้พร้อมให้บริการแก่นักพัฒนาแอปบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่สำหรับแพลตฟอร์มหนึ่งๆ มาระยะหนึ่งแล้ว และเราพยายามนำเสนอฟีเจอร์เหล่านี้ในลักษณะที่ดูเหมือนเป็นส่วนหนึ่งของแพลตฟอร์มเว็บ

WebGPU ได้รับการพัฒนาโดยใช้ประโยชน์จากประสบการณ์ที่ผ่านมาของนักพัฒนาซอฟต์แวร์ที่ใช้ WebGL ได้อย่างยอดเยี่ยมมานานกว่า 10 ปี เราได้นำปัญหาที่ผู้ใช้พบ ปัญหาที่พบทางตัน และปัญหาที่ผู้ใช้แจ้งมา แล้วนำความคิดเห็นทั้งหมดนั้นมาปรับปรุง API ใหม่นี้

เราพบว่ารูปแบบสถานะส่วนกลางของ WebGL ทำให้การสร้างไลบรารีและแอปพลิเคชันที่มีประสิทธิภาพและนำมาประกอบกันได้นั้นเป็นเรื่องยากและเปราะบาง WebGPU จึงช่วยลดจำนวนสถานะที่นักพัฒนาแอปต้องติดตามขณะส่งคําสั่ง GPU ได้อย่างมหาศาล

เราทราบมาว่าการแก้ไขข้อบกพร่องของแอปพลิเคชัน WebGL นั้นเป็นเรื่องยาก WebGPU จึงมีกลไกการจัดการข้อผิดพลาดที่ยืดหยุ่นมากขึ้นซึ่งไม่ทำให้ประสิทธิภาพลดลง และเราพยายามอย่างเต็มที่เพื่อให้ข้อความทุกข้อความที่คุณได้รับจาก API เข้าใจง่ายและนําไปใช้ได้จริง

นอกจากนี้ เรายังพบว่าค่าใช้จ่ายเพิ่มเติมในการเรียกใช้ JavaScript มากเกินไปมักเป็นปัญหาคอขวดสําหรับแอปพลิเคชัน WebGL ที่ซับซ้อน ด้วยเหตุนี้ WebGPU API จึงทำงานน้อยลง คุณจึงทำงานได้มากขึ้นด้วยการเรียกใช้ฟังก์ชันน้อยลง เรามุ่งเน้นที่การตรวจสอบที่หนักหน่วงตั้งแต่เนิ่นๆ เพื่อทำให้ลูปการวาดที่สำคัญมีความเรียบง่ายมากที่สุด และเรามี API ใหม่ๆ เช่น Render Bundles ซึ่งช่วยให้คุณบันทึกคําสั่งการวาดจํานวนมากล่วงหน้าและเล่นซ้ำด้วยการเรียกใช้เพียงครั้งเดียว

ต่อไปนี้เป็นการสาธิตอีกรายการจาก Babylon.js เพื่อแสดงให้เห็นว่าฟีเจอร์อย่างกลุ่มการเรนเดอร์ช่วยได้มากเพียงใด โปรแกรมแสดงผล WebGL 2 ของทีมสามารถเรียกใช้ JavaScript ทั้งหมดเพื่อแสดงผลฉากแกลเลอรีภาพนี้ประมาณ 500 ครั้งต่อวินาที ซึ่งถือว่าดีมาก

แต่โปรแกรมแสดงผล WebGPU ของ Safari เปิดใช้ฟีเจอร์ที่เรียกว่าการแสดงผลภาพนิ่ง ฟีเจอร์นี้สร้างขึ้นจากแพ็กเกจเรนเดอร์ของ 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 อาจทำได้ง่ายเพียงเปลี่ยน Flag เดียว

และรุ่นแรกใน Chrome 113 นี้เป็นเพียงจุดเริ่มต้นเท่านั้น แม้ว่ารุ่นแรกจะพร้อมให้บริการใน Windows, ChromeOS และ MacOS แต่เราวางแผนที่จะนำ WebGPU ไปยังแพลตฟอร์มที่เหลือ เช่น Android และ Linux ในอนาคตอันใกล้

และไม่ใช่แค่ทีม Chrome เท่านั้นที่ทำงานเพื่อเปิดตัว WebGPU นอกจากนี้ เรายังอยู่ระหว่างการนําไปใช้ใน Firefox และ WebKit ด้วย

นอกจากนี้ W3C กำลังออกแบบฟีเจอร์ใหม่ๆ ที่พร้อมใช้งานเมื่อพร้อมให้บริการในฮาร์ดแวร์ ตัวอย่างเช่น ใน Chrome เราวางแผนที่จะเปิดใช้การรองรับตัวเลขทศนิยม 16 บิตในโปรแกรมเปลี่ยนสีและคำสั่งระดับ DP4a ในเร็วๆ นี้เพื่อปรับปรุงประสิทธิภาพของแมชชีนเลิร์นนิงให้ดียิ่งขึ้น

WebGPU เป็น API ที่ครอบคลุมซึ่งจะปลดล็อกประสิทธิภาพที่ยอดเยี่ยมหากคุณลงทุนในเทคโนโลยีนี้ วันนี้เราพูดถึงประโยชน์ของ WebGPU ได้เพียงระดับสูงเท่านั้น แต่หากต้องการเริ่มต้นใช้งาน WebGPU โปรดดู Codelab เบื้องต้นอย่างแอป WebGPU แรกของคุณ ใน Codelab นี้ คุณจะได้สร้างเกม Conway's Game of Life เวอร์ชัน GPU Codelab นี้จะอธิบายขั้นตอนต่างๆ ทีละขั้นตอน เพื่อให้คุณลองใช้งานได้แม้ว่าจะเป็นการพัฒนา GPU เป็นครั้งแรกก็ตาม

นอกจากนี้ ตัวอย่าง WebGPU ยังเหมาะสําหรับการลองใช้ API นี้ด้วย ตัวอย่างมีตั้งแต่ "สามเหลี่ยม Hello" แบบดั้งเดิมไปจนถึงการแสดงผลและไปป์ไลน์การประมวลผลที่สมบูรณ์มากขึ้น ซึ่งแสดงให้เห็นถึงเทคนิคที่หลากหลาย สุดท้ายนี้ โปรดดูแหล่งข้อมูลอื่นๆ ของเรา