It is currently October 5th, 2024, 4:10 pm

Earth - 3D animation in Rainmeter

Skins with graphics and animations
User avatar
Yincognito
Rainmeter Sage
Posts: 8350
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.

Installation:
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)

Notes:
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.

Download:
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:
Earth_2.0.0.part1.rar
Earth_2.0.0.part2.rar
Earth_2.0.0.part3.rar
Earth_2.0.0.part4.rar
Screenshots:
Earth.jpg
Preview:
Earth.mp4

Summary:
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.

Credits:
- 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

Epilogue:
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 ProfileSuites: MYiniMeterSkins: Earth
User avatar
sl23
Posts: 1824
Joined: February 17th, 2011, 7:45 pm
Location: a Galaxy S7 far far away

Re: Earth - 3D animation in Rainmeter

Post by sl23 »

Stunning! :thumbup:
57686174 77696C6C 6265 77696C6C 6265
User avatar
Yincognito
Rainmeter Sage
Posts: 8350
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Earth - 3D animation in Rainmeter

Post by Yincognito »

sl23 wrote: May 6th, 2023, 1:18 pm Stunning! :thumbup:
Thanks - it took a while to make it as I wanted! 8-)
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
sl23
Posts: 1824
Joined: February 17th, 2011, 7:45 pm
Location: a Galaxy S7 far far away

Re: Earth - 3D animation in Rainmeter

Post by sl23 »

I bet it took longer than a while! O.O
57686174 77696C6C 6265 77696C6C 6265
User avatar
Yincognito
Rainmeter Sage
Posts: 8350
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Earth - 3D animation in Rainmeter

Post by Yincognito »

sl23 wrote: May 6th, 2023, 3:27 pm I bet it took longer than a while! O.O
You should compete in poker tournaments, looks like your bets are spot on... :sly:
Only certain parts of it took longer than expected, but I persevered like a bulldog. :twisted:
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
sl23
Posts: 1824
Joined: February 17th, 2011, 7:45 pm
Location: a Galaxy S7 far far away

Re: Earth - 3D animation in Rainmeter

Post by sl23 »

Haha! I bet you did! I know you don't let go til you're done. Bulldog with a bone! :rofl:

I wouldn't bet on me playing poker though... Don't know how! O.O
57686174 77696C6C 6265 77696C6C 6265
User avatar
Yincognito
Rainmeter Sage
Posts: 8350
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Earth - 3D animation in Rainmeter

Post by Yincognito »

sl23 wrote: May 7th, 2023, 8:08 amI wouldn't bet on me playing poker though... Don't know how! O.O
Like this. The rest is just dealing with an incomplete to complete 5 card hand and calling (betting the same), raising (betting more) or folding (giving up) depending on what you think you and the other players have or whether you're bluffing (fake a good hand) or not. An awareness and psychological game for cool heads, as long as you don't become addicted or bet more than you can handle. :sly:
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
sl23
Posts: 1824
Joined: February 17th, 2011, 7:45 pm
Location: a Galaxy S7 far far away

Re: Earth - 3D animation in Rainmeter

Post by sl23 »

Thanks for the link, but I'll pass! Never been interested in gambling really.

A long time ago (when I was 10 years old), I stopped on the way home from school with the remainder of my lunch money, 10p! Next to the bus station was an arcade, ya know, the adult kind! So, in my naivety, I placed the 10 pence piece into the slot and... I WON A POUND!!! I was so excited that I proceeded to foolishly lose the lot! Taught me a valuable lesson, I can tell you! :-( :? :rolmfao:
57686174 77696C6C 6265 77696C6C 6265
User avatar
Yincognito
Rainmeter Sage
Posts: 8350
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Earth - 3D animation in Rainmeter

Post by Yincognito »

sl23 wrote: May 7th, 2023, 9:22 pmTaught me a valuable lesson, I can tell you! :-( :? :rolmfao:
Good lesson and good decision. There's a difference between knowing how to play and losing your money over it though...
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
sl23
Posts: 1824
Joined: February 17th, 2011, 7:45 pm
Location: a Galaxy S7 far far away

Re: Earth - 3D animation in Rainmeter

Post by sl23 »

True. But I never understand how there's any skill in a game of chance!
57686174 77696C6C 6265 77696C6C 6265