|
@@ -243,106 +243,116 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
|
|
|
|
|
|
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
|
|
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
|
|
|
|
|
|
- if ( this.selectedObjects.length === 0 ) return;
|
|
|
|
|
|
+ if ( this.selectedObjects.length > 0 ) {
|
|
|
|
|
|
- this.oldClearColor.copy( renderer.getClearColor() );
|
|
|
|
- this.oldClearAlpha = renderer.getClearAlpha();
|
|
|
|
- var oldAutoClear = renderer.autoClear;
|
|
|
|
|
|
+ this.oldClearColor.copy( renderer.getClearColor() );
|
|
|
|
+ this.oldClearAlpha = renderer.getClearAlpha();
|
|
|
|
+ var oldAutoClear = renderer.autoClear;
|
|
|
|
|
|
- renderer.autoClear = false;
|
|
|
|
|
|
+ renderer.autoClear = false;
|
|
|
|
|
|
- if ( maskActive ) renderer.context.disable( renderer.context.STENCIL_TEST );
|
|
|
|
|
|
+ if ( maskActive ) renderer.context.disable( renderer.context.STENCIL_TEST );
|
|
|
|
|
|
- renderer.setClearColor( 0xffffff, 1 );
|
|
|
|
|
|
+ renderer.setClearColor( 0xffffff, 1 );
|
|
|
|
|
|
- // Make selected objects invisible
|
|
|
|
- this.changeVisibilityOfSelectedObjects( false );
|
|
|
|
|
|
+ // Make selected objects invisible
|
|
|
|
+ this.changeVisibilityOfSelectedObjects( false );
|
|
|
|
|
|
- var currentBackground = this.renderScene.background;
|
|
|
|
- this.renderScene.background = null;
|
|
|
|
|
|
+ var currentBackground = this.renderScene.background;
|
|
|
|
+ this.renderScene.background = null;
|
|
|
|
|
|
- // 1. Draw Non Selected objects in the depth buffer
|
|
|
|
- this.renderScene.overrideMaterial = this.depthMaterial;
|
|
|
|
- renderer.render( this.renderScene, this.renderCamera, this.renderTargetDepthBuffer, true );
|
|
|
|
|
|
+ // 1. Draw Non Selected objects in the depth buffer
|
|
|
|
+ this.renderScene.overrideMaterial = this.depthMaterial;
|
|
|
|
+ renderer.render( this.renderScene, this.renderCamera, this.renderTargetDepthBuffer, true );
|
|
|
|
|
|
- // Make selected objects visible
|
|
|
|
- this.changeVisibilityOfSelectedObjects( true );
|
|
|
|
|
|
+ // Make selected objects visible
|
|
|
|
+ this.changeVisibilityOfSelectedObjects( true );
|
|
|
|
|
|
- // Update Texture Matrix for Depth compare
|
|
|
|
- this.updateTextureMatrix();
|
|
|
|
|
|
+ // Update Texture Matrix for Depth compare
|
|
|
|
+ this.updateTextureMatrix();
|
|
|
|
|
|
- // Make non selected objects invisible, and draw only the selected objects, by comparing the depth buffer of non selected objects
|
|
|
|
- this.changeVisibilityOfNonSelectedObjects( false );
|
|
|
|
- this.renderScene.overrideMaterial = this.prepareMaskMaterial;
|
|
|
|
- this.prepareMaskMaterial.uniforms[ "cameraNearFar" ].value = new THREE.Vector2( this.renderCamera.near, this.renderCamera.far );
|
|
|
|
- this.prepareMaskMaterial.uniforms[ "depthTexture" ].value = this.renderTargetDepthBuffer.texture;
|
|
|
|
- this.prepareMaskMaterial.uniforms[ "textureMatrix" ].value = this.textureMatrix;
|
|
|
|
- renderer.render( this.renderScene, this.renderCamera, this.renderTargetMaskBuffer, true );
|
|
|
|
- this.renderScene.overrideMaterial = null;
|
|
|
|
- this.changeVisibilityOfNonSelectedObjects( true );
|
|
|
|
|
|
+ // Make non selected objects invisible, and draw only the selected objects, by comparing the depth buffer of non selected objects
|
|
|
|
+ this.changeVisibilityOfNonSelectedObjects( false );
|
|
|
|
+ this.renderScene.overrideMaterial = this.prepareMaskMaterial;
|
|
|
|
+ this.prepareMaskMaterial.uniforms[ "cameraNearFar" ].value = new THREE.Vector2( this.renderCamera.near, this.renderCamera.far );
|
|
|
|
+ this.prepareMaskMaterial.uniforms[ "depthTexture" ].value = this.renderTargetDepthBuffer.texture;
|
|
|
|
+ this.prepareMaskMaterial.uniforms[ "textureMatrix" ].value = this.textureMatrix;
|
|
|
|
+ renderer.render( this.renderScene, this.renderCamera, this.renderTargetMaskBuffer, true );
|
|
|
|
+ this.renderScene.overrideMaterial = null;
|
|
|
|
+ this.changeVisibilityOfNonSelectedObjects( true );
|
|
|
|
|
|
- this.renderScene.background = currentBackground;
|
|
|
|
|
|
+ this.renderScene.background = currentBackground;
|
|
|
|
|
|
- // 2. Downsample to Half resolution
|
|
|
|
- this.quad.material = this.materialCopy;
|
|
|
|
- this.copyUniforms[ "tDiffuse" ].value = this.renderTargetMaskBuffer.texture;
|
|
|
|
- renderer.render( this.scene, this.camera, this.renderTargetMaskDownSampleBuffer, true );
|
|
|
|
|
|
+ // 2. Downsample to Half resolution
|
|
|
|
+ this.quad.material = this.materialCopy;
|
|
|
|
+ this.copyUniforms[ "tDiffuse" ].value = this.renderTargetMaskBuffer.texture;
|
|
|
|
+ renderer.render( this.scene, this.camera, this.renderTargetMaskDownSampleBuffer, true );
|
|
|
|
|
|
- this.tempPulseColor1.copy( this.visibleEdgeColor );
|
|
|
|
- this.tempPulseColor2.copy( this.hiddenEdgeColor );
|
|
|
|
|
|
+ this.tempPulseColor1.copy( this.visibleEdgeColor );
|
|
|
|
+ this.tempPulseColor2.copy( this.hiddenEdgeColor );
|
|
|
|
|
|
- if ( this.pulsePeriod > 0 ) {
|
|
|
|
|
|
+ if ( this.pulsePeriod > 0 ) {
|
|
|
|
|
|
- var scalar = ( 1 + 0.25 ) / 2 + Math.cos( performance.now() * 0.01 / this.pulsePeriod ) * ( 1.0 - 0.25 ) / 2;
|
|
|
|
- this.tempPulseColor1.multiplyScalar( scalar );
|
|
|
|
- this.tempPulseColor2.multiplyScalar( scalar );
|
|
|
|
|
|
+ var scalar = ( 1 + 0.25 ) / 2 + Math.cos( performance.now() * 0.01 / this.pulsePeriod ) * ( 1.0 - 0.25 ) / 2;
|
|
|
|
+ this.tempPulseColor1.multiplyScalar( scalar );
|
|
|
|
+ this.tempPulseColor2.multiplyScalar( scalar );
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 3. Apply Edge Detection Pass
|
|
|
|
+ this.quad.material = this.edgeDetectionMaterial;
|
|
|
|
+ this.edgeDetectionMaterial.uniforms[ "maskTexture" ].value = this.renderTargetMaskDownSampleBuffer.texture;
|
|
|
|
+ this.edgeDetectionMaterial.uniforms[ "texSize" ].value = new THREE.Vector2( this.renderTargetMaskDownSampleBuffer.width, this.renderTargetMaskDownSampleBuffer.height );
|
|
|
|
+ this.edgeDetectionMaterial.uniforms[ "visibleEdgeColor" ].value = this.tempPulseColor1;
|
|
|
|
+ this.edgeDetectionMaterial.uniforms[ "hiddenEdgeColor" ].value = this.tempPulseColor2;
|
|
|
|
+ renderer.render( this.scene, this.camera, this.renderTargetEdgeBuffer1, true );
|
|
|
|
+
|
|
|
|
+ // 4. Apply Blur on Half res
|
|
|
|
+ this.quad.material = this.separableBlurMaterial1;
|
|
|
|
+ this.separableBlurMaterial1.uniforms[ "colorTexture" ].value = this.renderTargetEdgeBuffer1.texture;
|
|
|
|
+ this.separableBlurMaterial1.uniforms[ "direction" ].value = THREE.OutlinePass.BlurDirectionX;
|
|
|
|
+ this.separableBlurMaterial1.uniforms[ "kernelRadius" ].value = this.edgeThickness;
|
|
|
|
+ renderer.render( this.scene, this.camera, this.renderTargetBlurBuffer1, true );
|
|
|
|
+ this.separableBlurMaterial1.uniforms[ "colorTexture" ].value = this.renderTargetBlurBuffer1.texture;
|
|
|
|
+ this.separableBlurMaterial1.uniforms[ "direction" ].value = THREE.OutlinePass.BlurDirectionY;
|
|
|
|
+ renderer.render( this.scene, this.camera, this.renderTargetEdgeBuffer1, true );
|
|
|
|
+
|
|
|
|
+ // Apply Blur on quarter res
|
|
|
|
+ this.quad.material = this.separableBlurMaterial2;
|
|
|
|
+ this.separableBlurMaterial2.uniforms[ "colorTexture" ].value = this.renderTargetEdgeBuffer1.texture;
|
|
|
|
+ this.separableBlurMaterial2.uniforms[ "direction" ].value = THREE.OutlinePass.BlurDirectionX;
|
|
|
|
+ renderer.render( this.scene, this.camera, this.renderTargetBlurBuffer2, true );
|
|
|
|
+ this.separableBlurMaterial2.uniforms[ "colorTexture" ].value = this.renderTargetBlurBuffer2.texture;
|
|
|
|
+ this.separableBlurMaterial2.uniforms[ "direction" ].value = THREE.OutlinePass.BlurDirectionY;
|
|
|
|
+ renderer.render( this.scene, this.camera, this.renderTargetEdgeBuffer2, true );
|
|
|
|
+
|
|
|
|
+ // Blend it additively over the input texture
|
|
|
|
+ this.quad.material = this.overlayMaterial;
|
|
|
|
+ this.overlayMaterial.uniforms[ "maskTexture" ].value = this.renderTargetMaskBuffer.texture;
|
|
|
|
+ this.overlayMaterial.uniforms[ "edgeTexture1" ].value = this.renderTargetEdgeBuffer1.texture;
|
|
|
|
+ this.overlayMaterial.uniforms[ "edgeTexture2" ].value = this.renderTargetEdgeBuffer2.texture;
|
|
|
|
+ this.overlayMaterial.uniforms[ "patternTexture" ].value = this.patternTexture;
|
|
|
|
+ this.overlayMaterial.uniforms[ "edgeStrength" ].value = this.edgeStrength;
|
|
|
|
+ this.overlayMaterial.uniforms[ "edgeGlow" ].value = this.edgeGlow;
|
|
|
|
+ this.overlayMaterial.uniforms[ "usePatternTexture" ].value = this.usePatternTexture;
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );
|
|
|
|
+
|
|
|
|
+ renderer.render( this.scene, this.camera, readBuffer, false );
|
|
|
|
+
|
|
|
|
+ renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );
|
|
|
|
+ renderer.autoClear = oldAutoClear;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- // 3. Apply Edge Detection Pass
|
|
|
|
- this.quad.material = this.edgeDetectionMaterial;
|
|
|
|
- this.edgeDetectionMaterial.uniforms[ "maskTexture" ].value = this.renderTargetMaskDownSampleBuffer.texture;
|
|
|
|
- this.edgeDetectionMaterial.uniforms[ "texSize" ].value = new THREE.Vector2( this.renderTargetMaskDownSampleBuffer.width, this.renderTargetMaskDownSampleBuffer.height );
|
|
|
|
- this.edgeDetectionMaterial.uniforms[ "visibleEdgeColor" ].value = this.tempPulseColor1;
|
|
|
|
- this.edgeDetectionMaterial.uniforms[ "hiddenEdgeColor" ].value = this.tempPulseColor2;
|
|
|
|
- renderer.render( this.scene, this.camera, this.renderTargetEdgeBuffer1, true );
|
|
|
|
-
|
|
|
|
- // 4. Apply Blur on Half res
|
|
|
|
- this.quad.material = this.separableBlurMaterial1;
|
|
|
|
- this.separableBlurMaterial1.uniforms[ "colorTexture" ].value = this.renderTargetEdgeBuffer1.texture;
|
|
|
|
- this.separableBlurMaterial1.uniforms[ "direction" ].value = THREE.OutlinePass.BlurDirectionX;
|
|
|
|
- this.separableBlurMaterial1.uniforms[ "kernelRadius" ].value = this.edgeThickness;
|
|
|
|
- renderer.render( this.scene, this.camera, this.renderTargetBlurBuffer1, true );
|
|
|
|
- this.separableBlurMaterial1.uniforms[ "colorTexture" ].value = this.renderTargetBlurBuffer1.texture;
|
|
|
|
- this.separableBlurMaterial1.uniforms[ "direction" ].value = THREE.OutlinePass.BlurDirectionY;
|
|
|
|
- renderer.render( this.scene, this.camera, this.renderTargetEdgeBuffer1, true );
|
|
|
|
-
|
|
|
|
- // Apply Blur on quarter res
|
|
|
|
- this.quad.material = this.separableBlurMaterial2;
|
|
|
|
- this.separableBlurMaterial2.uniforms[ "colorTexture" ].value = this.renderTargetEdgeBuffer1.texture;
|
|
|
|
- this.separableBlurMaterial2.uniforms[ "direction" ].value = THREE.OutlinePass.BlurDirectionX;
|
|
|
|
- renderer.render( this.scene, this.camera, this.renderTargetBlurBuffer2, true );
|
|
|
|
- this.separableBlurMaterial2.uniforms[ "colorTexture" ].value = this.renderTargetBlurBuffer2.texture;
|
|
|
|
- this.separableBlurMaterial2.uniforms[ "direction" ].value = THREE.OutlinePass.BlurDirectionY;
|
|
|
|
- renderer.render( this.scene, this.camera, this.renderTargetEdgeBuffer2, true );
|
|
|
|
-
|
|
|
|
- // Blend it additively over the input texture
|
|
|
|
- this.quad.material = this.overlayMaterial;
|
|
|
|
- this.overlayMaterial.uniforms[ "maskTexture" ].value = this.renderTargetMaskBuffer.texture;
|
|
|
|
- this.overlayMaterial.uniforms[ "edgeTexture1" ].value = this.renderTargetEdgeBuffer1.texture;
|
|
|
|
- this.overlayMaterial.uniforms[ "edgeTexture2" ].value = this.renderTargetEdgeBuffer2.texture;
|
|
|
|
- this.overlayMaterial.uniforms[ "patternTexture" ].value = this.patternTexture;
|
|
|
|
- this.overlayMaterial.uniforms[ "edgeStrength" ].value = this.edgeStrength;
|
|
|
|
- this.overlayMaterial.uniforms[ "edgeGlow" ].value = this.edgeGlow;
|
|
|
|
- this.overlayMaterial.uniforms[ "usePatternTexture" ].value = this.usePatternTexture;
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );
|
|
|
|
-
|
|
|
|
- renderer.render( this.scene, this.camera, readBuffer, false );
|
|
|
|
-
|
|
|
|
- renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );
|
|
|
|
- renderer.autoClear = oldAutoClear;
|
|
|
|
|
|
+ if ( this.renderToScreen ) {
|
|
|
|
+
|
|
|
|
+ this.quad.material = this.materialCopy;
|
|
|
|
+ this.copyUniforms[ "tDiffuse" ].value = readBuffer.texture;
|
|
|
|
+ renderer.render( this.scene, this.camera );
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
|
|
},
|
|
},
|
|
|
|
|