Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 c0ac091d 编写于 作者: M Mr.doob
浏览文件
操作

Merging with @alteredq's branch.

上级 0a719bab
隐藏空白更改
内联 并排
Showing with 162 addition and 40 deletion
examples/webgl_lights_deferred_pointlights.html
浏览文件 @ c0ac091d
......@@ -13,7 +13,7 @@
#info {
position: absolute;
top: 0px; width: 100%;
top: 20px; width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
......@@ -29,14 +29,19 @@
a:hover {
color: #0080ff;
}
#stats { position: absolute; top:10px; left: 5px }
#stats #fps { background: transparent !important }
#stats #fps #fpsText { color: #aaa !important }
#stats #fps #fpsGraph { display: none }
</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>
<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> -
<a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a> head -
light attenuation formula by <a href="http://imdoingitwrong.wordpress.com/tag/glsl/" target=_blank>Tom Madams</a>
</div>
<div id="container"></div>
......@@ -47,6 +52,7 @@
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/FXAAShader.js"></script>
<script src="js/shaders/ColorCorrectionShader.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
......@@ -55,24 +61,36 @@
<script src="js/controls/TrackballControls.js"></script>
<script src="js/loaders/ctm/lzma.js"></script>
<script src="js/loaders/ctm/ctm.js"></script>
<script src="js/loaders/ctm/CTMLoader.js"></script>
<!--
<script src="js/loaders/UTF8Loader.js"></script>
<script src="js/loaders/MTLLoader.js"></script>
-->
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCALE = 0.75;
var MARGIN = 100;
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var HEIGHT = window.innerHeight - 2 * MARGIN;
var NEAR = 1.0, FAR = 250.0;
var NEAR = 1.0, FAR = 350.0;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH / HEIGHT;
var mouseX = 0;
var mouseY = 0;
var targetX = 0, targetY = 0;
var angle = 0;
var target = new THREE.Vector3( 0, 0, 0 );
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
// core
var renderer, camera, controls, stats, clock;
......@@ -321,6 +339,9 @@
"vec3 lightDir = lightView - viewPos.xyz;"+
"float dist = length( lightDir );"+
"if ( dist > lightRadius ) discard;" +
"lightDir = normalize( lightDir );"+
"float cutoff = 0.3;"+
......@@ -328,6 +349,7 @@
"float attenuation = 1.0 / ( denom * denom );"+
"attenuation = ( attenuation - cutoff ) / ( 1.0 - cutoff );"+
"attenuation = max( attenuation, 0.0 );"+
"attenuation *= attenuation;"+
"vec3 normal = texture2D( samplerNormals, texCoord ).xyz * 2.0 - 1.0;" +
......@@ -336,7 +358,7 @@
"float diffuseFull = max( dot( normal, lightDir ), 0.0 );" +
"float diffuseHalf = max( 0.5 + 0.5 * dot( normal, lightDir ), 0.0 );" +
"const vec3 wrapRGB = vec3( 0.9, 0.7, 0.7 );"+
"const vec3 wrapRGB = vec3( 0.6, 0.2, 0.2 );"+
"vec3 diffuse = mix( vec3 ( diffuseFull ), vec3( diffuseHalf ), wrapRGB );"+
// simple lighting
......@@ -375,7 +397,6 @@
"color.xyz = albedo.xyz * lightColor * lightIntensity;"+
"color.w = attenuation;"+
"gl_FragColor = color * vec4( diffuse + specular, 1.0 );" +
//"gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.05 );"+
"}";
......@@ -461,8 +482,8 @@
uniforms: {
samplerDepth: { type: "t", value: null },
viewWidth: { type: "f", value: WIDTH },
viewHeight: { type: "f", value: HEIGHT },
viewWidth: { type: "f", value: SCALE * WIDTH },
viewHeight: { type: "f", value: SCALE * HEIGHT },
lightColor: { type: "v3", value: new THREE.Vector3( 0, 0, 0 ) }
},
......@@ -484,8 +505,8 @@
samplerColor: { type: "t", value: 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 },
viewWidth: { type: "f", value: SCALE * WIDTH },
viewHeight: { type: "f", value: SCALE * 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 },
......@@ -521,13 +542,19 @@
renderer.setSize( WIDTH, HEIGHT );
renderer.setClearColorHex( 0x000000, 1 );
renderer.domElement.style.position = "absolute";
renderer.domElement.style.top = MARGIN + "px";
renderer.domElement.style.left = "0px";
var container = document.getElementById( 'container' );
container.appendChild( renderer.domElement );
// scene camera
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
camera.position.z = 125;
camera.position.z = 150;
controls = new THREE.TrackballControls( camera, renderer.domElement );
......@@ -575,20 +602,20 @@
function createRenderTargets() {
var rtParamsFloat = { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, stencilBuffer: false,
var rtParamsFloat = { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, stencilBuffer: false,
format: THREE.RGBAFormat, type: THREE.FloatType };
var rtParamsUByte = { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, stencilBuffer: false,
var rtParamsUByte = { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, stencilBuffer: false,
format: THREE.RGBFormat, type: THREE.UnsignedByteType };
// ----------------------------------------------------------
// g-buffer
// ----------------------------------------------------------
rtNormals = new THREE.WebGLRenderTarget( WIDTH, HEIGHT, rtParamsFloat );
rtDepth = new THREE.WebGLRenderTarget( WIDTH, HEIGHT, rtParamsFloat );
rtColor = new THREE.WebGLRenderTarget( WIDTH, HEIGHT, rtParamsUByte );
rtFinal = new THREE.WebGLRenderTarget( WIDTH, HEIGHT, rtParamsUByte );
rtNormals = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsFloat );
rtDepth = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsFloat );
rtColor = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsUByte );
rtFinal = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsUByte );
rtNormals.generateMipmaps = false;
rtDepth.generateMipmaps = false;
......@@ -612,7 +639,7 @@
// ----------------------------------------------------------
var emitterPass = new THREE.RenderPass( emitterScene, camera );
rtEmitter = new THREE.WebGLRenderTarget( WIDTH, HEIGHT, rtParamsUByte );
rtEmitter = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsUByte );
rtEmitter.generateMipmaps = false;
compEmitter = new THREE.EffectComposer( renderer, rtEmitter );
......@@ -622,7 +649,7 @@
// lighting pass
// ----------------------------------------------------------
rtLightBuffer = new THREE.WebGLRenderTarget( WIDTH, HEIGHT, rtParamsFloat );
rtLightBuffer = new THREE.WebGLRenderTarget( SCALE * WIDTH, SCALE * HEIGHT, rtParamsFloat );
rtLightBuffer.generateMipmaps = false;
var passLight = new THREE.RenderPass( lightScene, camera );
......@@ -634,7 +661,7 @@
lightShader.uniforms[ 'samplerDepth' ].value = compDepth.renderTarget2;
lightShader.uniforms[ 'samplerLightBuffer' ].value = rtLightBuffer;
var geomEmitter = new THREE.SphereGeometry( 0.4, 7, 7 );
var geomEmitter = new THREE.SphereGeometry( 0.7, 7, 7 );
for ( var x = 0; x < numLights; x ++ ) {
......@@ -697,15 +724,20 @@
effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
var width = window.innerWidth || 2;
var height = window.innerHeight || 2;
//effectFXAA.uniforms[ 'resolution' ].value.set( 1 / ( WIDTH ), 1 / ( HEIGHT ) );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / ( SCALE * WIDTH ), 1 / ( SCALE * HEIGHT ) );
//effectFXAA.renderToScreen = true;
var effectColor = new THREE.ShaderPass( THREE.ColorCorrectionShader );
effectColor.renderToScreen = true;
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
effectFXAA.renderToScreen = true;
effectColor.uniforms[ 'powRGB' ].value.set( 1, 1, 1 );
effectColor.uniforms[ 'mulRGB' ].value.set( 2, 2, 2 );
compFinal = new THREE.EffectComposer( renderer, rtFinal );
compFinal.addPass( compositePass );
compFinal.addPass( effectFXAA );
compFinal.addPass( effectColor );
}
......@@ -728,6 +760,15 @@
uniforms.diffuse.value.copy( node.material.color );
uniforms.map.value = node.material.map;
if ( node.material.bumpMap ) {
var offset = node.material.bumpMap.offset;
var repeat = node.material.bumpMap.repeat;
uniforms.offsetRepeat.value.set( offset.x, offset.y, repeat.x, repeat.y );
}
if ( node.material.transparent ) {
material.alphaTest = 0.1;
......@@ -805,7 +846,7 @@
function initLights() {
var distance = 20;
var distance = 40;
// front light
......@@ -842,13 +883,33 @@
// -----------------------------
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) * 1;
mouseY = ( event.clientY - windowHalfY ) * 1;
}
// -----------------------------
function animate() {
var delta = clock.getDelta();
requestAnimationFrame( animate );
controls.update( delta );
//controls.update( delta );
targetX = mouseX * .001;
targetY = mouseY * .001;
angle += 0.05 * ( targetX - angle );
camera.position.x = -Math.sin( angle ) * 150;
camera.position.z = Math.cos( angle ) * 150;
camera.lookAt( target );
stats.update();
render();
......@@ -938,7 +999,7 @@
}
var time = Date.now() * 0.0002;
var time = Date.now() * 0.0005;
// update lights
......@@ -948,9 +1009,9 @@
if ( i > 0 ) {
x = Math.sin( time + i * 0.175 ) * 20;
y = Math.cos( time + i * 0.153 ) * 30;
z = Math.cos( time + i * 0.137 ) * 20;
x = Math.sin( time + i * 1.7 ) * 80;
y = Math.cos( time + i * 1.5 ) * 40;
z = Math.cos( time + i * 1.3 ) * 30;
} else {
......@@ -979,7 +1040,7 @@
// composite pass
// -----------------------------
compFinal.render();
compFinal.render( 0.1 );
}
......@@ -992,10 +1053,9 @@
initLights();
createRenderTargets();
/*
var loader = new THREE.UTF8Loader();
/*
loader.load( "models/utf8/ben_dds.js", function ( object ) {
initScene( object, -75, 150 );
......@@ -1024,15 +1084,77 @@
mapHeight.anisotropy = 4;
mapHeight.format = THREE.RGBFormat;
var material = new THREE.MeshPhongMaterial( { map: mapColor, bumpMap: mapHeight, bumpScale: 1.5 } );
var material = new THREE.MeshPhongMaterial( { map: mapColor, bumpMap: mapHeight, bumpScale: 2.5 } );
var object = new THREE.Mesh( geometry, material );
// box
var mapHeight2 = THREE.ImageUtils.loadTexture( "obj/lightmap/rocks.jpg" );
mapHeight2.repeat.set( 3, 1.5 );
mapHeight2.wrapS = mapHeight2.wrapT = THREE.RepeatWrapping;
mapHeight2.anisotropy = 4;
mapHeight2.format = THREE.RGBFormat;
var mapHeight3 = THREE.ImageUtils.loadTexture( "textures/water.jpg" );
mapHeight3.repeat.set( 16, 8 );
mapHeight3.wrapS = mapHeight3.wrapT = THREE.RepeatWrapping;
mapHeight3.anisotropy = 4;
mapHeight3.format = THREE.RGBFormat;
var geoPlane = new THREE.PlaneGeometry( 40, 20 );
var matPlane = new THREE.MeshPhongMaterial( { color: 0xffffff, bumpMap: mapHeight2, bumpScale: 0.5 } );
var matPlane2 = new THREE.MeshPhongMaterial( { color: 0x331919, bumpMap: mapHeight2, bumpScale: 1 } );
var matPlane3 = new THREE.MeshPhongMaterial( { color: 0xffffff, bumpMap: mapHeight3, bumpScale: 1 } );
// bottom
var mesh = new THREE.Mesh( geoPlane, matPlane2 );
mesh.position.z = -2;
mesh.position.y = -6;
mesh.rotation.x = -Math.PI/2;
object.add( mesh );
// top
var mesh = new THREE.Mesh( geoPlane, matPlane3 );
mesh.position.z = -2;
mesh.position.y = 6;
mesh.rotation.x = Math.PI/2;
object.add( mesh );
// back
var mesh = new THREE.Mesh( geoPlane, matPlane );
mesh.position.z = -4;
mesh.position.y = 0;
object.add( mesh );
// right
var mesh = new THREE.Mesh( geoPlane, matPlane );
mesh.position.z = 0;
mesh.position.y = 0;
mesh.position.x = 13;
mesh.rotation.y = -Math.PI/2;
//object.add( mesh );
// left
var mesh = new THREE.Mesh( geoPlane, matPlane );
mesh.position.z = 0;
mesh.position.y = 0;
mesh.position.x = -13;
mesh.rotation.y = Math.PI/2;
//object.add( mesh );
initScene( object, 0, 8 );
animate();
} );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
</script>
</body>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或