Cloud Demo

by AaronLayton

HTML

<script src="http://mrdoob.github.com/three.js/build/Three.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/RequestAnimationFrame.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/Stats.js"></script>
<script src="http://mrdoob.com/lab/javascript/webgl/clouds/js/Detector.js"></script>
<!-- new vertex shader -->
<script id="vs" type="x-shader/x-vertex">
    varying vec2 vUv;
    void main(){
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
</script>
<!-- new fragment shader -->
<script id="fs" type="x-shader/x-fragment">
    uniform sampler2D map;
    uniform vec3 fogColor;
    uniform float fogNear;
    uniform float fogFar;

    varying vec2 vUv;

    void main() {
        float depth = gl_FragCoord.z / gl_FragCoord.w;
        float fogFactor = smoothstep( fogNear, fogFar, depth );

        gl_FragColor = texture2D( map, vUv );
        gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
        gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
    }
</script>

<div id="loadwin">
    <span id="loadtext">init ... </span>
    <div id="loadbar"><span></span></div>
</div>

CSS

body {
    background:#010a16 url(http://www.validatethis.co.uk/new/vt-background.jpg) top center repeat-x;
    color:#f8f8ff;
    font-family:Helvetica, Arial, sans-serif;
    font-size:12px;
}

#loadwin{ 
    display:block;
    height:90px;
    left:50%;
    margin:-60px 0 0 -125px;
    position:absolute;
    top:50%;
    width:250px;
    z-index:10;
}

#loadbar { position:absolute; top:30px; left:0px; width:100%; height:2px; }
#loadbar span  { display:block;width:1%; height:2px; }

#loadbar { background-color:#888;}
#loadbar span { background-color:#fff; }

JavaScript

// Cloud test, inspired from Mr.Doob

// container for three.js and doob stats
var container, stats;
// These used for three.js
var camera, scene, renderer, sky, mesh, geometry, material,
    i, h, color, colors = [], sprite, size, x, y, z;

var isDebug = true;

// Detect if there is WebGL capabilities
// Modernizr will add no-webgl to html tag if not supported
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

// Helper to set the loadbar
function setLoadbar( text, percent ){
    $('#loadtext').html( text );
    $('#loadbar span').animate({width:percent + '%'}, 500);
}


// We have now initialised so lets start loading the textures
setTimeout(function(){ setLoadbar('loading textures ...', 20 ); },600);



// Bind to hash so we can get to each page
$(window).bind('hashchange',function(){ // detect hash change
    var hash = window.location.hash.slice(1);
});

if (Detector.webgl){
    // We hae got this far so lets initialise the clouds
    init();
    animate();
}else{
    alert("Not yet supported");   
}


// Initialise the scene
function init(){
    // Create a div to contain everything
    container = document.createElement('div');
    document.body.appendChild(container);
    
    // Create a new scene
    scene = new THREE.Scene();

    // Setup the camera
    camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 6000 );
    camera.position.z = 6000;
    scene.add(camera);
    
    // Create new blank geometry
    geometry = new THREE.Geometry();
    
    
    var texture = THREE.ImageUtils.loadTexture( 'http://www.validatethis.co.uk/new/clouddark.png' );
    var texturelightning = THREE.ImageUtils.loadTexture( 'http://www.validatethis.co.uk/new/cloudlight.png' );
    // Used to speed up... comment out for better image
    /*
    texture.magFilter = THREE.LinearMipMapLinearFilter;
    texture.minFilter = THREE.LinearMipMapLinearFilter;
    texturelightning .magFilter = THREE.LinearMipMapLinearFilter;
    texturelightning...