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

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

Corentin Wallez

Brandon Jones

François Beaufort

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

บริบทบน WebGPU

WebGL เปิดตัวใน Chrome ในปี 2011 เมื่ออนุญาตให้เว็บแอปพลิเคชันใช้ประโยชน์จาก GPU ได้ WebGL จึงทำให้เกิดประสบการณ์อันน่าทึ่งบนเว็บ ตั้งแต่ 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 เพื่อดำเนินการที่ไม่เกี่ยวข้องกับการเรนเดอร์ เช่น การประมวลผลแมชชีนเลิร์นนิง อย่างไรก็ตาม วิธีการนี้จำเป็นต้องวาดพิกเซลของสามเหลี่ยมเพื่อเริ่มต้นการคำนวณ และแพ็กและแตกไฟล์ข้อมูลเทนเซอร์ในพื้นผิวอย่างระมัดระวังแทนการเข้าถึงหน่วยความจำแบบทั่วไป

การดำเนินการของโอเปอเรเตอร์ ML รายการเดียวที่มี WebGL

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

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

ประสิทธิภาพของเวิร์กชีตคอมพิวตของ WebGPU

เชดเดอร์การประมวลผลช่วยให้มีโอกาสมากขึ้นในการแชร์ข้อมูลและผลลัพธ์การประมวลผลภายในกลุ่มการทำงานของเชดเดอร์เพื่อให้มีประสิทธิภาพมากขึ้น ซึ่งอาจทําให้ได้รับผลลัพธ์ที่ดีขึ้นอย่างมากเมื่อเทียบกับความพยายามก่อนหน้านี้ในการใช้ 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 จะเปิดใช้ฟีเจอร์ที่เรียกว่า "การแสดงสแนปชอต" ฟีเจอร์นี้สร้างขึ้นบนชุดการแสดงผล 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 กำลังดำเนินการหรือเสร็จสมบูรณ์แล้วในไลบรารี WebGL ของ JavaScript ยอดนิยมหลายรายการ และในกรณีบางกรณี การใช้ประโยชน์ของ WebGPU อาจทำได้ง่ายเพียงเปลี่ยน Flag เดียว

เฟรมเวิร์ก แอปพลิเคชัน และไลบรารีที่มีพอร์ต WebGPU ที่เสร็จสมบูรณ์หรืออยู่ระหว่างดำเนินการ

และรุ่นแรกใน 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" แบบดั้งเดิมไปจนถึงการแสดงผลและไปป์ไลน์การประมวลผลที่สมบูรณ์มากขึ้น ซึ่งแสดงให้เห็นถึงเทคนิคที่หลากหลาย สุดท้ายนี้ โปรดดูแหล่งข้อมูลอื่นๆ ของเรา