search

jupyter-widgets / pythreejs

A Jupyter - Three.js bridge
https://pythreejs.readthedocs.io
Other
951 stars 188 forks source link

Low quality on high-DPI (i.e. retina) display on Mac [fix included!] #103

Closed iliyang closed 6 years ago

iliyang commented 7 years ago

I'm running macOS Sierra, and all examples in the provided Examples.ipynb notebook are rendered at a low resolution on both my Macbook's retina display and my external 4K monitor. In contrast, the three.js examples (e.g. this one) show up nice and sharp.

Is there any way to configure pythreejs to produce sharp renders in jupyter notebooks? After some googling, I found that retina display rendering quality used to be an issue in three.js, but apparently it's been fixed.

iliyang commented 7 years ago

I solved the problem by patching pythreejs locally on my machine. I inserted the following line right below line 33 in jupyter-three.js:

this.renderer.setPixelRatio(window.devicePixelRatio);

This is the solution mentioned in a three.js issue and this line also exists in the JavaScript source code on the page of this example.

Could the developer please include this patch in the next release? Thanks!

honorabel commented 7 years ago

Since it seems like you have a working solution, want to file a pull request?

iliyang commented 7 years ago

Sorry, I did a big hack by simply modifying a (big, seemingly auto-generated) file on my Mac: /usr/local/anaconda3/pkgs/pythreejs-0.3.0-py36_0/share/jupyter/nbextensions/jupyter-threejs/index.js But the fix is really simple - just adding that line above.