راهنمای TSL و WebGPU

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

TSL و WebGPU

بسیاری از توسعه دهندگان خلاق از گسترش اخیر پشتیبانی WebGPU بسیار هیجان زده بودند و دلیل خوبی هم داشت: این مجموعه جدید از APIها، وب را با APIهای گرافیکی مدرن مانند Vulkan یا Metal، که ستون فقرات بسیاری از نرم افزارهای خلاق حرفه ای و موتورهای بازی هستند، تراز می کند. کنترل های سطح پایین (تخصیص حافظه، گروه های اتصال و غیره) را فراهم می کند و ساختارهای جدیدی مانند شیدرهای محاسباتی، در حالی که عملکرد تقریباً بومی دارد ².

از سوی دیگر، توسعه دهندگان Three.js من نیز به چیزی کمی متفاوت، اما مرتبط با هم علاقه مند بودند: زبان سایه زنی Three.js. عملکردی زبان بر اساس جاوا اسکریپت، که به عنوان چیزی شبیه به آن طراحی شده است یک چتر زبان سایه زنی که ایجاد سایه بان را در طول زمان در دسترس تر و قابل نگهداری تر می کند. با معرفی TSL، Three.js توانایی نوشتن سایه‌بان‌هایی را فراهم کرد که می‌توانستند روی WebGPU اجرا شوند، که تا آن زمان پشتیبانی نمی‌شد، در حالی که به همان شیدرها اجازه می‌داد روی WebGL اجرا شوند، بنابراین به توسعه‌دهندگان اجازه می‌داد تا هر پلتفرم را با کد منحصر به فرد بدون توجه به پشتیبانی WebGPU مورد هدف قرار دهند. ³

در زیر نمونه ای از یک سایه زن ساده نوشته شده در TSL و معادل های GLSL و WGSL آن آورده شده است:

1
const colorNode = Fn(([baseColor]) => {
4
  const red = uvCoord.x.add(2.3).mul(0.3);
5
  const green = uvCoord.y.add(1.7).div(8.2);
6
  const blue = add(uvCoord.x, uvCoord.y).mod(10.0);
8
  const tint = vec4(red, green, blue, 1.0);
10
  return mix(baseColor, tint, uvCoord.x);

4
  float red   = (uv.x + 2.3) * 0.3;
5
  float green = (uv.y + 1.7) / 8.2;
6
  float blue  = mod(uv.x + uv.y, 10.0);
8
  vec4 tint = vec4(red, green, blue, 1.0);
9
  fragColor = mix(baseColor, tint, uv.x);

1
fn main(uv: vec2f32>, baseColor: vec4f32>) -> vec4f32> {
2
  let red   = (uv.x + 2.3) * 0.3;
3
  let green = (uv.y + 1.7) / 8.2;
4
  let blue  = (uv.x + uv.y) % 10.0;
6
  let tint = vec4f32>(red, green, blue, 1.0);
7
  return mix(baseColor, tint, uv.x);

همانطور که می بینید، سینتکس حتی برای عملگرهای ساده بسیار کاربردی است (به عبارتی “بسیار”). در حالی که این توانایی هدف قرار دادن WebGL یا WebGPU را به طور مساوی ارائه می دهد، برای من با قربانی شدن خوانایی همراه است. فک کنم سلیقه و عادت باشه. اگر این خیلی شما را آزار می دهد، باز هم می توانید
برای انتخاب کنید glslFn و wgslFn ویژگی TSL برای نوشتن کد خود، اما همچنان باید در پایان روز برای تعریف و مصرف این سایه‌زن‌ها در مواد/افکت‌های خود به TSL تکیه کنید. سیستم گره ای.

1
const baseColor = uniform(new THREE.Vector4(1, 1, 1, 1));
3
const colorGLSL = glslFn( `
4
vec4 colorFn(vec4 baseColor, vec2 uv) {
5
  float red   = (uv.x + 2.3) * 0.3;
6
  float green = (uv.y + 1.7) / 8.2;
7
  float blue  = mod(uv.x + uv.y, 10.0);
8
  return mix(baseColor, vec4(red, green, blue, 1.0), uv.x);
12
const colorNodeGLSL = colorGLSL({
17
const colorWGSL = wgslFn( `
18
fn colorFn(baseColor: vec4f, uv: vec2f) -> vec4f {
19
  let red   = (uv.x + 2.3) * 0.3;
20
  let green = (uv.y + 1.7) / 8.2;
21
  let blue  = (uv.x + uv.y) % 10.0;
22
  return mix(baseColor, vec4f(red, green, blue, 1.0), uv.x);
26
const colorNodeWGSL = colorWGSL({

بنابراین به طور خلاصه:

• می توانید از TSL برای نوشتن سایه بان برای WebGL و WebGPU استفاده کنید.

• اگر بخواهید همچنان می توانید از GLSL و RawShaderMaterial/ShaderMaterial استفاده کنید، اما همیشه محدود به WebGL خواهید بود.

• شما نمی تواند سایه زن های WebGPU خام بنویسد به همان روشی که در WebGL می توانید: همه چیز از TSL انتزاع شده است.

سیستم گره

اگرچه لایه انتزاعی و عدم توانایی در نوشتن سایه‌بان‌های خام WebGPU برای من کمی بد بود زیرا ترجیح می‌دهم از ساخت‌های سطح پایین استفاده کنم. سیستم گره ای TSL برای من این یک ویژگی کلیدی است که مرا فروخت و باعث شد آن را در آغوش بگیرم.

تا به حال، زمانی که می‌خواستیم مطالب موجود در WebGL را حتی برای کوچک‌ترین تغییرات اصلاح کنیم، مجبور بودیم به سختی از طریق الحاق رشته‌های چندین بخش سایه‌زن با استفاده از آن کار کنیم. onBeforeCompile روش

امروزه TSL برای هر یک از خود قلاب هایی ارائه می دهد NodeMaterials، مانند colorNode، normalNode، یا positionNode، برای تغییر رنگ، نرمال ها و موقعیت راس مواد خود به راحتی بر این اساس. حتی بهتر از آن، هر کالای Three.js اکنون یک «معادل گره» سازگار با این API جدید دارد:

• MeshStandardMaterial وجود دارد MeshStandardNodeMaterial

• MeshBasicMaterial وجود دارد MeshBasicNodeMaterial

• MeshPhysicalMaterial وجود دارد MeshPhysicalNodeMaterial

و غیره

البته، گره‌های دیگری نیز وجود دارند که من در اینجا فهرست نکرده‌ام، و با گسترش مجموعه ویژگی‌های TSL، گره‌های دیگر نیز وجود دارند. مواردی که ذکر کردم مهمترین و اولین مواردی هستند که هنگام بازی با TSL و شیدرها با آنها مواجه خواهید شد.

در حالی که سفر خود را با WebGPU و TSL آسان می کنیم، بیایید با راه اندازی برنامه خود شروع کنیم WebGPURenderer با React Three Fiber و بازآفرینی مقداری کلاسیک نمونه‌هایی از سایه‌زن‌ها که ممکن است به صورت آنلاین با آنها برخورد کرده باشید یا در پست‌های قبلی وبلاگ از آنها عبور کرده باشید.

استفاده از رندر WebGPU

برای دسترسی به ویژگی‌های جدید WebGPU، ابتدا باید رندر آن را در پروژه React Three Fiber خود از طریق نمونه‌سازی کنیم. gl پشتیبانی از Canvas جزء خوشبختانه Canvas در React Three Fiber v9 به روز شده است تا از ناهمزمان پشتیبانی کند gl پشتیبانی کنید ⁴، یک تابع مورد نیاز از WebGPURenderer نیاز به مقداردهی اولیه ناهمزمان دارد.

قطعه کد زیر نشان می دهد که چگونه پروژه های React Three Fiber که شامل ویژگی های WebGPU در آینده هستند را مقداردهی اولیه می کنیم:

1
import * as THREE from 'three/webgpu';
8
        const renderer = new THREE.WebGPURenderer(props);

در حین مقداردهی اولیه WebGPURenderer می تواند این تصور را ایجاد کند که ما تصمیمی تصادفی برای سه بعدی سازی صحنه خود گرفته ایم فقط برای WebGPU، در واقع اینطور نیست. WebGPURenderer از WebGPU و WebGL پشتیبانی می کند و زمانی که WebGPU در دستگاهی که می خواهد صحنه را ارائه کند در دسترس نباشد به WebGL برمی گردد.

اگر در طول توسعه صحنه خود می خواهید مطمئن شوید که هنوز در WebGL به درستی کار می کند، می توانید به آن بروید forceWebGL: true پارامتر به شما WebGPURenderer.

6
        const renderer = new THREE.WebGPURenderer({
10
        await renderer.init();

نسخه ی نمایشی زیر یک صحنه React Three Fiber با پشتیبانی از WebGPU، شامل چند سایه زن ساده که با TSL نوشته شده است، ایجاد می کند. می توانید آن را مجبور به رندر کردن با WebGL کنید و خودتان ببینید که همان نتیجه را ایجاد می کند، که یکی از مزایای کلیدی نوشتن سایه زن با TSL است.

جابجایی و عادی

به عنوان اولین نمونه پیچیده تر، ما یک کلاسیک ایجاد خواهیم کرد لکه دار کردن با معرفی مقداری جابجایی ارگانیک و دینامیکی کره در مرکز صحنه قبلی. برای بلندپروازانه کردن آن و برجسته کردن مزایای TSL و سیستم گره آن، می‌توانیم تمام این کارها را در meshPhongNodeMaterial با نوشتن یک سایه زن برای:

• در positionNode، برای تغییر موقعیت رئوس در طول زمان

• در normalNode، برای تنظیم داده های عادی کره خود بر این اساس به طوری که نقاط برجسته و سایه های کره متحرک ما با جابجایی رئوس آن مطابقت داشته باشد.

همه اینها در حالی که برخی از خصوصیات فیزیکی کلیدی این ماده را حفظ می کند.

برای سازماندهی کد TSL خود، می خواهم:

• همه آنها را داخل یک بپیچید useMemo.

• صادرات الف nodes ویژگی که شامل یک فیلد برای هر یک از شیدرهای TSL ما خواهد بود.

• صادرات الف uniforms دارایی که شامل تمام لباس هایی است که می خواهیم تنظیم کنیم.

1
const { nodes, uniforms } = useMemo(() => {
2
  const time = uniform(0.0);
4
  const positionNode = Fn(() => {...})();
6
  const normalNode = Fn(() => {...})();

این یک رویکرد ساختارمندتر برای سازماندهی کد TSL ما در کد React ما ارائه می دهد، و تضمین می کند که ساختارهای کلیدی مانند یونیفرم ها به طور تصادفی دوباره ایجاد نمی شوند.

ما با نوشتن یک سفارشی شروع می کنیم positionNode برای تغییر موقعیت رئوس مش کروی خود پس از نویز. من یک پیاده سازی از Perlin Noise را با استفاده از ترانسپایلری که در این مثال استفاده خواهیم کرد، ترجمه کردم، در انتهای بخش در زمین بازی به طور کامل نمایش داده می شود.

1
const updatePos = Fn(([pos, time]) => {
2
  const noise = cnoise(vec3(pos).add(vec3(time))).mul(0.2);
3
  return add(pos, noise);
6
const positionNode = Fn(() => {
7
  const pos = positionLocal;
8
  const updatedPos = updatePos(pos, time);

برای متحرک کردن حباب خود در طول زمان، می‌خواهیم یک را پاس کنیم time به طور مساوی برای تنظیم موقعیت های اوج در طول زمان. با این حال، بین WebGL و WebGPU، یونیفرم ها کمی متفاوت عمل می کنند:

این تفاوت بین راحتی و کنترل کنید توسط TSL از ما پنهان است: برای اعلام استفاده از یونیفرم خود uniform تابع و این صرف نظر از اینکه سایه بان موقعیتی خود را با استفاده از نحو TSL بنویسیم یا نحو GLSL/WGLSL.

1
const { nodes, uniforms } = useMemo(() => {
3
  const time = uniform(0.0);
16
  const { clock } = state;
19
  uniforms.time.value = clock.getElapsedTime();

اکنون می‌توانیم به روش محاسبه مجدد نرمال‌ها کار کنیم. ما کاری مشابه را در Shining a light on Caustics with Shaders و React Three Fiber انجام دادیم، جایی که مجبور شدیم به شدت به اصلاح کد سایه زن منبع منبع متوسل شویم و باید در مورد آن بسیار سخت گیر باشیم تا مطمئن شویم برخی از ویژگی های کلیدی آن را نمی شکنیم. با تشکر از سیستم گره، اکنون فقط باید:

• گسترش دهید positionNode برای محاسبه نرمال های جابجا شده

• نرمال های محاسبه شده مجدد را از طریق متغیر ارسال کنید

• الف را اعلام کنید normalNode جایی که ما می توانیم این داده ها را برای استفاده توسط مواد برگردانیم

1
const { nodes, uniforms } = useMemo(() => {
2
  const time = uniform(0.0);
3
  const vNormal = varying(vec3(), 'vNormal');
5
  const updatePos = Fn(([pos, time]) => {
6
    const noise = cnoise(vec3(pos).add(vec3(time))).mul(0.2);
7
    return add(pos, noise);
10
  const orthogonal = Fn(() => {
11
    const pos = normalLocal;
12
    If(abs(pos.x).greaterThan(abs(pos.z)), () => {
13
      return normalize(vec3(negate(pos.y), pos.x, 0.0));
16
    return normalize(vec3(0.0, negate(pos.z), pos.y));
19
  const positionNode = Fn(() => {
20
    const pos = positionLocal;
22
    const updatedPos = updatePos(pos, time);
23
    const theta = float(0.001);
25
    const vecTangent = orthogonal();
26
    const vecBiTangent = normalize(cross(normalLocal, vecTangent));
28
    const neighbour1 = pos.add(vecTangent.mul(theta));
29
    const neighbour2 = pos.add(vecBiTangent.mul(theta));
31
    const displacedNeighbour1 = updatePos(neighbour1, time);
32
    const displacedNeighbour2 = updatePos(neighbour2, time);
34
    const displacedTangent = displacedNeighbour1.sub(updatedPos);
35
    const displacedBitangent = displacedNeighbour2.sub(updatedPos);
37
    const normal = normalize(cross(displacedTangent, displacedBitangent));
39
    const displacedNormal = normal
42
      .select(normal.negate(), normal);
43
    vNormal.assign(displacedNormal);
48
  const normalNode = Fn(() => {
49
    const normal = vNormal;
50
    return transformNormalToView(normal);

اکنون که TSL را بهتر می‌دانیم و می‌دانیم چگونه از آن برای استفاده و نوشتن سایه‌زن‌ها برای جدید استفاده کنیم WebGPURenderer، می توانیم توجه خود را به یکی از ویژگی های اصلی WebGPU معطوف کنیم که بسیاری از توسعه دهندگان از آن هیجان زده بودند: شیدرهای محاسباتی.

حالا دو تا هستند خطوط لوله ما می توانیم برای ساخت صحنه های سه بعدی خود استفاده کنیم:

• را رندر خط لوله، که برای ترسیم گرافیک استفاده می شود، همان چیزی است که در WebGL با آن آشنا هستیم.

• را خط لوله محاسباتی، برای محاسبات همه منظوره تر که می توانند روی GPU اجرا شوند طراحی شده است ⁶.

دومی شامل یک مرحله سایه زن محاسباتی (بدون رئوس، بدون شطرنجی، بدون قطعه) است که در آن:

1. ما ورودی تصادفی مانند بافت ها یا بافرها.

2. اعدام گروه های کاری از رشته ها یا فراخوانی های سایه زن برای پردازش این ورودی ها، تابعی که به عنوان سایه زن محاسباتی تعریف می شود.

3. نمایش داده های دریافتی در یک یا چند بافرها. ما می توانیم این بافرهای دریافتی را به خط لوله رندرینگ یا به CPU برگردانیم.

اگرچه سایه‌زن‌های خط لوله رندر ما ملزم به رسم و شطرنجی کردن تماس‌ها هستند، ما می‌توانیم شیدرهای محاسباتی خود را به صورت برنامه‌نویسی فراخوانی/اجرا کنیم و به ما اجازه می‌دهد تصمیم بگیریم چه زمانی و چند بار آنها را اجرا کنیم.

ایجاد شیدرهای محاسباتی در TSL

بیایید به اولین مثال از نحوه استفاده از خط محاسبه در TSL نگاه کنیم. با استفاده از شیدرهای محاسباتی، ضرب ماتریس را روی GPU انجام می دهیم و نتیجه را از CPU می خوانیم. مانند کد سایه زن قبلی ما، می توانیم شیدر محاسباتی خود را مستقیماً در TSL یا با آن اعلام کنیم wgslFn تابع:

1
const buffer = storage(responseBuffer, 'mat4x4f', count);
3
const matrixMult = wgslFn(`
4
  fn matrixMult(matrix1: mat4x4f, matrix2: mat4x4f, buffer: ptr, read_write>) -> void {
5
    let result = matrix1 * matrix2;

سپس، باید تابع TSL شیدر محاسباتی خود را با ارسال آن با استفاده از تابع فراخوانی کنیم .compute روش

1
const matrixMultComputeNode = matrixMult({

دریافت شده computeNode سپس می توان در هر زمان با gl.computeAsync یا gl.compute روش ها در مثال زیر، ما آن را در زمان رندر فراخوانی می کنیم، جایی که نتیجه عملیات خود را نیز با استفاده از آن بازیابی می کنیم gl.getArrayBufferAsync تابع

1
const compute2 = useCallback(async () => {
3
    await gl.computeAsync(nodes.matrixMultComputeNode);
5
    const output = new Float32Array(
6
      await gl.getArrayBufferAsync(buffers.responseBuffer)
9
    console.log('output:', output);
13
}, [nodes.matrixMultComputeNode, gl, buffers.responseBuffer]);

استفاده از شیدرهای محاسباتی برای صحنه سه بعدی شما

در حالی که مثال قبلی یک مورد استفاده عالی برای شیدرهای محاسباتی است، ممکن است بخواهید بدانید که چگونه می توان از این ویژگی جدید در ارتباط با خط لوله رندر استفاده کرد و حتی عملکرد صحنه سه بعدی شما را بهبود بخشید.

یکی از اولین نمونه های عملی استفاده از شیدرهای محاسباتی که در Three.js / React Three Fiber با آن مواجه شدم، از طریق شبکه های نمونه. در اولین آزمایش‌هایم که شامل مش‌های نمونه بود، متوجه شدم که باید موقعیت اولیه آنها را در فضای CPU تنظیم کنم. اما امروز می‌توانیم این کار را به صورت زیر به GPU واگذار کنیم:

3
const { nodes, uniforms } = useMemo(() => {
4
  const buffer = instancedArray(COUNT, 'vec3');
6
  const computeInstancePosition = wgslFn(`
8
        buffer: ptr, read_write>,
12
        let gridSize = u32(count);
13
        let gridWidth = u32(sqrt(count));
14
        let gridHeight = (gridSize + gridWidth - 1u) / gridWidth;
16
        if (index >= gridSize) {
20
        let x = index % gridWidth;
21
        let z = index / gridWidth;
24
        let worldX = f32(x) * spacing - f32(gridWidth - 1u) * spacing * 0.5;
25
        let worldZ = f32(z) * spacing - f32(gridHeight - 1u) * spacing * 0.5;
27
        buffer[index] = vec3f(worldX, 0.0, worldZ);
31
  const computeNode = computeInstancePosition({
37
  const positionNode = positionLocal.add(buffer.element(instanceIndex));
47
const compute = useCallback(async () => {
49
    await gl.computeAsync(nodes.computeNode);
53
}, [nodes.computeNode, gl]);
56
  if (!meshRef.current) return;
63
    args={[undefined, undefined, COUNT]}
67
    icosahedronGeometry args={[0.3, 16]} />
69
      emissive={new THREE.Color('white').multiplyScalar(0.15)}
71
      positionNode={nodes.positionNode}

که می توان با نمودار متحرک زیر نشان داد که تمام قسمت های هر خط لوله با هم کار می کنند:

• ابتدا یک بافر ایجاد می کنیم، آرایه ای از بافر به اندازه COUNT * 3، از طریق instancedArray با تعیین تعداد نمونه هایی که می خواهیم رندر کنیم و نوع، در این مورد، a vec3.

• در ادامه شیدر محاسباتی را تعریف می کنیم. من در اینجا از WGSL استفاده می کنم زیرا برای من قابل خواندن تر است و به هر حال صحنه ما فقط از طریق WebGPU اجرا می شود. این سایه زن خاص هر نمونه را در یک شبکه در امتداد محورهای x و z با استفاده از موقعیت قرار می دهد instanceIndex از نمونه سپس موقعیت های به دست آمده در بافر آرایه ای که به عنوان آرگومان ارسال کردیم، نوشته می شود.

• شیدر محاسباتی را اجرا می کنیم COUNT بار، در نتیجه ایجاد COUNT thread ها، که هر نخ مسئول اجرای سایه زن برای یک نمونه خاص است. این مثال شیدر محاسباتی را اجرا می کند یک بار در طول رندر (از این رو چرا انیمیشن خط لوله محاسباتی در نمودار بالا در نقطه ای متوقف می شود).

• در نهایت، می‌توانیم بافر را در یک مقدار مشخص بخوانیم instanceIndex و موقعیت ذخیره شده حاصل را به نمونه های خود اضافه کنید positionLocal از طریق positionNode. با TSL و توابع کمکی آن، می‌توانیم به راحتی رفتار هر نمونه را با استفاده از همان تغییر دهیم instanceIndex شاخص

• در صورت لزوم، داده های بافر یا برخی از جنبه های آن را می توان از طریق vering به هر “گره مرتبط با قطعه” ارسال کرد.

1
const updatePosition = wgslFn(`
8
    let waveAmplitude = 0.5;
9
    let waveFrequencyX = 0.75;
10
    let waveFrequencyZ = 0.75;
12
    let waveOffset = sin(position.x * waveFrequencyX + position.z * waveFrequencyZ - time * waveSpeed) * waveAmplitude;
13
    let waveOffset2 = sin(-position.x * waveFrequencyX + position.z * waveFrequencyZ - time * waveSpeed) * waveAmplitude;
14
    let newY = position.y + (waveOffset + waveOffset2) / 2.0;
16
    return vec3f(position.x, newY, position.z);
20
const positionNode = updatePosition({
21
  position: positionLocal.add(buffer.element(instanceIndex)),

نسخه ی نمایشی زیر خط لوله محاسباتی و رندر خط لوله ما را نشان می دهد که دست در دست هم کار می کنند تا این مش متحرک زیبا از 1024 مش را ارائه دهد.

اندازه و ارسال گروه کاری

در مثال قبلی فقط تنظیم کردیم count استدلال به شیدرهای محاسباتی ما .compute روشی که در واقع می تواند یک آرگومان اضافی بگیرد: workgroupSize.

ارسال این آرگومان اضافی به WebGPU می‌گوید که چند thread/shader فراخوانی متعلق به یک گروه کاری است و دارای ویژگی‌های زیر است:

• این استدلال شکلی دارد [x, y, z] کجا x، y، و z ابعاد گروه کاری در هر جهت مش سه بعدی است.

• شما می توانید تعداد کل موضوعات در هر گروه کاری را با ضرب هر یک در بدست آورید x، y، و z. برای مثال، [64, 1, 1] و [8, 8, 1] هر دو گروه کاری ما را از 64 رشته تعریف می کنند.

• اندازه گروه کاری به نحوه نوشته شدن سایه زن محاسباتی و فرمت داده/بافرهای شما بستگی دارد. برای بافرهای 1 بعدی، [64, 1, 1] یک انتخاب طبیعی است، در حالی که برای بافرهای دو بعدی مانند بافت، آن را به عنوان مشخص کنید [8, 8, 1] ممکن است مناسب تر باشد.

• حداکثر محدودیت 256 رشته برای هر گروه کاری وجود دارد. می توانید تنظیم را امتحان کنید [512, 1, 1]و تمام چیزی که دریافت خواهید کرد یک هشدار از طرف WebGPU خواهد بود.

• در Three.js به صورت پیش‌فرض روی می‌دهد [64, 1, 1 ] ⁷.

بنابراین، در تظاهرات قبلی ما، با توجه به COUNT = 1024 در مواردی، ما باید اجرا کنیم 1024 / 64 = 16 گروه های کاری به طور کلی، تعداد گروه های کاری است ceil(COUNT / workgroupSize.x) در مورد 1D

اکنون یک “چیز سوم مخفی” نیز وجود دارد به نام اندازه حمل و نقل. به طور پیش فرض، زمانی که استفاده می کنید .compute روش، شما لازم نیست نگران این باشید زیرا TSL/Three اندازه حمل و نقل را برای شما محاسبه می کند count و اندازه گروه کاری تنظیم شده (یا پیش فرض). ⁸

با این حال، اگر می‌خواهید از یک رویکرد دستی‌تر برای دانستن تعداد گروه‌های کاری برای شروع استفاده کنید، می‌توانید آن را به صورت دستی با استفاده از .computeKernel در عوض، که اخیراً به پایگاه کد Three.js اضافه شده است.

1
computeNode = computeInstancePositions().computeInstancePosition([8, 8, 1]);
2
gl.compute(computeNode, [4, 4, 1]);

در مورد ما، از آنجایی که ما 1024 نمونه داریم:

• می توانیم از اندازه برای ارسال استفاده کنیم [16, 1, 1]، که منجر به ایجاد 1024 موضوع می شود (64 * 16 * 1 * 1 * 1 * 1)، یک مورد برای هر نمونه، که برای مورد استفاده ما کافی است.

• برای ابعاد دو بعدی، می توانیم آن را به صورت تعریف کنیم [8, 8, 1] با اندازه گروه کاری [4, 4, 1] که به ما می داد  4 * 8 * 4 * 8 * 1 * 1 = 1024

به طور خلاصه:

• workgroupSize تعداد رشته ها در هر گروه کاری است.

• dispatchSize تعداد گروه های کاری در هر بعد است.

• Total threads = (workgroupSize.x * dispatchSize.x) × (workgroupSize.y * dispatchSize.y) × (workgroupSize.z * dispatchSize.z).

ما در هیچ نمونه‌ای از اندازه ارسال استفاده نخواهیم کرد، اما فکر کردم ذکر آن مهم است زیرا به ما در مورد عملکرد داخلی خط لوله محاسباتی اطلاع می‌دهد.

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

اولین مورد استفاده عملی که به نظرم جالب بود و مزایای زیادی را پس از انتقال آنها به TSL و استفاده از شیدرهای محاسباتی نشان داد. ذرات.

در سال 2022 مقاله ای نوشتم که بسیاری از جنبه های ذرات را پوشش می داد. در میان آنها، مورد علاقه من ذرات GPGPU بود. سپس از یک Frame Buffer Object (FBO) برای رندر کردن به یک بافت استفاده کردیم خارج از صفحه نمایش پر شده با داده های موقعیت هر ذره در یک قاب معین. پس از به روز رسانی هر یک از این موقعیت ها از طریق یک قطعه سایه زن، بافت به دست آمده را به سایه زن نهایی منتقل می کنیم تا موقعیت های جدید را بدست آوریم و ذرات را رندر کنیم.

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

راه اندازی سیستم ذرات ما با Compute Shaders

بیایید با تنظیم صحنه ای شروع کنیم که نحوه ایجاد یک سیستم ذرات را با استفاده از خط لوله محاسباتی نشان می دهد.

استفاده خواهیم کرد sprite به عنوان “مش” ذره ما به همراه موادی که با آن مطابقت دارد: spriteNodeMaterial. شبیه به instancedMesh، این ساخت و ساز طول می کشد count prop که مطابق با تعداد ذراتی است که می خواهیم روی صفحه نمایش دهیم. مواد گره‌ای آن می‌تواند بسیاری از خواصی را که قبلاً در این مقاله به آن‌ها اشاره کردیم، داشته باشد، مانند positionNode یا colorNode، که به ما امکان می دهد سیستم ذرات خود را با سایه زن سفارشی کنیم.

8
      blending={THREE.AdditiveBlending}

اگر بخواهیم این را همانطور که هست ارائه کنیم، همه ذرات به آن تبدیل می شوند (0, 0, 0). می توانیم راه اندازی کنیم instancedArray در vec3 که تمام موقعیت های شروع را برای ذرات ما حفظ می کند. سپس می توانیم از یک شیدر محاسباتی استفاده کنیم که آن را کپی می کنیم computeInit برای مقداردهی اولیه ذرات در موقعیت مورد نظر در این بافر.

1
const spawnPositionsBuffer = instancedArray(COUNT, 'vec3');
2
const spawnPosition = spawnPositionsBuffer.element(instanceIndex);
5
    fn hash(index: u32) -> f32 {
6
      return fract(sin(f32(index) * 12.9898) * 43758.5453);
10
const computeInitWgsl = wgslFn(
13
      spawnPositions: ptr, read_write>,
17
      let h1 = hash(index + 1u);
18
      let h2 = hash(index + 2u);
20
      let distance = sqrt(h0 * 4.0);
21
      let theta = h1 * 6.28318530718; // 2 * PI
22
      let phi = h2 * 3.14159265359; // PI
24
      let x = distance * sin(phi) * cos(theta);
25
      let y = distance * sin(phi) * sin(theta);
26
      let z = distance * cos(phi);
28
      spawnPositions[index] = vec3f(x, y, z);
34
const computeNode = computeInitWgsl({
35
  spawnPositions: spawnPositionsBuffer,
39
const positionNode = Fn(() => {
40
  const pos = spawnPosition;

در قطعه کد بالا:

1. ما تمام موقعیت های ذرات خود را به طور تصادفی در یک کره به شعاع مقداردهی اولیه می کنیم 2. بافر ذخیره ذرات ما در حین رندر پر می شود.

2. سپس بردار موقعیت هر ذره از یک نمونه معین را حل کرده و عبور می دهیم positionNode از مال ما spriteNodeMaterial و از طریق اهرم instanceIndex.

جذب کننده ها با شیدرهای محاسباتی

فقط با مقداردهی اولیه، اکنون یک مورد استفاده خوب برای خط لوله محاسباتی داریم: آنچه قبلاً روی CPU انجام می شد اکنون روی GPU انجام می شود. با این حال، ما می توانیم بهتر عمل کنیم!

در مورد ذرات GPGPU، می‌توانیم کل فرآیند نوشتن FBO و بافت را جایگزین کنیم شیدر تک کامپیوتر که روی آن می دویم هر فریم. این امر اجرای یک سیستم ذرات را در جایی که موقعیت یک ذره در زمان تعیین می کند، بسیار ساده می کند t به موقعیت قبلی آن در یک زمان معین بستگی دارد t - dt، یعنی توسط یک معادله پارامتری به عنوان جاذبه تعریف می شود.

در اینجا یک بافر ذخیره سازی اضافی به نام اضافه می کنیم offsetPosition که شامل تمام موقعیت های ذرات ما در یک قاب معین خواهد بود. این موقعیت های افست به طور مداوم بر اساس مقادیر قبلی خود به روز می شوند همانطور که ما سایه بان محاسبه را برای پر کردن آنها در هر فریم می نامیم.

1
const { nodes } = useMemo(() => {
2
  const spawnPositionsBuffer = instancedArray(COUNT, 'vec3');
3
  const offsetPositionsBuffer = instancedArray(COUNT, 'vec3');
5
  const spawnPosition = spawnPositionsBuffer.element(instanceIndex);
6
  const offsetPosition = offsetPositionsBuffer.element(instanceIndex);
10
  const thomasAttractor = wgslFn(`
11
      fn thomasAttractor(pos: vec3) -> vec3 {
20
        let dx = (-b * x + sin(y)) * dt;
21
        let dy = (-b * y + sin(z)) * dt;
22
        let dz = (-b * z + sin(x)) * dt;
24
        return vec3(dx, dy, dz);
28
  const computeNodeUpdate = Fn(() => {
29
    const updatedOffsetPosition = thomasAttractor({
30
      pos: spawnPosition.add(offsetPosition),
32
    offsetPosition.addAssign(updatedOffsetPosition);
35
  const positionNode = Fn(() => {
36
    const pos = spawnPosition.add(offsetPosition);
53
  gl.compute(nodes.computeNodeUpdate);

سپس می توانیم موقعیت افست یک نمونه داده شده را با استفاده از آن بدست آوریم instanceIndex و آن را به موقعیت تخم ریزی مربوطه خود اضافه کنید. نمودار زیر این مثال از یک خط لوله محاسباتی در حال اجرا بر روی هر فریم برای به روز رسانی یک سیستم ذرات را نشان می دهد:

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

به عنوان کسی که عاشق پس پردازش است، از اینکه متوجه شدم افکت‌های TSL آنطور که فکر می‌کردم مستند نشده بودند، ناامید شدم و صحنه‌هایی را از React Three Fiber استاندارد رندر می‌کردم. @react-three/postprocessing در ابتدا کمی سخت است من مجبور شدم به چند نمونه از مخزن نمونه Three.js نگاه کنم و با آزمون و خطا بفهمم که چگونه می توانم آنها را بر روی تنظیمات React Three Fiber موجودم کار کنم.

هدف این بخش این است که این مهاجرت را برای افرادی که شروع به کار می کنند کمی آسان تر کند، در حالی که یک مورد عملی برای سایه زن های محاسباتی با اثرات پس از پردازش ارائه می دهد.

تنظیم افکت های سفارشی پس از پردازش با TSL React Three Fiber

مشابه آنچه در قسمت دوم این مقاله ایجاد کردیم، من همچنین دوست دارم گره TSL پس از پردازش خود را در داخل سازماندهی کنم. useMemo.TSL چندین تابع کمکی را ارائه می دهد که ما از آنها برای راه اندازی خط لوله پس از پردازش خود استفاده خواهیم کرد:

• pass، که گره ای است که یک پاس رندر جدید ایجاد می کند ⁹

• getTexture، روش از PassNode که بافت را برای نام منبع داده شده برمی گرداند. به طور پیش‌فرض، می‌تواند بافت منتشر یا بافت عمق را برگرداند.

• setMRT، روش از PassNode که به شما امکان می دهد به اهداف رندر اضافی ارجاع دهید (از این رو نام MRT -> اهداف رندر چندگانه)

1
const { textures } = useMemo(() => {
2
  const scenePass = pass(scene, camera);
3
  const diffuse = scenePass.getTextureNode('output');
4
  const depth = scenePass.getTextureNode('depth');
6
  const outputNode = diffuse;

سپس شما باید:

1. یک نمونه جدید از THREE.PostProcessing در برابر رندر WebGPU ما.

2. آن را تنظیم کنید ouputNode ویژگی به هر پاسی که می خواهیم، و همچنین نمونه حاصل را در React ref برای ارجاع بعدی ذخیره کنید.

3. تماس بگیرید render روش نمونه پس پردازش ما

قسمت سخت این بود که بفهمیم کجا باید تماس بگیریم render در وهله اول. میدونستم وارد میشه useFrame، اما در نگاه اول هیچ کاری انجام نداد. برای اینکه این کار انجام شود، باید آن را تنظیم کنیم renderPriority استدلال از useFrame به 1این اثر زیر را دارد:

2
  const postProcessing = new THREE.PostProcessing(gl);
3
  postProcessing.outputNode = outputNode;
4
  postProcessingRef.current = postProcessing;
6
  if (postProcessingRef.current) {
7
    postProcessingRef.current.needsUpdate = true;
8
    postProcessingRef.current.outputNode = customPass(outputNode);
12
    postProcessingRef.current = null;
17
  if (postProcessingRef.current) {
18
    postProcessingRef.current.render();

اکنون می‌توانیم یک پاس سفارشی پس از پردازش ایجاد کنیم که می‌تواند با سایه‌زن‌های TSL یا WGSL/GLSL (بسته به آنچه دوست داریم) پیاده‌سازی شود. کد قالبی که در کارم استفاده کردم اینجاست:

1
class CustomEffectNode extends THREE.TempNode {
2
  constructor(inputNode) {
4
    this.inputNode = inputNode;
8
    const inputNode = this.inputNode;
10
    const effect = Fn(() => {
11
      const input = inputNode;
13
      return vec4(input.r.add(0.25), input.g, input.b, 1.0);
16
    const outputNode = effect();
22
const customPass = (node) => nodeObject(new CustomEffectNode(node));

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

جلوه های پس از پردازش با Compute Shaders

اکنون که می دانیم چگونه با پردازش پس پردازش React Three Fiber با TSL کار کنیم، بیایید نمونه ای بسازیم که از خط لوله محاسباتی به همراه افکت سایه زن سفارشی برای استایل دادن به صحنه ما استفاده می کند. برای این بخش، ما مجدداً مستقر خواهیم کرد اثر کانتور من پس پردازش به سبک Moebius و سایر شیدرهای سبک شده را معرفی کردم که مبتنی بر فیلتر تشخیص لبه به نام “فیلتر Sobel” هستند.

به عنوان یادآوری، برای اینکه فیلتر تشخیص لبه ما کار کند، ابتدا به موارد زیر نیاز داریم:

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

• بافت صحنه معمولی این ما را از هرگونه تغییر جهت ناگهانی برای هر شبکه ای در صحنه ما مطلع می کند. به طور مشابه، ما می خواهیم خطوطی را برای برجسته کردن جزئیات در مش ترسیم کنیم.

ترکیب دو نرخ تغییر/ گرادیان (نرمال و عمق) یک مقدار کلی تغییر را به ما می دهد، یعنی قدرت لبه در یک موقعیت معین روی صفحه نمایش. سپس می‌توانیم این نیرو را با شدت یا ضخامت خطوط مرتبط کنیم.

در توضیحات اصلی من در مورد موضوع، من این محاسبات را مستقیماً در اثر نهایی انجام دادم. اما امروز می توانیم:

1. از یک شیدر کامپیوتر برای پر کردن a استفاده کنید StorageTexture با قدر در هر UV.

2. این را پاس کن StorageTexture به عنوان استدلالی برای اثر نهایی ما، که اکنون فقط مسئول تفسیر این داده ها برای ترسیم خطوط نهایی است.

3. اگر صحنه پویا است، یک یا هر فریم را با شیدر محاسباتی تماس بگیرید.

بافر بافت

0.1

0.9

0.1

0.3

0.1

0.1

0.7

0.9

0.2

0.6

0.0

0.3

0.0

0.1

0.0

0.2

0.9

0.9

1.0

0.3

0.7

0.1

0.4

0.4

0.8

0.3

0.6

0.1

0.6

0.2

0.6

0.1

1.0

0.9

0.2

0.8

0.6

0.6

0.4

0.5

0.1

0.3

0.8

0.8

0.1

0.2

0.4

0.2

0.6

0.8

0.0

0.7

0.6

0.1

0.0

0.8

0.6

0.3

0.7

0.5

0.4

0.1

0.7

0.0

0.7

0.3

0.4

0.2

0.5

0.4

0.1

0.4

0.3

0.5

0.2

0.6

1.0

0.4

0.6

0.6

0.0

خط لوله محاسباتیx1 در هر فریم

رندر خط لولهx1 در هر فریم

سایه‌زن قطعه اثر

در مرحله محاسبه:

1
const storageTexture = new THREE.StorageTexture(
2
  window.innerWidth * window.devicePixelRatio,
3
  window.innerHeight * window.devicePixelRatio

1
const posX = instanceIndex.mod(
2
  int(window.innerWidth * window.devicePixelRatio)
5
const posY = instanceIndex.div(window.innerWidth * window.devicePixelRatio);

• ما هم می توانستیم از آنها استنباط کنیم UV مختصاتی که برای محاسبه عمق و نرمال مورد نیاز است.

1
const fragCoord = uvec2(posX, posY);
3
  float(fragCoord.x).div(float(window.innerWidth * window.devicePixelRatio)),
4
  float(fragCoord.y).div(float(window.innerHeight * window.devicePixelRatio))

1
const magnitude = GDepth.add(GNormal);
2
textureStore(storageTexture, fragCoord, vec4(magnitude, 0.0, 0.0, 1.0));

در مرحله بعد، ما باید شیدر محاسباتی خود را طوری تنظیم کنیم که در هر پیکسل از صفحه نمایش ما یک رشته ایجاد کند. window.innerWidth * window.devicePixelRatio * window.innerHeight * window.devicePixelRatio. سپس می توانیم آن را با استفاده از gl.compute در مال ما useFrame، بنابراین اطمینان حاصل می کند که بافت حاوی داده های بزرگی ما را در هر فریم به روز می کند تا هر تغییر در زاویه دوربین یا هر حرکت چشم را کنترل کند.

دمو زیر شامل ترکیبی از موارد زیر است:

• خط لوله محاسباتی ما، فیلتر سوبل ما را اجرا می کند و مقادیر حاصل را در یک بافت ذخیره می کند.

• خط لوله رندر ما، شروع صحنه ما و اعمال افکت کانتور سفارشی ما بر اساس داده های بزرگی ذخیره شده در بافت است.

من می توانم در مورد هر یک از مثال ها و موضوعات ارائه شده در این پست یک مقاله جداگانه بنویسم. با این حال، نشان دادن آنها با هم طبیعی‌تر به نظر می‌رسد تا بتواند به عنوان یک راهنما برای هر کسی که می‌خواهد از Three.js/React Three Fiber کلاسیک به این روش جدید ساخت سه‌بعدی برای وب حرکت کند، عمل کند.
امیدوارم این به برخی از سوالاتی که ممکن است در مورد WebGPU و TSL داشتید پاسخ دهد و جنبه‌هایی را که ممکن است فوراً از مستندات و مثال‌های موجود آشکار نباشد، شفاف‌سازی کند.

اگر بخواهم چند فکر از خودم را در این مرحله از سفر یادگیری ام یادداشت کنم، آنها عبارتند از:

1. سیستم گره در حال تغییر زندگی است. من در واقع من آن را دوست دارم من فکر می کنم بسیاری از توسعه دهندگان دیگر با من در این مورد موافق هستند.

2. خلاصه TSL زیاد از همه چیز دور است، که خوب است زیرا بسیار مناسب برای مبتدیان است و مانع ورود توسعه سایه‌بان را کاهش می‌دهد، اما در مواقعی که کنترل را برای موارد استفاده پیشرفته‌تر از دست می‌دهیم، می‌تواند دردسرساز شود.

3. انتزاع TSL، اگرچه برای کار سریع و تمرکز بر ساخت عالی است، ممکن است مرا وادار کند که کار با WebGPU را خارج از چارچوب Three.js/React Three Fiber شروع کنم. پروژه‌هایی مانند TypeGPU وجود دارند که کار با WebGPU را در دسترس‌تر می‌کنند در حالی که ویژگی‌های اصلی آن را کاملاً از دید توسعه‌دهندگان پنهان نمی‌کنند.

4. TSL هنوز در حال پیشرفت است، بسیاری از ویژگی های آن ضعیف هستند یا اصلاً مستند نیستند. بیشترین دلخوری من از او در همین جاست. من اغلب متوجه می‌شدم که مجبور بودم استفاده از یک تابع را استنباط کنم یا به عنوان مثال در جایی در مخزن Three.js جستجو کنم، که سرعتم را کاهش داد. می‌خواهم مشخصات کاملی را ببینم که در مقطعی نوشته شده باشد تا حدس و گمان را از استفاده از آن حذف کنم و بهترین روش‌ها را مستند کنم.

در عین حال، از آنجایی که برخی از این جزئیات تکمیل شده‌اند، من همچنان در حال نوشتن سایه‌زنان در GLSL خواهم بود، مگر اینکه مورد استفاده خاصی داشته باشم که در آن به سایه‌زن‌های محاسباتی نیاز داشته باشم، مانند تجربیات اخیرم با چشم‌انداز رویه‌ای، که بسیار هیجان‌زده هستم که درباره روز آماده شدن این پروژه بیشتر به شما بگویم. اگر برای به کارگیری دانش جدید TSL/WebGPU خود به الهام بیشتری نیاز دارید، در اینجا لیستی از تمام صحنه های دیگری که در تابستان ایجاد کردم آورده شده است. می توانید سعی کنید خودتان آنها را بازتولید کنید تا با TSL و WebGPU راحت تر شوید. هر آنچه شما نیاز دارید در این مقاله ارائه شده است: