提交 5a72c20a 编写于 作者: M Mr.doob

Examples clean up.

上级 dcc7affe
function Transition ( sceneA, sceneB ) {
this.scene = new THREE.Scene();
this.cameraOrtho = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10, 10 );
this.textures = [];
for ( var i = 0; i < 6; i ++ )
this.textures[ i ] = new THREE.ImageUtils.loadTexture( 'textures/transition/transition' + ( i + 1 ) + '.png' );
this.quadmaterial = new THREE.ShaderMaterial( {
uniforms: {
......@@ -56,7 +56,7 @@ function Transition ( sceneA, sceneB ) {
"uniform sampler2D tDiffuse1;",
"uniform sampler2D tDiffuse2;",
"uniform sampler2D tMixTexture;",
"uniform int useTexture;",
"uniform float threshold;",
......@@ -66,18 +66,18 @@ function Transition ( sceneA, sceneB ) {
"vec4 texel1 = texture2D( tDiffuse1, vUv );",
"vec4 texel2 = texture2D( tDiffuse2, vUv );",
"if (useTexture==1) {",
"vec4 transitionTexel = texture2D( tMixTexture, vUv );",
"float r = mixRatio * (1.0 + threshold * 2.0) - threshold;",
"float mixf=clamp((transitionTexel.r - r)*(1.0/threshold), 0.0, 1.0);",
"gl_FragColor = mix( texel1, texel2, mixf );",
"} else {",
"gl_FragColor = mix( texel2, texel1, mixRatio );",
"}",
"}"
......@@ -86,7 +86,7 @@ function Transition ( sceneA, sceneB ) {
} );
quadgeometry = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
this.quad = new THREE.Mesh( quadgeometry, this.quadmaterial );
this.scene.add( this.quad );
......@@ -98,33 +98,33 @@ function Transition ( sceneA, sceneB ) {
this.quadmaterial.uniforms.tDiffuse2.value = sceneB.fbo;
this.needChange = false;
this.setTextureThreshold = function ( value ) {
this.quadmaterial.uniforms.threshold.value = value;
};
this.useTexture = function ( value ) {
this.quadmaterial.uniforms.useTexture.value = value ? 1 : 0;
};
this.setTexture = function ( i ) {
this.quadmaterial.uniforms.tMixTexture.value = this.textures[ i ];
};
this.render = function( delta ) {
// Transition animation
if ( transitionParams.animateTransition ) {
var t = ( 1 + Math.sin( transitionParams.transitionSpeed * clock.getElapsedTime() / Math.PI ) ) / 2;
transitionParams.transition = THREE.Math.smoothstep( t, 0.3, 0.7 );
// Change the current alpha texture after each transition
if ( transitionParams.loopTexture && ( transitionParams.transition == 0 || transitionParams.transition == 1 ) ) {
......@@ -138,24 +138,24 @@ function Transition ( sceneA, sceneB ) {
} else
this.needChange = true;
}
this.quadmaterial.uniforms.mixRatio.value = transitionParams.transition;
// Prevent render both scenes when it's not necessary
if ( transitionParams.transition == 0 ) {
this.sceneB.render( delta, false );
} else if ( transitionParams.transition == 1 ) {
this.sceneA.render( delta, false );
} else {
// When 0<transition<1 render transition between two scenes
this.sceneA.render( delta, true );
this.sceneB.render( delta, true );
renderer.render( this.scene, this.cameraOrtho, null, true );
......
......@@ -123,6 +123,7 @@
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x101010 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -101,6 +101,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0xf0f0f0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );
......
......@@ -99,8 +99,9 @@
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( canvasWidth, canvasHeight );
renderer.setClearColor( 0xAAAAAA );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( canvasWidth, canvasHeight );
renderer.gammaInput = true;
renderer.gammaOutput = true;
container.appendChild( renderer.domElement );
......
......@@ -82,6 +82,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x333333 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......
......@@ -81,6 +81,7 @@
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x999999 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......
......@@ -79,6 +79,7 @@
// END Clara.io JSON loader code
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
......@@ -164,7 +164,9 @@
var effectColor = new THREE.ShaderPass( THREE.ColorCorrectionShader );
effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
var canvas = renderer.context.canvas;
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / canvas.width, 1 / canvas.height );
effectBleach.uniforms[ 'opacity' ].value = 0.4;
......
......@@ -39,7 +39,7 @@ Spiral sampling http://web.archive.org/web/20120421191837/http://www.cgafaq.info
</style>
</head>
<body>
<script src="../build/three.js"></script>
<script src="../build/three.min.js"></script>
<script src="js/shaders/SSAOShader.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
......
......@@ -214,6 +214,7 @@
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( new THREE.Color( 0xEEEEEE, 1.0 ) );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( width, height );
container.appendChild( renderer.domElement );
......
......@@ -155,8 +155,9 @@
function initMisc() {
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x000000 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
......
......@@ -66,6 +66,7 @@
function init() {
renderer.setClearColor( 'rgb(0,150,255)' );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
document.getElementById( "container" ).appendChild( renderer.domElement );
window.addEventListener( 'resize' , onWindowResize, false );
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册