Skip to content

Commit

Permalink
Merge pull request #7973 from Mugen87/dev
Browse files Browse the repository at this point in the history 
Refactor example: webgl_shading_physical
  • Loading branch information
@mrdoob
mrdoob committed Jan 15, 2016
2 parents 110fea8 + 1e09636 commit 16df8f4
Showing 1 changed file with 56 additions and 64 deletions.
120 changes: 56 additions & 64 deletions examples/webgl_shading_physical.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@

var mixer;

var parameters, tweenDirection, tweenDay, tweenNight;
var parameters, tweenDay, tweenNight;

var clock = new THREE.Clock();

var gui, shadowConfig = {
var gui, shadowCameraHelper, shadowConfig = {

shadowCameraVisible: false,
shadowCameraNear: 750,
Expand All @@ -78,6 +78,10 @@

};

var lightingConfig = {
daylight: false
}

init();
animate();

Expand All @@ -102,18 +106,18 @@

// TEXTURES

var textureSquares = THREE.ImageUtils.loadTexture( "textures/patterns/bright_squares256.png" );
var textureSquares = new THREE.TextureLoader().load( "textures/patterns/bright_squares256.png" );
textureSquares.repeat.set( 50, 50 );
textureSquares.wrapS = textureSquares.wrapT = THREE.RepeatWrapping;
textureSquares.magFilter = THREE.NearestFilter;
textureSquares.format = THREE.RGBFormat;

var textureNoiseColor = THREE.ImageUtils.loadTexture( "textures/disturb.jpg" );
var textureNoiseColor = new THREE.TextureLoader().load( "textures/disturb.jpg" );
textureNoiseColor.repeat.set( 1, 1 );
textureNoiseColor.wrapS = textureNoiseColor.wrapT = THREE.RepeatWrapping;
textureNoiseColor.format = THREE.RGBFormat;

var textureLava = THREE.ImageUtils.loadTexture( "textures/lava/lavatile.jpg" );
var textureLava = new THREE.TextureLoader().load( "textures/lava/lavatile.jpg" );
textureLava.repeat.set( 6, 2 );
textureLava.wrapS = textureLava.wrapT = THREE.RepeatWrapping;
textureLava.format = THREE.RGBFormat;
Expand All @@ -128,7 +132,7 @@
path + 'pz' + format, path + 'nz' + format
];

var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
var reflectionCube = new THREE.CubeTextureLoader().load( urls );

// GROUND

Expand All @@ -150,18 +154,6 @@

// MATERIALS

var shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].texture = cubeCamera.renderTarget;
shader.uniforms[ "tFlip" ].value = 1;

var materialCube = new THREE.ShaderMaterial( {

fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms

} );

var materialLambert = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, map: textureNoiseColor } );
var materialPhong = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, map: textureLava } );
var materialPhongCube = new THREE.MeshPhongMaterial( { shininess: 50, color: 0xffffff, specular: 0x999999, envMap: cubeCamera.renderTarget } );
Expand Down Expand Up @@ -279,16 +271,20 @@

sunLight.castShadow = true;

sunLight.shadowBias = -0.0002;
sunLight.shadow.bias = shadowConfig.shadowBias;

sunLight.shadowCameraNear = 750;
sunLight.shadowCameraFar = 4000;
sunLight.shadowCameraFov = 30;

sunLight.shadowCameraVisible = false;
sunLight.shadow.camera.far = shadowConfig.shadowCameraFar;
sunLight.shadow.camera.near = shadowConfig.shadowCameraNear;
sunLight.shadow.camera.fov = shadowConfig.shadowCameraFov;

scene.add( sunLight );

// SHADOW CAMERA HELPER

shadowCameraHelper = new THREE.CameraHelper( sunLight.shadow.camera );
shadowCameraHelper.visible = shadowConfig.shadowCameraVisible;
scene.add( shadowCameraHelper );

// RENDERER

renderer = new THREE.WebGLRenderer( { antialias: true } );
Expand Down Expand Up @@ -333,100 +329,96 @@
// EVENTS

window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener( 'keydown', onKeyDown, false );

// TWEEN

parameters = { control: 0 };

tweenDirection = -1;

tweenDay = new TWEEN.Tween( parameters ).to( { control: 1 }, 1000 ).easing( TWEEN.Easing.Exponential.Out );
tweenNight = new TWEEN.Tween( parameters ).to( { control: 0 }, 1000 ).easing( TWEEN.Easing.Exponential.Out );

// GUI

gui = new dat.GUI();
gui = new dat.GUI( { width: 400 } );

shadowGUI = gui.addFolder( "Shadow" );
// SHADOW

shadowGUI.add( shadowConfig, 'shadowCameraVisible' ).onChange( function() {
var shadowGUI = gui.addFolder( "Shadow" );

sunLight.shadowCameraVisible = shadowConfig.shadowCameraVisible;
shadowGUI.add( shadowConfig, 'shadowCameraVisible' ).onChange( function() {

shadowCameraHelper.visible = shadowConfig.shadowCameraVisible;

});

shadowGUI.add( shadowConfig, 'shadowCameraNear', 1, 1500 ).onChange( function() {

sunLight.shadowCamera.near = shadowConfig.shadowCameraNear;
sunLight.shadowCamera.updateProjectionMatrix();
sunLight.shadow.camera.near = shadowConfig.shadowCameraNear;
sunLight.shadow.camera.updateProjectionMatrix();
shadowCameraHelper.update();

});

shadowGUI.add( shadowConfig, 'shadowCameraFar', 1501, 5000 ).onChange( function() {

sunLight.shadowCamera.far = shadowConfig.shadowCameraFar;
sunLight.shadowCamera.updateProjectionMatrix();
sunLight.shadow.camera.far = shadowConfig.shadowCameraFar;
sunLight.shadow.camera.updateProjectionMatrix();
shadowCameraHelper.update();

});

shadowGUI.add( shadowConfig, 'shadowCameraFov', 1, 120 ).onChange( function() {

sunLight.shadowCamera.fov = shadowConfig.shadowCameraFov;
sunLight.shadowCamera.updateProjectionMatrix();
sunLight.shadow.camera.fov = shadowConfig.shadowCameraFov;
sunLight.shadow.camera.updateProjectionMatrix();
shadowCameraHelper.update();

});

shadowGUI.add( shadowConfig, 'shadowBias', -0.01, 0.01 ).onChange( function() {

sunLight.shadowBias = shadowConfig.shadowBias;
sunLight.shadow.bias = shadowConfig.shadowBias;

});

shadowGUI.open();

}
// LIGHTING

//
var lightingGUI = gui.addFolder( "Lighting" );

function onWindowResize( event ) {
lightingGUI.add( lightingConfig, 'daylight' ).onChange( function() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
// change between day and night

renderer.setSize( window.innerWidth, window.innerHeight );

controls.handleResize();

}

//
if( lightingConfig.daylight === true ) {

function onKeyDown ( event ) {
tweenNight.stop();
tweenDay.start();

switch ( event.keyCode ) {
} else {

case 78: /*N*/
tweenDay.stop();
tweenNight.start();

if ( tweenDirection == 1 ) {
};

tweenDay.stop();
tweenNight.start();
});

tweenDirection = -1;
lightingGUI.open();

} else {
}

tweenNight.stop();
tweenDay.start();
//

tweenDirection = 1;
function onWindowResize( event ) {

}
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

break;
renderer.setSize( window.innerWidth, window.innerHeight );

}
controls.handleResize();

}

Expand Down

0 comments on commit 16df8f4

Please sign in to comment.