Viv 开源项目教程

Viv 开源项目教程

viv Library for multiscale visualization of high-resolution multiplexed bioimaging data on the web. Directly renders Zarr and OME-TIFF. 项目地址: https://gitcode.com/gh_mirrors/vi/viv

1. 项目介绍

Viv 是一个用于在 Web 上多尺度可视化高分辨率多重生物成像数据的 JavaScript 库。它直接渲染 Zarr 和 OME-TIFF 格式的数据，并提供了丰富的交互式可视化功能。Viv 的核心渲染组件打包为 deck.gl 图层，便于与其他图层组合，创建复杂的交互式可视化。

2. 项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 Viv：

npm install @hms-dbmi/viv

此外，你还需要手动安装 deck.gl 和其他 peerDependencies：

npm install deck.gl @luma.gl/core

快速示例

以下是一个简单的示例，展示如何在浏览器中渲染一个 OME-TIFF 文件：

import { load } from '@hms-dbmi/viv';
import { DeckGL } from 'deck.gl';

async function render() {
  const tiffUrl = 'path/to/your/file.ome.tiff';
  const { data, metadata } = await load(tiffUrl);

  const deck = new DeckGL({
    initialViewState: {
      longitude: 0,
      latitude: 0,
      zoom: 1,
    },
    controller: true,
    layers: [
      new VivLayer({
        id: 'viv-layer',
        data,
        metadata,
      }),
    ],
  });
}

render();

3. 应用案例和最佳实践

应用案例

• Avivator: 一个轻量级的本地和远程数据集查看器，源代码包含在 Viv 仓库的 avivator/ 目录下。
• Vizarr: 一个纯客户端的 OME-NGFF 和其他基于 Zarr 的图像查看器，支持 Python 后端，可以直接嵌入 Jupyter 或 Google Colab 笔记本中。

最佳实践

• 数据格式转换: 推荐将专有文件格式转换为开放标准格式，如 OME-NGFF (Zarr) 或 OME-TIFF，使用 bioformats2raw + raw2ometiff 管道。
• 性能优化: 对于非金字塔数据集，确保单个纹理可以上传到 GPU（像素大小 < 4096 x 4096）。

4. 典型生态项目

• Vitessce: 一个用于多尺度可视化的框架，与 Viv 结合使用，提供更丰富的交互体验。
• HuBMAP Common Coordination Framework Exploration User Interface (CCF EUI): 使用 Viv 进行高分辨率生物成像数据的可视化。
• Galaxy Project: 将 Avivator 作为 OME-TIFF 文件的默认查看器。

通过以上模块，你可以快速了解并开始使用 Viv 项目，结合实际应用案例和最佳实践，进一步提升你的开发效率和项目质量。

viv Library for multiscale visualization of high-resolution multiplexed bioimaging data on the web. Directly renders Zarr and OME-TIFF. 项目地址: https://gitcode.com/gh_mirrors/vi/viv