‏Radix: کتابخونه جدید Gaussian Splatting برای three.js

Radix یه کتابخونه تازه از تیم SparkJS برای نمایش Gaussian Splatها (یعنی صحنه سه‌بعدی‌ای که به‌جای مثلث از هزاران بیضی نرم و رنگی ساخته شده) تو مرورگره. به گفته صفحه پروژه، داده‌ی splatها تو جدول‌هایی از typed arrayها هم روی CPU و هم روی GPU نگه داشته می‌شه و رندرشون با WebGPURenderer خود three.js انجام می‌شه. اگه مرورگر WebGPU نداشته باشه، همون رندرر می‌ره سراغ بک‌اند WebGL2، پس صحنه رو هر جا نشون می‌ده.

پکیج npm اسمش @sparkjsdev/radix هست و الان نسخه 0.0.1 منتشر شده. با three نسخه 0.186 کار می‌کنه و چون خودش three، three/webgpu و three/tsl رو import می‌کنه، اگه از CDN استفاده می‌کنی باید هر سه رو تو import map تعریف کنی. کد workerها هم داخل خود bundle گذاشته شده، یعنی لازم نیست فایل worker جداگونه سرو کنی.

مثال شروع کار یه پروانه رو لود و رندر می‌کنه. اول با loadSplats داده رو می‌گیره، بعد یه SplatCollection می‌سازه و به SplatRenderer می‌ده:

const renderer = await createRenderer();
const data = await loadSplats(splatURL);
const collection = new SplatCollection([
  SplatCollection.arrays(GpuArrays.fromData(renderer, data), { matrixWorld: butterfly.matrixWorld }),
]);
scene.add(new SplatRenderer({ renderer, collection }));

برای پروژه‌های TypeScript حداقل نسخه 5.7 لازمه و تایپ‌های WebGPU هم باید باشن: TypeScript 6 اون‌ها رو تو تایپ‌های DOM داره و نسخه‌های قدیمی‌تر به پکیج @webgpu/types نیاز دارن. سایت پروژه مثال‌هایی مثل splat viewer، صحنه‌های WebXR، بازی و فرکتال داره، به‌علاوه پورت همه مثال‌های SparkJS 2.3.1 و یه صفحه مقایسه Radix با SparkJS.

نکات کلیدی:

• Radix با WebGPURenderer از three.js رندر می‌کنه و اگه WebGPU نباشه از WebGL2 استفاده می‌کنه.
• پکیج @sparkjsdev/radix نسخه 0.0.1 هست و به three نسخه 0.186 نیاز داره.
• کد workerها تو bundle گذاشته شده و فایل جداگونه‌ای برای سرو کردن نداره.
• TypeScript 5.7 به بالا لازمه و نسخه‌های قبل از 6 به @webgpu/types نیاز دارن.
• همه مثال‌های SparkJS 2.3.1 به Radix پورت شدن یا وضعیت‌شون مستند شده.