Earth WebGL Demo

“Earth ‒ Where we keep all of our stuff.”

This animated demo includes a photorealistic 3D earth and space scene, rendered in WebGL with three.js and served with Express 4.

Visit the live demo on CodePen: http://codepen.io/enesser/full/pgWjoW/.

Only the low-quality version is available on CodePen due to asset constraints.

Controls

Setting	Description
sunColor	Color of sunlight.
sunIntensity	Intensity of the sunlight.
ambientLight	Color of ambient light in the scene.
atmosphereVisible	Toggle visiblity of the atmosphere.
atmosphereColor	Color of the atmosphere.
atmosphereOpacity	Opacity value of the atmosphere.
atmosphereWireframe	Toggle wireframe view on the atmosphere material.
cloudsVisible	Toggle visibility of the cloud layer.
cloudsOpacity	Opacity value of the cloud layer.
cloudsWireframe	Toggle wireframe view of the cloud layer material.
cloudsRotate	Toggle auto-rotation of the cloud layer.
cloudsVelocity	Speed of cloud layer rotation. Negative value rotates backwards.
terrainVisible	Toggle visibility of terrain.
terrainBumpScale	Bump height of terrain bump mape. Can be negative for inset.
terrainWireframe	Toggle wireframe view of terrain.
terrainRotate	Toggle auto-rotation of terrain.
terrainVelocity	Speed of terrain rotation. Negative value rotates backwards.

You can also control the camera position by dragging the mouse and holding the right or left mouse button.

Mobile

This demo is supported on all modern mobile devices where WebGL is supported.

Virtual Reality

Virtual reality mode can be toggled using the vr query string (true/false) documented under Launch Options. In VR mode, the camera is locked at a different perspective, the UI is hidden, and there are currently no controls.

This mode is still highly experimental. Default values are calibrated for Google Cardboard but this demo can work with other HMDs like the Oculus Rift.

Launch Options

You can toggle quality modes using the quality query string (high/low):

http://localhost:3000?quality=low

UI can also be toggled using the ui query string (true/false):

http://localhost:3000?ui=false

VR mode for virtual reality support can be toggled by using the vr query string (true/false):

http://localhost:3000?vr=true

VR mode also supports optionally setting eyeSeparation and focalLength:

http://localhost:3000?vr=true&vr-eyeSeparation=-.04
http://localhost:3000?vr=true&vr-focalLength=15

Installing

You’ll need Node to get started.

$ git clone https://github.com/enesser/earth-webgl && cd earth-webgl
$ npm install -g gulp      # Install Gulp task runner
$ npm install              # Install requirements
$ npm start                # Run the demo

For development, you can run Gulp:

$ npm install -g nodemon   # Install nodemon
$ gulp                     # Run the demo in development mode w/ nodemon

Project Structure

|-- public/               # auto-generated client assets (via Gulp), do not edit
|-- raw/                  # source directory for client assets
|   |-- js/               # source JavaScript
|   |-- models/           # source models for high and low quality
|   |-- scss/             # source Sass
|
|-- routes/               # controllers for site pages
|-- views/                # handlebars templates for site pages

Intro to 3D & VR on the Web

This demo was created for a talk I did at Designory in February 2016: “Intro to 3D & VR on the Web.”

Topics:

• 3D modeling in Blender
• UV mapping
• bump maps
• specular maps
• composite materials
• OBJ and three.js JSON exporting and importing
• three.js camera, scene, lighting, and mesh basics
• Stereoscopic rendering and virtual reality

If you’re interested in this talk, please let me know.

Additional Credits

Special thanks:

• Blender Guru for tips on creating a realistic 3D earth.
• NASA for source material for the model textures.

Donations

BTC 18N1g2o1b9u2jNPbSpGHhV6x5xs6Qou3EV

License

Copyright (c) 2016-2017 Eric J Nesser, MIT

Original source material for the model textures provided by NASA.