跳到主要内容

图像转高斯泼溅

GsplatImage 为每个非透明像素创建一个单元，让图像呈现独特的点状表现。

备注

此功能基于渲染架构。

概览​

该脚本组件：

  • 接收纹理资源。
  • 每个非透明像素一个单元。
  • 显示在 Y=0 的 XZ 平面。
  • 尺寸适配 1x1 单位区域。

用实体变换调整场景中的位置和缩放。

基本用法​

// Import the script
const { GsplatImage } = await import('path/to/gsplat-image.mjs');

// Add script component to an entity
entity.addComponent('script');
const imageSplat = entity.script.create(GsplatImage);
imageSplat.imageAsset = myTextureAsset;

// Position and scale using entity transform
entity.setLocalPosition(0, 0, 0);
entity.setLocalScale(2, 2, 2);  // 2x2 unit image

属性​

属性类型说明
imageAssetAsset要显示的纹理资源

工作原理​

  1. 从纹理读取像素。
  2. 跳过 alpha = 0。
  3. 每个可见像素变为单元：
    • 位置来自 XZ 平面的像素坐标。
    • 颜色来自 RGBA。
    • 尺寸经过计算，避免间隙。

坐标映射​

图像映射到 XZ 平面 1x1 区域：

  • X：从左到右，像素 x → 世界 x。
  • Z：从上到下，像素 y → 世界 -z。
  • Y：始终为 0，平放地面。

图像以原点居中，坐标范围 -0.5 到 +0.5。

自动更新​

imageAsset 变化时自动重建，赋予新纹理即可。

// Change the image at runtime
imageSplat.imageAsset = anotherTextureAsset;

性能注意事项​

单元数等于非透明像素数，512x512 全不透明图像约生成 26.2 万个。

建议：

  • 用较小图像改善性能。
  • 透明区域可减少数量。
  • 权衡视觉与性能。

实时示例​

Procedural Shapes 演示图像作为地面和墙面装饰。

程序化形状示例

脚本位置​

脚本位于引擎仓库：

scripts/esm/gsplat/gsplat-image.mjs

另请参见​