Click the screen to switch between log and linear scales.
Comparing the sizes of planets in our Solar System is difficult because of the difference in magnitude between the smallest (Mercury, radius 2439.7 km) and the largest (Jupiter, radius 71,492 km). Linear scaling tends to compress small and similar values concealing differences in relative size. If I wanted to add the Sun (radius 695,700 km) or stars (e.g. VY Canis Majoris, radius 1.6 billion km) the situation would be even worse.
Logarithmic scales are a nice alternative to linear scales as they preserve relative differences (with linear scaling, Mercury and Mars appear nearly the same size as Venus and Earth). However, one might say they reduce appreciation for the great gulf in size between giants like Jupiter and our relatively tiny Earth.
It may take a couple seconds for textures to appear. If performance is bad, try this stripped down version.
Initially, I transitioned radius directly but this is generally a bad idea because a new sphere geometry is created each time. Better performance can be had by using the scale
property to encode radius (scaling is cheap).
Star and planet radius data collected from Wolfram Alpha.
Planetary textures downloaded from Celestia Motherlode.
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<title>Linear vs Log Planet Scaling</title>
<meta name="description" content="log-linear-scale-comparison">
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<a-scene antialias="true">
<a-assets>
<img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
<img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
<!-- Planet textures -->
<img id="earth" src="https://cdn.rawgit.com/bryik/Assets/eb18a301/images/planet_textures/earth.jpg">
<img id="mercury" src="https://cdn.rawgit.com/bryik/Assets/eb18a301/images/planet_textures/mercury.jpg">
<img id="venus" src="https://cdn.rawgit.com/bryik/Assets/eb18a301/images/planet_textures/venus.jpg">
<img id="mars" src="https://cdn.rawgit.com/bryik/Assets/eb18a301/images/planet_textures/mars.jpg">
<img id="neptune" src="https://cdn.rawgit.com/bryik/Assets/eb18a301/images/planet_textures/neptune.jpg">
<img id="uranus" src="https://cdn.rawgit.com/bryik/Assets/eb18a301/images/planet_textures/uranus.png">
<img id="saturn" src="https://cdn.rawgit.com/bryik/Assets/eb18a301/images/planet_textures/saturn.png">
<img id="jupiter" src="https://cdn.rawgit.com/bryik/Assets/eb18a301/images/planet_textures/jupiter.jpg">
</a-assets>
<!-- Planets will be appended to this element. -->
<a-entity id="display"></a-entity>
<!-- What scale is being used? -->
<a-text id="label" position="-1.728 2.195 3.730" value="linear"></a-text>
<!-- Camera -->
<a-entity position="0 1.6 6">
<a-entity camera="fov: 60" look-controls wasd-controls></a-entity>
</a-entity>
<!-- Background sky. -->
<a-sky height="2048" radius="30" src="#skyTexture" theta-length="90" width="2048"></a-sky>
<!-- Ground. -->
<a-circle src="#groundTexture" rotation="-90 0 0" radius="32"></a-circle>
</a-scene>
<script src=".hidden.babel-visualization.js"></script>
</body>
</html>
https://aframe.io/releases/0.5.0/aframe.min.js
https://d3js.org/d3.v4.min.js