<div id="container"></div>

html {
	overflow: hidden;
}

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: #fff;
	background: #4831ab;
}

var container = document.getElementById( 'container' );

var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, .1, 1000 );
camera.position.set( 0, 0, 4 );

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x4831ab );

// lights
var aLight = new THREE.AmbientLight( 0x7f46ab );
scene.add( aLight );

// ---------------------------------------------------------------
// ---------------------------------------------------------------

// clouds

var cloudsSize = new THREE.Vector3( 15, 4, 6 );
var cloudsBox = new THREE.Box3();
cloudsBox.setFromCenterAndSize( new THREE.Vector3(), cloudsSize );

// -----------------------------------------------------------------

var sphereGeo = new THREE.SphereBufferGeometry( 0.2, 32, 16 );
var cloudMat = new THREE.MeshPhongMaterial({
	color: 0xffffff,
	shininess: 0
});

var Cloud = function() {

	THREE.Group.call( this );

	this.spheres = [];

	// fill in 3 boxes with a random number of
	// randomly positioned and randomly scaled spheres

	// large base
	var center1 = new THREE.Vector3();
	var size1 = new THREE.Vector3( 1, 0.25, 0.6 );
	var number1 = THREE.Math.randInt( 10, 25 );
	var scaleRange1 = new THREE.Vector2( 0.2, 1 );
	this.fillBox( center1, size1, number1, scaleRange1 );

	// top of cloud
	var center2 = new THREE.Vector3( 0, size1.y, 0 );
	var size2 = new THREE.Vector3( 0.5, 0.25, 0.5 );
	var number2 = THREE.Math.randInt( 5, 15 );
	var scaleRange2 = new THREE.Vector2( 0.2, 1 );
	this.fillBox( center2, size2, number2, scaleRange2 );

	// small tail
	var center3 = new THREE.Vector3( -0.7, 0, 0 );
	var size3 = new THREE.Vector3( 0.4, 0.2, 0.25 );
	var number3 = THREE.Math.randInt( 3, 7 );
	var scaleRange3 = new THREE.Vector2( 0.1, 0.5 );
	this.fillBox( center3, size3, number3, scaleRange3 );

	this.userData.velocity = THREE.Math.randFloat( 0.003, 0.007 );

};

Cloud.prototype = Object.create( THREE.Group.prototype );
Cloud.prototype.constructor = Cloud;

Cloud.prototype.fillBox = function( center, size, number, scale ){

	var box = new THREE.Box3();
	box.setFromCenterAndSize( center, size );

	var boxGroup = new THREE.Group();
	boxGroup.position.copy( center );
	this.add( boxGroup );

	for ( var i = 0; i < number; i++ ) {

		var sphere = new THREE.Mesh( sphereGeo, cloudMat );

		sphere.position.set(
			THREE.Math.randFloatSpread( size.x ),
			THREE.Math.randFloatSpread( size.y ),
			THREE.Math.randFloatSpread( size.z )
		);

		sphere.userData.scale = THREE.Math.randFloat( scale.x, scale.y );
		sphere.scale.setScalar( sphere.userData.scale );

		sphere.userData.velocity = THREE.Math.randFloat( 0.001, 0.002 );

		boxGroup.add( sphere );
		this.spheres.push( sphere );

	}

	return boxGroup;

};

Cloud.prototype.update = function( t ){

	// scale individual spheres
	for ( var i = 0; i < this.spheres.length; i++ ) {
		var sphere = this.spheres[i];
		var scaleOffset = Math.sin( t + ( i + 1 ) ) * 0.4 + 1;
		sphere.scale.setScalar( sphere.userData.scale * scaleOffset );
	}

	// move entire cloud forward
	this.position.x += this.userData.velocity;

	// reset cloud position
	if ( this.position.x > cloudsBox.max.x ) {
		this.position.x = cloudsBox.min.x;
	}

};

// -----------------------------------------------------------------

// fill clouds box with clouds

var clouds = [];

for ( var i = 0; i < 40; i++ ) {

	var cloud = new Cloud();

	cloud.position.set(
		THREE.Math.randFloatSpread( cloudsSize.x ),
		THREE.Math.randFloatSpread( cloudsSize.y ),
		THREE.Math.randFloatSpread( cloudsSize.z )
	);

	scene.add( cloud );
	clouds.push( cloud );

}

// -----------------------------------------------------------------
// -----------------------------------------------------------------

// moon

var MoonShader = {

	uniforms: {

		colorA: { type: 'v3', value: scene.background },
		colorB: { type: 'v3', value: new THREE.Color('#fff') },

	},

	vertexShader: [

		"varying vec2 vUv;",
		"void main() {",
		"	vUv = uv;",
		"	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
		"}"

	].join('\n'),

	fragmentShader: [

		"varying vec2 vUv;",
		"uniform vec3 colorA;",
		"uniform vec3 colorB;",

		"void main() {",
		" float pct = smoothstep( 0.39, 0.44, vUv.y );",
		"	vec3 col = mix( colorA, colorB, pct );",
		"	gl_FragColor = vec4( col, 1.0 );",
		"}"

	].join('\n')

};

var moonGeo = new THREE.SphereBufferGeometry( 2, 32, 32 );
var moonMat = new THREE.ShaderMaterial({
	uniforms: THREE.UniformsUtils.clone( MoonShader.uniforms ),
	vertexShader: MoonShader.vertexShader,
	fragmentShader: MoonShader.fragmentShader,
});
var moon = new THREE.Mesh( moonGeo, moonMat );
moon.position.set( -3, 4, -20 );
moon.rotation.set(
	- Math.PI / 2,
	- Math.PI / 6,
	Math.PI / 4,
);
scene.add( moon );

var moonLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
moonLight.position.copy( moon.position );
scene.add( moonLight );

//

// key light

var dLight = new THREE.DirectionalLight( 0xffffff, 0.2 );
dLight.position.set( 1, 1, 1 );
scene.add( dLight );

// ---------------------------------------------------------------
// ---------------------------------------------------------------

// stars

StarShader = {

	uniforms: {

		color:   { type: 'v3', value: new THREE.Color( 0xffffff ) },
		texture: { type: 't', value: null },
		time:    { type: 'f', value: 0 },
		size:    { type: 'f', value: 500.0 }

	},

	vertexShader: [

		'uniform float time;',
		'uniform float size;',
		'attribute float alphaOffset;',
		'varying float vAlpha;',
		'uniform vec4 origin;',

		'void main() {',

			'vAlpha = 0.5 * ( 1.0 + sin( alphaOffset + time ) );',

			'vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
			'float cameraDist = distance( mvPosition, origin );',
			'gl_PointSize = size / cameraDist;',
			'gl_Position = projectionMatrix * mvPosition;',

		'}'

	].join('\n'),

	fragmentShader: [

		'uniform float time;',
		'uniform vec3 color;',
		'uniform sampler2D texture;',

		'varying float vAlpha;',

		'void main() {',
		'  gl_FragColor = vec4( color, vAlpha );',
		'  gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );',
		'}'

	].join('\n')
};

var Stars = function( options ) {

	var color = this.color = options.color || 0x333333;
	var size = this.size = options.size || 0.4;

	var pointCount = this.pointCount = options.pointCount || 40;
	var range = this.range = options.range || new THREE.Vector3( 2, 2, 2 );

	THREE.Group.call( this );

	// circle texture

	var canvas = document.createElement('canvas');
	canvas.width = canvas.height = 128;
	var ctx = canvas.getContext( '2d' );

	var centerX = canvas.width / 2;
	var centerY = canvas.height / 2;
	var radius = canvas.width / 3;

	ctx.beginPath();
	ctx.arc( centerX, centerY, radius, 0, 2 * Math.PI, false );
	ctx.fillStyle = '#fff';
	ctx.fill();

	var texture = new THREE.Texture( canvas );
	texture.premultiplyAlpha = true;
	texture.needsUpdate = true;

	//

	StarShader.uniforms.texture.value = texture;
	StarShader.uniforms.size.value = size;

	var pointsMat = new THREE.ShaderMaterial( {
		uniforms:       StarShader.uniforms,
		vertexShader:   StarShader.vertexShader,
		fragmentShader: StarShader.fragmentShader,
		blending:       THREE.AdditiveBlending,
		depthWrite: false,
		transparent:    true
	});

	var pointsGeo = new THREE.BufferGeometry();

	var positions = new Float32Array( pointCount * 3 );
	var alphas = new Float32Array( pointCount );

	for ( var i = 0; i < pointCount; i++ ) {

		positions[ i*3 + 0 ] = THREE.Math.randFloatSpread( range.x );
		positions[ i*3 + 1 ] = THREE.Math.randFloatSpread( range.y );
		positions[ i*3 + 2 ] = THREE.Math.randFloatSpread( range.z );

		alphas[ i ] = i;

	}

	pointsGeo.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
	pointsGeo.addAttribute( 'alphaOffset', new THREE.BufferAttribute( alphas, 1 ) );

	var points = this.points = new THREE.Points( pointsGeo, pointsMat );
	points.sortParticles = true;
	points.renderOrder = 1;

	this.add( points );

}

Stars.prototype = Object.create( THREE.Group.prototype );
Stars.prototype.constructor = Stars;

// ---------------------------------------------------------------

var stars = new Stars({
	color: 0xffffff,
	range: new THREE.Vector3( 110, 60, 30 ),
	pointCount: 400,
	size: 400,
	speed: 0.1
});

scene.add( stars );

stars.position.z = -50;

// ---------------------------------------------------------------
// ---------------------------------------------------------------

window.addEventListener( 'resize', resize, false );
function resize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
}

var clock = new THREE.Clock();

renderer.setAnimationLoop( loop );

function loop() {

	var time = clock.getElapsedTime();

	for ( var i = 0; i < clouds.length; i++ ) {
		clouds[i].update( time );
	}

	stars.points.material.uniforms.time.value = time;

	renderer.render( scene, camera );
}