January 11, 2015 at 14:17Starry sky on webGL using three.js
In a post about "Starry Sky on Canvas", I already described a project where, using JavaScript on Canvas 2d, an image of the Earth's globe is formed against the background of stars, planets and orbits of spacecraft. To create a three-dimensional picture of the starry sky on a plane, I used the formulas for translating the three-dimensional coordinates X, Y, Z of the displayed objects: stars, planets, spacecraft (SC) into flat Cartesian coordinates X, Y. I took the bulk of these formulas from the Marble project for KDE. I saved the ported code from C ++ to JavaScript in the starry.js file .
Even then, I knew that for outputting three-dimensional objects, canvas has a special webGL engine. But in order to use it, it was necessary to get acquainted closely with this technology, and most importantly, to find high-quality and understandable examples of its implementation. Those examples that I watched, for example, khronos with the J3DI0000.js and J3DIMath.js libraries from Apple for working with webGL, did not inspire me: the code is cumbersome and complex. Everything changed when I met the three.js project . The simplicity of writing code and a huge number of examples (working offline) in it surprised and pleased at the same time.
Having almost finished my version of the starry sky in 3d, I met another very interesting project on apoapys.com. Using three.js scripts, the author reproduces the objects of the Solar System with effects, as in Celestial itself - an open-source astronomical atlas, standard for many stellar projects. From the apoapsys.com project, I borrowed the coordinates of the constellations ( sfa_constellation_lines.js file ), the coordinates of which turned out to be more accurate than those I took from the LibCanvas: On the Way to the Stars project for a flat version of the sky, as well as pictures for star textures, clouds and spacecraft.
I tried to make my code for three-dimensional sky, as in the flat version, as simple and compact as possible, so that it could be easily understood. In addition, I decided not to use the window.requestAnimationFrame methodto redraw the scene, as in most examples from three.js and apoapsys.com, since using it greatly loads the browser and processor. For this, I used the code from OrbitControls.js from three.js to control a camera that does not use it.
You can see a three-dimensional version of the sky, a flat one and other examples for canvas on the dbcartajs project website .
In contrast to the flat version of the sky, here the objects of the Solar System are shown taking into account their actual sizes and distances to them in km.
To calculate the orbits and positions of the spacecraft, the code from satellite.js is used , as in the flat version. Spacecraft Position Data (TLE) updated from celestrak.com . In tledata.js, I added data on the GLONASS, GPS, ISS groupings (space stations including the ISS).
You can control the camera with the mouse - right-turn, left-shift and zoom with the wheel - with the arrows on the keyboard or through the touch-interface on touch screens. Actually all control events are processed by the code from OrbitControls.js .
The plans to learn how to focus in the center of the stage other objects besides the Earth, also add new objects - asteroids, comets.
Even then, I knew that for outputting three-dimensional objects, canvas has a special webGL engine. But in order to use it, it was necessary to get acquainted closely with this technology, and most importantly, to find high-quality and understandable examples of its implementation. Those examples that I watched, for example, khronos with the J3DI0000.js and J3DIMath.js libraries from Apple for working with webGL, did not inspire me: the code is cumbersome and complex. Everything changed when I met the three.js project . The simplicity of writing code and a huge number of examples (working offline) in it surprised and pleased at the same time.
Having almost finished my version of the starry sky in 3d, I met another very interesting project on apoapys.com. Using three.js scripts, the author reproduces the objects of the Solar System with effects, as in Celestial itself - an open-source astronomical atlas, standard for many stellar projects. From the apoapsys.com project, I borrowed the coordinates of the constellations ( sfa_constellation_lines.js file ), the coordinates of which turned out to be more accurate than those I took from the LibCanvas: On the Way to the Stars project for a flat version of the sky, as well as pictures for star textures, clouds and spacecraft.
I tried to make my code for three-dimensional sky, as in the flat version, as simple and compact as possible, so that it could be easily understood. In addition, I decided not to use the window.requestAnimationFrame methodto redraw the scene, as in most examples from three.js and apoapsys.com, since using it greatly loads the browser and processor. For this, I used the code from OrbitControls.js from three.js to control a camera that does not use it.
You can see a three-dimensional version of the sky, a flat one and other examples for canvas on the dbcartajs project website .
What's new
In contrast to the flat version of the sky, here the objects of the Solar System are shown taking into account their actual sizes and distances to them in km.
To calculate the orbits and positions of the spacecraft, the code from satellite.js is used , as in the flat version. Spacecraft Position Data (TLE) updated from celestrak.com . In tledata.js, I added data on the GLONASS, GPS, ISS groupings (space stations including the ISS).
Control
You can control the camera with the mouse - right-turn, left-shift and zoom with the wheel - with the arrows on the keyboard or through the touch-interface on touch screens. Actually all control events are processed by the code from OrbitControls.js .
What else
The plans to learn how to focus in the center of the stage other objects besides the Earth, also add new objects - asteroids, comets.