Addons: Remove `CinematicCamera`. (#29750)

* Addons: Remove `CinematicCamera`.

* E2E: Remove screenshot.

examples/files.json

@@ -8,7 +8,6 @@
 		"webgl_animation_multiple",
 		"webgl_camera",
 		"webgl_camera_array",
-		"webgl_camera_cinematic",
 		"webgl_camera_logarithmicdepthbuffer",
 		"webgl_clipping",
 		"webgl_clipping_advanced",

examples/jsm/Addons.js

@@ -3,8 +3,6 @@ export * from './animation/CCDIKSolver.js';
 export * from './animation/MMDAnimationHelper.js';
 export * from './animation/MMDPhysics.js';
 
-export * from './cameras/CinematicCamera.js';
-
 export { default as WebGL } from './capabilities/WebGL.js';
 
 export * from './controls/ArcballControls.js';

examples/jsm/cameras/CinematicCamera.js

@@ -1,208 +0,0 @@
-import {
-	Mesh,
-	OrthographicCamera,
-	PerspectiveCamera,
-	PlaneGeometry,
-	Scene,
-	ShaderMaterial,
-	UniformsUtils,
-	WebGLRenderTarget
-} from 'three';
-
-import { BokehShader, BokehDepthShader } from '../shaders/BokehShader2.js';
-
-class CinematicCamera extends PerspectiveCamera {
-
-	constructor( fov, aspect, near, far ) {
-
-		super( fov, aspect, near, far );
-
-		this.type = 'CinematicCamera';
-
-		this.postprocessing = { enabled: true };
-		this.shaderSettings = {
-			rings: 3,
-			samples: 4
-		};
-
-		const depthShader = BokehDepthShader;
-
-		this.materialDepth = new ShaderMaterial( {
-			uniforms: depthShader.uniforms,
-			vertexShader: depthShader.vertexShader,
-			fragmentShader: depthShader.fragmentShader
-		} );
-
-		this.materialDepth.uniforms[ 'mNear' ].value = near;
-		this.materialDepth.uniforms[ 'mFar' ].value = far;
-
-		// In case of cinematicCamera, having a default lens set is important
-		this.setLens();
-
-		this.initPostProcessing();
-
-	}
-
-	// providing fnumber and coc(Circle of Confusion) as extra arguments
-	// In case of cinematicCamera, having a default lens set is important
-	// if fnumber and coc are not provided, cinematicCamera tries to act as a basic PerspectiveCamera
-	setLens( focalLength = 35, filmGauge = 35, fNumber = 8, coc = 0.019 ) {
-
-		this.filmGauge = filmGauge;
-
-		this.setFocalLength( focalLength );
-
-		this.fNumber = fNumber;
-		this.coc = coc;
-
-		// fNumber is focalLength by aperture
-		this.aperture = focalLength / this.fNumber;
-
-		// hyperFocal is required to calculate depthOfField when a lens tries to focus at a distance with given fNumber and focalLength
-		this.hyperFocal = ( focalLength * focalLength ) / ( this.aperture * this.coc );
-
-	}
-
-	linearize( depth ) {
-
-		const zfar = this.far;
-		const znear = this.near;
-		return - zfar * znear / ( depth * ( zfar - znear ) - zfar );
-
-	}
-
-	smoothstep( near, far, depth ) {
-
-		const x = this.saturate( ( depth - near ) / ( far - near ) );
-		return x * x * ( 3 - 2 * x );
-
-	}
-
-	saturate( x ) {
-
-		return Math.max( 0, Math.min( 1, x ) );
-
-	}
-
-	// function for focusing at a distance from the camera
-	focusAt( focusDistance = 20 ) {
-
-		const focalLength = this.getFocalLength();
-
-		// distance from the camera (normal to frustrum) to focus on
-		this.focus = focusDistance;
-
-		// the nearest point from the camera which is in focus (unused)
-		this.nearPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal + ( this.focus - focalLength ) );
-
-		// the farthest point from the camera which is in focus (unused)
-		this.farPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal - ( this.focus - focalLength ) );
-
-		// the gap or width of the space in which is everything is in focus (unused)
-		this.depthOfField = this.farPoint - this.nearPoint;
-
-		// Considering minimum distance of focus for a standard lens (unused)
-		if ( this.depthOfField < 0 ) this.depthOfField = 0;
-
-		this.sdistance = this.smoothstep( this.near, this.far, this.focus );
-
-		this.ldistance = this.linearize( 1 -	this.sdistance );
-
-		this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = this.ldistance;
-
-	}
-
-	initPostProcessing() {
-
-		if ( this.postprocessing.enabled ) {
-
-			this.postprocessing.scene = new Scene();
-
-			this.postprocessing.camera = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,	window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
-
-			this.postprocessing.scene.add( this.postprocessing.camera );
-
-			this.postprocessing.rtTextureDepth = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
-			this.postprocessing.rtTextureColor = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
-
-			const bokeh_shader = BokehShader;
-
-			this.postprocessing.bokeh_uniforms = UniformsUtils.clone( bokeh_shader.uniforms );
-
-			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;
-
-			this.postprocessing.bokeh_uniforms[ 'fstop' ].value = 2.8;
-
-			this.postprocessing.bokeh_uniforms[ 'showFocus' ].value = 1;
-
-			this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = 0.1;
-
-			//console.log( this.postprocessing.bokeh_uniforms[ "focalDepth" ].value );
-
-			this.postprocessing.bokeh_uniforms[ 'znear' ].value = this.near;
-			this.postprocessing.bokeh_uniforms[ 'zfar' ].value = this.near;
-
-
-			this.postprocessing.bokeh_uniforms[ 'textureWidth' ].value = window.innerWidth;
-
-			this.postprocessing.bokeh_uniforms[ 'textureHeight' ].value = window.innerHeight;
-
-			this.postprocessing.materialBokeh = new ShaderMaterial( {
-				uniforms: this.postprocessing.bokeh_uniforms,
-				vertexShader: bokeh_shader.vertexShader,
-				fragmentShader: bokeh_shader.fragmentShader,
-				defines: {
-					RINGS: this.shaderSettings.rings,
-					SAMPLES: this.shaderSettings.samples,
-					DEPTH_PACKING: 1
-				}
-			} );
-
-			this.postprocessing.quad = new Mesh( new PlaneGeometry( window.innerWidth, window.innerHeight ), this.postprocessing.materialBokeh );
-			this.postprocessing.quad.position.z = - 500;
-			this.postprocessing.scene.add( this.postprocessing.quad );
-
-		}
-
-	}
-
-	renderCinematic( scene, renderer ) {
-
-		if ( this.postprocessing.enabled ) {
-
-			const currentRenderTarget = renderer.getRenderTarget();
-
-			renderer.clear();
-
-			// Render scene into texture
-
-			scene.overrideMaterial = null;
-			renderer.setRenderTarget( this.postprocessing.rtTextureColor );
-			renderer.clear();
-			renderer.render( scene, this );
-
-			// Render depth into texture
-
-			scene.overrideMaterial = this.materialDepth;
-			renderer.setRenderTarget( this.postprocessing.rtTextureDepth );
-			renderer.clear();
-			renderer.render( scene, this );
-
-			// Render bokeh composite
-
-			renderer.setRenderTarget( null );
-			renderer.render( this.postprocessing.scene, this.postprocessing.camera );
-
-			renderer.setRenderTarget( currentRenderTarget );
-
-		}
-
-	}
-
-}
-
-export { CinematicCamera };

examples/webgl_camera_cinematic.html

@@ -1,242 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - camera cinematic</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-		<style>
-			body {
-				background-color: #fff;
-				color: #000;
-			}
-			a {
-				color: #08f;
-			}
-		</style>
-	</head>
-	<body>
-
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive cubes
-		</div>
-
-		<script type="importmap">
-			{
-				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/"
-				}
-			}
-		</script>
-
-		<script type="module">
-
-			import * as THREE from 'three';
-
-			import Stats from 'three/addons/libs/stats.module.js';
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-
-			import { CinematicCamera } from 'three/addons/cameras/CinematicCamera.js';
-
-			let camera, scene, raycaster, renderer, stats;
-
-			const mouse = new THREE.Vector2();
-			let INTERSECTED;
-			const radius = 100;
-			let theta = 0;
-
-			init();
-
-			function init() {
-
-				camera = new CinematicCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.setLens( 5 );
-				camera.position.set( 2, 1, 500 );
-
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
-
-				scene.add( new THREE.AmbientLight( 0xffffff ) );
-
-				const light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 1, 1, 1 ).normalize();
-				scene.add( light );
-
-				const geometry = new THREE.BoxGeometry( 20, 20, 20 );
-
-				for ( let i = 0; i < 1500; i ++ ) {
-
-					const object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
-
-					object.position.x = Math.random() * 800 - 400;
-					object.position.y = Math.random() * 800 - 400;
-					object.position.z = Math.random() * 800 - 400;
-
-					scene.add( object );
-
-				}
-
-				raycaster = new THREE.Raycaster();
-
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setAnimationLoop( animate );
-				document.body.appendChild( renderer.domElement );
-
-				stats = new Stats();
-				document.body.appendChild( stats.dom );
-
-				document.addEventListener( 'mousemove', onDocumentMouseMove );
-
-				window.addEventListener( 'resize', onWindowResize );
-
-				const effectController = {
-
-					focalLength: 15,
-					// jsDepthCalculation: true,
-					// shaderFocus: false,
-					//
-					fstop: 2.8,
-					// maxblur: 1.0,
-					//
-					showFocus: false,
-					focalDepth: 3,
-					// manualdof: false,
-					// vignetting: false,
-					// depthblur: false,
-					//
-					// threshold: 0.5,
-					// gain: 2.0,
-					// bias: 0.5,
-					// fringe: 0.7,
-					//
-					// focalLength: 35,
-					// noise: true,
-					// pentagon: false,
-					//
-					// dithering: 0.0001
-
-				};
-
-				const matChanger = function ( ) {
-
-					for ( const e in effectController ) {
-
-						if ( e in camera.postprocessing.bokeh_uniforms ) {
-
-							camera.postprocessing.bokeh_uniforms[ e ].value = effectController[ e ];
-
-						}
-
-					}
-
-					camera.postprocessing.bokeh_uniforms[ 'znear' ].value = camera.near;
-					camera.postprocessing.bokeh_uniforms[ 'zfar' ].value = camera.far;
-					camera.setLens( effectController.focalLength, camera.frameHeight, effectController.fstop, camera.coc );
-					effectController[ 'focalDepth' ] = camera.postprocessing.bokeh_uniforms[ 'focalDepth' ].value;
-
-				};
-
-				//
-
-				const gui = new GUI();
-
-				gui.add( effectController, 'focalLength', 1, 135, 0.01 ).onChange( matChanger );
-				gui.add( effectController, 'fstop', 1.8, 22, 0.01 ).onChange( matChanger );
-				gui.add( effectController, 'focalDepth', 0.1, 100, 0.001 ).onChange( matChanger );
-				gui.add( effectController, 'showFocus', true ).onChange( matChanger );
-
-				matChanger();
-
-			}
-
-			function onWindowResize() {
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-			}
-
-			function onDocumentMouseMove( event ) {
-
-				event.preventDefault();
-
-				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
-
-			}
-
-			function animate() {
-
-				render();
-				stats.update();
-
-			}
-
-
-			function render() {
-
-				theta += 0.1;
-
-				camera.position.x = radius * Math.sin( THREE.MathUtils.degToRad( theta ) );
-				camera.position.y = radius * Math.sin( THREE.MathUtils.degToRad( theta ) );
-				camera.position.z = radius * Math.cos( THREE.MathUtils.degToRad( theta ) );
-				camera.lookAt( scene.position );
-
-				camera.updateMatrixWorld();
-
-				// find intersections
-
-				raycaster.setFromCamera( mouse, camera );
-
-				const intersects = raycaster.intersectObjects( scene.children, false );
-
-				if ( intersects.length > 0 ) {
-
-					const targetDistance = intersects[ 0 ].distance;
-
-					camera.focusAt( targetDistance ); // using Cinematic camera focusAt method
-
-					if ( INTERSECTED != intersects[ 0 ].object ) {
-
-						if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
-
-						INTERSECTED = intersects[ 0 ].object;
-						INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
-						INTERSECTED.material.emissive.setHex( 0xff0000 );
-
-					}
-
-				} else {
-
-					if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
-
-					INTERSECTED = null;
-
-				}
-
-				//
-
-				if ( camera.postprocessing.enabled ) {
-
-					camera.renderCinematic( scene, renderer );
-
-				} else {
-
-					scene.overrideMaterial = null;
-
-					renderer.clear();
-					renderer.render( scene, camera );
-
-				}
-
-			}
-
-		</script>
-
-	</body>
-</html>