EffectHub.com: your best source for gaming

Recommendation

More Effects...

var renderer, camera, scene, earth, space, stars;
var earthShaderParameters, spaceShaderParameters, starParameters;

function initParams() {
  THREE.ImageUtils.crossOrigin = "anonymous";
  var lightColor = new THREE.Color(0xFFAE53);
  var ambientColor = new THREE.Color(0x1F0F33);
  var starColor = 0xFFFFFF;
  
  starParameters = {
    color: starColor,
    size: 4,
  };

earthShaderParameters = {
    "time": {
      type: 'f',
      value: 0.0
    },
    "cloud_map": {
      type: 't',
      value: THREE.ImageUtils.loadTexture("https://dl.dropboxusercontent.com/u/8604128/earth/clouds.png")
    },
    "specular_map": {
      type: 't',
      value: THREE.ImageUtils.loadTexture("https://dl.dropboxusercontent.com/u/8604128/earth/earth-SPEC.png")
    },
    "day_diffuse_map": {
      type: 't',
      value: THREE.ImageUtils.loadTexture("https://dl.dropboxusercontent.com/u/8604128/earth/earth-day-DIFF.png")
    },
    "night_diffuse_map": {
      type: 't',
      value: THREE.ImageUtils.loadTexture("https://dl.dropboxusercontent.com/u/8604128/earth/earth-night-DIFF.png")
    },
    "glow_map": {
      type: 't',
      value: THREE.ImageUtils.loadTexture("https://dl.dropboxusercontent.com/u/8604128/earth/earth-night-GLOW.png")
    },
    "normal_map": {
      type: 't',
      value: THREE.ImageUtils.loadTexture("https://dl.dropboxusercontent.com/u/8604128/earth/earth-NM.png")
    },
    "light_color": {
      type: 'c',
      value: lightColor
    },
    "ambient_color": {
      type: 'c',
      value: ambientColor
    }
  };

spaceShaderParameters = {
    "time": {
      type: 'f',
      value: 0.0,
    },
    "ambient_color": {
      type: 'c',
      value: ambientColor
    },
    "light_color": {
      type: 'c',
      value: lightColor
    }
  };
}

function main() {
  initParams();
  init();
  animate();
}

function init() {
  var width = window.innerWidth;
  var height = window.innerHeight;

earthShaderParameters.cloud_map.value.wrapS = earthShaderParameters.cloud_map.value.wrapT = THREE.RepeatWrapping;
  
  renderer = new THREE.WebGLRenderer();
  renderer.setSize( width, height );
  $(".viewer").append( renderer.domElement );

camera = new THREE.PerspectiveCamera( 70, width / height, 1, 2000 );
  camera.position.z = 700;

scene = new THREE.Scene();

createMeshes();

window.addEventListener( 'resize', onWindowResize, false );
}

function pointOnSphere(radius) {
  var point = new THREE.Vector3();
  var u = Math.random();
  var v = Math.random();
  
  var theta = 2.0 * Math.PI * u;
  var phi = Math.acos(2.0 * v - 1.0);
  point.x = (radius * Math.sin(phi) * Math.cos(theta));
  point.y = (radius * Math.sin(phi) * Math.sin(theta));
  point.z = (radius * Math.cos(phi));
  return point;
}

function createMeshes() {
  var sphere = new THREE.SphereGeometry( 100, 64, 64 );
  sphere.computeTangents();
  
  var earthMaterial = createMaterial(".earth-vert", ".earth-frag", earthShaderParameters);
  earthMaterial.transparent = true;
  earth = new THREE.Mesh(sphere, earthMaterial);
  
  var spaceMaterial = createMaterial(".space-vert", ".space-frag", spaceShaderParameters);
  spaceMaterial.side = THREE.BackSide;
  spaceMaterial.depthWrite = false;

var NUM_STARS = 40000;
  var STAR_SPREAD = 1600.0;
  var DIST_FROM_EARTH = 700.0;
  var starGeo = new THREE.Geometry();
  for(var i=0; i<NUM_STARS; i++) {
    starGeo.vertices.push(pointOnSphere(DIST_FROM_EARTH).multiplyScalar(1.0 + Math.random()*0.5));
  }
  var starMaterial = new THREE.PointCloudMaterial(starParameters);
  starMaterial.blending = THREE.AdditiveBlending;
  starMaterial.opacity = 0.3;
  starMaterial.transparent = true;
  stars = new THREE.PointCloud(starGeo, starMaterial);

space = new THREE.Mesh(sphere, spaceMaterial);
  space.scale.set(8, 8, 8);
  scene.add(earth);
  scene.add(stars);
  scene.add(space);
}

function createMaterial(vertSource, fragSource, uniforms) {
  return new THREE.ShaderMaterial({ 
    uniforms: uniforms,
    vertexShader: $(vertSource).text(),
    fragmentShader: $(fragSource).text()
  });
}

function animate() {
  requestAnimationFrame( animate );

earth.rotation.y += 0.0025;
  space.rotation.y += 0.0025;
  stars.rotation.y += 0.0025;
  
  earthShaderParameters.time.value += 0.01;
  earthShaderParameters.time.needsUpdate = true;
  
  spaceShaderParameters.time.value += 0.01;
  spaceShaderParameters.time.needsUpdate = true;

renderer.render( scene, camera );
}

function onWindowResize() {
  var width = window.innerWidth;
  var height = window.innerHeight;

camera.aspect = (width / height);
  camera.updateProjectionMatrix();

renderer.setSize(width, height);
}

$(main);

CSS

HTML

varying vec2 v_uv;
varying mat3 TBN;
varying vec3 P;

void main() {
  vec3 N = normalize(normalMatrix * normal);
  vec3 T = normalize(normalMatrix * tangent.xyz);
  vec3 B = normalize(normalMatrix * cross(normal, tangent.xyz) * tangent.w);
  TBN = mat3(
  T.x, T.y, T.z,
  B.x, B.y, B.z,
  N.x, N.y, N.z
  );
  v_uv = uv;
  P = (modelViewMatrix * vec4(position, 1.0)).xyz;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script type="x-shader/x-fragment" class="earth-frag">
uniform mat4 modelViewMatrix;
uniform float time;

uniform sampler2D cloud_map;
uniform sampler2D specular_map;
uniform sampler2D day_diffuse_map;
uniform sampler2D night_diffuse_map;
uniform sampler2D normal_map;
uniform sampler2D glow_map;
uniform vec3 light_color;
uniform vec3 ambient_color;

varying vec2 v_uv;
varying mat3 TBN;
varying vec3 P;

vec3 getNormal()
{
  vec3 Nm = texture2D(normal_map, v_uv).xyz;
  Nm *= 2.0;
  Nm -= vec3(1.0);
  return normalize(TBN * Nm);
}

void main() {
  vec3 V = normalize(-P);
  vec3 N = getNormal();
  vec3 sphereN = TBN[2];

// light
  vec3 L = normalize((modelViewMatrix * vec4(1.0, 1.0, 1.0, 0.0)).xyz );

// diffuse
  float NdL = max(0.0, dot(N, L));
  float sphereNdL = max(0.0, dot(sphereN, L));
  vec3 diffuse =  light_color * NdL;

// specular
  const float specular_coefficient = 0.5;
  const float specular_power = 25.0;
  const float earth_spec = 0.6;
  const float sea_spec = 0.8;
  vec3 H = normalize(V+L);
  float spec_amount = mix(earth_spec, sea_spec, texture2D(specular_map, v_uv).r);
  
  // physically-based lighting, cook-torrance
  float NdH = clamp(dot(N, H), 0.0, 1.0);
  float FG = 0.25 / (pow(NdH, 3.0) + 1.0/32.0);
  float D = spec_amount * 0.5 * (specular_power + 1.0) * pow(NdH, specular_power * spec_amount);
  float DFG = D * FG;
  vec3 specular = spec_amount * specular_coefficient * light_color * NdL * DFG;

// fresnel
  float facing = 1.0 - max(0.0, dot(V, sphereN));

// day/night mixing
  vec3 day_color = texture2D(day_diffuse_map, v_uv).rgb;
  vec3 night_color = texture2D(night_diffuse_map, v_uv).rgb;
  vec3 diffuse_color = mix(night_color, diffuse*day_color, sphereNdL);

// basic light model
  vec3 globe = diffuse_color + specular + 0.2 * ambient_color;

// glow
  vec3 glow = 3.0 * texture2D(glow_map, v_uv).rgb;
  globe += glow * clamp(1.0-2.0*sphereNdL, 0.0, 1.0);

// cloud coverage 
  const vec2 cloud_velocity = vec2(0.012, 0.0);
  const float cloud_min = 0.15;
  const float cloud_max = 1.0;
  vec4 cloud = texture2D(cloud_map, v_uv + time*cloud_velocity);

globe = mix(globe, cloud.rgb, cloud_min * cloud.a);
  globe = mix(globe, cloud_max * cloud.rgb, facing * sphereNdL * cloud.a);

// lets pretend the globe is a bit smaller
  float globe_alpha = smoothstep(0.83, 0.75, facing);
  globe *= globe_alpha;

// make the atmosphere 
  const float min_atmo_amount = 0.03;
  const float backscatter_amount = 0.1;
  vec3 atmo_color = vec3(0.7, 0.8, 0.9);

float atmo_alpha = (min_atmo_amount + (sphereNdL));
  atmo_alpha += backscatter_amount * pow(1.0 -sphereNdL, 4.0);
  atmo_alpha *= smoothstep(1.0, 0.7, facing);
  atmo_alpha *= smoothstep(0.3, 1.0, facing);
  vec3 atmosphere = atmo_color * atmo_alpha;

// final color
  gl_FragColor = vec4(globe + atmosphere, max(atmo_alpha, globe_alpha)); 
}
</script>

uniform float time;
  
void main() {
  v_uv = uv;
  P = (modelViewMatrix * vec4(position, 1.0)).xyz;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>

// noise from https://github.com/ashima/webgl-noise/blob/master/src/noise2D.glsl
vec3 mod289(vec3 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec2 mod289(vec2 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec3 permute(vec3 x) {
  return mod289(((x*34.0)+1.0)*x);
}

float snoise(vec2 v)
  {
  const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
                      0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
                     -0.577350269189626,  // -1.0 + 2.0 * C.x
                      0.024390243902439); // 1.0 / 41.0
// First corner
  vec2 i  = floor(v + dot(v, C.yy) );
  vec2 x0 = v -   i + dot(i, C.xx);

// Other corners
  vec2 i1;
  //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
  //i1.y = 1.0 - i1.x;
  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
  // x0 = x0 - 0.0 + 0.0 * C.xx ;
  // x1 = x0 - i1 + 1.0 * C.xx ;
  // x2 = x0 - 1.0 + 2.0 * C.xx ;
  vec4 x12 = x0.xyxy + C.xxzz;
  x12.xy -= i1;

// Permutations
  i = mod289(i); // Avoid truncation effects in permutation
  vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
		+ i.x + vec3(0.0, i1.x, 1.0 ));

vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
  m = m*m ;
  m = m*m ;

// Gradients: 41 points uniformly over a line, mapped onto a diamond.
// The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)

vec3 x = 2.0 * fract(p * C.www) - 1.0;
  vec3 h = abs(x) - 0.5;
  vec3 ox = floor(x + 0.5);
  vec3 a0 = x - ox;

// Normalise gradients implicitly by scaling m
// Approximation of: m *= inversesqrt( a0*a0 + h*h );
  m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );

// Compute final noise value at P
  vec3 g;
  g.x  = a0.x  * x0.x  + h.x  * x0.y;
  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
  return 130.0 * dot(m, g);
}

void main() {
  vec3 L = normalize((modelViewMatrix * vec4(1.0, 1.0, 1.0, 0.0)).xyz);
  
  // let's fake a sun through haze. we'll use the 
  // light direction, and the proximity to the light along the surface, clamped to the range 0, 1.
  float d = max(1.0 - distance(L, normalize(P)), 0.0);
  d = pow(d, 2.0);
  
  vec3 haze_color = mix(ambient_color, light_color, d);
  vec3 sun_color = light_color * smoothstep(0.9, 1.0, d);
  
  // adding some noise helps to break up the banding
  // due to low color bit depth, also adds some nice grain
  haze_color += 0.01 * snoise(v_uv * vec2(1000.0));
  
  // stars look OK, decided not to use them
  float stars = smoothstep(0.7, 1.0, snoise(gl_FragCoord.xy * vec2(0.4) + time * vec2(0.0, 0.2)));
  stars *= stars * stars;
  vec3 stars_color = mix(1.5 * haze_color * stars, vec3(0.0), d);
  
  vec3 background = haze_color;
  gl_FragColor = vec4(background + sun_color, 1.0);  
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>

Recommendation

Join Effecthub.com