موارد جدید در WebGPU (Chrome 129)

فرانسوا بوفور
François Beaufort
GitHub

پشتیبانی از HDR با حالت نگاشت تُن بوم

توسعه‌دهندگان وب گزینه‌های محدودی برای ارائه محتوای HDR دارند و عمدتاً به عناصر <img> و <video> متکی هستند. با این حال، عنصر <canvas> همچنان به SDR محدود است. تولید محتوای HDR پویا در یک canvas نیاز به رمزگذاری محتوای آن به عنوان یک تصویر HDR قبل از نمایش آن دارد (برای مثال به این نسخه آزمایشی مراجعه کنید).

پارامتر جدید GPUCanvasToneMappingMode در پیکربندی WebGPU canvas اکنون به WebGPU اجازه می‌دهد رنگ‌هایی روشن‌تر از سفید ( #FFFFFF ) را ترسیم کند. این کار را از طریق حالت‌های زیر انجام می‌دهد:

  • "standard" : رفتار پیش‌فرض، محتوا را به محدوده SDR صفحه نمایش محدود می‌کند. این حالت با محدود کردن تمام مقادیر رنگ در فضای رنگ صفحه نمایش به بازه [0, 1] انجام می‌شود.

  • "extended" : محدوده کامل HDR صفحه نمایش را باز می‌کند. این حالت با "standard" در محدوده [0, 1] صفحه نمایش مطابقت دارد. محدود کردن یا نمایش تصویر به محدوده دینامیکی گسترده صفحه نمایش انجام می‌شود اما نه [0, 1] .

قطعه کد زیر به شما نحوه پیکربندی یک canvas برای محدوده دینامیکی بالا را نشان می‌دهد.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

با بررسی نمونه Particles (HDR) و مثال WebGPU HDR ، HDR را با WebGPU بررسی کنید و ورودی chromestatus را ببینید.

لپ‌تاپی با صفحه نمایش HDR که تصویری پر جنب و جوش را نمایش می‌دهد.
نمونه ذرات (HDR) که روی صفحه نمایش HDR نمایش داده می‌شود.

پشتیبانی از زیرگروه‌های گسترده

پس از اعلام آزمایش زیرگروه‌ها ، توابع داخلی زیرگروه اکنون برای استفاده در هر دو سایه‌زن‌های محاسباتی و سایه‌زن‌های قطعه‌ای در دسترس هستند. آنها دیگر فقط به سایه‌زن‌های محاسباتی محدود نمی‌شوند. به شماره 354738715 مراجعه کنید.

توجه داشته باشید که مقدار داخلی subgroup_size در حال حاضر در fragment shader ها دارای اشکال است. فعلاً از آن اجتناب کنید.

علاوه بر این، توابع داخلی زیرگروه زیر اضافه شده‌اند:

  • subgroupAdd(value) : مجموع value فراخوانی‌های فعال s در زیرگروه را برمی‌گرداند.
  • subgroupExclusiveAdd(value) : جمع اسکن انحصاری تمام value فراخوانی فعال s در سراسر زیرگروه را برمی‌گرداند.
  • subgroupMul(value) : حاصل ضرب تمام value فراخوانی‌های فعال s در زیرگروه را برمی‌گرداند.
  • subgroupExclusiveMul(value) : ضرب اسکن انحصاری تمام value فراخوانی فعال s در زیرگروه را برمی‌گرداند.

  • subgroupAnd(value) : مقدار باینری AND مربوط به تمام value فراخوانی فعال s در زیرگروه را برمی‌گرداند.
  • subgroupOr(value) : OR دودویی تمام value فراخوانی فعال s در زیرگروه را برمی‌گرداند.
  • subgroupXor(value) : مقدار XOR دودویی تمام فراخوانی‌های فعال value s در زیرگروه را برمی‌گرداند.

  • subgroupMin(value) : حداقل مقدار همه value فراخوانی‌های فعال s را در سراسر زیرگروه برمی‌گرداند.
  • subgroupMax(value) : حداکثر مقدار همه فراخوانی‌های فعال value s را در زیرگروه برمی‌گرداند.

  • subgroupAll(value) : اگر value برای همه فراخوانی‌های فعال در زیرگروه درست باشد، مقدار true را برمی‌گرداند.
  • subgroupAny(value) : اگر value برای هر فراخوانی فعال در زیرگروه درست باشد، مقدار true را برمی‌گرداند.

  • subgroupElect() : اگر این فراخوانی کمترین subgroup_invocation_id در بین فراخوانی‌های فعال در زیرگروه داشته باشد، مقدار true را برمی‌گرداند.
  • subgroupBroadcastFirst(value) : value از فراخوانی فعال با کمترین subgroup_invocation_id در زیرگروه به سایر فراخوانی‌های فعال پخش می‌کند.

  • subgroupShuffle(value, id) : value از فراخوانی فعال که subgroup_invocation_id آن با id مطابقت دارد، برمی‌گرداند.
  • subgroupShuffleXor(value, mask) : value از فراخوانی فعال که subgroup_invocation_id آن با subgroup_invocation_id ^ mask مطابقت دارد، برمی‌گرداند. mask باید به صورت پویا یکنواخت باشد.
  • subgroupShuffleUp(value, delta) : value از فراخوانی فعال که subgroup_invocation_id آن با subgroup_invocation_id - delta مطابقت دارد، برمی‌گرداند.
  • subgroupShuffleDown(value, delta) : value از فراخوانی فعال که subgroup_invocation_id آن با subgroup_invocation_id + delta مطابقت دارد، برمی‌گرداند.

  • quadBroadcast(value, id) : value از فراخوانی quad که id آن برابر با id است، پخش می‌کند. id باید یک عبارت ثابت باشد.
  • quadSwapX(value) : value بین فراخوانی‌ها در quad در جهت X جابجا می‌کند.
  • quadSwapY(value) : value بین فراخوانی‌ها در quad در جهت Y جابجا می‌کند.
  • quadSwapDiagonal(value) : value بین فراخوانی‌ها در چهارضلعی به صورت مورب جابجا می‌کند.

به‌روزرسانی‌های سپیده‌دم

ساختار wgpu::PrimitiveState اکنون مستقیماً شامل تنظیمات کنترل کلیپ عمق است و نیاز به ساختار جداگانه wgpu::PrimitiveDepthClipControl از بین می‌برد. برای کسب اطلاعات بیشتر، به قطعه کد زیر و webgpu-headers PR مراجعه کنید.

// Before
wgpu::PrimitiveState primitive = {};
wgpu::PrimitiveDepthClipControl depthClipControl;
depthClipControl.unclippedDepth = true;
primitive.nextInChain = &depthClipControl;

// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

این فقط برخی از نکات برجسته کلیدی را پوشش می‌دهد. لیست جامع کامیت‌ها را بررسی کنید.

ویژگی‌های جدید WebGPU

فهرستی از تمام مواردی که در مجموعه «ویژگی‌های جدید WebGPU» پوشش داده شده است.

کروم ۱۴۲

کروم ۱۴۱

کروم ۱۴۰

کروم ۱۳۹

کروم ۱۳۸

کروم ۱۳۷

کروم ۱۳۶

کروم ۱۳۵

کروم ۱۳۴

کروم ۱۳۳

کروم ۱۳۲

کروم ۱۳۱

کروم ۱۳۰

کروم ۱۲۹

کروم ۱۲۸

کروم ۱۲۷

کروم ۱۲۶

کروم ۱۲۵

کروم ۱۲۴

کروم ۱۲۳

کروم ۱۲۲

کروم ۱۲۱

کروم ۱۲۰

کروم ۱۱۹

کروم ۱۱۸

کروم ۱۱۷

کروم ۱۱۶

کروم ۱۱۵

کروم ۱۱۴

کروم ۱۱۳

،

فرانسوا بوفور
François Beaufort
GitHub

پشتیبانی از HDR با حالت نگاشت تُن بوم

توسعه‌دهندگان وب گزینه‌های محدودی برای ارائه محتوای HDR دارند و عمدتاً به عناصر <img> و <video> متکی هستند. با این حال، عنصر <canvas> همچنان به SDR محدود است. تولید محتوای HDR پویا در یک canvas نیاز به رمزگذاری محتوای آن به عنوان یک تصویر HDR قبل از نمایش آن دارد (برای مثال به این نسخه آزمایشی مراجعه کنید).

پارامتر جدید GPUCanvasToneMappingMode در پیکربندی WebGPU canvas اکنون به WebGPU اجازه می‌دهد رنگ‌هایی روشن‌تر از سفید ( #FFFFFF ) را ترسیم کند. این کار را از طریق حالت‌های زیر انجام می‌دهد:

  • "standard" : رفتار پیش‌فرض، محتوا را به محدوده SDR صفحه نمایش محدود می‌کند. این حالت با محدود کردن تمام مقادیر رنگ در فضای رنگ صفحه نمایش به بازه [0, 1] انجام می‌شود.

  • "extended" : محدوده کامل HDR صفحه نمایش را باز می‌کند. این حالت با "standard" در محدوده [0, 1] صفحه نمایش مطابقت دارد. محدود کردن یا نمایش تصویر به محدوده دینامیکی گسترده صفحه نمایش انجام می‌شود اما نه [0, 1] .

قطعه کد زیر به شما نحوه پیکربندی یک canvas برای محدوده دینامیکی بالا را نشان می‌دهد.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector("canvas");
const context = canvas.getContext("webgpu");

context.configure({
  device,
  format: "rgba16float",
  toneMapping: { mode: "extended" },
});

با بررسی نمونه Particles (HDR) و مثال WebGPU HDR ، HDR را با WebGPU بررسی کنید و ورودی chromestatus را ببینید.

لپ‌تاپی با صفحه نمایش HDR که تصویری پر جنب و جوش را نمایش می‌دهد.
نمونه ذرات (HDR) که روی صفحه نمایش HDR نمایش داده می‌شود.

پشتیبانی از زیرگروه‌های گسترده

پس از اعلام آزمایش زیرگروه‌ها ، توابع داخلی زیرگروه اکنون برای استفاده در هر دو سایه‌زن‌های محاسباتی و سایه‌زن‌های قطعه‌ای در دسترس هستند. آنها دیگر فقط به سایه‌زن‌های محاسباتی محدود نمی‌شوند. به شماره 354738715 مراجعه کنید.

توجه داشته باشید که مقدار داخلی subgroup_size در حال حاضر در fragment shader ها دارای اشکال است. فعلاً از آن اجتناب کنید.

علاوه بر این، توابع داخلی زیرگروه زیر اضافه شده‌اند:

  • subgroupAdd(value) : مجموع value فراخوانی‌های فعال s در زیرگروه را برمی‌گرداند.
  • subgroupExclusiveAdd(value) : جمع اسکن انحصاری تمام value فراخوانی فعال s در سراسر زیرگروه را برمی‌گرداند.
  • subgroupMul(value) : حاصل ضرب تمام value فراخوانی‌های فعال s در زیرگروه را برمی‌گرداند.
  • subgroupExclusiveMul(value) : ضرب اسکن انحصاری تمام value فراخوانی فعال s در زیرگروه را برمی‌گرداند.

  • subgroupAnd(value) : مقدار باینری AND مربوط به تمام value فراخوانی فعال s در زیرگروه را برمی‌گرداند.
  • subgroupOr(value) : OR دودویی تمام value فراخوانی فعال s در زیرگروه را برمی‌گرداند.
  • subgroupXor(value) : مقدار XOR دودویی تمام فراخوانی‌های فعال value s در زیرگروه را برمی‌گرداند.

  • subgroupMin(value) : حداقل مقدار همه value فراخوانی‌های فعال s را در سراسر زیرگروه برمی‌گرداند.
  • subgroupMax(value) : حداکثر مقدار همه فراخوانی‌های فعال value s را در زیرگروه برمی‌گرداند.

  • subgroupAll(value) : اگر value برای همه فراخوانی‌های فعال در زیرگروه درست باشد، مقدار true را برمی‌گرداند.
  • subgroupAny(value) : اگر value برای هر فراخوانی فعال در زیرگروه درست باشد، مقدار true را برمی‌گرداند.

  • subgroupElect() : اگر این فراخوانی کمترین subgroup_invocation_id در بین فراخوانی‌های فعال در زیرگروه داشته باشد، مقدار true را برمی‌گرداند.
  • subgroupBroadcastFirst(value) : value از فراخوانی فعال با کمترین subgroup_invocation_id در زیرگروه به سایر فراخوانی‌های فعال پخش می‌کند.

  • subgroupShuffle(value, id) : value از فراخوانی فعال که subgroup_invocation_id آن با id مطابقت دارد، برمی‌گرداند.
  • subgroupShuffleXor(value, mask) : value از فراخوانی فعال که subgroup_invocation_id آن با subgroup_invocation_id ^ mask مطابقت دارد، برمی‌گرداند. mask باید به صورت پویا یکنواخت باشد.
  • subgroupShuffleUp(value, delta) : value از فراخوانی فعال که subgroup_invocation_id آن با subgroup_invocation_id - delta مطابقت دارد، برمی‌گرداند.
  • subgroupShuffleDown(value, delta) : value از فراخوانی فعال که subgroup_invocation_id آن با subgroup_invocation_id + delta مطابقت دارد، برمی‌گرداند.

  • quadBroadcast(value, id) : value از فراخوانی quad که id آن برابر با id است، پخش می‌کند. id باید یک عبارت ثابت باشد.
  • quadSwapX(value) : value بین فراخوانی‌ها در quad در جهت X جابجا می‌کند.
  • quadSwapY(value) : value بین فراخوانی‌ها در quad در جهت Y جابجا می‌کند.
  • quadSwapDiagonal(value) : value بین فراخوانی‌ها در چهارضلعی به صورت مورب جابجا می‌کند.

به‌روزرسانی‌های سپیده‌دم

ساختار wgpu::PrimitiveState اکنون مستقیماً شامل تنظیمات کنترل کلیپ عمق است و نیاز به ساختار جداگانه wgpu::PrimitiveDepthClipControl از بین می‌برد. برای کسب اطلاعات بیشتر، به قطعه کد زیر و webgpu-headers PR مراجعه کنید.

// Before
wgpu::PrimitiveState primitive = {};
wgpu::PrimitiveDepthClipControl depthClipControl;
depthClipControl.unclippedDepth = true;
primitive.nextInChain = &depthClipControl;

// Now
wgpu::PrimitiveState primitive = {};
primitive.unclippedDepth = true;

این فقط برخی از نکات برجسته کلیدی را پوشش می‌دهد. لیست جامع کامیت‌ها را بررسی کنید.

ویژگی‌های جدید WebGPU

فهرستی از تمام مواردی که در مجموعه «ویژگی‌های جدید WebGPU» پوشش داده شده است.

کروم ۱۴۲

کروم ۱۴۱

کروم ۱۴۰

کروم ۱۳۹

کروم ۱۳۸

کروم ۱۳۷

کروم ۱۳۶

کروم ۱۳۵

کروم ۱۳۴

کروم ۱۳۳

کروم ۱۳۲

کروم ۱۳۱

کروم ۱۳۰

کروم ۱۲۹

کروم ۱۲۸

کروم ۱۲۷

کروم ۱۲۶

کروم ۱۲۵

کروم ۱۲۴

کروم ۱۲۳

کروم ۱۲۲

کروم ۱۲۱

کروم ۱۲۰

کروم ۱۱۹

کروم ۱۱۸

کروم ۱۱۷

کروم ۱۱۶

کروم ۱۱۵

کروم ۱۱۴

کروم ۱۱۳