bwlewis / rthreejs

Three.js widgets for R and shiny
http://bwlewis.github.io/rthreejs
Other
303 stars 64 forks source link

Use sphere in scatterplot3js ? #33

Closed bthieurmel closed 7 years ago

bthieurmel commented 8 years ago

Can you think I can be possible in futur to plot sphere rather than point using scatterplot3js ?

Thanks

wyu commented 8 years ago

I'd also like to second the request. In my implementation of 3D PCA plot, it'd be great if we can produce spheres, or at least circles using webgl renderer. The circles work under canvas renderer. However the speed is not acceptable with a few thousands points.

Maybe related to #22.

lrodriguezlujan commented 8 years ago

I've made small changes in the original scatterplot code to accept sphere radius. An example (based on the original scatterplot example) is available here.

You only need to change scatterplot.R and scatterplot.js files (source). I have not tested it (yet), but it should behave as usual if no radius is given.

bwlewis commented 8 years ago

@lrodriguezlujan Thanks for this, very cool!

Can you submit a pull request to make it easy for me to merge in? If not, I'll do it manually, but a PR would be easiest.

bwlewis commented 8 years ago

@wyu Note that separately, I am also trying to figure out how to use sprites in a buffered geometry in WebGL to support a generic pch option. Any ideas on this appreciated!

lrodriguezlujan commented 8 years ago

@bwlewis let me test it properly along the weekend to be sure that it won't break anything ;)

wyu commented 8 years ago

Wonderful! I'd wait until you get the updates in.

Wen

wyu commented 8 years ago

Hi, The updates from 2 days ago works fine for small data set. However the RStudio would crash if I tried it have 5000 points. The rendering is a bit slow with 500 pts.

Any clue?

Thanks! Wen

testThreeJS=function() {

the inputs

input=list(); input$nticks=5; input$colors=6; input$sizes=2; input$renderer='webgl'; input$radius=TRUE;

example_data <- matrix(runif(5000 * 3), ncol = 3)

num.ticks <- input$nticks if (num.ticks == 0) num.ticks <- NULL else num.ticks <- rep(num.ticks,3) if (input$radius) r <- rlnorm(50,meanlog = -4, sdlog = 0.5) else r <- 0 data <- cbind(example_data,r) colnames(data) <- NULL

color <- rep(rainbow(input$colors),length.out = nrow(data)) sizes <- rep(c(0.5, 1, 2)[1:input$sizes], length.out = nrow(data)) labs <- sprintf("x=%.2f, y=%.2f, z=%.2f r=%.2f", data[,1], data[,2], data[,3], data[,4]) scatterplot3js(x = data, num.ticks = num.ticks, color = color, size = sizes, labels = labs, label.margin = "80px 10px 10px 10px", renderer = input$renderer, grid = input$grid)
}

lrodriguezlujan commented 8 years ago

There are a couple of things that can improve the performance:

In the next days I'll try to merge geometries and to add an option on the R side for the wsegs and hsegs parameters. Does it sound good to you?

wyu commented 8 years ago

Sounds! I'll try again once you add these enhancements.

There seems to be a bug with this update. My PCA plot used to just have a single cluster (2nd below, with the 'dev' branch). With the update, some of the points were displayed as if they lost one of their dimension (1st below, with update). Very strange.

Thanks! Wen

scatterplot3js(pcs, color="blue", size=1, renderer='webgl', labels=labs)

image

image

bwlewis commented 8 years ago

I'll try to investigate soon, am traveling for the NYR conference so a bit behind.

Note that performance is also related to #31 (q.v.). I've got a really slow and naive force layout implementation that can be sped up quite a bit...

lrodriguezlujan commented 8 years ago

That one is my fault. I'm so sorry!

I've put a 4 instead of a 3 in the positions array in the scatterplot.js file.

positions[i * 4 ] = x.data[i * 4];
positions[i * 4 + 1 ] = x.data[i * 4 + 1];
positions[i * 4 + 2 ] = x.data[i * 4 + 2];

should be

positions[i * 3 ] = x.data[i * 4];
positions[i * 3 + 1 ] = x.data[i * 4 + 1];
positions[i * 3 + 2 ] = x.data[i * 4 + 2];

I will finish the improvements by tomorrow morning (CET). That should also fix this error.

lrodriguezlujan commented 8 years ago

Done, in my PC chrome can handle up to ~10k spheres (balloon party!)

image

I still need to make the points inside the spheres really invisible. Tomorrow I will do it.

BTW: That thing with the force layout can be precomputed on the "R" side?

bwlewis commented 8 years ago

@lrodriguezlujan re: "BTW: That thing with the force layout can be precomputed on the "R" side?"

Yes! I was just discussing that with James Curley at the NYC R meetup last night! I plan to introduce optional x,y,z columns for the nodes data frame that will skip the Javascript layout and position the points in the specified coordinates.

Also planning to add a way to optionally return the force-directed layout positions from JS to R.

Then, we can make animations from R of temporal graphs too without (adding points, edges, changing weights, etc. over time).

I'll be working on that stuff next week after the conference.

lrodriguezlujan commented 8 years ago

@bwlewis "Also planning to add a way to optionally return the force-directed layout positions from JS to R."

Maybe you already know about this but, what I do to create "bidirectional" objects in Shiny is to use the Shiny.onInputChange function on the JS side. It's nicely done in the leaflet package leaflet.js (lines 500 - 535)

lrodriguezlujan commented 8 years ago

First of all, sorry for the delay (busy day). I've fixed the ghost-point problem and now everything should be ok. I've also fixed other issues on the way (#28 and #30), so I still need to test everything twice.

In short:

Good weekend everyone ;)

wyu commented 8 years ago

Thanks for the hard works! However, I still have performance problem @5000 pts and RStudio crash @10,000 with the 'scatter_sphere_opt' branch. Adding the options of "wsegs and hsegs" prevented the crash, Though nothing was displayed.

Have a nice weekend! Wen

scatterplot3js(x = data,

lrodriguezlujan commented 8 years ago

@wyu Honestly, I have no clue of what is going on. I would bet that you are running out of RAM since I observe that in my machine (16GB) it uses up to 90% RAM with ~7K points. What are your specs?

In any case, I'll investigate where this huge memory demand comes from and if it can be reduced.

Meanwhile, I guess the positions array error should be fixed ASAP:

positions[i * 4 ] = x.data[i * 4];
positions[i * 4 + 1 ] = x.data[i * 4 + 1];
positions[i * 4 + 2 ] = x.data[i * 4 + 2];

To

positions[i * 3 ] = x.data[i * 4];
positions[i * 3 + 1 ] = x.data[i * 4 + 1];
positions[i * 3 + 2 ] = x.data[i * 4 + 2];
bwlewis commented 8 years ago

@lrodriguezlujan should I merge the scatter_sphere_opt branch? Looks like a lot of changes, is everything working?

lrodriguezlujan commented 8 years ago

@bwlewis There is a minor issue related to the globe plot; After updating to threejs r75 it is slightly different (the emissive color issue mentioned before) and I would like to fix that. Check it out if you can, maybe you are able to point out a solution.

Let me check that everything works this evening and I will get back when everything is ready to go.

bwlewis commented 8 years ago

Thanks! I appreciate all your help!

lrodriguezlujan commented 8 years ago

I've made a little test battery (based on the existing tests and examples) to verify that everything works as it should. As always, bugs will arise so I apologize in advance.

Scatterplot

1. Plot the eight vertices of a 3D cube (color coded)

test1

2. Canvas plot with different point sizes (and labels)

test2

3. Helicoid

test3

4. Spheres

newstuff

5. Spheres and points

scatter_test5_dots_and_spheres

Globe

globe

Here you can see the color difference between old and new version. I suspect that it has something to do with this issue (a change that was introduced in threejs r70). However, I think that the new look is more consistent with the bodycolor and emissive parameters (0x0000ff and 0x0011ff respectively) than before. If we set the emissive color to the ambient light color value (0xaaeeff) the output is "closer" to the previous one:

globe_test1_new_likebefore

Should we change the default colors to maintain the look? (I don't know how to imitate the previous behaviour.. =( )

Graph

graph

Slightly pixelated circles in the new version.


Anything else that you think that should also be tested? Any idea to solve the globe plot thing?...I don't know if it is really an issue...

bwlewis commented 8 years ago

I don't think the globe plot is an issue.

The graph sprite pixeliation is an issue. Is this due to the new threejs? We'll need to find a fix for that.

scottmac99 commented 7 years ago

SOLVED - I need to use pch to control what is displayed for each point. Mouse-over is no longer supported.

I've been having trouble making the mouse-over labels work. They just don't appear. Is there something I am missing? Here is the script I am using ... and the datafile is attached (as .xlsx although I source it as a .csv file in the script).

Paint round 2.xlsx

require(threejs) require(htmlwidgets) data <- read.csv("<your directory/path>/Paint round 2.csv", header=TRUE) data1 <- as.matrix(data[,2:4]) labels1 <- as.vector(data[,1]) saveWidget(scatterplot3js(data1, grid = FALSE, label.margin = "auto", num.ticks = NULL, size = 0.5,axis = TRUE, labels=labels1), selfcontained = FALSE, file="<your directory/path>/scatterplot.html")

bwlewis commented 7 years ago

Mouseover is supported again, check out the latest commit. Performance should generally be better than before, but sphere geometries are still not merged.

scottmac99 commented 7 years ago

Oh, cool, thanks. I was rather warming to the pch approach though :-)

bwlewis commented 7 years ago

pch approach is still there too. I'm having some issues rendering the text in different scales but it is working more or less. On Jan 11, 2017 00:30, "scottmac99" notifications@github.com wrote:

Oh, cool, thanks. I was rather warming to the pch approach though :-)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bwlewis/rthreejs/issues/33#issuecomment-271782083, or mute the thread https://github.com/notifications/unsubscribe-auth/AAIsni5rulrLUiTCkb0qcOCQ_CAjGmwKks5rRGkSgaJpZM4Hfvv9 .

scottmac99 commented 7 years ago

Yes, I know. Here's what I get using my script based on pch to specify the labels

capture

bwlewis commented 7 years ago

try adjusting size but also see font.symbols in the help. you can try changing the font size.

Any help on rendering the text is appreciated, it's very tricky... On Jan 11, 2017 01:01, "scottmac99" notifications@github.com wrote:

Yes, I know. Here's what I get using my script based on pch to specify the labels

[image: capture] https://cloud.githubusercontent.com/assets/25043851/21837345/87ea079c-d81f-11e6-95c4-9611c0cdf74d.JPG

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bwlewis/rthreejs/issues/33#issuecomment-271785691, or mute the thread https://github.com/notifications/unsubscribe-auth/AAIsnpDE51eLhIxrv6tGz9rNYMn1M7MSks5rRHAngaJpZM4Hfvv9 .

scottmac99 commented 7 years ago

OK, I'll see what I can do. I am NOT complaining btw, I am very, very pleased to have this software available :-) Also, I am in no way an R expert.

[I also want to reduce the size of the X, Y and Z axis labels.]

bwlewis commented 7 years ago

try the cex.axis option, but i think i need to expand and improve text scaling options generally, mostly in the JavaScript code. I will open a separate issue for that work. On Jan 11, 2017 1:20 AM, "scottmac99" notifications@github.com wrote:

OK, I'll see what I can do. I am NOT complaining btw, I am very, very pleased to have this software available :-) Also, I am in no way an R expert.

[I also want to reduce the size of the X, Y and Z axis labels.]

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bwlewis/rthreejs/issues/33#issuecomment-271788169, or mute the thread https://github.com/notifications/unsubscribe-auth/AAIsnjym9HVBUDkxaOO-iGZkYVW_EF2aks5rRHSmgaJpZM4Hfvv9 .

bwlewis commented 7 years ago

i meant cex.lab On Jan 11, 2017 07:50, "Bryan W. Lewis" blewis@illposed.net wrote:

try the cex.axis option, but i think i need to expand and improve text scaling options generally, mostly in the JavaScript code. I will open a separate issue for that work. On Jan 11, 2017 1:20 AM, "scottmac99" notifications@github.com wrote:

OK, I'll see what I can do. I am NOT complaining btw, I am very, very pleased to have this software available :-) Also, I am in no way an R expert.

[I also want to reduce the size of the X, Y and Z axis labels.]

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bwlewis/rthreejs/issues/33#issuecomment-271788169, or mute the thread https://github.com/notifications/unsubscribe-auth/AAIsnjym9HVBUDkxaOO-iGZkYVW_EF2aks5rRHSmgaJpZM4Hfvv9 .

scottmac99 commented 7 years ago

OK, success !!! The "right" sizes for everything and the mouse-over works as well :-)

Results are in zip file attached. output.zip

Data in Excel file attached (you need to resave as .csv for the script to run as it stands). Paint round 2 V2.xlsx

Here's the script I used - not sure how I got the points the size I wanted (is it size = 1?) but cex.lab = 0.5 seems to have done what I needed for three X, Y, Z axis labels...

require(threejs) require(htmlwidgets) data <- read.csv("D:/Dropbox/My techniques (merged)/3D scatterplot/Test using threejs/Paint round 2 V2.csv", header=TRUE) data1 <- as.matrix(data[,2:4]) labels1 <- as.vector(data[,1]) saveWidget(scatterplot3js(data1, grid = FALSE, label.margin="auto" , num.ticks = NULL, size = 1,axis = TRUE, labels = labels1, cex.lab=.5), selfcontained = FALSE, file="D:/Dropbox/My techniques (merged)/3D scatterplot/Test using threejs/output/scatterplot_test.html")