It is currently March 27th, 2023, 10:17 am

Earth - 3D animation in Rainmeter

Skins with graphics and animations
User avatar
Rainmeter Sage
Posts: 4905
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Earth - 3D animation in Rainmeter

Post by Yincognito »

Welcome to my Earth skin - a Rainmeter skin that displays and animates a realistically accurate 3D representation of Earth on your screen!

This is the result of a lot of recent work and an improved alternative of my personal rotating 3D Earth skin (which is unreleased since it is based on playing around 9 GB of images created in Blender to simulate the 3D animation). Instead, this skin takes advantage of the WebView2 technology to create and animate in realtime the 3D Earth by running a ThreeJS script inside a local webpage, thus avoiding the need to store tons of images corresponding to all possible rotations to be played by the skin.

The skin is not a typical Rainmeter skin as you can imagine, so a couple of dependencies need to be installed in order to use it:
- Rainmeter by the Rainmeter team (needed to run the plain skin part, obviously; since you're here, you probably installed it already)
- PluginWebView by user Khanhas (needed to use WebView2 below in Rainmeter via a plugin; already included in the skin package)
- Microsoft Edge WebView2 Runtime by Microsoft (install the suited version for your system, e.g. the X64 Evergreen Standalone Installer, etc.)
- NodeJS by the NodeJS contributors (needed to run the skin's webpage on a local server; same as above, e.g. the X64 .MSI installer, etc.)
- HTTP Server via NPM (alternatively, you can run serve -inst at the command line from the @Resources folder of the skin to do the same)

You'll probably need to have Microsoft Edge installed as well, and, in the case of recent versions of the WebView2 runtime, use at least Windows 10 (last year versions of the runtime supported Windows 7 too, but that changed this year). Apart from that, It is recommended to install NodeJS in its default path, so that you won't need to change the path used in the Serve measure from the skin to create the local server. NPM needs internet access only when installing the HTTP server module at the start, the rest of it afterwards is all done locally, on your computer, via NodeJS.

Since most of the skin's content is made of images and a video used as textures by the script, its 30 MB size doesn't fit the 10 MB limit per attachement on this forum, so to keep this here and not involve other cloud or file sharing sites, just download the multipart archive below and extract the skin package inside, before you proceed with the usual click and install process on the said package:

This is by no means a perfect skin - it may have some bugs, some drawbacks or could be better (most of them either known or thought about), but I think the result is quite nice. At this point, after the effort already put into it, I'm not inclined to add more features or change it significantly, so I'm interested instead in your opinions about it, its performance under different circumstances, or possible bugs.

Its principle is straightforward, albeit somewhat complex: the Rainmeter skin and its installed dependencies offer the base and the means by which a webpage is run on a local server, and in that page the Javascript code makes use of the ThreeJS library to draw and manipulate a 3D Earth in any way I thought it was reasonably possible. Everything happens locally on http://localhost:8080/ (you can even run the webpage, aka Index.html, in your browser on that address, once the HTTP server is created by the skin), and both NodeJS and the said server are killed once the skin is unloaded, or restarted on skin refresh, so they won't be active when you don't need them.

The skin has a small help section to teach you how to manipulate things or what they mean (the button at the top right), or, alternatively, an even more compact version is displayed in the Information section of the skin from the Manage Rainmeter window. Basically, manipulating it is either a matter of pressing CTRL along with some mouse action to act on the skin itself (e.g. move it on your screen, resize it, refresh, unload, show the corner panels, etc.), or a matter of performing some mouse action or keypress without CTRL being pushed to act on the webpage (e.g. move, rotate, zoom, transform the Earth according to the Controls being chosen from the View Options aka the button at the top left).

Most of the stuff have tooltips briefly explaining what they do, or are named in a way to make their use relatively obvious. There are a few actions that are not documented, but they are mostly related to clicking on certain corner panels, otherwise almost everything that is configurable is a matter of scrolling over the related value (in the case of numbers, the digit where you scroll DOES matter). Apart from the manual modification of things like position, rotation or scale for the Earth, the animation can happen in either one of the two mutually exclusive ways, controlled from the Animation Type panel at top right in the skin: accelerated simulation (aka Time) or live simulation (aka Live), with the latter being coordonated with your actual system time (i.e. its UTC equivalent). Anyway, if something is not clear, feel free to ask.

- the Rainmeter team, for the great little software called Rainmeter
- Khanhas on this forum and GitHub, for his plugin making WebView2 use possible in Rainmeter
- death.crafter on this forum, for giving me the idea of using the above plugin to avoid iterating through a huge list of images like before
- ThreeJS contributors on GitHub, for their free and relatively easy to use 3D library in Javascript
- Barthélemy Paléologue on GitHub, for his help in creating the atmospheric scattering GPU shader
- Sebastian Lague on Youtube, for his outstanding tutorials on the above and other procedural planet topics

Feel free to test this skin, experiment with it, push it to the limit, and don't forget to make your opinion known, communicate the performance on your system and ask for tricks to improve it, or make me aware of any bugs that might still be lurking in the code. Looking forward to read your feedback or any questions you might have about it! ;-)
You do not have the required permissions to view the files attached to this post.
Profiles: Rainmeter ProfileDeviantArt Profile ◆ Suites: MYiniMeter ◆ Skins: Earth