Click and drag the cubes to experience elliptical parallax effect from threejs.org
Elliptical Parallax UI is significantly different than the parallax effect that is widely used by web designers today.
First, what is parallax?
Google defines the term Parallax:
noun: parallax – The effect whereby the position or direction of an object appears to differ when viewed from different positions, e.g., through the viewfinder and the lens of a camera.
Front-end web developers and designers are familiar with the use of the parallax scrolling effect; Which is the combination of text and images that scroll at different speeds to create the illusion of three dimensional depth. The illusion is achieved because the human eye perceives objects at different depths moving at different speeds. Many examples of the parallax scrolling effect can be seen here speckyboy.com/2012/07/20/the-parallax-scrolling-effect-40-examples-and-tutorials
Wikipedia describes parallax scrolling:
Parallax scrolling is a technique in computer graphics and web design, where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene
Interestingly, the scientific use of parallax predates the web design technique by several hundred years at least, most notably in the field of Astronomy. Isaac Asimov describes the scientific history of parallax in his book Isaac Asimov’s Guide to Earth and Space:
The distance of Mars was estimated in 1672, with fairly good accuracy, by viewing the planet from from Paris and French Guiana and calculating the parallax. Even the nearest stars, however, are pretty sure to be several hundred thousand times as far away as Mars, at the very least, which means that the parallax of the nearest stars would be several hundred thousand times smaller. Mars’ parallax was hard enough to measure, even when viewed from different hemispheres; a star’s parallax would be impossible to determine.
But there might be a way out of this dilemma. The Earth travels around the sun, and in six months it moves from one end of its orbit to the other, a distance of just about 300 million kilometers (186 million miles), about 23,500 times the width of the Earth. If a star is viewed from the same location first on January 1 and then on July 1, the parallax would be 23,500 times as great as it would be if it was viewed merely from opposite sides of the Earth.
So everybody gets it? Yes? No? Maybe? Many web designers use the parallax effect with great success without worrying about how or why it works. Many users enjoy the aesthetic appeal of browsing a parallax website without knowing much about (or giving a f*ck about) the scientific concept of parallax.
Using parallax in web design became popular around 2012. It has been used effectively and creatively in thousands of websites and continues to be a striking and innovative design technique. The use of parallax is one of the most substantial developments in web design since the beginnings scrolling in the 1990’s. Why is the parallax illusion so great? Because it transforms the 2D experience of web browsing into 3D… and a 3D experience is better than a 2D experience, pretty much every time. 3 > 2
While parallax on the web is a major step towards a 3D digital experience, it is just a step and not the destination. The popularity of the parallax design technique demonstrates that users are hungry for 3D. With the virtual reality boom of 2016 there is finally immersive 3D technology available but so far only serious gamers and early adapters are using it. The vast majority of digital activity is still happening on 2D screens. Parallax websites have given 2D digital consumers a taste of the 3D experience but what is the next step?
There are significant limitations to the parallax effect that we see today used on the web. The text/images scroll as if they exist in different fields of depth but each field exists in it’s own two dimensional plane. The varying speed of movement of the different planes creates depth but the planes relate to each other in a way that is parallel. Why does this matter? Because while the illusion of 3D is created, the depths of the individual elements cannot change and so they are not, effectively, three dimensional. The illusion gives the feel of 3D but the content itself remains, sadly, 2D.
At some point in the not-so-distant future the majority of digital interface will be in full and glorious 3D. While we cannot imagine exactly what that will look like (watches that project holograms?) current advancements in web technology allow us to experiment with true 3D user interface technology today using a 2D screen with a web browser!
Which brings us to…. THE ELLIPTICAL PARALLAX USER INTERFACE.
The elliptical parallax is live in THREE.JS. It can be explored in great detail with the solar system modeling platform JSORRERY. So yes, it works for astronomy but why not user interface? It is coming. Elliptical Parallax Use Interface, Stevens 3D.
Here is an example of the interactive 3D solar system modeling platform JSORRERY:
Click and drag the moons and planets to experience elliptical parallax