{"_id":"3dgs-renderer-test","name":"3dgs-renderer-test","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"3dgs-renderer-test","version":"0.0.1","description":"A standalone 3D Gaussian Splatting renderer library using WebGPU","type":"module","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"build":"vite build","dev":"vite build --watch","test":"vitest","test:run":"vitest --run","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"sideEffects":false,"peerDependencies":{"three":">=0.150.0"},"dependencies":{"gl-matrix":"^3.4.3"},"devDependencies":{"@types/three":"^0.179.0","@webgpu/types":"^0.1.40","fast-check":"^3.15.0","three":"^0.171.0","typescript":"^5.3.3","vite":"^5.0.0","vite-plugin-dts":"^3.7.0","vitest":"^1.2.0"},"keywords":["3dgs","gaussian-splatting","webgpu","3d-rendering","point-cloud"],"license":"MIT","_id":"3dgs-renderer-test@0.0.1","gitHead":"ea00c79a7c8f11f8f39b2b3e3bd1b96bd0c282c4","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-HwnJm3b5z5DQh8AsZXobezdXnnKMXu1Y5VlG188569yTDy6i7hDrsVhc64hO6zygSUQuLVDRDQDKM2OYHtcVgw==","shasum":"2e4352c9402a0af1b086f1af9b208878f3dab8ca","tarball":"https://registry.npmjs.org/3dgs-renderer-test/-/3dgs-renderer-test-0.0.1.tgz","fileCount":7,"unpackedSize":984037,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHrPf3tdgV0DkOkYWoFOQ4kByIz6qtJVIDOTgDEddK68AiBobwDVtd0RGRFd1oMXa1MlnAh2JM2IUMfr3RDnxLIk5A=="}]},"_npmUser":{"name":"wjymzh","email":"1195332157@qq.com"},"directories":{},"maintainers":[{"name":"wjymzh","email":"1195332157@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/3dgs-renderer-test_0.0.1_1766482883210_0.331416868143269"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-23T09:41:23.209Z","0.0.1":"2025-12-23T09:41:23.377Z","modified":"2025-12-23T09:41:23.661Z"},"maintainers":[{"name":"wjymzh","email":"1195332157@qq.com"}],"description":"A standalone 3D Gaussian Splatting renderer library using WebGPU","keywords":["3dgs","gaussian-splatting","webgpu","3d-rendering","point-cloud"],"license":"MIT","readme":"# 3dgs-renderer\n\n基于 WebGPU 的独立 3D 高斯泼溅渲染库。\n\n## 特性\n\n- 纯 WebGPU 渲染（无 WebGL 回退）\n- 通过 `CameraAdapter` 集成 Three.js 相机\n- 提供独立的 `PerspectiveCamera`，无需依赖 Three.js\n- 支持 PLY 文件加载，带 FP16 优化\n- GPU 加速基数排序，实现从后到前渲染\n- 球谐函数计算（0-3 阶）\n- Mip-splatting 抗锯齿\n\n## 安装\n\n```bash\nnpm install 3dgs-renderer three gl-matrix\n```\n\n## 快速开始\n\n### 配合 Three.js 使用\n\n```typescript\nimport * as THREE from \"three\";\nimport { OrbitControls } from \"three/examples/jsm/controls/OrbitControls\";\nimport {\n  requestWebGPU,\n  PLYLoader,\n  PointCloud,\n  GaussianRenderer,\n  CameraAdapter,\n} from \"3dgs-renderer\";\n\nasync function main() {\n  const canvas = document.getElementById(\"canvas\") as HTMLCanvasElement;\n\n  // 初始化 WebGPU\n  const { device, format } = await requestWebGPU();\n\n  // 配置画布\n  const context = canvas.getContext(\"webgpu\")!;\n  context.configure({ device, format, alphaMode: \"premultiplied\" });\n\n  // 加载 PLY 文件\n  const response = await fetch(\"model.ply\");\n  const buffer = await response.arrayBuffer();\n  const loader = new PLYLoader();\n  const gaussianData = await loader.loadBuffer(buffer);\n\n  // 创建点云\n  const pointCloud = new PointCloud(device, gaussianData);\n\n  // 创建渲染器\n  const renderer = new GaussianRenderer({\n    device,\n    format,\n    shDegree: gaussianData.shDegree(),\n  });\n  await renderer.initialize();\n\n  // 设置 Three.js 相机\n  const camera = new THREE.PerspectiveCamera(\n    60,\n    canvas.width / canvas.height,\n    0.1,\n    1000\n  );\n  camera.position.set(0, 0, 5);\n\n  const controls = new OrbitControls(camera, canvas);\n\n  // WebGPU 相机适配器\n  const cameraAdapter = new CameraAdapter();\n\n  // 渲染循环\n  function render() {\n    requestAnimationFrame(render);\n    controls.update();\n\n    const viewport: [number, number] = [canvas.width, canvas.height];\n    cameraAdapter.update(camera, viewport);\n\n    const encoder = device.createCommandEncoder();\n\n    // 准备阶段（预处理 + 排序）\n    renderer.prepare(encoder, device.queue, pointCloud, {\n      cameraAdapter,\n      viewport,\n    });\n\n    // 渲染\n    const textureView = context.getCurrentTexture().createView();\n    const renderPass = encoder.beginRenderPass({\n      colorAttachments: [\n        {\n          view: textureView,\n          clearValue: { r: 0, g: 0, b: 0, a: 1 },\n          loadOp: \"clear\",\n          storeOp: \"store\",\n        },\n      ],\n    });\n    renderer.render(renderPass, pointCloud);\n    renderPass.end();\n\n    device.queue.submit([encoder.finish()]);\n  }\n\n  render();\n}\n\nmain();\n```\n\n### 独立使用（无需 Three.js）\n\n```typescript\nimport {\n  requestWebGPU,\n  PLYLoader,\n  PointCloud,\n  GaussianRenderer,\n  PerspectiveCamera,\n} from \"3dgs-renderer\";\n\nasync function main() {\n  const canvas = document.getElementById(\"canvas\") as HTMLCanvasElement;\n\n  // 初始化 WebGPU\n  const { device, format } = await requestWebGPU();\n\n  // 配置画布\n  const context = canvas.getContext(\"webgpu\")!;\n  context.configure({ device, format, alphaMode: \"premultiplied\" });\n\n  // 加载 PLY 文件\n  const loader = new PLYLoader();\n  const gaussianData = await loader.loadUrl(\"model.ply\");\n\n  // 创建点云\n  const pointCloud = new PointCloud(device, gaussianData);\n\n  // 创建渲染器\n  const renderer = new GaussianRenderer({\n    device,\n    format,\n    shDegree: gaussianData.shDegree(),\n  });\n  await renderer.initialize();\n\n  // 创建独立相机\n  const camera = new PerspectiveCamera(\n    [0, 0, 5], // 位置\n    [0, 0, 0], // 目标点\n    [0, 1, 0] // 上方向\n  );\n  camera.setAspect(canvas.width / canvas.height);\n\n  // 渲染循环\n  function render() {\n    requestAnimationFrame(render);\n\n    const viewport: [number, number] = [canvas.width, canvas.height];\n\n    const encoder = device.createCommandEncoder();\n\n    // 准备阶段（预处理 + 排序）\n    renderer.prepare(encoder, device.queue, pointCloud, {\n      camera,\n      viewport,\n    });\n\n    // 渲染\n    const textureView = context.getCurrentTexture().createView();\n    const renderPass = encoder.beginRenderPass({\n      colorAttachments: [\n        {\n          view: textureView,\n          clearValue: { r: 0, g: 0, b: 0, a: 1 },\n          loadOp: \"clear\",\n          storeOp: \"store\",\n        },\n      ],\n    });\n    renderer.render(renderPass, pointCloud);\n    renderPass.end();\n\n    device.queue.submit([encoder.finish()]);\n  }\n\n  render();\n}\n\nmain();\n```\n\n## API 参考\n\n### 核心类\n\n- `GaussianRenderer` - 主渲染管线\n- `GaussianPreprocessor` - GPU 预处理（变换、球谐计算、剔除）\n- `PointCloud` - 高斯数据的 GPU 缓冲区管理\n- `RadixSorter` - GPU 基数排序，用于深度排序\n\n### 相机\n\n- `CameraAdapter` - Three.js 到 WebGPU 的相机转换\n- `PerspectiveCamera` - 独立透视相机\n\n### 输入/输出\n\n- `PLYLoader` - 加载 3DGS PLY 文件\n- `GaussianData` - 内存中的高斯数据容器\n\n### 工具函数\n\n- `requestWebGPU()` - 初始化 WebGPU 设备\n- `createBuffer()` - 创建 GPU 缓冲区\n- `f32_to_f16()` / `f16_to_f32()` - FP16 转换\n\n## 渲染模式\n\n渲染器支持多种渲染模式：\n\n```typescript\nimport { RenderMode } from \"3dgs-renderer\";\n\n// 颜色模式（默认）- 基于视角的球谐颜色\npointCloud.setRenderMode(RenderMode.Color);\n\n// 法线模式 - 可视化表面法线\npointCloud.setRenderMode(RenderMode.Normal);\n\n// 深度模式 - 可视化深度\npointCloud.setRenderMode(RenderMode.Depth);\n```\n\n## 许可证\n\nMIT\n","readmeFilename":"README.md","_rev":"1-0cae635c517a7d9bd2e2eb986498bf6c"}