samien
/
three.js
зеркало из https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555
							<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>redPlant WebGL Deferred Rendering with Three.js</title>
    <style>
        body {
            background-color: #000;
            margin: 0px;
            overflow: hidden;
        }
        #info {
            position: absolute;
            top: 0px; width: 100%;
            color: #ffffff;
            padding: 5px;
            font-family: Monospace;
            font-size: 13px;
            text-align: center;
        }
        a {
            color: #ff0080;
            text-decoration: none;
        }
        a:hover {
            color: #0080ff;
        }
    </style>
</head>
<body>
<div id="info">
    <a href="http://threejs.org" target="_blank">three.js</a> - deferred point lights WebGL demo by <a href="http://de.redplant.de" target=_blank>redPlant</a>.<br />
    Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank">David OReilly</a><br>
    Point Light attenuation formula by <a href="http://imdoingitwrong.wordpress.com/tag/glsl/" target=_blank>Tom Madams</a>
</div>
<div id="container">
</div>
</body>

<script src="js/three/three.js"></script>
<script src="js/three/Stats.js"></script>

<script src="js/scripts/requestAnimationFrame.js"></script>
<script src="js/scripts/ShaderExtras.js"></script>

<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>

<script>
var WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
var NEAR = 1.0, FAR = 250.0;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH / HEIGHT;

// core
var renderer, camera, controls, stats, clock;

// scenes and scene nodes
var lightScene, lightNode, scene, sceneNode, emitterScene, emitterNode, quadScene, quadNode;
// rendertargets
var rtNormals, rtDepth, rtLightBuffer, rtEmitter;

// composer
var compNormals, compDepth, compLightBuffer, compFinal, compEmitter, compositePass;

// materials
var matNormal, matClipDepth, matBasic, matUnlit;

var numLights = 0;
var lights = new Array();

// -----------------------
// shader definitions
// -----------------------
var clipdepth_frag = ""+
"varying vec4 clipPos;"+
"void main() {"+
"gl_FragColor = vec4(clipPos.z / clipPos.w, 1.0, 1.0, 1.0);"+
"}";

var clipdepth_vert = "" +
"varying vec4 clipPos;"+

"void main() {"+
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );"+
"clipPos = gl_Position;"+
"}";
// -----------------------
var normals_vert = "" +
"varying vec3 normalView;"+

"void main() {"+
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );"+
"normalView = normalize(normalMatrix * normal);"+
"}";
var normals_frag = "" +
"varying vec3 normalView;"+
"void main() {"+
"gl_FragColor = vec4(vec3(normalView * 0.5 + 0.5), 1.0);"+
"}";
// -----------------------
var unlit_vert = "" +
"varying vec4 clipPos;"+
"void main() {"+
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );"+
"clipPos = gl_Position;"+
"}";

var unlit_frag = "" +
"varying vec4 clipPos;"+
"uniform sampler2D samplerDepth;"+

"uniform float viewHeight;"+
"uniform float viewWidth;"+

"uniform vec3 lightColor;" +

"void main() {"+
"vec2 texCoord = gl_FragCoord.xy / vec2(viewWidth, viewHeight);"+
"float z = texture2D(samplerDepth, texCoord).x;"+
"vec4 color = vec4(lightColor, 1.0);"+
"float depth = (clipPos.z/clipPos.w);"+
"if(depth > z && z > 0.0) color.w = 0.0;"+
"gl_FragColor = color;"+
"}";
// -----------------------
var deferredlight_vert = "" +
"varying vec3 lightView;" +
"uniform vec3 lightPos;" +
"uniform mat4 matView;" +
"void main()" +
"{" +
"gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.),lightView=vec3(matView*vec4(lightPos,1.));" +
"}"

var deferredlight_frag = "" +
"varying vec3 lightView;"+

"uniform sampler2D samplerDepth;"+
"uniform sampler2D samplerNormals;"+
"uniform sampler2D samplerLightBuffer;"+

"uniform float lightRadius;"+
"uniform float lightIntensity;"+
"uniform float viewHeight;"+
"uniform float viewWidth;"+

"uniform vec3 lightColor;"+

"uniform mat4 matProjInverse;"+

"void main()"+
"{"+
"vec2 texCoord = gl_FragCoord.xy / vec2(viewWidth, viewHeight);"+
"float z = texture2D(samplerDepth, texCoord).x;"+
"if(z == 0.0)"+
"{"+
"gl_FragColor = vec4(vec3(0.0), 1.0);"+
"return;"+
"}"+
"float x = texCoord.x * 2.0 - 1.0;"+
"float y = texCoord.y * 2.0 - 1.0;"+

"vec4 projectedPos = vec4(x, y, z, 1.0);"+

"vec4 viewPos = matProjInverse * projectedPos;"+
"viewPos.xyz /= viewPos.w;"+
"viewPos.w = 1.0;"+

"vec3 lightDir = lightView - viewPos.xyz;"+
"float dist = length(lightDir);"+

"float cutoff = 0.3;"+
"float denom = dist/lightRadius + 1.0;"+
"float attenuation = 1.0 / (denom*denom);"+
"attenuation = (attenuation - cutoff) / (1.0 - cutoff);"+
"attenuation = max(attenuation, 0.0);"+

"vec3 normal = texture2D( samplerNormals, texCoord).xyz * 2.0 - 1.0;" +
"float diffuse = max(dot(normal, normalize(lightDir)), 0.0);" +

"vec4 color = vec4(0.0);"+
"color.xyz = lightColor * lightIntensity;"+
"color.w = attenuation;"+
"gl_FragColor = color * diffuse;"+
"}";
var composite_vert = "" +
"varying vec2 texCoord;"+
"void main() {"+
"vec4 pos = vec4(sign(position.xy),0.0,1.0);"+
"texCoord=pos.xy*vec2(0.5,0.5)+0.5;"+
"gl_Position = pos;"+
"}";

var composite_frag = "" +
"varying vec2 texCoord;"+
"uniform sampler2D samplerLightBuffer;" +
"uniform sampler2D samplerEmitter;" +
"uniform vec3 lightPos;" +

"void main()" +
"{" +
"vec3 color = texture2D(samplerLightBuffer, texCoord).xyz;" +
"vec3 emitter = texture2D(samplerEmitter, texCoord).xyz;"+
"if(emitter != vec3(0.0)){"+
"gl_FragColor = vec4(emitter, 1.0);" +
"}"+
"else{"+
"gl_FragColor = vec4(color, 1.0);}" +
"}"
// -----------------------
var normalShader = {
    uniforms: {},
    vertexShader: normals_vert,
    fragmentShader: normals_frag
};
// -----------------------
var clipDepthShader = {
    uniforms: {},
    vertexShader: clipdepth_vert,
    fragmentShader: clipdepth_frag
};
// -----------------------
var unlitShader = {
    uniforms: {
        samplerDepth: { type: "t", value: 0, texture: null },
        viewWidth: { type: "f", value: WIDTH},
        viewHeight: { type: "f", value: HEIGHT},
        lightColor: { type: "v3", value: new THREE.Vector3( 0, 0, 0 )}
    },
    vertexShader: unlit_vert,
    fragmentShader: unlit_frag
};
// -----------------------
var lightShader = {
    uniforms: {
        samplerLightBuffer: { type: "t", value: 0, texture: null },
        samplerNormals: { type: "t", value: 1, texture: null },
        samplerDepth: { type: "t", value: 2, texture: null },
        matView : { type: "m4", value: new THREE.Matrix4()},
        matProjInverse : { type: "m4", value: new THREE.Matrix4()},
        viewWidth: { type: "f", value: WIDTH},
        viewHeight: { type: "f", value: HEIGHT},
        lightPos: { type: "v3", value: new THREE.Vector3( 0, 0, 0 )},
        lightColor: { type: "v3", value: new THREE.Vector3( 0, 0, 0 )},
        lightIntensity: { type: "f", value: 1.0},
        lightRadius: { type: "f", value: 1.0}
    },
    vertexShader: deferredlight_vert,
    fragmentShader: deferredlight_frag
};

// -----------------------
var compositeShader = {
    uniforms: {
        samplerLightBuffer: { type: "t", value: 0, texture: null },
        samplerEmitter: { type: "t", value: 1, texture: null }
    },
    vertexShader: composite_vert,
    fragmentShader: composite_frag
};
// -----------------------------
function bootstrap()
{
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(WIDTH, HEIGHT);
    renderer.setClearColorHex(0x000000);

    var container = document.getElementById( 'container' );
    container.appendChild(renderer.domElement);

    // scene camera and shadow camera
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    camera.position.z = 150;

    controls = new THREE.TrackballControls( camera, renderer.domElement );

    // scene for walt's head model
    scene = new THREE.Scene();
    sceneNode = new THREE.Object3D();
    scene.add(sceneNode);
    scene.add(camera);

    // scene for light proxy geometry
    lightScene = new THREE.Scene();
    lightNode = new THREE.Object3D();
    lightScene.add(lightNode);

    // scene for the coloured emitter spheres
    emitterScene = new THREE.Scene();
    emitterNode = new THREE.Object3D();
    emitterScene.add(emitterNode);

    // full screen quad for compositing
    quadScene = new THREE.Scene();
    quadNode = new THREE.Object3D();
    quadScene.add(quadNode);
    quadNode.add(new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 )));

    // stats
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '8px';
    stats.domElement.style.zIndex = 100;
    container.appendChild( stats.domElement );

    // clock
    clock = new THREE.Clock();
}
// -----------------------------
function createRenderTargets(){
    var rtParams = {minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter,
                    format: THREE.RGBAFormat, type:THREE.FloatType};

    // ----------------------------------------------------------
    // g-buffer
    // ----------------------------------------------------------
    rtNormals = new THREE.WebGLRenderTarget( WIDTH, HEIGHT, rtParams );
    rtDepth = new THREE.WebGLRenderTarget( WIDTH, HEIGHT, rtParams );

    var passNormals = new THREE.RenderPass( scene, camera);
    compNormals = new THREE.EffectComposer( renderer, rtNormals );
    compNormals.addPass(passNormals );

    var passDepth = new THREE.RenderPass( scene, camera);
    compDepth = new THREE.EffectComposer( renderer, rtDepth );
    compDepth.addPass( passDepth );

    // ----------------------------------------------------------
    // light emitter spheres
    // ----------------------------------------------------------
    var emitterPass = new THREE.RenderPass( emitterScene, camera);
    rtEmitter = new THREE.WebGLRenderTarget( WIDTH, HEIGHT, rtParams );
    compEmitter = new THREE.EffectComposer( renderer, rtEmitter);
    compEmitter.addPass( emitterPass );

    // ----------------------------------------------------------
    // lighting pass
    // ----------------------------------------------------------
    rtLightBuffer = new THREE.WebGLRenderTarget( WIDTH, HEIGHT, rtParams );
    rtLightBuffer.generateMipmaps = false;

    var passLight = new THREE.RenderPass( lightScene, camera);
    compLightBuffer = new THREE.EffectComposer( renderer, rtLightBuffer );
    compLightBuffer.addPass(passLight);

    lightShader.uniforms['samplerNormals'].texture = compNormals.renderTarget2;
    lightShader.uniforms['samplerDepth'].texture = compDepth.renderTarget2;
    lightShader.uniforms['samplerLightBuffer'].texture = rtLightBuffer;

    for(var x = 0; x < numLights; x++){
        // setup material
        var matLight = new THREE.ShaderMaterial({
            uniforms:       THREE.UniformsUtils.clone( lightShader.uniforms ),
            vertexShader:   lightShader.vertexShader,
            fragmentShader: lightShader.fragmentShader
        });
        matLight.blending = THREE.AdditiveBlending;
        matLight.transparent = true;
        matLight.depthWrite = false;
        matLight.uniforms["lightPos"].value = lights[x].position;
        matLight.uniforms["lightRadius"].value = lights[x].distance;
        matLight.uniforms["lightIntensity"].value = lights[x].intensity;
        matLight.uniforms["lightColor"].value = lights[x].color;

        // setup proxy geometry for this light
        var geomLight = new THREE.SphereGeometry(lights[x].distance, 10, 10);
        var meshLight = new THREE.Mesh(geomLight, matLight);
        lightNode.add(meshLight);

        // create emitter sphere
        var geomEmitter = new THREE.SphereGeometry(0.7, 7, 7);
        var matEmitter = new THREE.ShaderMaterial({
            uniforms:       THREE.UniformsUtils.clone( unlitShader.uniforms ),
            vertexShader:   unlitShader.vertexShader,
            fragmentShader: unlitShader.fragmentShader
        });
        var meshEmitter = new THREE.Mesh(geomEmitter, matEmitter);
        meshEmitter.position = lights[x].position;
        emitterNode.add(meshEmitter);

        // add emitter to light node
        meshLight.emitter = meshEmitter;
    }
    // ----------------------------------------------------------
    // composite
    // ----------------------------------------------------------
    compositeShader.uniforms['samplerLightBuffer'].texture = compLightBuffer.renderTarget2;
    compositeShader.uniforms['samplerEmitter'].texture = compEmitter.renderTarget2;

    compositePass = new THREE.ShaderPass( compositeShader );
    compositePass.needsSwap = true;
    compositePass.renderToScreen = true;

    compFinal = new THREE.EffectComposer( renderer, quadScene );
    compFinal.addPass( compositePass );
}
// -----------------------------
function initScene(geometry){
    geometry.computeVertexNormals();

    var meshHead = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial());
    meshHead.position.y = -35;
    sceneNode.add(meshHead);
}
// -----------------------------
function initMaterials(){
    //
    matNormal = new THREE.ShaderMaterial({
        uniforms:       normalShader.uniforms,
        vertexShader:   normalShader.vertexShader,
        fragmentShader: normalShader.fragmentShader
    });

    matClipDepth = new THREE.ShaderMaterial({
        uniforms:       clipDepthShader.uniforms,
        vertexShader:   clipDepthShader.vertexShader,
        fragmentShader: clipDepthShader.fragmentShader
    });
}
// -----------------------------
function initLights(){
    var tmp = new THREE.PointLight();
    tmp.color = new THREE.Vector3( 0.0, 0.0, 1.0);
    tmp.intensity = 1.0;
    tmp.distance = 50;
    lights[0] = tmp;

    var tmp = new THREE.PointLight();
    tmp.color = new THREE.Vector3( 0.0, 1.0, 0.0);
    tmp.intensity = 1.0;
    tmp.distance = 50;
    lights[1] = tmp;

    var tmp = new THREE.PointLight();
    tmp.color = new THREE.Vector3( 1.0, 0.0, 0.0);
    tmp.intensity = 1.0;
    tmp.distance = 50;
    lights[2] = tmp;

    var tmp = new THREE.PointLight();
    tmp.color = new THREE.Vector3( 0.0, 1.0, 1.0);
    tmp.intensity = 1.0;
    tmp.distance = 50;
    lights[3] = tmp;

    numLights = 4;
}
// -----------------------------
function animate()
{
    requestAnimFrame(animate);
    controls.update();
    stats.update();
    render();
}
// -----------------------------
function render()
{
    // -----------------------------
    // g-buffer depth
    for(var idx in sceneNode.children)
    {
        var tmp = sceneNode.children[idx];
        tmp.material = matClipDepth;
    }
    compDepth.render();
    // -----------------------------
    // g-buffer normals
    for(var idx in sceneNode.children)
    {
        var tmp = sceneNode.children[idx];
        tmp.material = matNormal;
    }
    compNormals.render();

    // -----------------------------
    // emitter pass
    for(var idx in lightNode.children)
    {
        var light = lightNode.children[idx];
        var color = light.material.uniforms["lightColor"].value;
        var emitter = light.emitter;
        emitter.material.uniforms['samplerDepth'].texture = compDepth.renderTarget2;
        emitter.material.uniforms["lightColor"].value = color;
    }
    compEmitter.render();

    // -----------------------------
    // light pass
    for(var idx in lightNode.children)
    {
        camera.projectionMatrixInverse.getInverse(camera.projectionMatrix);
        lightNode.children[idx].material.uniforms["matProjInverse"].value = camera.projectionMatrixInverse;
        lightNode.children[idx].material.uniforms["matView"].value = camera.matrixWorldInverse;
    }

    var time = Date.now() * 0.0005;
    // update lights
    var lightPosition = lightNode.children[0].material.uniforms["lightPos"].value;
    lightPosition.x = Math.sin( time * 0.7 ) * 30;
    lightPosition.y = Math.cos( time * 0.5 ) * 40;
    lightPosition.z = Math.cos( time * 0.3 ) * 30;
    lightNode.children[0].emitter.position = lightPosition;

    lightPosition = lightNode.children[1].material.uniforms["lightPos"].value;
    lightPosition.x = Math.sin( time * 0.5 ) * 30;
    lightPosition.y = Math.cos( time * 0.5 ) * 40;
    lightPosition.z = Math.cos( time * 0.7 ) * 30;
    lightNode.children[1].emitter.position = lightPosition;

    lightPosition = lightNode.children[2].material.uniforms["lightPos"].value;
    lightPosition.x = Math.sin( time * 0.7 ) * 30;
    lightPosition.y = Math.cos( time * 0.3 ) * 40;
    lightPosition.z = Math.cos( time * 0.5 ) * 30;
    lightNode.children[2].emitter.position = lightPosition;

    lightPosition = lightNode.children[3].material.uniforms["lightPos"].value;
    lightPosition.x = Math.sin( time * 0.3 ) * 30;
    lightPosition.y = Math.cos( time * 0.7 ) * 40;
    lightPosition.z = Math.cos( time * 0.5 ) * 30;
    lightNode.children[3].emitter.position = lightPosition;

    compLightBuffer.render();

    // -----------------------------
    // composite pass
    compFinal.render();
}

// -----------------------------
// entry point
var binLoader = new THREE.BinaryLoader();
binLoader.load( "assets/models/waltdisney.js", function(geometry) {
    bootstrap();
    initScene(geometry);
    initMaterials();
    initLights();
    createRenderTargets();
    animate();
});

</script>

</html>