What's New in WebGPU (Chrome 131) | Blog

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Chrome for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1a73e8"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/chrome/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/touchicon-180.png"><link rel="canonical" href="https://developer.chrome.com/blog/new-in-webgpu-131"><link rel="search" type="application/opensearchdescription+xml" title="Chrome for Developers" href="https://developer.chrome.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developer.chrome.com/blog/new-in-webgpu-131" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.com/blog/new-in-webgpu-131" /><link rel="alternate" hreflang="ar" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=zh-tw" /><link rel="alternate" hreflang="nl" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=nl" /><link rel="alternate" hreflang="fa" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.chrome.com/blog/new-in-webgpu-131?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131" /><link rel="alternate" hreflang="ar-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=zh-tw" /><link rel="alternate" hreflang="nl-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=nl" /><link rel="alternate" hreflang="fa-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://developer.chrome.google.cn/blog/new-in-webgpu-131?hl=vi" /><title>What's New in WebGPU (Chrome 131)  |  Blog  |  Chrome for Developers</title> <meta property="og:title" content="What's New in WebGPU (Chrome 131)  |  Blog  |  Chrome for Developers"><meta name="description" content="Clip distances in WGSL, GPUCanvasContext getConfiguration(), point and line primitives must not have depth bias, inclusive scan built-in functions for subgroups, experimental support for multi-draw indirect, shader module compilation option strict math, remove GPUAdapter requestAdapterInfo(), and more."> <meta property="og:description" content="Clip distances in WGSL, GPUCanvasContext getConfiguration(), point and line primitives must not have depth bias, inclusive scan built-in functions for subgroups, experimental support for multi-draw indirect, shader module compilation option strict math, remove GPUAdapter requestAdapterInfo(), and more."><meta property="og:url" content="https://developer.chrome.com/blog/new-in-webgpu-131"><meta property="og:image" content="https://developer.chrome.com/static/blog/new-in-webgpu-131/image/new-in-webgpu-131.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary_large_image"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Blog", "item": "https://developer.chrome.com/blog" },{ "@type": "ListItem", "position": 2, "name": "What&#39;s New in WebGPU (Chrome&nbsp;131)", "item": "https://developer.chrome.com/blog/new-in-webgpu-131" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="chrome-theme" type="blog" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <a href="#main-content" class="skip-link button"> Skip to main content </a> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://developer.chrome.com/case-studies" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/case-studies" track-type="nav" track-metadata-position="nav - get inspired" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" > Get inspired </a> </tab> <tab > <a href="https://developer.chrome.com/blog" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/blog" track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab class="devsite-dropdown devsite-dropdown-full "> <a href="https://developer.chrome.com/docs" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/docs" track-type="nav" track-metadata-position="nav - docs" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > Docs </a> <button aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown menu for Docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Build with Chrome</li> <li class="devsite-nav-description">Learn how Chrome works, participate in origin trials, and build with Chrome everywhere. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/web-platform" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/web-platform" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web Platform </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/capabilities" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/capabilities" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Capabilities </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromedriver" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromedriver" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> ChromeDriver </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Extensions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chrome Web Store </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromium" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromium" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chromium </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/aurora" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/aurora" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Aurora </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/android" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/android" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web on Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/origintrials/" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Origin trials </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/release-notes" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/release-notes" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Release notes </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Productivity</li> <li class="devsite-nav-description">Create the best experience for your users with the web's best tools.</li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> DevTools </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/lighthouse" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Lighthouse </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/crux" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/crux" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Chrome UX Report </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/accessibility" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/accessibility" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section dcc-subnav second-column-list"> <li class="devsite-nav-description">Get things done quicker and neater, with our ready-made libraries. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/workbox" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/workbox" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Workbox </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/puppeteer" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/puppeteer" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Puppeteer </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Experience</li> <li class="devsite-nav-description">Design a beautiful and performant web with Chrome. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/ai" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/ai" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> AI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/performance" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/performance" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/css-ui" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/css-ui" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> CSS and UI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/identity" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/identity" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/payments" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/payments" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Payments </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/privacy-security" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/privacy-security" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Privacy and security </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section resources-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Resources</li> <li class="devsite-nav-description">More from the Chrome team. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> All documentation </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" track-type="nav" track-metadata-eventdetail="https://web.dev/baseline" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> Baseline </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" track-type="nav" track-metadata-eventdetail="https://web.dev" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> web.dev </div> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev" track-type="nav" track-metadata-eventdetail="https://pagespeed.web.dev" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> PageSpeed Insights audit </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/new" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.chrome.com/new" track-type="nav" track-metadata-position="nav - new in chrome" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" > New in Chrome </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Blog" tenant-name="Chrome for Developers" > <form class="devsite-search-form" action="https://developer.chrome.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section devsite-header-no-lower-tabs "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/blog" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Blog" > Blog </a> </li> </ul> </div> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get inspired" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get inspired </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Docs" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Docs </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > <span class="devsite-nav-text" tooltip menu="Docs"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Docs"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/new" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" data-category="Site-Wide Custom Events" data-label="Responsive Tab: New in Chrome" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > New in Chrome </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="Docs" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build with Chrome </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/web-platform" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Platform" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Platform </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/capabilities" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Capabilities" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Capabilities </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromedriver" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: ChromeDriver" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > ChromeDriver </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Extensions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Extensions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome Web Store" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome Web Store </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromium" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chromium" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chromium </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/aurora" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Aurora" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Aurora </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/android" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web on Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web on Android </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Origin trials" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Origin trials </span> </a> </li> <li class="devsite-nav-item"> <a href="/release-notes" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Release notes" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Release notes </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Productivity </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/devtools" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: DevTools" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > DevTools </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/lighthouse" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Lighthouse" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Lighthouse </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/crux" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome UX Report" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome UX Report </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/workbox" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Workbox" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Workbox </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/puppeteer" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Puppeteer" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Puppeteer </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/css-ui" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS and UI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS and UI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/payments" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Payments" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Payments </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/privacy-security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy and security" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy and security </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: All documentation" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > All documentation </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Baseline </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > web.dev </span> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: PageSpeed Insights audit" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PageSpeed Insights audit </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Chrome for Developers" > Chrome for Developers </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/blog" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Blog" > Blog </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> What's New in WebGPU (Chrome 131) </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p><style> .wd-authors { --avatar-size: 65px; display: flex; gap: 2em; } .wd-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .wd-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-authors { --avatar-size: 65px; display: flex; gap: 2em; } .dcc-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .dcc-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-author__links a { margin-inline-end: 6px; } .dcc-author__links a:last-of-type { margin-inline-end: 0; } </style> <div class="dcc-authors" translate="no"> <div class="dcc-author"> <img class="devsite-landing-row-item-icon" alt="François Beaufort" src="https://web.dev/images/authors/beaufortfrancois.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> François Beaufort </span> <div class="dcc-author__links"> <a href="https://github.com/beaufortfrancois" aria-label="François Beaufort on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> </div> </div> </div> </div></p> <h2 id="clip_distances_in_wgsl" data-text="Clip distances in WGSL" tabindex="-1">Clip distances in WGSL</h2> <p>Clip distances allow you to restrict <a href="https://gpuweb.github.io/gpuweb/#clip-volume">primitives' clip volume</a> with user-defined half-spaces in the output of vertex stage. Defining your own clipping planes gives greater control over what's visible in your WebGPU scenes. This technique is particularly useful for applications like CAD software, where precise control over visualization is crucial.</p> <p>When the <code translate="no" dir="ltr">"clip-distances"</code> feature is available in a GPUAdapter, request a GPUDevice with this feature to get clip distances support in WGSL, and explicitly enable this extension in your WGSL code with <code translate="no" dir="ltr">enable clip_distances;</code>. Once enabled, you can use the <code translate="no" dir="ltr">clip_distances</code> built-in array in your vertex shader. This array holds distances to a user-defined clip plane:</p> <ul> <li>A clip distance of 0 means the vertex lies on the plane.</li> <li>A positive distance means the vertex is inside the clip half-space (the side you want to keep).</li> <li>A negative distance means the vertex is outside the clip half-space (the side you want to discard).</li> </ul> <p>See the following snippet, the <a href="https://chromestatus.com/feature/5141929256550400">chromestatus entry</a>, and <a href="https://issues.chromium.org/issues/358408571">issue 358408571</a>.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">adapter</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">await</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">navigator</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">gpu</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">requestAdapter</span><span class="devsite-syntax-p">();</span> <span class="devsite-syntax-k">if</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-o">!</span><span class="devsite-syntax-nx">adapter</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">features</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">has</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"clip-distances"</span><span class="devsite-syntax-p">))</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">throw</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ne">Error</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"Clip distances support is not available"</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-p">}</span> <span class="devsite-syntax-c1">// Explicitly request clip distances support.</span> <span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">device</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">await</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">adapter</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">requestDevice</span><span class="devsite-syntax-p">({</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">requiredFeatures</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-s2">"clip-distances"</span><span class="devsite-syntax-p">],</span> <span class="devsite-syntax-p">});</span> <span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">vertexShaderModule</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">device</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">createShaderModule</span><span class="devsite-syntax-p">({</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">code</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-sb">`</span> <span class="devsite-syntax-sb"> enable clip_distances;</span> <span class="devsite-syntax-sb"> struct VertexOut {</span> <span class="devsite-syntax-sb"> @builtin(clip_distances) my_clip_distances : array<f32, 1>,</span> <span class="devsite-syntax-sb"> @builtin(position) my_position : vec4f,</span> <span class="devsite-syntax-sb"> }</span> <span class="devsite-syntax-sb"> @vertex fn main() -> VertexOut {</span> <span class="devsite-syntax-sb"> var output : VertexOut;</span> <span class="devsite-syntax-sb"> output.my_clip_distances[0] = 1;</span> <span class="devsite-syntax-sb"> output.my_position = vec4f(0, 0, 0, 1);</span> <span class="devsite-syntax-sb"> return output;</span> <span class="devsite-syntax-sb"> }</span> <span class="devsite-syntax-sb">`</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-p">});</span> <span class="devsite-syntax-c1">// Send the appropriate commands to the GPU...</span> </code></pre></devsite-code> <h2 id="gpucanvascontext_getconfiguration" data-text="GPUCanvasContext getConfiguration()" tabindex="-1">GPUCanvasContext getConfiguration()</h2> <p>Once GPUCanvasContext <code translate="no" dir="ltr">configure()</code> has been called with a configuration dictionary, the GPUCanvasContext <a href="https://gpuweb.github.io/gpuweb/#dom-gpucanvascontext-getconfiguration"><code translate="no" dir="ltr">getConfiguration()</code></a> method lets you check the canvas context configuration. It includes <code translate="no" dir="ltr">device</code>, <code translate="no" dir="ltr">format</code>, <code translate="no" dir="ltr">usage</code>, <code translate="no" dir="ltr">viewFormats</code>, <code translate="no" dir="ltr">colorSpace</code>, <code translate="no" dir="ltr">toneMapping</code>, and <code translate="no" dir="ltr">alphaMode</code> members. This is useful for tasks like checking if the browser supports HDR canvas, as shown in the <a href="https://webgpu.github.io/webgpu-samples/?sample=particles">Particles (HDR) sample</a>. See the following snippet, the <a href="https://chromestatus.com/feature/6195110870777856">chromestatus entry</a>, and <a href="https://issues.chromium.org/issues/370109829">issue 370109829</a>.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">adapter</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">await</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">navigator</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">gpu</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">requestAdapter</span><span class="devsite-syntax-p">();</span> <span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">device</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">await</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">adapter</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">requestDevice</span><span class="devsite-syntax-p">();</span> <span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">canvas</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">document</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">querySelector</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"canvas"</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">context</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">canvas</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">getContext</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"webgpu"</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-c1">// Configure the canvas for HDR.</span> <span class="devsite-syntax-nx">context</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">configure</span><span class="devsite-syntax-p">({</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">device</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">format</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"rgba16float"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">toneMapping</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">mode</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"extended"</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">},</span> <span class="devsite-syntax-p">});</span> <span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">configuration</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">context</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">getConfiguration</span><span class="devsite-syntax-p">();</span> <span class="devsite-syntax-k">if</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">configuration</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">toneMapping</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">mode</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">===</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"extended"</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// The browser supports HDR canvas.</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// Warning! The user still needs a HDR display to enjoy HDR content.</span> <span class="devsite-syntax-p">}</span> </code></pre></devsite-code> <h2 id="point_and_line_primitives_must_not_have_depth_bias" data-text="Point and line primitives must not have depth bias" tabindex="-1">Point and line primitives must not have depth bias</h2> <p>As announced <a href="/blog/new-in-webgpu-128#deprecate_setting_depth_bias_for_lines_and_points">previously</a>, the WebGPU spec now makes it a validation error to set <code translate="no" dir="ltr">depthBias</code>, <code translate="no" dir="ltr">depthBiasSlopeScale</code>, and <code translate="no" dir="ltr">depthBiasClamp</code> to a non-zero value when the topology for a render pipeline is a line or point type. See <a href="https://issues.chromium.org/issues/352567424">issue 352567424</a>.</p> <h2 id="inclusive_scan_built-in_functions_for_subgroups" data-text="Inclusive scan built-in functions for subgroups" tabindex="-1">Inclusive scan built-in functions for subgroups</h2> <p>As part of the <a href="/blog/new-in-webgpu-128#experimenting_with_subgroups">subgroups experimentation</a>, the following subgroup built-in functions have been added in <a href="https://g-issues.chromium.org/issues/361330160">issue 361330160</a>:</p> <ul> <li><code translate="no" dir="ltr">subgroupInclusiveAdd(value)</code>: Returns the inclusive scan summation of all active invocations <code translate="no" dir="ltr">value</code>s across the subgroup.</li> <li><code translate="no" dir="ltr">subgroupInclusiveMul(value)</code>: Returns the inclusive scan multiplication of all active invocations <code translate="no" dir="ltr">value</code>s across the subgroup.</li> </ul> <h2 id="experimental_support_for_multi-draw_indirect" data-text="Experimental support for multi-draw indirect" tabindex="-1">Experimental support for multi-draw indirect</h2> <p>The multi-draw indirect GPU feature lets you issue multiple draw calls with a single GPU command. This is particularly useful in situations where a large number of objects need to be rendered, such as particle systems, instancing, and large scenes. The <code translate="no" dir="ltr">drawIndirect()</code> and <code translate="no" dir="ltr">drawIndexedIndirect()</code> GPURenderPassEncoder methods can only issue a single draw call at a time from a certain region of a GPU buffer.</p> <p>Until this experimental feature is <a href="https://github.com/gpuweb/gpuweb/pull/2315">standardized</a>, enable the "Unsafe WebGPU Support" flag at <code translate="no" dir="ltr">chrome://flags/#enable-unsafe-webgpu</code> to make it available in Chrome.</p> <p>With the <code translate="no" dir="ltr">"chromium-experimental-multi-draw-indirect"</code> non-standard GPU feature available in a GPUAdapter, request a GPUDevice with this feature. Then create a GPUBuffer with the <code translate="no" dir="ltr">GPUBufferUsage.INDIRECT</code> usage to store the draw calls. You can use it later in the new <code translate="no" dir="ltr">multiDrawIndirect()</code> and <code translate="no" dir="ltr">multiDrawIndexedIndirect()</code> GPURenderPassEncoder methods to issue draw calls inside a render pass. See the following snippet and <a href="https://issues.chromium.org/issues/356461286">issue 356461286</a>.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">adapter</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">await</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">navigator</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">gpu</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">requestAdapter</span><span class="devsite-syntax-p">();</span> <span class="devsite-syntax-k">if</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-o">!</span><span class="devsite-syntax-nx">adapter</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">features</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">has</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"chromium-experimental-multi-draw-indirect"</span><span class="devsite-syntax-p">))</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">throw</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ne">Error</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-s2">"Experimental multi-draw indirect support is not available"</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-p">}</span> <span class="devsite-syntax-c1">// Explicitly request experimental multi-draw indirect support.</span> <span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">device</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">await</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">adapter</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">requestDevice</span><span class="devsite-syntax-p">({</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">requiredFeatures</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">[</span><span class="devsite-syntax-s2">"chromium-experimental-multi-draw-indirect"</span><span class="devsite-syntax-p">],</span> <span class="devsite-syntax-p">});</span> <span class="devsite-syntax-c1">// Draw call have vertexCount, instanceCount, firstVertex, and firstInstance parameters.</span> <span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">drawData</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-ow">new</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">Uint32Array</span><span class="devsite-syntax-p">([</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">3</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">1</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">0</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">0</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// First draw call</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">3</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">1</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">3</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">0</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// Second draw call</span> <span class="devsite-syntax-p">]);</span> <span class="devsite-syntax-c1">// Create a buffer to store the draw calls.</span> <span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">drawBuffer</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">device</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">createBuffer</span><span class="devsite-syntax-p">({</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">size</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">drawData</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">byteLength</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">usage</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">GPUBufferUsage</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">INDIRECT</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">|</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">GPUBufferUsage</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">COPY_DST</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-p">});</span> <span class="devsite-syntax-nx">device</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">queue</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">writeBuffer</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">drawBuffer</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">0</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">drawData</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-c1">// Create a render pipeline, a vertex buffer, and a render pass encoder...</span> <span class="devsite-syntax-c1">// Inside a render pass, issue the draw calls.</span> <span class="devsite-syntax-nx">myPassEncoder</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">setPipeline</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">myPipeline</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-nx">myPassEncoder</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">setVertexBuffer</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-mf">0</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">myVertexBuffer</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-nx">myPassEncoder</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">multiDrawIndirect</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">drawBuffer</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-cm">/*offset=*/</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">0</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-cm">/*maxDrawCount=*/</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mf">2</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-nx">myPassEncoder</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">end</span><span class="devsite-syntax-p">();</span> </code></pre></devsite-code> <h2 id="shader_module_compilation_option_strict_math" data-text="Shader module compilation option strict math" tabindex="-1">Shader module compilation option strict math</h2> <p>A boolean <code translate="no" dir="ltr">strictMath</code> developer option has been added to GPUShaderModuleDescriptor to let you enable or disable strict math during shader module compilation. It is available behind the "WebGPU Developer Features" flag at <code translate="no" dir="ltr">chrome://flags/#enable-webgpu-developer-features</code>, which means it is a feature intended only for use during development. See <a href="https://issues.chromium.org/issues/42241455">issue 42241455</a>.</p> <p>This option is currently supported on Metal and Direct3D. When strict math is disabled, the compiler may optimize your shaders by:</p> <ul> <li>Ignoring the possibility of NaN and Infinity values.</li> <li>Treating -0 as +0.</li> <li>Replacing division with faster multiplication by the reciprocal.</li> <li>Rearranging operations based on associative and distributive properties.</li> </ul> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">adapter</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">await</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">navigator</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">gpu</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">requestAdapter</span><span class="devsite-syntax-p">();</span> <span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">device</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">await</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">adapter</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">requestDevice</span><span class="devsite-syntax-p">();</span> <span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">code</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-sb">`</span> <span class="devsite-syntax-sb"> // Examines the bit pattern of the floating-point number to</span> <span class="devsite-syntax-sb"> // determine if it represents a NaN according to the IEEE 754 standard.</span> <span class="devsite-syntax-sb"> fn isNan(x : f32) -> bool {</span> <span class="devsite-syntax-sb"> bool ones_exp = (bitcast<u32>(x) & 0x7f8) == 0x7f8;</span> <span class="devsite-syntax-sb"> bool non_zero_sig = (bitcast<u32>(x) & 0x7ffff) != 0;</span> <span class="devsite-syntax-sb"> return ones_exp && non_zero_sig;</span> <span class="devsite-syntax-sb"> }</span> <span class="devsite-syntax-sb"> // ...</span> <span class="devsite-syntax-sb">`</span><span class="devsite-syntax-p">;</span> <span class="devsite-syntax-c1">// Enable strict math during shader compilation.</span> <span class="devsite-syntax-kd">const</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">shaderModule</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">device</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">createShaderModule</span><span class="devsite-syntax-p">({</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">code</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">strictMath</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kc">true</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">});</span> </code></pre></devsite-code> <h2 id="remove_gpuadapter_requestadapterinfo" data-text="Remove GPUAdapter requestAdapterInfo()" tabindex="-1">Remove GPUAdapter requestAdapterInfo()</h2> <p>The GPUAdapter <code translate="no" dir="ltr">requestAdapterInfo()</code> asynchronous method is redundant as you can already get GPUAdapterInfo synchronously using the GPUAdapter <code translate="no" dir="ltr">info</code> attribute. Hence, the non-standard GPUAdapter <code translate="no" dir="ltr">requestAdapterInfo()</code> method is now removed. See the <a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/HxOgGf4NzQ4">intent to remove</a>.</p> <h2 id="dawn_updates" data-text="Dawn updates" tabindex="-1">Dawn updates</h2> <p>The <code translate="no" dir="ltr">tint_benchmark</code> executable measures the cost of translating shaders from WGSL to each backend language. Check out the new <a href="https://dawn.googlesource.com/dawn/+/main/docs/tint/benchmark.md">documentation</a> to learn more about it.</p> <p>This covers only some of the key highlights. Check out the exhaustive <a href="https://dawn.googlesource.com/dawn/+log/chromium/6723..chromium/6778?n=1000">list of commits</a>.</p> <h2 id="whats-new" data-text="What's New in WebGPU" tabindex="-1">What's New in WebGPU</h2> <p>A list of everything that has been covered in the <a href="/docs/web-platform/webgpu/news">What's New in WebGPU</a> series.</p> <h3 id="chrome133" data-text="Chrome 133" tabindex="-1">Chrome 133</h3> <ul> <li><a href="/blog/new-in-webgpu-133#additional_unorm8x4-bgra_and_1-component_vertex_formats">Additional unorm8x4-bgra and 1-component vertex formats</a></li> <li><a href="/blog/new-in-webgpu-133#allow_unknown_limits_to_be_requested_with_undefined_value">Allow unknown limits to be requested with undefined value</a></li> <li><a href="/blog/new-in-webgpu-133#wgsl_alignment_rules_changes">WGSL alignment rules changes</a></li> <li><a href="/blog/new-in-webgpu-133#wgsl_performance_gains_with_discard">WGSL performance gains with discard</a></li> <li><a href="/blog/new-in-webgpu-133#use_videoframe_displaysize_for_external_textures">Use VideoFrame displaySize for external textures</a></li> <li><a href="/blog/new-in-webgpu-133#handle_images_with_non-default_orientations_using_copyexternalimagetotexture">Handle images with non-default orientations using copyExternalImageToTexture</a></li> <li><a href="/blog/new-in-webgpu-133#improving_developer_experience">Improving developer experience</a></li> <li><a href="/blog/new-in-webgpu-133#enable_compatibility_mode_with_featurelevel">Enable compatibility mode with featureLevel</a></li> <li><a href="/blog/new-in-webgpu-133#experimental_subgroup_features_cleanup">Experimental subgroup features cleanup</a></li> <li><a href="/blog/new-in-webgpu-133#deprecate_maxinterstageshadercomponents_limit">Deprecate maxInterStageShaderComponents limit</a></li> <li><a href="/blog/new-in-webgpu-133#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome132" data-text="Chrome 132" tabindex="-1">Chrome 132</h3> <ul> <li><a href="/blog/new-in-webgpu-132#texture_view_usage">Texture view usage</a></li> <li><a href="/blog/new-in-webgpu-132#32-bit_float_textures_blending">32-bit float textures blending</a></li> <li><a href="/blog/new-in-webgpu-132#gpudevice_adapterinfo_attribute">GPUDevice adapterInfo attribute</a></li> <li><a href="/blog/new-in-webgpu-132#configuring_canvas_context_with_invalid_format_throw_javascript_error">Configuring canvas context with invalid format throw JavaScript error</a></li> <li><a href="/blog/new-in-webgpu-132#filtering_sampler_restrictions_on_textures">Filtering sampler restrictions on textures</a></li> <li><a href="/blog/new-in-webgpu-132#extended_subgroups_experimentation">Extended subgroups experimentation</a></li> <li><a href="/blog/new-in-webgpu-132#improving_developer_experience">Improving developer experience</a></li> <li><a href="/blog/new-in-webgpu-132#experimental_support_for_16-bit_normalized_texture_formats">Experimental support for 16-bit normalized texture formats</a></li> <li><a href="/blog/new-in-webgpu-132#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome131" data-text="Chrome 131" tabindex="-1">Chrome 131</h3> <ul> <li><a href="/blog/new-in-webgpu-131#clip_distances_in_wgsl">Clip distances in WGSL</a></li> <li><a href="/blog/new-in-webgpu-131#gpucanvascontext_getconfiguration">GPUCanvasContext getConfiguration()</a></li> <li><a href="/blog/new-in-webgpu-131#point_and_line_primitives_must_not_have_depth_bias">Point and line primitives must not have depth bias</a></li> <li><a href="/blog/new-in-webgpu-131#inclusive_scan_built-in_functions_for_subgroups">Inclusive scan built-in functions for subgroups</a></li> <li><a href="/blog/new-in-webgpu-131#experimental_support_for_multi-draw_indirect">Experimental support for multi-draw indirect</a></li> <li><a href="/blog/new-in-webgpu-131#shader_module_compilation_option_strict_math">Shader module compilation option strict math</a></li> <li><a href="/blog/new-in-webgpu-131#remove_gpuadapter_requestadapterinfo">Remove GPUAdapter requestAdapterInfo()</a></li> <li><a href="/blog/new-in-webgpu-131#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome130" data-text="Chrome 130" tabindex="-1">Chrome 130</h3> <ul> <li><a href="/blog/new-in-webgpu-130#dual_source_blending">Dual source blending</a></li> <li><a href="/blog/new-in-webgpu-130#shader_compilation_time_improvements_on_metal">Shader compilation time improvements on Metal</a></li> <li><a href="/blog/new-in-webgpu-130#deprecation_of_gpuadapter_requestadapterinfo">Deprecation of GPUAdapter requestAdapterInfo()</a></li> <li><a href="/blog/new-in-webgpu-130#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome129" data-text="Chrome 129" tabindex="-1">Chrome 129</h3> <ul> <li><a href="/blog/new-in-webgpu-129#hdr_support_with_canvas_tone_mapping_mode">HDR support with canvas tone mapping mode</a></li> <li><a href="/blog/new-in-webgpu-129#expanded_subgroups_support">Expanded subgroups support</a></li> <li><a href="/blog/new-in-webgpu-129#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome128" data-text="Chrome 128" tabindex="-1">Chrome 128</h3> <ul> <li><a href="/blog/new-in-webgpu-128#experimenting_with_subgroups">Experimenting with subgroups</a></li> <li><a href="/blog/new-in-webgpu-128#deprecate_setting_depth_bias_for_lines_and_points">Deprecate setting depth bias for lines and points</a></li> <li><a href="/blog/new-in-webgpu-128#hide_uncaptured_error_devtools_warning_if_preventdefault">Hide uncaptured error DevTools warning if preventDefault</a></li> <li><a href="/blog/new-in-webgpu-128#wgsl_interpolate_sampling_first_and_either">WGSL interpolate sampling first and either</a></li> <li><a href="/blog/new-in-webgpu-128#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome127" data-text="Chrome 127" tabindex="-1">Chrome 127</h3> <ul> <li><a href="/blog/new-in-webgpu-127#experimental_support_for_opengl_es_on_android">Experimental support for OpenGL ES on Android</a></li> <li><a href="/blog/new-in-webgpu-127#gpuadapter_info_attribute">GPUAdapter info attribute</a></li> <li><a href="/blog/new-in-webgpu-127#webassembly_interop_improvements">WebAssembly interop improvements</a></li> <li><a href="/blog/new-in-webgpu-127#improved_command_encoder_errors">Improved command encoder errors</a></li> <li><a href="/blog/new-in-webgpu-127#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome126" data-text="Chrome 126" tabindex="-1">Chrome 126</h3> <ul> <li><a href="/blog/new-in-webgpu-126#increase_maxtexturearraylayers_limit">Increase maxTextureArrayLayers limit</a></li> <li><a href="/blog/new-in-webgpu-126#buffer_upload_optimization_for_vulkan_backend">Buffer upload optimization for Vulkan backend</a></li> <li><a href="/blog/new-in-webgpu-126#shader_compilation_time_improvements">Shader compilation time improvements</a></li> <li><a href="/blog/new-in-webgpu-126#submitted_command_buffers_must_be_unique">Submitted command buffers must be unique</a></li> <li><a href="/blog/new-in-webgpu-126#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome125" data-text="Chrome 125" tabindex="-1">Chrome 125</h3> <ul> <li><a href="/blog/new-in-webgpu-125#subgroups_feature_in_development">Subgroups (feature in development)</a></li> <li><a href="/blog/new-in-webgpu-125#render_to_slice_of_3d_texture">Render to slice of 3D texture</a></li> <li><a href="/blog/new-in-webgpu-125#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome124" data-text="Chrome 124" tabindex="-1">Chrome 124</h3> <ul> <li><a href="/blog/new-in-webgpu-124#read-only_and_read-write_storage_textures">Read-only and read-write storage textures</a></li> <li><a href="/blog/new-in-webgpu-124#service_workers_and_shared_workers_support">Service workers and shared workers support</a></li> <li><a href="/blog/new-in-webgpu-124#new_adapter_information_attributes">New adapter information attributes</a></li> <li><a href="/blog/new-in-webgpu-124#bug_fixes">Bug fixes</a></li> <li><a href="/blog/new-in-webgpu-124#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome123" data-text="Chrome 123" tabindex="-1">Chrome 123</h3> <ul> <li><a href="/blog/new-in-webgpu-123#dp4a_built-in_functions_support_in_wgsl">DP4a built-in functions support in WGSL</a></li> <li><a href="/blog/new-in-webgpu-123#unrestricted_pointer_parameters_in_wgsl">Unrestricted pointer parameters in WGSL</a></li> <li><a href="/blog/new-in-webgpu-123#syntax_sugar_for_dereferencing_composites_in_wgsl">Syntax sugar for dereferencing composites in WGSL</a></li> <li><a href="/blog/new-in-webgpu-123#separate_read-only_state_for_stencil_and_depth_aspects">Separate read-only state for stencil and depth aspects</a></li> <li><a href="/blog/new-in-webgpu-123#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome122" data-text="Chrome 122" tabindex="-1">Chrome 122</h3> <ul> <li><a href="/blog/new-in-webgpu-122#expand_reach_with_compatibility_mode_feature_in_development">Expand reach with compatibility mode (feature in development)</a></li> <li><a href="/blog/new-in-webgpu-122#increase_maxvertexattributes_limit">Increase maxVertexAttributes limit</a></li> <li><a href="/blog/new-in-webgpu-122#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome121" data-text="Chrome 121" tabindex="-1">Chrome 121</h3> <ul> <li><a href="/blog/new-in-webgpu-121#support-webgpu-on-android">Support WebGPU on Android</a></li> <li><a href="/blog/new-in-webgpu-121#use_dxc_instead_of_fxc_for_shader_compilation_on_windows">Use DXC instead of FXC for shader compilation on Windows</a></li> <li><a href="/blog/new-in-webgpu-121#timestamp_queries_in_compute_and_render_passes">Timestamp queries in compute and render passes</a></li> <li><a href="/blog/new-in-webgpu-121#default_entry_points_to_shader_modules">Default entry points to shader modules</a></li> <li><a href="/blog/new-in-webgpu-121#support_display-p3_as_gpuexternaltexture_color_space">Support display-p3 as GPUExternalTexture color space</a></li> <li><a href="/blog/new-in-webgpu-121#memory_heaps_info">Memory heaps info</a></li> <li><a href="/blog/new-in-webgpu-121#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome120" data-text="Chrome 120" tabindex="-1">Chrome 120</h3> <ul> <li><a href="/blog/new-in-webgpu-120#support_for_16-bit_floating-point_values_in_wgsl">Support for 16-bit floating-point values in WGSL</a></li> <li><a href="/blog/new-in-webgpu-120#push_the_limits">Push the limits</a></li> <li><a href="/blog/new-in-webgpu-120#changes_to_depth-stencil_state">Changes to depth-stencil state</a></li> <li><a href="/blog/new-in-webgpu-120#adapter_information_updates">Adapter information updates</a></li> <li><a href="/blog/new-in-webgpu-120#timestamp_queries_quantization">Timestamp queries quantization</a></li> <li><a href="/blog/new-in-webgpu-120#spring-cleaning_features">Spring-cleaning features</a></li> </ul> <h3 id="chrome119" data-text="Chrome 119" tabindex="-1">Chrome 119</h3> <ul> <li><a href="/blog/new-in-webgpu-119#filterable_32-bit_float_textures">Filterable 32-bit float textures</a></li> <li><a href="/blog/new-in-webgpu-119#unorm10-10-10-2_vertex_format">unorm10-10-10-2 vertex format</a></li> <li><a href="/blog/new-in-webgpu-119#rgb10a2uint_texture_format">rgb10a2uint texture format</a></li> <li><a href="/blog/new-in-webgpu-119#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome118" data-text="Chrome 118" tabindex="-1">Chrome 118</h3> <ul> <li><a href="/blog/new-in-webgpu-118#htmlimageelement_and_imagedata_support_in_copyexternalimagetotexture">HTMLImageElement and ImageData support in <code translate="no" dir="ltr">copyExternalImageToTexture()</code></a></li> <li><a href="/blog/new-in-webgpu-118#experimental_support_for_read-write_and_read-only_storage_texture">Experimental support for read-write and read-only storage texture</a></li> <li><a href="/blog/new-in-webgpu-118#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome117" data-text="Chrome 117" tabindex="-1">Chrome 117</h3> <ul> <li><a href="/blog/new-in-webgpu-117#unset_vertex_buffer">Unset vertex buffer</a></li> <li><a href="/blog/new-in-webgpu-117#unset_bind_group">Unset bind group</a></li> <li><a href="/blog/new-in-webgpu-117#silence_errors_from_async_pipeline_creation_when_device_is_lost">Silence errors from async pipeline creation when device is lost</a></li> <li><a href="/blog/new-in-webgpu-117#spir-v_shader_module_creation_updates">SPIR-V shader module creation updates</a></li> <li><a href="/blog/new-in-webgpu-117#improving_developer_experience">Improving developer experience</a></li> <li><a href="/blog/new-in-webgpu-117#caching_pipelines_with_automatically_generated_layout">Caching pipelines with automatically generated layout</a></li> <li><a href="/blog/new-in-webgpu-117#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome116" data-text="Chrome 116" tabindex="-1">Chrome 116</h3> <ul> <li><a href="/blog/new-in-webgpu-116#webcodecs_integration">WebCodecs integration</a></li> <li><a href="/blog/new-in-webgpu-116#lost_device_returned_by_gpuadapter_requestdevice">Lost device returned by GPUAdapter <code translate="no" dir="ltr">requestDevice()</code></a></li> <li><a href="/blog/new-in-webgpu-116#keep_video_playback_smooth_if_importexternaltexture_is_called">Keep video playback smooth if <code translate="no" dir="ltr">importExternalTexture()</code> is called</a></li> <li><a href="/blog/new-in-webgpu-116#spec_conformance">Spec conformance</a></li> <li><a href="/blog/new-in-webgpu-116#improving_developer_experience">Improving developer experience</a></li> <li><a href="/blog/new-in-webgpu-116#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome115" data-text="Chrome 115" tabindex="-1">Chrome 115</h3> <ul> <li><a href="/blog/new-in-webgpu-115#supported_wgsl_language_extensions">Supported WGSL language extensions</a></li> <li><a href="/blog/new-in-webgpu-115#experimental_support_for_direct3d_11">Experimental support for Direct3D 11</a></li> <li><a href="/blog/new-in-webgpu-115#get_discrete_gpu_by_default_on_ac_power">Get discrete GPU by default on AC power</a></li> <li><a href="/blog/new-in-webgpu-115#improving_developer_experience">Improving developer experience</a></li> <li><a href="/blog/new-in-webgpu-115#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome114" data-text="Chrome 114" tabindex="-1">Chrome 114</h3> <ul> <li><a href="/blog/new-in-webgpu-114#optimize_javascript">Optimize JavaScript</a></li> <li><a href="/blog/new-in-webgpu-114#getcurrenttexture_on_unconfigured_canvas_throws_invalidstateerror">getCurrentTexture() on unconfigured canvas throws InvalidStateError</a></li> <li><a href="/blog/new-in-webgpu-114#wgsl_updates">WGSL updates</a></li> <li><a href="/blog/new-in-webgpu-114#dawn_updates">Dawn updates</a></li> </ul> <h3 id="chrome113" data-text="Chrome 113" tabindex="-1">Chrome 113</h3> <ul> <li><a href="/blog/new-in-webgpu-113#use_webcodecs_videoframe_source_in_importexternaltexture">Use WebCodecs VideoFrame source in <code translate="no" dir="ltr">importExternalTexture()</code></a></li> </ul> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2024-11-06 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-11-06 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400036&template=1897236" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400036&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/deprecated" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Archive </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://web.dev/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-5QF3RT2", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "blog", "projectName": "Blog", "signedIn": "False", "tenant": "chrome", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="gjAQVuWPJNon2xvbqD5/I37w3sfUPc"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/js/app_loader.js', '[53,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018","https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome","https://chrome-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/chrome/manifest.json","https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/vd2dddc2199cd18ccf014281c77515e1e906f6b98324fd2a8b5fa9e92b09e8018/chrome/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","developer.chrome.com","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Cloud__enable_cloudx_experiment_ids","DevPro__enable_cloud_innovators_plus","TpcFeatures__enable_mirror_tenant_redirects","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__enable_variable_operator","DevPro__enable_developer_subscriptions","Concierge__enable_pushui","Cloud__enable_llm_concierge_chat","Profiles__enable_developer_profiles_callout","Profiles__enable_release_notes_notifications","Cloud__enable_cloud_shell","Profiles__enable_page_saving","Cloud__enable_cloud_shell_fte_user_flow","EngEduTelemetry__enable_engedu_telemetry","Profiles__enable_dashboard_curated_recommendations","Profiles__enable_awarding_url","Cloud__enable_cloud_dlp_service","Profiles__enable_stripe_subscription_management","Profiles__require_profile_eligibility_for_signin","Search__enable_ai_eligibility_checks","Cloud__enable_legacy_calculator_redirect","Profiles__enable_completecodelab_endpoint","Profiles__enable_recognition_badges","Profiles__enable_join_program_group_endpoint","CloudShell__cloud_code_overflow_menu","Profiles__enable_public_developer_profiles","Cloud__enable_cloud_facet_chat","Profiles__enable_completequiz_endpoint","Search__enable_dynamic_content_confidential_banner","Cloud__enable_free_trial_server_call","Cloud__enable_cloudx_ping","MiscFeatureFlags__enable_view_transitions","MiscFeatureFlags__enable_firebase_utm","Search__enable_page_map","TpcFeatures__enable_unmirrored_page_left_nav","Experiments__reqs_query_experiments","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__emergency_css","Analytics__enable_clearcut_logging","Profiles__enable_profile_collections","CloudShell__cloud_shell_button","BookNav__enable_tenant_cache_key","MiscFeatureFlags__enable_project_variables","MiscFeatureFlags__developers_footer_dark_image","Search__enable_suggestions_from_borg","OnSwitch__enable","MiscFeatureFlags__enable_explain_this_code"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[53,"chrome","Chrome for Developers","developer.chrome.com",null,"chrome-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[69,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-5QF3RT2"],null,null,null,null,null,[["GTM-5QF3RT2",1]],1]],null,4],null,null,1]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

What's New in WebGPU (Chrome 131) | Blog | Chrome for Developers