mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-12-26 04:43:49 +01:00
166 lines
3.7 KiB
JavaScript
166 lines
3.7 KiB
JavaScript
|
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: {
|
||
|
|
||
|
tDiffuse1: {
|
||
|
type: "t",
|
||
|
value: null
|
||
|
},
|
||
|
tDiffuse2: {
|
||
|
type: "t",
|
||
|
value: null
|
||
|
},
|
||
|
mixRatio: {
|
||
|
type: "f",
|
||
|
value: 0.0
|
||
|
},
|
||
|
threshold: {
|
||
|
type: "f",
|
||
|
value: 0.1
|
||
|
},
|
||
|
useTexture: {
|
||
|
type: "i",
|
||
|
value: 1,
|
||
|
},
|
||
|
tMixTexture: {
|
||
|
type: "t",
|
||
|
value: this.textures[0]
|
||
|
}
|
||
|
},
|
||
|
vertexShader: [
|
||
|
|
||
|
"varying vec2 vUv;",
|
||
|
|
||
|
"void main() {",
|
||
|
|
||
|
"vUv = vec2( uv.x, uv.y );",
|
||
|
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
|
||
|
|
||
|
"}"
|
||
|
|
||
|
].join("\n"),
|
||
|
fragmentShader: [
|
||
|
|
||
|
"uniform float mixRatio;",
|
||
|
|
||
|
"uniform sampler2D tDiffuse1;",
|
||
|
"uniform sampler2D tDiffuse2;",
|
||
|
"uniform sampler2D tMixTexture;",
|
||
|
|
||
|
"uniform int useTexture;",
|
||
|
"uniform float threshold;",
|
||
|
|
||
|
"varying vec2 vUv;",
|
||
|
|
||
|
"void main() {",
|
||
|
|
||
|
"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 );",
|
||
|
|
||
|
"}",
|
||
|
"}"
|
||
|
|
||
|
].join("\n")
|
||
|
|
||
|
});
|
||
|
|
||
|
quadgeometry = new THREE.PlaneBufferGeometry(window.innerWidth, window.innerHeight);
|
||
|
|
||
|
this.quad = new THREE.Mesh(quadgeometry, this.quadmaterial);
|
||
|
this.scene.add(this.quad);
|
||
|
|
||
|
// Link both scenes and their FBOs
|
||
|
this.sceneA = sceneA;
|
||
|
this.sceneB = sceneB;
|
||
|
|
||
|
this.quadmaterial.uniforms.tDiffuse1.value = sceneA.fbo;
|
||
|
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))
|
||
|
{
|
||
|
if (this.needChange)
|
||
|
{
|
||
|
transitionParams.texture = (transitionParams.texture + 1)%this.textures.length;
|
||
|
this.quadmaterial.uniforms.tMixTexture.value = this.textures[transitionParams.texture];
|
||
|
this.needChange = false;
|
||
|
}
|
||
|
}
|
||
|
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 );
|
||
|
|
||
|
}
|
||
|
|
||
|
}
|
||
|
}
|