fix: 0

src/examples/jsm/postprocessing/BokehPass3.js

@@ -143,7 +143,6 @@ class BokehPass extends Pass {
 
 		this.originalClearColor = new Color();
 		this.tempColor = new Color();
-		console.log(this.DownSampleRenderTarget)
 	}
 	
 
@@ -181,6 +180,8 @@ class BokehPass extends Pass {
 
 		// render filter
 		this.FileterMaterial.uniforms[ 'tDiffuse' ].value = this.BokehRenderTarget.texture;
+		this.FileterMaterial.uniforms[ 'tCoC' ].value = this.DofCoCRenderTarget.texture;
+
 		this.renderPass( renderer, this.FileterMaterial, this.FilterRenderTarget);
 
 		// render scatter

src/examples/jsm/postprocessing/SSRPass_Blending.js

@@ -6,6 +6,7 @@ import {
 	DataTexture,
 	SrcAlphaFactor,
 	OneMinusSrcAlphaFactor,
+	DepthStencilFormat,
 	OneMinusDstColorFactor,
 	DstAlphaFactor,
 	OneFactor,
@@ -91,14 +92,14 @@ class SSRPass extends Pass {
 
 
 		//ssao
-		this.ssao = false
-		this.kernelRadius = 0.1;
-		this.kernel = [];
-		this.kernelSize = 32;
-    this.depthBiasValue = -0.003;
-		this.rangeStrength = 0.005;
-    this.power = 1.0;
-		this.minDistance = 0.001
+		// this.ssao = false
+		// this.kernelRadius = 0.1;
+		// this.kernel = [];
+		// this.kernelSize = 32;
+    // this.depthBiasValue = -0.003;
+		// this.rangeStrength = 0.005;
+    // this.power = 1.0;
+		// this.minDistance = 0.001
 
 		//hbao
 		 this.hbao = true
@@ -122,6 +123,7 @@ class SSRPass extends Pass {
 
 		// metalness render target
 		const depthTexture = new DepthTexture();
+		depthTexture.format = DepthStencilFormat;
 		depthTexture.type = UnsignedInt248Type;
 
 		this.metalnessRenderTarget = new WebGLMultipleRenderTargets( this.width, this.height, 5, {
@@ -145,7 +147,6 @@ class SSRPass extends Pass {
 
 		// ssr render target
 		this.ssrRenderTarget = new WebGLRenderTarget( this.downSampleResX, this.downSampleResY, { 
-			samples: 0, 
 			type: HalfFloatType, 
 			minFilter: LinearFilter,
 			magFilter: LinearFilter,
@@ -154,12 +155,13 @@ class SSRPass extends Pass {
 
 
 		// ssao render target
-		this.ssaoRenderTarget = new WebGLRenderTarget( this.downSampleResX, this.downSampleResY, { 
-			type: HalfFloatType 
+		this.aoRenderTarget = new WebGLRenderTarget( this.downSampleResX, this.downSampleResY, { 
+			type: HalfFloatType,
+			minFilter: LinearFilter,
+			magFilter: LinearFilter,
 		} );
 
 		this.historyRenderTarget = new WebGLRenderTarget( this.downSampleResX, this.downSampleResY, { 
-			samples: 0, 
 			type: HalfFloatType, 
 			minFilter: LinearFilter,
 			magFilter: LinearFilter,
@@ -197,24 +199,24 @@ class SSRPass extends Pass {
 		this.ssrMaterial.needsUpdate = true;
 
 		//ssao material
-		this.ssaoMaterial = new ShaderMaterial( {
-			defines: Object.assign( {}, SSAOShader.defines ),
-			uniforms: UniformsUtils.clone( SSAOShader.uniforms ),
-			vertexShader: SSAOShader.vertexShader,
-			fragmentShader: SSAOShader.fragmentShader,
-			blending: NoBlending
-		} );
-		this.ssaoMaterial.defines[ 'KERNEL_SIZE' ] = this.kernelSize;
-		this.ssaoMaterial.uniforms[ 'tNormal' ].value = this.metalnessRenderTarget.texture[1];
-		this.ssaoMaterial.uniforms[ 'tDepth' ].value = this.metalnessRenderTarget.depthTexture;
-		this.ssaoMaterial.uniforms[ 'tMetalness' ].value = this.metalnessRenderTarget.texture[2];
-		this.ssaoMaterial.uniforms[ 'tNoise' ].value = this.noiseTexture;
-		this.ssaoMaterial.uniforms[ 'kernel' ].value = this.kernel;
-		this.ssaoMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
-		this.ssaoMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
-		this.ssaoMaterial.uniforms[ 'resolution' ].value.set( this.downSampleResX, this.downSampleResY );
-		this.ssaoMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
-		this.ssaoMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
+		// this.ssaoMaterial = new ShaderMaterial( {
+		// 	defines: Object.assign( {}, SSAOShader.defines ),
+		// 	uniforms: UniformsUtils.clone( SSAOShader.uniforms ),
+		// 	vertexShader: SSAOShader.vertexShader,
+		// 	fragmentShader: SSAOShader.fragmentShader,
+		// 	blending: NoBlending
+		// } );
+		// this.ssaoMaterial.defines[ 'KERNEL_SIZE' ] = this.kernelSize;
+		// this.ssaoMaterial.uniforms[ 'tNormal' ].value = this.metalnessRenderTarget.texture[1];
+		// this.ssaoMaterial.uniforms[ 'tDepth' ].value = this.metalnessRenderTarget.depthTexture;
+		// this.ssaoMaterial.uniforms[ 'tMetalness' ].value = this.metalnessRenderTarget.texture[2];
+		// this.ssaoMaterial.uniforms[ 'tNoise' ].value = this.noiseTexture;
+		// this.ssaoMaterial.uniforms[ 'kernel' ].value = this.kernel;
+		// this.ssaoMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
+		// this.ssaoMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
+		// this.ssaoMaterial.uniforms[ 'resolution' ].value.set( this.downSampleResX, this.downSampleResY );
+		// this.ssaoMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
+		// this.ssaoMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
 
 
 		// hbao
@@ -248,7 +250,7 @@ class SSRPass extends Pass {
 			fragmentShader: SSAODepthShader.fragmentShader,
 			blending: NoBlending
 		})
-		this.ssaoDepthMaterial.uniforms[ 'tDepth' ] = this.ssaoRenderTarget.texture;
+		this.ssaoDepthMaterial.uniforms[ 'tDepth' ] = this.aoRenderTarget.texture;
 		// material for rendering the content of a render target
 
 		this.copyMaterial = new ShaderMaterial( {
@@ -339,19 +341,19 @@ class SSRPass extends Pass {
 
 
 		//render SSAO
-		if(this.ssao) {
-			this.ssaoMaterial.uniforms[ 'kernelRadius' ].value = this.kernelRadius;
-			this.ssaoMaterial.uniforms[ 'minDistance' ].value = this.minDistance;
-			this.ssaoMaterial.uniforms[ 'maxDistance' ].value = 0.5;
-			this.ssaoMaterial.uniforms[ 'power'].value = this.power;
-			this.ssaoMaterial.uniforms[ 'rangeStrength'].value = this.rangeStrength;
-			this.ssaoMaterial.uniforms[ 'depthBiasValue'].value = this.depthBiasValue;
-			this.ssaoMaterial.uniforms[ 'uframe' ].value = this.frame;
-			this.ssaoMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
-			this.ssaoMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
-
-			this.renderPass( renderer, this.ssaoMaterial, this.ssaoRenderTarget );
-		}
+		// if(this.ssao) {
+		// 	this.ssaoMaterial.uniforms[ 'kernelRadius' ].value = this.kernelRadius;
+		// 	this.ssaoMaterial.uniforms[ 'minDistance' ].value = this.minDistance;
+		// 	this.ssaoMaterial.uniforms[ 'maxDistance' ].value = 0.5;
+		// 	this.ssaoMaterial.uniforms[ 'power'].value = this.power;
+		// 	this.ssaoMaterial.uniforms[ 'rangeStrength'].value = this.rangeStrength;
+		// 	this.ssaoMaterial.uniforms[ 'depthBiasValue'].value = this.depthBiasValue;
+		// 	this.ssaoMaterial.uniforms[ 'uframe' ].value = this.frame;
+		// 	this.ssaoMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
+		// 	this.ssaoMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
+
+		// 	this.renderPass( renderer, this.ssaoMaterial, this.aoRenderTarget );
+		// }
 
 		if(this.hbao) {
 			this.hbaoMaterial.uniforms[ 'power' ].value = this.hbaoPower;
@@ -363,7 +365,7 @@ class SSRPass extends Pass {
 			this.hbaoMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
 			this.hbaoMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
 			this.hbaoMaterial.uniforms[ 'cameraProjectionMatrixInverse' ].value.copy( this.camera.projectionMatrixInverse );
-			this.renderPass( renderer, this.hbaoMaterial, this.ssaoRenderTarget );
+			this.renderPass( renderer, this.hbaoMaterial, this.aoRenderTarget );
 		}
 	
 
@@ -384,7 +386,7 @@ class SSRPass extends Pass {
 				}
 			
 				if (this.ssao || this.hbao) {
-					this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssaoRenderTarget.texture;
+					this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.aoRenderTarget.texture;
 					this.copyMaterial.blending = NormalBlending;
 					this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
 				}
@@ -406,7 +408,7 @@ class SSRPass extends Pass {
 				break;
 
 			case SSRPass.OUTPUT.SSAO:
-				this.ssaoDepthMaterial.uniforms[ 'tDepth' ].value = this.ssaoRenderTarget.texture;
+				this.ssaoDepthMaterial.uniforms[ 'tDepth' ].value = this.aoRenderTarget.texture;
 				this.copyMaterial.blending = NoBlending;
 				this.renderPass( renderer, this.ssaoDepthMaterial, this.renderToScreen ? null : writeBuffer );
 
@@ -545,14 +547,14 @@ class SSRPass extends Pass {
 
 		this.metalnessRenderTarget.dispose();
 		this.ssrRenderTarget.dispose();
-		this.ssaoRenderTarget.dispose();
+		this.aoRenderTarget.dispose();
 		this.historyRenderTarget.dispose();
 
 
 		// dispose materials
 
 		this.ssrMaterial.dispose();
-		this.ssaoMaterial.dispose();
+		// this.ssaoMaterial.dispose();
 		this.hbaoMaterial.dispose();
 		this.ssaoDepthMaterial.dispose();
 		this.copyMaterial.dispose();
@@ -573,7 +575,7 @@ class SSRPass extends Pass {
 		// this.ssrMaterial.needsUpdate = true;
 		this.metalnessRenderTarget.setSize( width, height );
 		this.ssrRenderTarget.setSize( this.downSampleResX, this.downSampleResY );
-		this.ssaoRenderTarget.setSize( this.downSampleResX, this.downSampleResY );
+		this.aoRenderTarget.setSize( this.downSampleResX, this.downSampleResY );
 		this.historyRenderTarget.setSize( this.downSampleResX, this.downSampleResY );
 
 
@@ -581,9 +583,9 @@ class SSRPass extends Pass {
 		this.ssrMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
 		this.ssrMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
 
-		this.ssaoMaterial.uniforms[ 'resolution' ].value.set( this.downSampleResX, this.downSampleResY );
-		this.ssaoMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
-		this.ssaoMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
+		// this.ssaoMaterial.uniforms[ 'resolution' ].value.set( this.downSampleResX, this.downSampleResY );
+		// this.ssaoMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
+		// this.ssaoMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
 
 		this.hbaoMaterial.uniforms[ 'resolution' ].value.set( this.downSampleResX, this.downSampleResY );
 		this.hbaoMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );

src/examples/jsm/shaders/SSAOShader2.js

@@ -53,8 +53,8 @@ const SSAOShader = {
 
 	fragmentShader: /* glsl */`
 
-		uniform sampler2D tNormal;
-		uniform sampler2D tDepth;
+		uniform highp sampler2D tNormal;
+		uniform highp sampler2D tDepth;
 		uniform sampler2D tMetalness;
 		uniform sampler2D tNoise;
 
@@ -175,7 +175,9 @@ const SSAOShader = {
 
 		void main() {
 			float depth = getDepth( vUv );
-
+			// float c = getViewZ(depth);
+			// gl_FragColor = vec4(vec3(c * -0.01), 1.0);
+			// return;
 			if ( depth == 1.0 ) {
 				gl_FragColor = vec4( 0.0 ); // don't influence background
 				return;
@@ -291,8 +293,8 @@ const HBAOShader = {
 
 		varying vec2 vUv;
 
-		uniform sampler2D tNormal;
-		uniform sampler2D tDepth;
+		uniform highp sampler2D tNormal;
+		uniform highp sampler2D tDepth;
 		uniform sampler2D tDiffuse;
 		uniform sampler2D tNoise;
 		uniform sampler2D tMetalness;
@@ -416,6 +418,7 @@ const HBAOShader = {
 		
 		void main() {
 			float depth = getDepth(vUv);
+
 			if (depth == 1.0) {
 				gl_FragColor = vec4( 0.0 ); // don't influence background
 				return;
@@ -423,8 +426,8 @@ const HBAOShader = {
 			vec3 viewPos = getViewPosition(vUv, depth);
 			vec3 viewNormal = getViewNormal(vUv);
 			
-			vec2 noiseResolution = vec2(textureSize(tNoise, 0));
-			vec2 noiseUv = vUv * resolution / noiseResolution;
+			// vec2 noiseResolution = vec2(textureSize(tNoise, 0));
+			// vec2 noiseUv = vUv * resolution / noiseResolution;
 			// vec4 noiseTexel = textureLod(tNoise, noiseUv, 0.0);
 			float uvScale = 4.0;
 			float noise = IGN(gl_FragCoord.y * uvScale, gl_FragCoord.x * uvScale, uframe);

src/examples/jsm/shaders/UnrealDofShader1.js

@@ -252,7 +252,7 @@ const BokehShader = {
 
 		void computeAcc(vec2 offset, vec4 center, vec2 texelSize, vec4 basis, inout vec4 bgAcc, inout vec4 fgAcc) {
 			vec2 ofs = 1.0 * vec2(dot(offset, basis.xy), dot(offset, basis.zw));
-			float inPolygon = bladeCount > 9.0 ? 1.0 : polygonSDF(ofs, 1.0, bladeCount);
+			float inPolygon = bladeCount > 9.0 ? 1.0 : polygonSDF(ofs, abs(center.a) / bokehRadius, bladeCount);
 			if(inPolygon == 0.0) {
 				return;
 			}
@@ -413,6 +413,8 @@ const FilterShader = {
 	uniforms: {
 
 		'tDiffuse': { value: null },
+		'tCoC': { value: null },
+
 		'resolution': { value: new Vector2() },
 
 	},
@@ -444,13 +446,17 @@ const FilterShader = {
 		precision highp sampler2D;
 
 		uniform sampler2D tDiffuse;
+		uniform sampler2D tCoC;
 		uniform vec2 resolution;
 
 		varying vec2 vUv;
 		varying vec4 uv01;
 		varying vec4 uv23;
 
-
+		float getCoC(vec2 uv) {
+			vec4 coc = texture2D(tCoC, uv);
+			return coc.r - coc.g;
+		}
 		float GaussWeight2D(float x, float y, float sigma)
 		{
 			float PI = 3.14159265358;
@@ -464,6 +470,7 @@ const FilterShader = {
 		vec4 GaussNxN(sampler2D tex, vec2 uv, int n, vec2 stride, float sigma)
 		{
 				vec4 color = vec4(0.0);
+				float oriCoC = getCoC(uv);
 				int r = n / 2;
 				float weight = 0.0;
 
@@ -473,7 +480,8 @@ const FilterShader = {
 						{
 								float w = GaussWeight2D(float(i), float(j), sigma);
 								vec2 coord = uv + vec2(i, j) * stride;
-								color += texture2D(tex, coord) * w;
+								float diffCoC = 1.0 - abs(abs(getCoC(coord)) - abs(oriCoC)) * 0.5;
+								color += texture2D(tex, coord) * w * diffCoC;
 								weight += w;
 						}
 				}
@@ -492,9 +500,9 @@ const FilterShader = {
 			// vec4 color_3 = texture2D(tDiffuse, uv23.zw);
 			// color = (color_0 + color_1 + color_2 + color_3) /  4.0;
 
-			// vec2 stride = 1.0 / resolution;
-			// vec4 color = GaussNxN(tDiffuse, vUv, 5, stride, 1.0);
-			vec4 color = texture2D(tDiffuse, vUv);
+			vec2 stride = 1.0 / resolution;
+			vec4 color = GaussNxN(tDiffuse, vUv, 5, stride, 1.0);
+			// vec4 color = texture2D(tDiffuse, vUv);
 			gl_FragColor = color;
 
 		}`

src/views/Renderer.vue

@@ -25,7 +25,7 @@
 		import { RGBShiftShader } from '../examples/jsm/shaders/RGBShiftShader.js'
 		import { VignetteShader } from '../examples/jsm/shaders/VignetteShader.js'
 		import { SharpenShader } from '../examples/jsm/shaders/SharpenShader.js'
-		import { BokehPass } from '../examples/jsm/postprocessing/BokehPass3.js'
+		import { BokehPass } from '../examples/jsm/postprocessing/BokehPass3.js';
 		import { BrightnessContrastSaturationShader } from '../examples/jsm/shaders/BrightnessContrastSaturationShader.js'
 		import { ColorBalanceShader } from '../examples/jsm/shaders/ColorBalanceShader.js'
 		import { TexturePass } from '../examples/jsm/postprocessing/TexturePass.js';
@@ -89,7 +89,6 @@
 		let colorPass;
 		let renderPass;
 		let ssrPass;
-		let hbaoPass;
 		let BCSPass;
 		let colorBalancePass;
 		let sharpenPass;
@@ -393,6 +392,7 @@
 			},
 			dof: {
 				enabled: false,
+				focus: {x: 0.5, y: 0.5},
 				aperture: 2,
 				maxblur: 1,
 				dofBlurNearFar: {x: 1, y: 1},
@@ -730,38 +730,32 @@
 			});
 			folderSSR.add(params.ssr, 'thickness').min(0).max(1.0).step(0.01).onChange(() => {
 				ssrPass.thickness = params.ssr.thickness;
-			cameraMove()
-
+				cameraMove()
 			});
 			folderSSR.add(params.ssr, 'maxDistance').min(0).max(100.0).step(.1).onChange(() => {
 				ssrPass.maxDistance = params.ssr.maxDistance;
-			cameraMove()
-
+				cameraMove()
 			});
 			folderSSR.add(params.ssr, 'maxStep').min(0).max(1000).step(1).onChange(() => {
 				ssrPass.maxStep = params.ssr.maxStep
-			cameraMove()
-
+				cameraMove()
 			});
 			folderSSR.add(params.ssr, 'stride').min(0).max(50).step(0.1).onChange(() => {
 				ssrPass.stride = params.ssr.stride;
-			cameraMove()
-
+				cameraMove()
 			})
 			folderSSR.add(params.ssr, 'opacity').min(0).max(1).step(0.01).onChange(() => {
 				ssrPass.opacity = params.ssr.opacity;
-			cameraMove()
-
+				cameraMove()
 			})
 			folderSSR.add(params.ssr, 'useHistoryBuffer').onChange(() => {
 				ssrPass.useHistoryBuffer = params.ssr.useHistoryBuffer;
-			cameraMove()
-
+				cameraMove()
 			}).name('useHistoryBuffer(test)')
 			folderSSR.add(ssrPass, 'stopJitter')
 			// folderSSR.add(ssrPass, 'tt').min(200).max(210).step(1)
 			// folderSSR.add(ssrPass, 'ttt').min(200).max(210).step(1)
-			folderSSR.add(ssrPass,'downSampleFactor').min(0.5).max(1.0).step(0.5).onChange(() => {
+			folderSSR.add(ssrPass,'downSampleFactor').min(0.25).max(1.0).step(0.1).onChange(() => {
 				onWindowResize()
 			})
 
@@ -779,66 +773,55 @@
 
 			// ao
 			const folderAO = gui.addFolder('环境光遮蔽');
-			const folderSSAO = folderAO.addFolder('SSAO');
+			// const folderSSAO = folderAO.addFolder('SSAO');
 			const folderHBAO = folderAO.addFolder('HBAO');
 
 			// ssao
-			folderSSAO.add(params.ssao, 'enabled').name('enabled').onChange(() => {
-				ssrPass.ssao = params.ssao.enabled;
-			cameraMove()
-
-			});
-			folderSSAO.add(params.ssao, 'kernelRadius').min(0).max(1).onChange(() => {
-				ssrPass.kernelRadius = params.ssao.kernelRadius;
-			cameraMove()
-
-			});
-			folderSSAO.add(params.ssao, 'minDistance').min(0.001).max(0.02).onChange(() => {
-				ssrPass.minDistance = params.ssao.minDistance;
-			cameraMove()
-
-			});
-			folderSSAO.add(params.ssao, 'power').min(0.0).max(5.0).onChange(() => {
-				ssrPass.power = params.ssao.power;
-			cameraMove()
-
-			});
-			folderSSAO.add(params.ssao, 'depthBiasValue').min(-0.01).max(0).onChange(() => {
-				ssrPass.depthBiasValue = params.ssao.depthBiasValue;
-			cameraMove()
-
-			});
-			folderSSAO.add(params.ssao, 'rangeStrength').min(0).max(0.01).onChange(() => {
-				ssrPass.rangeStrength = params.ssao.rangeStrength;
-			cameraMove()
-
-			});
+			// folderSSAO.add(params.ssao, 'enabled').name('enabled').onChange(() => {
+			// 	ssrPass.ssao = params.ssao.enabled;
+			// 	cameraMove()
+			// });
+			// folderSSAO.add(params.ssao, 'kernelRadius').min(0).max(1).onChange(() => {
+			// 	ssrPass.kernelRadius = params.ssao.kernelRadius;
+			// 	cameraMove()
+			// });
+			// folderSSAO.add(params.ssao, 'minDistance').min(0.001).max(0.02).onChange(() => {
+			// 	ssrPass.minDistance = params.ssao.minDistance;
+			// 	cameraMove()
+			// });
+			// folderSSAO.add(params.ssao, 'power').min(0.0).max(5.0).onChange(() => {
+			// 	ssrPass.power = params.ssao.power;
+			// 	cameraMove()
+			// });
+			// folderSSAO.add(params.ssao, 'depthBiasValue').min(-0.01).max(0).onChange(() => {
+			// 	ssrPass.depthBiasValue = params.ssao.depthBiasValue;
+			// 	cameraMove()
+			// });
+			// folderSSAO.add(params.ssao, 'rangeStrength').min(0).max(0.01).onChange(() => {
+			// 	ssrPass.rangeStrength = params.ssao.rangeStrength;
+			// 	cameraMove()
+			// });
 
 			// hbao
 			folderHBAO.add(params.hbao, 'enabled').name('enabled').onChange(() => {
 				ssrPass.hbao = params.hbao.enabled;
-			cameraMove()
-
+				cameraMove()
 			})
 			folderHBAO.add(params.hbao, 'power').min(0.0).max(5.0).step(0.01).onChange(() => {
 				ssrPass.hbaoPower = params.hbao.power
-			cameraMove()
-
+				cameraMove()
 			});
 			folderHBAO.add(params.hbao, 'radius').min(0.01).max(10).step(0.01).onChange(() => {
 				ssrPass.hbaoRadius = params.hbao.radius;
-			cameraMove()
-
+				cameraMove()
 			});
 			folderHBAO.add(params.hbao, 'distanceExponent').min(0).max(5).step(0.01).onChange(() => {
 				ssrPass.distanceExponent = params.hbao.distanceExponent;
-			cameraMove()
-
+				cameraMove()
 			});
 			folderHBAO.add(params.hbao, 'bias').min(0).max(0.1).onChange(() => {
 				ssrPass.bias = params.hbao.bias;
-			cameraMove()
-
+				cameraMove()
 			});
 			
 
@@ -882,12 +865,12 @@
 				bokehPass.enabled = params.dof.enabled;
 				cameraMove()
 			});
-			folderDOF.add(params.dof, 'aperture').min(0.1).max(10).step(0.01).onChange(() => {
+			folderDOF.add(params.dof, 'aperture').min(0.01).max(10).step(0.01).onChange(() => {
 				bokehPass.aperture = params.dof.aperture;
 			cameraMove()
 				
 			});
-			folderDOF.add(params.dof, 'maxblur').min(0.1).max(40).step(0.01).onChange(() => {
+			folderDOF.add(params.dof, 'maxblur').min(0.01).max(40).step(0.01).onChange(() => {
 				bokehPass.bokehRadius = params.dof.maxblur;
 				cameraMove()
 			});
@@ -904,9 +887,9 @@
 				bokehPass.bokehPass = params.dof.bokehPass;
 				cameraMove()
 			})
-			// folderDOF.add(bokehPass, 'downSampleFactor').min(0.5).max(1.0).step(0.5).onChange(() => {
-			// 	onWindowResize()
-			// })
+			folderDOF.add(bokehPass, 'downSampleFactor').min(0.5).max(1.0).step(0.5).onChange(() => {
+				onWindowResize()
+			})
 
 			// folderDOF.add(bokehPass.dofBlurNearFar, 'x').min(0).max(1).step(0.001)
 			// folderDOF.add(bokehPass.dofBlurNearFar, 'y').min(0).max(1).step(0.001)
@@ -1091,7 +1074,7 @@
 			backgroundPlane = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000), new THREE.MeshBasicMaterial({color: params.backColor.color}))
 			backgroundPlane.position.z = -100;
 			backgroundPlane.visible = params.backColor.enabled;
-			camera = new THREE.PerspectiveCamera(params.camera.fov, window.innerWidth / window.innerHeight, 0.1, 150);
+			camera = new THREE.PerspectiveCamera(params.camera.fov, window.innerWidth / window.innerHeight, 0.1, 10000);
 			camera.add(backgroundPlane);
 			camera.position.set( 100, 2, 100 );
 			scene.add(camera);
@@ -1142,12 +1125,12 @@
 			ssrPass.useHistoryBuffer = params.ssr.useHistoryBuffer;
 			// ssrPass.useTexureBackground = !params.backColor.enabled;
 
-			ssrPass.ssao = params.ssao.enabled;
-			ssrPass.kernelRadius = params.ssao.kernelRadius;
-			ssrPass.minDistance = params.ssao.minDistance;
-			ssrPass.power = params.ssao.power;
-			ssrPass.depthBiasValue = params.ssao.depthBiasValue;
-			ssrPass.rangeStrength = params.ssao.rangeStrength;
+			// ssrPass.ssao = params.ssao.enabled;
+			// ssrPass.kernelRadius = params.ssao.kernelRadius;
+			// ssrPass.minDistance = params.ssao.minDistance;
+			// ssrPass.power = params.ssao.power;
+			// ssrPass.depthBiasValue = params.ssao.depthBiasValue;
+			// ssrPass.rangeStrength = params.ssao.rangeStrength;
 
 			ssrPass.hbao = params.hbao.enabled;
 			ssrPass.hbaoPower = params.hbao.power
@@ -1163,7 +1146,8 @@
 			bokehPass.bokehRadius = params.dof.maxblur;
 			bokehPass.autoBlur = params.dof.autoBlur;
 			bokehPass.dofBlurNearFar = params.dof.dofBlurNearFar;
-			bokehPass.bokehPass = params.dof.bokehPass;
+			bokehPass.bladeCount = params.dof.bladeCount;
+			bokehPass.focus.set(params.dof.focus.x, params.dof.focus.y)
 			composer.addPass(bokehPass);
 
 			taaPass = new TAARenderPass2( scene, camera );
@@ -1618,6 +1602,10 @@
 			params.colorBalance.Shadows.x = colorBalancePass.uniforms.low.value.x
 			params.colorBalance.Shadows.y = colorBalancePass.uniforms.low.value.y
 			params.colorBalance.Shadows.z = colorBalancePass.uniforms.low.value.z
+
+			params.dof.focus.x = bokehPass.focus.x
+			params.dof.focus.y = bokehPass.focus.y
+
 		}
 		async function saveScene() {
 			saveLightData()
@@ -1687,7 +1675,7 @@
 				const newfile = new File([modelFile], filename, {
 					type: modelFile.type
 				})
-				// console.log(newfile)
+				console.log(newfile)
 
 				let formdata = new FormData();
 				formdata.append('num', num)
@@ -1703,6 +1691,7 @@
 					// },
 					data: formdata,
 					complete: function(data) {
+						console.log(data)
 						if(data.responseJSON.success) {
             	console.log('模型上传成功')
 							params.scene.modelPath = data.responseJSON.data
@@ -1768,8 +1757,11 @@
 			if(!params.dof.bladeCount) {
 				params.dof.bladeCount = 6
 			}
+			if(!params.dof.focus) {
+				params.dof.focus = {x: 0.5, y: 0.5}
+			}
 			// params.camera = oriParams.camera
-			// params.lock = false
+			// params.lock = true
 
 			// params.colorBalance = {
 			// 	enabled: true,