Surface with multiple textures

This example demonstrates one possible method for displaying a 3D surface with multiple textures.

Thanks to Emmanuel Reynaud and Luis Gutierrez for providing the gorgeous coral model for this demo. You can find the data on FigShare: https://zenodo.org/records/13380203

More information on the methods used to generate this model can be found in L. Gutierrez-Heredia, C. Keogh, E. G. Reynaud, Assessing the Capabilities of Additive Manufacturing Technologies for Coral Studies, Education, and Monitoring. Front. Mar. Sci. 5 (2018), doi:10.3389/fmars.2018.00278.

A bit about 3D models

A standard way to define a 3D model (mesh, or Surface in napari) is by listing vertices (3D point coordinates) and faces (triplets of vertex indices - each face is a triangle in 3D space). Meshes are often stored in “Wavefront” (.obj) files, which may have companion material (.mtl) files that describe some shading properties (base color, shinyness, etc.) for different parts of the model.

In some cases, the color of a vertex is given by a single point value that is then colormapped on the fly (vertex_values). In other cases, each vertex or face may be assigned a specific color (vertex_colors). These methods are demonstrated in Surface with texture and vertex_colors.

In the case of “photorealistic” models, the color of each vertex is instead determined by mapping a vertex to a point in an image called a texture using 2D texture coordinates in the range [0, 1]. The color of each individual pixel is smoothly interpolated (sampled) on the fly from the texture (the GPU makes this interpolation very fast).

Napari does not (yet) support models with multiple textures or materials. If the textures don’t overlap, you can display them on separate meshes as shown in this demo. If the textures do overlap, you may instead be able to combine the textures as images. This relies on textures having the same texture coordinates, and may require resizing the textures to match each other.

Tags: visualization-nD

import os

import matplotlib.pyplot as plt
import pooch
from vispy.io import imread, read_mesh

import napari

Download the model

download = pooch.DOIDownloader(progressbar=True)
doi = '10.5281/zenodo.13380203'
tmp_dir = pooch.os_cache('napari-surface-texture-example')
os.makedirs(tmp_dir, exist_ok=True)
data_files = {
    'mesh': 'PocilloporaDamicornisSkin.obj',
    # "materials": "PocilloporaVerrugosaSkinCrop.mtl",  # not yet supported
    'Texture_0': 'PocilloporaDamicornisSkin_Texture_0.jpg',
    'GeneratedMat2': 'PocilloporaDamicornisSkin_GeneratedMat2.png',
}
print(f'downloading data into {tmp_dir}')
for file_name in data_files.values():
    if not (tmp_dir / file_name).exists():
        print(f'downloading {file_name}')
        download(
            f'doi:{doi}/{file_name}',
            output_file=tmp_dir / file_name,
            pooch=None,
        )
    else:
        print(f'using cached {tmp_dir / file_name}')

downloading data into /home/runner/.cache/napari-surface-texture-example
downloading PocilloporaDamicornisSkin.obj

  0%|                                              | 0.00/93.8M [00:00<?, ?B/s]
  0%|                                      | 14.3k/93.8M [00:00<14:26, 108kB/s]
  0%|                                       | 104k/93.8M [00:00<04:30, 346kB/s]
  0%|▏                                     | 347k/93.8M [00:00<01:30, 1.03MB/s]
  1%|▎                                     | 756k/93.8M [00:00<00:46, 2.01MB/s]
  1%|▌                                    | 1.40M/93.8M [00:00<00:27, 3.40MB/s]
  3%|█                                    | 2.56M/93.8M [00:00<00:15, 5.94MB/s]
  5%|█▉                                   | 4.76M/93.8M [00:00<00:08, 10.9MB/s]
  8%|███                                  | 7.76M/93.8M [00:00<00:05, 16.7MB/s]
 12%|████▍                                | 11.4M/93.8M [00:01<00:03, 22.6MB/s]
 15%|█████▋                               | 14.3M/93.8M [00:01<00:03, 24.5MB/s]
 19%|██████▊                              | 17.4M/93.8M [00:01<00:02, 26.6MB/s]
 22%|████████                             | 20.6M/93.8M [00:01<00:02, 26.1MB/s]
 26%|█████████▍                           | 24.0M/93.8M [00:01<00:02, 28.3MB/s]
 29%|██████████▋                          | 27.1M/93.8M [00:01<00:02, 29.1MB/s]
 32%|███████████▉                         | 30.2M/93.8M [00:01<00:02, 29.6MB/s]
 35%|█████████████                        | 33.2M/93.8M [00:01<00:02, 29.9MB/s]
 39%|██████████████▎                      | 36.3M/93.8M [00:01<00:01, 30.2MB/s]
 42%|███████████████▋                     | 39.8M/93.8M [00:01<00:01, 31.5MB/s]
 46%|█████████████████                    | 43.1M/93.8M [00:02<00:01, 28.0MB/s]
 50%|██████████████████▍                  | 46.6M/93.8M [00:02<00:01, 29.8MB/s]
 53%|███████████████████▋                 | 49.8M/93.8M [00:02<00:01, 30.6MB/s]
 56%|████████████████████▉                | 52.9M/93.8M [00:02<00:01, 30.7MB/s]
 60%|██████████████████████               | 56.1M/93.8M [00:02<00:01, 30.8MB/s]
 64%|███████████████████████▌             | 59.7M/93.8M [00:02<00:01, 32.5MB/s]
 67%|████████████████████████▉            | 63.1M/93.8M [00:02<00:00, 33.0MB/s]
 71%|██████████████████████████▏          | 66.5M/93.8M [00:02<00:00, 32.8MB/s]
 74%|███████████████████████████▌         | 69.8M/93.8M [00:02<00:00, 32.7MB/s]
 78%|████████████████████████████▉        | 73.4M/93.8M [00:03<00:00, 33.9MB/s]
 82%|██████████████████████████████▎      | 76.8M/93.8M [00:03<00:00, 33.6MB/s]
 86%|███████████████████████████████▋     | 80.2M/93.8M [00:03<00:00, 32.1MB/s]
 89%|████████████████████████████████▉    | 83.6M/93.8M [00:03<00:00, 32.7MB/s]
 93%|██████████████████████████████████▎  | 86.9M/93.8M [00:03<00:00, 32.6MB/s]
 96%|███████████████████████████████████▌ | 90.1M/93.8M [00:03<00:00, 32.6MB/s]
100%|████████████████████████████████████▉| 93.5M/93.8M [00:03<00:00, 33.0MB/s]
  0%|                                              | 0.00/93.8M [00:00<?, ?B/s]
100%|██████████████████████████████████████| 93.8M/93.8M [00:00<00:00, 534GB/s]
downloading PocilloporaDamicornisSkin_Texture_0.jpg

  0%|                                              | 0.00/17.3M [00:00<?, ?B/s]
  0%|                                      | 18.4k/17.3M [00:00<02:03, 139kB/s]
  1%|▎                                      | 115k/17.3M [00:00<00:39, 430kB/s]
  2%|▋                                      | 296k/17.3M [00:00<00:20, 828kB/s]
  4%|█▌                                    | 701k/17.3M [00:00<00:09, 1.84MB/s]
  8%|███                                  | 1.42M/17.3M [00:00<00:04, 3.49MB/s]
 16%|█████▉                               | 2.77M/17.3M [00:00<00:02, 6.57MB/s]
 31%|███████████▌                         | 5.42M/17.3M [00:00<00:00, 12.6MB/s]
 52%|███████████████████▍                 | 9.07M/17.3M [00:00<00:00, 19.9MB/s]
 72%|██████████████████████████▋          | 12.5M/17.3M [00:01<00:00, 24.1MB/s]
 90%|█████████████████████████████████▏   | 15.5M/17.3M [00:01<00:00, 26.1MB/s]
  0%|                                              | 0.00/17.3M [00:00<?, ?B/s]
100%|█████████████████████████████████████| 17.3M/17.3M [00:00<00:00, 63.1GB/s]
downloading PocilloporaDamicornisSkin_GeneratedMat2.png

  0%|                                               | 0.00/120k [00:00<?, ?B/s]
 12%|████▌                                 | 14.3k/120k [00:00<00:01, 77.6kB/s]
 88%|███████████████████████████████████▏    | 105k/120k [00:00<00:00, 311kB/s]
  0%|                                               | 0.00/120k [00:00<?, ?B/s]
100%|████████████████████████████████████████| 120k/120k [00:00<00:00, 602MB/s]

Load the model

Next, read the model data from the .obj file. Currently napari/vispy do not support reading material properties (.mtl files) nor separate texture and vertex indices (i.e. repeated vertices). Normal vectors read from the file are also ignored and re-calculated from the faces.

vertices, faces, _normals, texcoords = read_mesh(tmp_dir / data_files['mesh'])

Load the textures

This model comes with two textures: Texture_0 is generated from photogrammetry of the actual object, and GeneratedMat2 is a generated material to fill in parts of the model lacking photographic texture.

photo_texture = imread(tmp_dir / data_files['Texture_0'])
generated_texture = imread(tmp_dir / data_files['GeneratedMat2'])

This is what the texture images look like in 2D:

fig, axs = plt.subplots(1, 2)
axs[0].set_title(f'Texture_0 {photo_texture.shape}')
axs[0].imshow(photo_texture)
axs[0].set_xticks((0, photo_texture.shape[1]), labels=(0.0, 1.0))
axs[0].set_yticks((0, photo_texture.shape[0]), labels=(0.0, 1.0))
axs[1].set_title(f'GeneratedMat2 {generated_texture.shape}')
axs[1].imshow(generated_texture)
axs[1].set_xticks((0, generated_texture.shape[1]), labels=(0.0, 1.0))
axs[1].set_yticks((0, generated_texture.shape[0]), labels=(0.0, 1.0))
fig.show()

Create the napari layers

Next create two separate layers with the same mesh - once with each texture. In this example the texture coordinates happen to be the same for each texture, but this is not a strict requirement.

photo_texture_layer = napari.layers.Surface(
    (vertices, faces),
    texture=photo_texture,
    texcoords=texcoords,
    name='Texture_0',
)
generated_texture_layer = napari.layers.Surface(
    (vertices, faces),
    texture=generated_texture,
    texcoords=texcoords,
    name='GeneratedMat2',
)

Add the layers to a viewer

Finally, create the viewer and add the Surface layers. sphinx_gallery_thumbnail_number = 2

viewer = napari.Viewer(ndisplay=3)

viewer.add_layer(photo_texture_layer)
viewer.add_layer(generated_texture_layer)

viewer.camera.angles = (90.0, 0.0, -75.0)
viewer.camera.zoom = 75

if __name__ == '__main__':
    napari.run()