pix-plot | A WebGL viewer for UMAP or TSNE-clustered images | Data Visualization library

I have a Three.js scene with points and am trying to figure out the relationship between my points' positions and screen coordinates. I thought I could use the function @WestLangley provided to a previous question but implementing this function has raised some confusion.

In the scene below, I'm storing the x coordinates of the left and right-most points in world.bb.x, and am logging the world coordinates of the cursor each time the mouse moves. However, when I mouse to the left and right-most points, the world coordinates do not match the min or max x-coordinate values in world.bb.x, which is what I expected.

Do others know what I can do to figure out the world coordinates of my cursor at any given time? Any help others can offer is greatly appreciated!

I'm working on a scene in which I'm using Points, InstancedBufferGeometry, and a RawShaderMaterial. I'd like to add raycasting to the scene, such that when a point is clicked I can figure out which point was clicked.

In previous scenes [example], I've been able to determine which point was clicked by accessing the .index attribute of the match returned by the raycaster.intersectObject() call. With the geometry and material below, though, the index is always 0.

Does anyone know how I can determine which of the points was clicked in the scene below? Any help others can offer on this question would be very appreciated.

I'm working on a Three.js scene in which I'd like to update some textures after some time. I'm finding that updating the textures is very slow, however, and drags FPS to only 1-2 FPS for several seconds (when updating just a single texture).

Is there anything one can do to expedite texture updates? Any insights others can offer on this question would be very appreciated.

To see this behavior, click the window of the example below. This will load the first texture update (another click will trigger the second texture update). If you try to zoom after one of these clicks, you'll find the screen freezes and the FPS will drop terribly. Does anyone know how to fix this problem?

I have a Three.js scene that passes a canvas as a uniform to a RawShaderMaterial. After the initial scene renders, I alter the canvas (in the case below, I just paint the canvas red). I then indicate that the shaderMaterial .needsUpdate = true; but no color appears on the points.

Color does appear on the points if I move the ctx.fill(); loop above the var material = declaration.

Does anyone know what one must do to update a canvas after the initial render when using the RawShaderMaterial? Any help others can offer would be hugely helpful!

I have a Three.js scene that passes a few attributes to a RawShaderMaterial. After the initial render, I'd like to update some attributes, but haven't been able to figure out how to do so.

Here's a sample scene (fiddle):

I am working on a Three.js scene in which I'd like to use many points with different textures. However, so far I haven't been able to change textures in my fragment shader. Despite the fact that the points in the following scene should alternate between texture 0 (a cat) and 1 (a dog), all points show the same texture:

I am working on a scene (easier to see on bl.ocks.org than below) in Three.js that would benefit greatly from using points as the rendering primitive, as there are ~200,000 quads to represent, and representing those quads with points would take 4 times fewer vertices, which means fewer draw calls and higher FPS.

Now I'm trying to make the points larger as the camera gets closer to a given point. If you zoom straight in within the scene below, you should see this works fine. But if you drag the camera to the left or right, the points gradually grow smaller, despite the fact that the camera's proximity to the points seems constant. My intuition says the problem must be in the vertex shader, which sets gl_PointSize:

Short question: How can I pass a list of textures to shaders and access the nth texture within a fragment shader (where n is a value passed as a varying from the vertex shader)?

Longer question: I'm working on a Three.js scene that represents multiple images. Each image uses one of multiple textures, and each texture is an atlas containing several thumbnails. I'm working on implementing custom shaderMaterial to optimize performance, but am confused on how to use multiple textures in the shaders.

My goal is to pass a list of textures and a number that represents the number of vertices per texture so that I can identify the texture that should be used for each image's vertices/pixels. I thought I could accomplish this by passing the following data: