plot_trisurf() does not render image texture correctly

[GenevieveBuckley]

The image keyword argument in plot_trisurf() does not render the image texture correctly in an ipyvolume figure.

Version numbers
Python 3.7 <-- EDIT TO ADD: maybe this is the problem? I recall seeing a note in your .travis.yml file that says "ipywidgets currently does not support 3.7". If this means ipyvolume also isn't supported it would be a good idea to remove the ability to pip/conda install it with python 3.7. Nope, that's not it. I've just tested in a new environment with python 3.6 and I still see the same thing.

ipyvolume - 0.5.1
ipywidgets - 7.4.2
ipywebrtc - 0.4.2
pythreejs - 2.0.2
ipython - 7.4.0
Chrome (latest, up to date) - Version 74.0.3729.169 (Official Build) (64-bit)

I don't get any python or javascript warnings, but the image texture fails to render on the final output - the mobius strip just looks black.

Example

Imports and loading the image we'll use as a texture

import ipyvolume as ipv
import numpy as np
import PIL
image = PIL.Image.open('ballpit.png')  
# I used this image because it was colourful and had less black in it than the jupyter logo:
# !curl http://localhost:8888/static/base/images/logo.png -o logo.png

plot_mesh() with an image texture

This is the working example code we'll use as a baseline. So far, so good.

fig = ipv.figure()
# we create a sequence of 8 u v coordinates so that the texture moves across the surface.
X = np.arange(-5, 5, 0.25*1)
Y = np.arange(-5, 5, 0.25*1)
X, Y = np.meshgrid(X, Y)
R = np.sqrt(X**2 + Y**2)
Z = np.sin(R)
u = np.array([X/5 +np.sin(k/8*np.pi)*4. for k in range(8)])
v = np.array([-Y/5*(1-k/7.) + Z*(k/7.) for k in range(8)])
mesh = ipv.plot_mesh(X, Z, Y, u=u, v=v, texture=image, wireframe=False)
ipv.show()

This is the output:

plot_trisurf() with no image texture

Here is @deeplook's mobious strip, without an image texture

Setting up:

import ipyvolume as ipv
import numpy as np
import PIL
image = PIL.Image.open('ballpit.png')  

def calculate_points(num_theta=30, num_width=4):
    "Calculate x, y, and z vectors for a Möbius strip."
    theta = np.linspace(0, 2 * np.pi, num_theta)
    width = np.linspace(-0.4, 0.4, num_width)
    width, theta = np.meshgrid(width, theta)
    phi = 0.5 * theta
    r = 1 + width * np.cos(phi)  # radius in x-y plane
    x = np.ravel(r * np.cos(theta))
    y = np.ravel(r * np.sin(theta))
    z = np.ravel(width * np.sin(phi))
    return x, y, z

nt, nw = 30, 4
x, y, z = calculate_points(num_theta=nt, num_width=nw)
# works only for num_w == 4
rng = range(0, nt*nw-nw, nw)
triangles = [[i, i+1, i+4] for i in rng]
triangles += [[i+1, i+4, i+5] for i in rng]
triangles += [[i+1, i+2, i+5] for i in rng]
triangles += [[i+2, i+5, i+6] for i in rng]
triangles += [[i+2, i+3, i+6] for i in rng]
triangles += [[i+2, i+3, i+6] for i in rng]
triangles += [[i+3, i+6, i+7] for i in rng]

Displaying the mobius strip

ipv.figure()
ipv.plot_trisurf(x, y, z, triangles=triangles)
ipv.squarelim()
ipv.show()

plot_trisurf() with an image texture

I don't do anything here except add the texture=image keyword argument.

ipv.figure()
ipv.plot_trisurf(x, y, z, triangles=triangles, texture=image)
ipv.squarelim()
ipv.show()

Here I should see a very colourful image texture, but instead it just looks black.
I don't see any python or javascript errors.

As discussed in #249

[BrySchroeder]

Any updates on this? I am having the exact same issue.

JupyterLab - 1.0.0
ipyvolume - 0.5.2
ipywidgets - 7.5.1
ipywebrtc - 0.5.0
pythreejs - 2.1,1
ipython - 7.7.0
Chrome - Version 75.0.3770.100 (Official Build) (64-bit)

[maartenbreddels]

Withouot u v coordinates, webgl doesn't know what part of the texture to put where. In the first example, there are u v coordinates passed, and it works, so also passing the right u and v coordinates should be the solution. Hope that helps!