Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Examples: use .texture of input render targets. #8787

Merged
merged 2 commits into from May 3, 2016
Merged

Examples: use .texture of input render targets. #8787

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e56b356
Examples: use .texture of input render targets.
vanruesc May 2, 2016
cf7ac19
Assign null instead of undefined.
vanruesc May 3, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 9 additions & 9 deletions examples/js/Mirror.js
View file
Open in desktop
Expand Up @@ -114,8 +114,8 @@ THREE.Mirror = function ( renderer, camera, options ) {

var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };

this.texture = new THREE.WebGLRenderTarget( width, height, parameters );
this.tempTexture = new THREE.WebGLRenderTarget( width, height, parameters );
this.renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );
this.renderTarget2 = new THREE.WebGLRenderTarget( width, height, parameters );

var mirrorShader = THREE.ShaderLib[ "mirror" ];
var mirrorUniforms = THREE.UniformsUtils.clone( mirrorShader.uniforms );
Expand All @@ -128,14 +128,14 @@ THREE.Mirror = function ( renderer, camera, options ) {

} );

this.material.uniforms.mirrorSampler.value = this.texture;
this.material.uniforms.mirrorSampler.value = this.renderTarget.texture;
this.material.uniforms.mirrorColor.value = mirrorColor;
this.material.uniforms.textureMatrix.value = this.textureMatrix;

if ( ! THREE.Math.isPowerOfTwo( width ) || ! THREE.Math.isPowerOfTwo( height ) ) {

this.texture.generateMipmaps = false;
this.tempTexture.generateMipmaps = false;
this.renderTarget.texture.generateMipmaps = false;
this.renderTarget2.texture.generateMipmaps = false;

}

Expand All @@ -159,14 +159,14 @@ THREE.Mirror.prototype.renderWithMirror = function ( otherMirror ) {

// render the other mirror in temp texture
otherMirror.renderTemp();
otherMirror.material.uniforms.mirrorSampler.value = otherMirror.tempTexture;
otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget2.texture;

// render the current mirror
this.render();
this.matrixNeedsUpdate = true;

// restore material and camera of other mirror
otherMirror.material.uniforms.mirrorSampler.value = otherMirror.texture;
otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget.texture;
otherMirror.camera = tempCamera;

// restore texture matrix of other mirror
Expand Down Expand Up @@ -269,7 +269,7 @@ THREE.Mirror.prototype.render = function () {
var visible = this.material.visible;
this.material.visible = false;

this.renderer.render( scene, this.mirrorCamera, this.texture, true );
this.renderer.render( scene, this.mirrorCamera, this.renderTarget, true );

this.material.visible = visible;

Expand All @@ -294,7 +294,7 @@ THREE.Mirror.prototype.renderTemp = function () {

if ( scene !== undefined && scene instanceof THREE.Scene ) {

this.renderer.render( scene, this.mirrorCamera, this.tempTexture, true );
this.renderer.render( scene, this.mirrorCamera, this.renderTarget2, true );

}

Expand Down
28 changes: 14 additions & 14 deletions examples/js/Ocean.js
View file
Open in desktop
Expand Up @@ -172,8 +172,8 @@
} );
// this.materialOcean.wireframe = true;
this.materialOcean.uniforms.u_geometrySize = { type: "f", value: this.resolution };
this.materialOcean.uniforms.u_displacementMap = { type: "t", value: this.displacementMapFramebuffer };
this.materialOcean.uniforms.u_normalMap = { type: "t", value: this.normalMapFramebuffer };
this.materialOcean.uniforms.u_displacementMap = { type: "t", value: this.displacementMapFramebuffer.texture };
this.materialOcean.uniforms.u_normalMap = { type: "t", value: this.normalMapFramebuffer.texture };
this.materialOcean.uniforms.u_oceanColor = { type: "v3", value: this.oceanColor };
this.materialOcean.uniforms.u_skyColor = { type: "v3", value: this.skyColor };
this.materialOcean.uniforms.u_sunDirection = { type: "v3", value: new THREE.Vector3( this.sunDirectionX, this.sunDirectionY, this.sunDirectionZ ) };
Expand Down Expand Up @@ -271,7 +271,7 @@ THREE.Ocean.prototype.renderWavePhase = function () {

}else {

this.materialPhase.uniforms.u_phases.value = this.pingPhase ? this.pingPhaseFramebuffer : this.pongPhaseFramebuffer;
this.materialPhase.uniforms.u_phases.value = this.pingPhase ? this.pingPhaseFramebuffer.texture : this.pongPhaseFramebuffer.texture;

}
this.materialPhase.uniforms.u_deltaTime.value = this.deltaTime;
Expand All @@ -284,10 +284,10 @@ THREE.Ocean.prototype.renderWavePhase = function () {
THREE.Ocean.prototype.renderSpectrum = function () {

this.scene.overrideMaterial = this.materialSpectrum;
this.materialSpectrum.uniforms.u_initialSpectrum.value = this.initialSpectrumFramebuffer;
this.materialSpectrum.uniforms.u_phases.value = this.pingPhase ? this.pingPhaseFramebuffer : this.pongPhaseFramebuffer;
this.materialSpectrum.uniforms.u_choppiness.value = this.choppiness ;
this.materialSpectrum.uniforms.u_size.value = this.size ;
this.materialSpectrum.uniforms.u_initialSpectrum.value = this.initialSpectrumFramebuffer.texture;
this.materialSpectrum.uniforms.u_phases.value = this.pingPhase ? this.pingPhaseFramebuffer.texture : this.pongPhaseFramebuffer.texture;
this.materialSpectrum.uniforms.u_choppiness.value = this.choppiness;
this.materialSpectrum.uniforms.u_size.value = this.size;
this.renderer.render( this.scene, this.oceanCamera, this.spectrumFramebuffer );

};
Expand All @@ -303,19 +303,19 @@ THREE.Ocean.prototype.renderSpectrumFFT = function() {

if ( i === 0 ) {

this.materialOceanHorizontal.uniforms.u_input.value = this.spectrumFramebuffer;
this.materialOceanHorizontal.uniforms.u_input.value = this.spectrumFramebuffer.texture;
this.materialOceanHorizontal.uniforms.u_subtransformSize.value = Math.pow( 2, ( i % ( iterations ) ) + 1 );
this.renderer.render( this.scene, this.oceanCamera, this.pingTransformFramebuffer );

} else if ( i % 2 === 1 ) {

this.materialOceanHorizontal.uniforms.u_input.value = this.pingTransformFramebuffer;
this.materialOceanHorizontal.uniforms.u_input.value = this.pingTransformFramebuffer.texture;
this.materialOceanHorizontal.uniforms.u_subtransformSize.value = Math.pow( 2, ( i % ( iterations ) ) + 1 );
this.renderer.render( this.scene, this.oceanCamera, this.pongTransformFramebuffer );

} else {

this.materialOceanHorizontal.uniforms.u_input.value = this.pongTransformFramebuffer;
this.materialOceanHorizontal.uniforms.u_input.value = this.pongTransformFramebuffer.texture;
this.materialOceanHorizontal.uniforms.u_subtransformSize.value = Math.pow( 2, ( i % ( iterations ) ) + 1 );
this.renderer.render( this.scene, this.oceanCamera, this.pingTransformFramebuffer );

Expand All @@ -327,19 +327,19 @@ THREE.Ocean.prototype.renderSpectrumFFT = function() {

if ( i === iterations * 2 - 1 ) {

this.materialOceanVertical.uniforms.u_input.value = ( iterations % 2 === 0 ) ? this.pingTransformFramebuffer : this.pongTransformFramebuffer;
this.materialOceanVertical.uniforms.u_input.value = ( iterations % 2 === 0 ) ? this.pingTransformFramebuffer.texture : this.pongTransformFramebuffer.texture;
this.materialOceanVertical.uniforms.u_subtransformSize.value = Math.pow( 2, ( i % ( iterations ) ) + 1 );
this.renderer.render( this.scene, this.oceanCamera, this.displacementMapFramebuffer );

} else if ( i % 2 === 1 ) {

this.materialOceanVertical.uniforms.u_input.value = this.pingTransformFramebuffer;
this.materialOceanVertical.uniforms.u_input.value = this.pingTransformFramebuffer.texture;
this.materialOceanVertical.uniforms.u_subtransformSize.value = Math.pow( 2, ( i % ( iterations ) ) + 1 );
this.renderer.render( this.scene, this.oceanCamera, this.pongTransformFramebuffer );

} else {

this.materialOceanVertical.uniforms.u_input.value = this.pongTransformFramebuffer;
this.materialOceanVertical.uniforms.u_input.value = this.pongTransformFramebuffer.texture;
this.materialOceanVertical.uniforms.u_subtransformSize.value = Math.pow( 2, ( i % ( iterations ) ) + 1 );
this.renderer.render( this.scene, this.oceanCamera, this.pingTransformFramebuffer );

Expand All @@ -353,7 +353,7 @@ THREE.Ocean.prototype.renderNormalMap = function () {

this.scene.overrideMaterial = this.materialNormal;
if ( this.changed ) this.materialNormal.uniforms.u_size.value = this.size;
this.materialNormal.uniforms.u_displacementMap.value = this.displacementMapFramebuffer;
this.materialNormal.uniforms.u_displacementMap.value = this.displacementMapFramebuffer.texture;
this.renderer.render( this.scene, this.oceanCamera, this.normalMapFramebuffer, true );

};
12 changes: 6 additions & 6 deletions examples/js/SimulationRenderer.js
View file
Open in desktop
Expand Up @@ -103,10 +103,10 @@ function SimulationRenderer( WIDTH, renderer ) {
rtVelocity2 = rtVelocity1.clone();

simulator.renderTexture( dtPosition, rtPosition1 );
simulator.renderTexture( rtPosition1, rtPosition2 );
simulator.renderTexture( rtPosition1.texture, rtPosition2 );

simulator.renderTexture( dtVelocity, rtVelocity1 );
simulator.renderTexture( rtVelocity1, rtVelocity2 );
simulator.renderTexture( rtVelocity1.texture, rtVelocity2 );

simulator.velocityUniforms.testing.value = 10;

Expand Down Expand Up @@ -168,13 +168,13 @@ function SimulationRenderer( WIDTH, renderer ) {

if ( flipflop ) {

simulator.renderVelocity( rtPosition1, rtVelocity1, rtVelocity2, delta );
simulator.renderPosition( rtPosition1, rtVelocity2, rtPosition2, delta );
simulator.renderVelocity( rtPosition1.texture, rtVelocity1.texture, rtVelocity2, delta );
simulator.renderPosition( rtPosition1.texture, rtVelocity2.texture, rtPosition2, delta );

} else {

simulator.renderVelocity( rtPosition2, rtVelocity2, rtVelocity1, delta );
simulator.renderPosition( rtPosition2, rtVelocity1, rtPosition1, delta );
simulator.renderVelocity( rtPosition2.texture, rtVelocity2.texture, rtVelocity1, delta );
simulator.renderPosition( rtPosition2.texture, rtVelocity1.texture, rtPosition1, delta );

}

Expand Down
20 changes: 11 additions & 9 deletions examples/js/WaterShader.js
View file
Open in desktop
Expand Up @@ -150,9 +150,11 @@ THREE.Water = function ( renderer, camera, scene, options ) {
this.lookAtPosition = new THREE.Vector3( 0, 0, - 1 );
this.clipPlane = new THREE.Vector4();

if ( camera instanceof THREE.PerspectiveCamera )
if ( camera instanceof THREE.PerspectiveCamera ) {

this.camera = camera;
else {

} else {

this.camera = new THREE.PerspectiveCamera();
console.log( this.name + ': camera is not a Perspective Camera!' );
Expand All @@ -163,8 +165,8 @@ THREE.Water = function ( renderer, camera, scene, options ) {

this.mirrorCamera = this.camera.clone();

this.texture = new THREE.WebGLRenderTarget( width, height );
this.tempTexture = new THREE.WebGLRenderTarget( width, height );
this.renderTarget = new THREE.WebGLRenderTarget( width, height );
this.renderTarget2 = new THREE.WebGLRenderTarget( width, height );

var mirrorShader = THREE.ShaderLib[ "water" ];
var mirrorUniforms = THREE.UniformsUtils.clone( mirrorShader.uniforms );
Expand All @@ -178,7 +180,7 @@ THREE.Water = function ( renderer, camera, scene, options ) {
fog: this.fog
} );

this.material.uniforms.mirrorSampler.value = this.texture;
this.material.uniforms.mirrorSampler.value = this.renderTarget.texture;
this.material.uniforms.textureMatrix.value = this.textureMatrix;
this.material.uniforms.alpha.value = this.alpha;
this.material.uniforms.time.value = this.time;
Expand All @@ -192,10 +194,10 @@ THREE.Water = function ( renderer, camera, scene, options ) {

if ( ! THREE.Math.isPowerOfTwo( width ) || ! THREE.Math.isPowerOfTwo( height ) ) {

this.texture.generateMipmaps = false;
this.texture.minFilter = THREE.LinearFilter;
this.tempTexture.generateMipmaps = false;
this.tempTexture.minFilter = THREE.LinearFilter;
this.renderTarget.texture.generateMipmaps = false;
this.renderTarget.texture.minFilter = THREE.LinearFilter;
this.renderTarget2.texture.generateMipmaps = false;
this.renderTarget2.texture.minFilter = THREE.LinearFilter;

}

Expand Down
4 changes: 2 additions & 2 deletions examples/js/cameras/CinematicCamera.js
View file
Open in desktop
Expand Up @@ -123,8 +123,8 @@ THREE.CinematicCamera.prototype.initPostProcessing = function () {

this.postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );

this.postprocessing.bokeh_uniforms[ "tColor" ].value = this.postprocessing.rtTextureColor;
this.postprocessing.bokeh_uniforms[ "tDepth" ].value = this.postprocessing.rtTextureDepth;
this.postprocessing.bokeh_uniforms[ "tColor" ].value = this.postprocessing.rtTextureColor.texture;
this.postprocessing.bokeh_uniforms[ "tDepth" ].value = this.postprocessing.rtTextureDepth.texture;

this.postprocessing.bokeh_uniforms[ "manualdof" ].value = 0;
this.postprocessing.bokeh_uniforms[ "shaderFocus" ].value = 0;
Expand Down
4 changes: 2 additions & 2 deletions examples/js/crossfade/transition.js
View file
Open in desktop
Expand Up @@ -94,8 +94,8 @@ function Transition ( sceneA, sceneB ) {
this.sceneA = sceneA;
this.sceneB = sceneB;

this.quadmaterial.uniforms.tDiffuse1.value = sceneA.fbo;
this.quadmaterial.uniforms.tDiffuse2.value = sceneB.fbo;
this.quadmaterial.uniforms.tDiffuse1.value = sceneA.fbo.texture;
this.quadmaterial.uniforms.tDiffuse2.value = sceneB.fbo.texture;

this.needChange = false;

Expand Down
4 changes: 2 additions & 2 deletions examples/js/effects/AnaglyphEffect.js
View file
Open in desktop
Expand Up @@ -46,8 +46,8 @@ THREE.AnaglyphEffect = function ( renderer, width, height ) {

uniforms: {

"mapLeft": { type: "t", value: _renderTargetL },
"mapRight": { type: "t", value: _renderTargetR },
"mapLeft": { type: "t", value: _renderTargetL.texture },
"mapRight": { type: "t", value: _renderTargetR.texture },

"colorMatrixLeft": { type: "m3", value: this.colorMatrixLeft },
"colorMatrixRight": { type: "m3", value: this.colorMatrixRight }
Expand Down
4 changes: 2 additions & 2 deletions examples/js/effects/ParallaxBarrierEffect.js
View file
Open in desktop
Expand Up @@ -21,8 +21,8 @@ THREE.ParallaxBarrierEffect = function ( renderer ) {

uniforms: {

"mapLeft": { type: "t", value: _renderTargetL },
"mapRight": { type: "t", value: _renderTargetR }
"mapLeft": { type: "t", value: _renderTargetL.texture },
"mapRight": { type: "t", value: _renderTargetR.texture }

},

Expand Down
6 changes: 3 additions & 3 deletions examples/js/pmrem/PMREMCubeUVPacker.js
View file
Open in desktop
Expand Up @@ -32,7 +32,7 @@ THREE.PMREMCubeUVPacker = function( cubeTextureLods, numLods ) {
};

this.CubeUVRenderTarget = new THREE.WebGLRenderTarget( size, size, params );
this.CubeUVRenderTarget.mapping = THREE.CubeUVReflectionMapping;
this.CubeUVRenderTarget.texture.mapping = THREE.CubeUVReflectionMapping;
this.camera = new THREE.OrthographicCamera( - size * 0.5, size * 0.5, - size * 0.5, size * 0.5, 0.0, 1000 );

this.scene = new THREE.Scene();
Expand Down Expand Up @@ -71,8 +71,8 @@ THREE.PMREMCubeUVPacker = function( cubeTextureLods, numLods ) {

// 6 Cube Faces
var material = this.getShader();
material.uniforms[ 'envMap' ].value = this.cubeLods[ i ];
material.envMap = this.cubeLods[ i ]
material.uniforms[ 'envMap' ].value = this.cubeLods[ i ].texture;
material.envMap = this.cubeLods[ i ].texture;
material.uniforms[ 'faceIndex' ].value = k;
material.uniforms[ 'mapSize' ].value = mipSize;
var color = material.uniforms[ 'testColor' ].value;
Expand Down
2 changes: 1 addition & 1 deletion examples/js/pmrem/PMREMGenerator.js
View file
Open in desktop
Expand Up @@ -101,7 +101,7 @@ THREE.PMREMGenerator.prototype = {
this.shader.uniforms[ 'mapSize' ].value = size;
this.renderToCubeMapTarget( renderer, this.cubeLods[ i ] );

if ( i < 5 ) this.shader.uniforms[ 'envMap' ].value = this.cubeLods[ i ];
if ( i < 5 ) this.shader.uniforms[ 'envMap' ].value = this.cubeLods[ i ].texture;

}

Expand Down
16 changes: 8 additions & 8 deletions examples/js/postprocessing/AdaptiveToneMappingPass.js
View file
Open in desktop
Expand Up @@ -146,26 +146,26 @@ THREE.AdaptiveToneMappingPass.prototype = {

//Render the luminance of the current scene into a render target with mipmapping enabled
this.quad.material = this.materialLuminance;
this.materialLuminance.uniforms.tDiffuse.value = readBuffer;
this.materialLuminance.uniforms.tDiffuse.value = readBuffer.texture;
renderer.render( this.scene, this.camera, this.currentLuminanceRT );

//Use the new luminance values, the previous luminance and the frame delta to
//adapt the luminance over time.
this.quad.material = this.materialAdaptiveLum;
this.materialAdaptiveLum.uniforms.delta.value = delta;
this.materialAdaptiveLum.uniforms.lastLum.value = this.previousLuminanceRT;
this.materialAdaptiveLum.uniforms.currentLum.value = this.currentLuminanceRT;
this.materialAdaptiveLum.uniforms.lastLum.value = this.previousLuminanceRT.texture;
this.materialAdaptiveLum.uniforms.currentLum.value = this.currentLuminanceRT.texture;
renderer.render( this.scene, this.camera, this.luminanceRT );

//Copy the new adapted luminance value so that it can be used by the next frame.
this.quad.material = this.materialCopy;
this.copyUniforms.tDiffuse.value = this.luminanceRT;
this.copyUniforms.tDiffuse.value = this.luminanceRT.texture;
renderer.render( this.scene, this.camera, this.previousLuminanceRT );

}

this.quad.material = this.materialToneMap;
this.materialToneMap.uniforms.tDiffuse.value = readBuffer;
this.materialToneMap.uniforms.tDiffuse.value = readBuffer.texture;
renderer.render( this.scene, this.camera, writeBuffer, this.clear );

},
Expand Down Expand Up @@ -204,7 +204,7 @@ THREE.AdaptiveToneMappingPass.prototype = {
if ( this.adaptive ) {

this.materialToneMap.defines[ "ADAPTED_LUMINANCE" ] = "";
this.materialToneMap.uniforms.luminanceMap.value = this.luminanceRT;
this.materialToneMap.uniforms.luminanceMap.value = this.luminanceRT.texture;

}
//Put something in the adaptive luminance texture so that the scene can render initially
Expand All @@ -224,13 +224,13 @@ THREE.AdaptiveToneMappingPass.prototype = {

this.adaptive = true;
this.materialToneMap.defines[ "ADAPTED_LUMINANCE" ] = "";
this.materialToneMap.uniforms.luminanceMap.value = this.luminanceRT;
this.materialToneMap.uniforms.luminanceMap.value = this.luminanceRT.texture;

} else {

this.adaptive = false;
delete this.materialToneMap.defines[ "ADAPTED_LUMINANCE" ];
this.materialToneMap.uniforms.luminanceMap.value = undefined;
this.materialToneMap.uniforms.luminanceMap.value = null;

}
this.materialToneMap.needsUpdate = true;
Expand Down
6 changes: 3 additions & 3 deletions examples/js/postprocessing/BloomPass.js
View file
Open in desktop
Expand Up @@ -87,15 +87,15 @@ THREE.BloomPass.prototype = {

this.quad.material = this.materialConvolution;

this.convolutionUniforms[ "tDiffuse" ].value = readBuffer;
this.convolutionUniforms[ "tDiffuse" ].value = readBuffer.texture;
this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurX;

renderer.render( this.scene, this.camera, this.renderTargetX, true );


// Render quad with blured scene into texture (convolution pass 2)

this.convolutionUniforms[ "tDiffuse" ].value = this.renderTargetX;
this.convolutionUniforms[ "tDiffuse" ].value = this.renderTargetX.texture;
this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurY;

renderer.render( this.scene, this.camera, this.renderTargetY, true );
Expand All @@ -104,7 +104,7 @@ THREE.BloomPass.prototype = {

this.quad.material = this.materialCopy;

this.copyUniforms[ "tDiffuse" ].value = this.renderTargetY;
this.copyUniforms[ "tDiffuse" ].value = this.renderTargetY.texture;

if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );

Expand Down