{"id":13403251,"url":"https://github.com/enesser/earth-webgl","last_synced_at":"2025-06-14T14:33:38.457Z","repository":{"id":81646315,"uuid":"49702532","full_name":"enesser/earth-webgl","owner":"enesser","description":"Photorealistic 3D earth and space scene demo rendered and animated in WebGL.","archived":false,"fork":false,"pushed_at":"2017-06-21T02:25:15.000Z","size":4338,"stargazers_count":85,"open_issues_count":0,"forks_count":19,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-09T04:41:27.185Z","etag":null,"topics":["3d","earth","three-js","vr","webgl"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/enesser.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-01-15T07:03:39.000Z","updated_at":"2025-03-30T13:09:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"d558ae28-a0fa-46c6-ab95-64eb2d1feffe","html_url":"https://github.com/enesser/earth-webgl","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/enesser/earth-webgl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesser%2Fearth-webgl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesser%2Fearth-webgl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesser%2Fearth-webgl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesser%2Fearth-webgl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enesser","download_url":"https://codeload.github.com/enesser/earth-webgl/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enesser%2Fearth-webgl/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259831245,"owners_count":22918478,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","earth","three-js","vr","webgl"],"created_at":"2024-07-30T19:01:27.375Z","updated_at":"2025-06-14T14:33:38.405Z","avatar_url":"https://github.com/enesser.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Earth WebGL Demo\n==========\n\n**“Earth ‒ Where we keep all of our stuff.”**\n\n[![Build Status](https://travis-ci.org/enesser/earth-webgl.svg?branch=master)](https://travis-ci.org/enesser/earth-webgl.svg?branch=master)\n\nThis animated demo includes a photorealistic 3D earth and space scene, rendered in WebGL with three.js and served with Express 4.\n\n![3D Scene Screenshot](https://cloud.githubusercontent.com/assets/5659221/12347858/acb832ee-bb27-11e5-9cb4-eba3108fd405.png)\n\n\u003e Visit the live demo on CodePen: [http://codepen.io/enesser/full/pgWjoW/](http://codepen.io/enesser/full/pgWjoW/).\n\n\u003e *Only the low-quality version is available on CodePen due to asset constraints.*\n\n## Controls\n\n![Controls Screenshot](https://cloud.githubusercontent.com/assets/5659221/12347832/4ad257d0-bb27-11e5-93b1-fcc9bfba6fd6.png)\n\nSetting                 | Description\n------------------------| ----------------------------\n**sunColor**            | Color of sunlight.\n**sunIntensity**        | Intensity of the sunlight.\n**ambientLight**        | Color of ambient light in the scene.\n**atmosphereVisible**   | Toggle visiblity of the atmosphere.\n**atmosphereColor**     | Color of the atmosphere.\n**atmosphereOpacity**   | Opacity value of the atmosphere.\n**atmosphereWireframe** | Toggle wireframe view on the atmosphere material.\n**cloudsVisible**       | Toggle visibility of the cloud layer.\n**cloudsOpacity**       | Opacity value of the cloud layer.\n**cloudsWireframe**     | Toggle wireframe view of the cloud layer material.\n**cloudsRotate**        | Toggle auto-rotation of the cloud layer.\n**cloudsVelocity**      | Speed of cloud layer rotation. Negative value rotates backwards.\n**terrainVisible**      | Toggle visibility of terrain.\n**terrainBumpScale**    | Bump height of terrain bump mape. Can be negative for inset.\n**terrainWireframe**    | Toggle wireframe view of terrain.\n**terrainRotate**       | Toggle auto-rotation of terrain.\n**terrainVelocity**     | Speed of terrain rotation. Negative value rotates backwards.\n\nYou can also control the camera position by dragging the mouse and holding the right or left mouse button.\n\n## Mobile\n\nThis demo is supported on all modern mobile devices where WebGL is supported.\n\n![Mobile Screenshot](https://cloud.githubusercontent.com/assets/5659221/12604991/2cd8efd8-c486-11e5-9f71-8d48b9525997.png)\n\n## Virtual Reality\n\nVirtual reality mode can be toggled using the ``vr`` query string (**true**/**false**) documented under **Launch Options**. In VR mode,\nthe camera is locked at a different perspective, the UI is hidden, and there are currently no controls.\n\nThis mode is still highly experimental. Default values are calibrated for Google Cardboard but this demo can work with other HMDs like the Oculus Rift.\n\n![VR Screenshot](https://cloud.githubusercontent.com/assets/5659221/12870166/e462b916-ccfd-11e5-8e86-fe53e9135627.png)\n\n## Launch Options\n\nYou can toggle quality modes using the ``quality`` query string (**high**/**low**):\n```\nhttp://localhost:3000?quality=low\n```\n\nUI can also be toggled using the ``ui`` query string (**true**/**false**):\n```\nhttp://localhost:3000?ui=false\n```\n\nVR mode for virtual reality support can be toggled by using the ``vr`` query string (**true**/**false**):\n```\nhttp://localhost:3000?vr=true\n```\n\nVR mode also supports optionally setting ``eyeSeparation`` and ``focalLength``:\n```\nhttp://localhost:3000?vr=true\u0026vr-eyeSeparation=-.04\nhttp://localhost:3000?vr=true\u0026vr-focalLength=15\n```\n\n## Installing\n\nYou’ll need [Node](https://nodejs.org/en/download/package-manager/) to get started.\n\n```shell\n$ git clone https://github.com/enesser/earth-webgl \u0026\u0026 cd earth-webgl\n$ npm install -g gulp      # Install Gulp task runner\n$ npm install              # Install requirements\n$ npm start                # Run the demo\n```\n\nFor development, you can run ``Gulp``:\n\n```shell\n$ npm install -g nodemon   # Install nodemon\n$ gulp                     # Run the demo in development mode w/ nodemon\n```\n\n## Project Structure\n\n```\n|-- public/               # auto-generated client assets (via Gulp), do not edit\n|-- raw/                  # source directory for client assets\n|   |-- js/               # source JavaScript\n|   |-- models/           # source models for high and low quality\n|   |-- scss/             # source Sass\n|\n|-- routes/               # controllers for site pages\n|-- views/                # handlebars templates for site pages\n```\n\n## Intro to 3D \u0026amp; VR on the Web\n\nThis demo was created for a talk I did at [Designory](https://www.designory.com/) in February 2016: “Intro to 3D \u0026amp; VR on the Web.”\n\nTopics:\n\n* 3D modeling in Blender\n* UV mapping\n* bump maps\n* specular maps\n* composite materials\n* OBJ and three.js JSON exporting and importing\n* three.js camera, scene, lighting, and mesh basics\n* Stereoscopic rendering and virtual reality\n\nIf you’re interested in this talk, please let me know.\n\n## Additional Credits\n\nSpecial thanks:\n* [Blender Guru](https://www.youtube.com/user/AndrewPPrice) for tips on creating a realistic 3D earth.\n* [NASA](http://visibleearth.nasa.gov/view_cat.php?categoryID=0) for source material for the model textures.\n\n## Donations\n\nBTC 18N1g2o1b9u2jNPbSpGHhV6x5xs6Qou3EV\n\n## License\nCopyright (c) 2016-2017 Eric J Nesser, MIT\n\n*Original source material for the model textures provided by NASA.*","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenesser%2Fearth-webgl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenesser%2Fearth-webgl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenesser%2Fearth-webgl/lists"}