fix: 0

src/examples/jsm/postprocessing/BloomPass2.js

@@ -271,26 +271,11 @@ const DownSampleShader = {
 	vertexShader: /* glsl */`
 
 		varying vec2 vUv;
-		varying vec4 uv01;
-		varying vec4 uv23;
-		
-		uniform float offset;
-		uniform vec2 resolution;
-
-		
-		
 
 		void main() {
-			vec2 texelSize =  1.0 / resolution;
-			vec2 offsets = vec2(1.0 + offset);
-			vUv = uv;
-			uv01.xy = uv - texelSize * offsets;
-			uv01.zw = uv + texelSize * offsets;
-			uv23.xy = uv - vec2(texelSize.x, -texelSize.y) * offsets;
-			uv23.zw = uv + vec2(texelSize.x, -texelSize.y) * offsets;
-
 			vec4 modelViewPosition = modelViewMatrix * vec4( position, 1.0 );
 			gl_Position = projectionMatrix * modelViewPosition;
+			vUv = uv;
 		}`,
 
 	fragmentShader: /* glsl */`
@@ -298,11 +283,7 @@ const DownSampleShader = {
 
 		uniform sampler2D tDiffuse;
 		uniform vec2 resolution;
-
 		varying vec2 vUv;
-		varying vec4 uv01;
-		varying vec4 uv23;
-
 
 		float GaussWeight2D(float x, float y, float sigma)
 		{
@@ -336,11 +317,6 @@ const DownSampleShader = {
 		}
 
 		void main() {
-			// vec4 sum = texture2D(tDiffuse, vUv) * 4.0;
-			// sum += texture2D(tDiffuse, uv01.xy);
-			// sum += texture2D(tDiffuse, uv01.zw);
-			// sum += texture2D(tDiffuse, uv23.xy);
-			// sum += texture2D(tDiffuse, uv23.zw);
 
 			vec4 sum = vec4(0.0);
 			vec2 stride = 1.0 / resolution;
@@ -366,34 +342,13 @@ const UpSampleShader = {
 	vertexShader: /* glsl */`
 
 		varying vec2 vUv;
-		varying vec4 uv01;
-		varying vec4 uv23;
-		varying vec4 uv45;
-		varying vec4 uv67;
-		
-		uniform float offset;
-		uniform vec2 resolution;
-
 
 		
 
 		void main() {
-			vec2 texelSize =  1.0 / resolution;
-			vec2 offsets = vec2(1.0 + offset);
-			vUv = uv;
-
-
-			uv01.xy = uv + vec2(-texelSize.x * 2.0, 0.0) * offsets;
-			uv01.zw = uv + vec2(-texelSize.x, texelSize.y) * offsets;
-			uv23.xy = uv + vec2(0.0, texelSize.y * 2.0) * offsets;
-			uv23.zw = uv + texelSize * offsets;
-			uv45.xy = uv + vec2(texelSize.x * 2.0, 0.0) * offsets;
-			uv45.zw = uv + vec2(texelSize.x, -texelSize.y) * offsets;
-			uv67.xy = uv + vec2(0.0, -texelSize.y * 2.0) * offsets;
-			uv67.zw = uv - texelSize * offsets;
-
 			vec4 modelViewPosition = modelViewMatrix * vec4( position, 1.0 );
 			gl_Position = projectionMatrix * modelViewPosition;
+			vUv = uv;
 		}`,
 
 	fragmentShader: /* glsl */`
@@ -402,12 +357,9 @@ const UpSampleShader = {
 		uniform sampler2D tDiffuse;
 		uniform sampler2D tAddDiffuse;
 		uniform vec2 resolution;
+		uniform float offset;
 
 		varying vec2 vUv;
-		varying vec4 uv01;
-		varying vec4 uv23;
-		varying vec4 uv45;
-		varying vec4 uv67;
 
 		float GaussWeight2D(float x, float y, float sigma)
 		{
@@ -440,21 +392,10 @@ const UpSampleShader = {
 				return color;
 		}
 		void main() {
-			// vec4 sum = vec4(0.0);
-			// sum += texture2D(tDiffuse, uv01.xy);
-			// sum += texture2D(tDiffuse, uv01.zw) * 2.0;
-			// sum += texture2D(tDiffuse, uv23.xy);
-			// sum += texture2D(tDiffuse, uv23.zw) * 2.0;
-			// sum += texture2D(tDiffuse, uv45.xy);
-			// sum += texture2D(tDiffuse, uv45.zw) * 2.0;
-			// sum += texture2D(tDiffuse, uv67.xy);
-			// sum += texture2D(tDiffuse, uv67.zw) * 2.0;
-			// sum *= 0.0833;
-			// sum += texture2D(tAddDiffuse, vUv);
 			vec2 stride = 1.0 / resolution;
 			vec2 curStride = 1.0 / resolution * 2.0;
-			vec4 sum = GaussNxN(tDiffuse, vUv, 5, stride, 1.0);
-			vec4 add = GaussNxN(tAddDiffuse, vUv, 5, stride, 1.0);
+			vec4 sum = GaussNxN(tDiffuse, vUv, 5, stride, offset);
+			vec4 add = GaussNxN(tAddDiffuse, vUv, 5, stride, offset);
 
 			gl_FragColor = sum + add;
 		}`

src/examples/jsm/postprocessing/BokehPass3.js

@@ -66,8 +66,10 @@ class BokehPass extends Pass {
 
 
 		// DownSample
-		this.DownSampleRenderTarget = new WebGLRenderTarget(this.downSampleResX, this.downSampleResY, {
-			type: HalfFloatType
+		this.DownSampleRenderTarget = new WebGLRenderTarget(this.width, this.height, {
+			type: HalfFloatType,
+			minFilter: NearestFilter,
+			magFilter: NearestFilter,
 		});
 
 		this.DownSampleMaterial = new ShaderMaterial( {
@@ -82,7 +84,7 @@ class BokehPass extends Pass {
 
 		// bokeh 
 		this.BokehRenderTarget = new WebGLRenderTarget(this.downSampleResX, this.downSampleResY, {
-			type: HalfFloatType
+			type: HalfFloatType,
 		});
 
 		this.BokehMaterial = new ShaderMaterial( {
@@ -96,7 +98,7 @@ class BokehPass extends Pass {
 
 		// filter
 		this.FilterRenderTarget = new WebGLRenderTarget(this.downSampleResX, this.downSampleResY, {
-			type: HalfFloatType
+			type: HalfFloatType,
 		});
 
 		this.FileterMaterial = new ShaderMaterial( {
@@ -109,7 +111,7 @@ class BokehPass extends Pass {
 
 		// Scatter
 		this.ScatterRenderTarget = new WebGLRenderTarget(this.downSampleResX, this.downSampleResY, {
-			type: HalfFloatType
+			type: HalfFloatType,
 		});
 		
 		this.ScatterMaterial = new ShaderMaterial( {
@@ -141,11 +143,13 @@ class BokehPass extends Pass {
 
 		this.originalClearColor = new Color();
 		this.tempColor = new Color();
-
+		console.log(this.DownSampleRenderTarget)
 	}
 	
 
 	render( renderer, writeBuffer, readBuffer, deltaTime, maskActive, GBuffer ) {
+		this.maxblur = this.bokehRadius * this.height * 0.001;
+
 		// render DofCoC
 		this.DofCoCMaterial.uniforms[ 'tDepth' ].value = GBuffer.depthTexture;
 		this.DofCoCMaterial.uniforms[ 'focus' ].value.copy(this.focus);
@@ -160,7 +164,7 @@ class BokehPass extends Pass {
 		// render downSample
 		this.DownSampleMaterial.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
 		this.DownSampleMaterial.uniforms[ 'tCoC' ].value = this.DofCoCRenderTarget.texture;
-		this.DownSampleMaterial.uniforms[ 'bokehRadius' ].value = this.bokehRadius;
+		this.DownSampleMaterial.uniforms[ 'bokehRadius' ].value = this.maxblur;
 		this.renderPass( renderer, this.DownSampleMaterial, this.DownSampleRenderTarget);
 		
 
@@ -170,9 +174,8 @@ class BokehPass extends Pass {
 			this.BokehMaterial.needsUpdate = true;
 		}
 		this.BokehMaterial.uniforms[ 'tDiffuse' ].value = this.DownSampleRenderTarget.texture;
-		this.BokehMaterial.uniforms[ 'bokehRadius' ].value = this.bokehRadius;
+		this.BokehMaterial.uniforms[ 'bokehRadius' ].value = this.maxblur;
 		this.BokehMaterial.uniforms[ 'uframe' ].value = this.frame;
-		this.BokehMaterial.uniforms[ 'maxblur' ].value = this.maxblur;
 		this.BokehMaterial.uniforms[ 'bladeCount' ].value = this.bladeCount;
 		this.renderPass( renderer, this.BokehMaterial, this.BokehRenderTarget);
 
@@ -193,7 +196,7 @@ class BokehPass extends Pass {
 		this.BlendMaterial.uniforms[ 'tCoC' ].value = this.DofCoCRenderTarget.texture;
 		this.BlendMaterial.uniforms[ 'tDown' ].value = this.DownSampleRenderTarget.texture;
 		this.BlendMaterial.uniforms[ 'tDof' ].value = this.ScatterRenderTarget.texture;
-		this.BlendMaterial.uniforms[ 'bokehRadius' ].value = this.bokehRadius;
+		this.BlendMaterial.uniforms[ 'bokehRadius' ].value = this.maxblur;
 		this.renderPass( renderer, this.BlendMaterial, writeBuffer);
 
 		// this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.FilterRenderTarget.texture;
@@ -253,14 +256,15 @@ class BokehPass extends Pass {
 		this.downSampleResX = width * this.downSampleFactor;
 		this.downSampleResY = height * this.downSampleFactor;
 
+
 		this.DofCoCRenderTarget.setSize( width, height );
-		this.DownSampleRenderTarget.setSize( this.downSampleResX, this.downSampleResY );
+		this.DownSampleRenderTarget.setSize( width, height );
 		this.BokehRenderTarget.setSize( this.downSampleResX, this.downSampleResY );
 		this.FilterRenderTarget.setSize( this.downSampleResX, this.downSampleResY );
 		this.ScatterRenderTarget.setSize( this.downSampleResX, this.downSampleResY );
 
-		this.DownSampleMaterial.uniforms[ 'resolution' ].value.set(width, height);
-		this.BokehMaterial.uniforms[ 'resolution' ].value.set( this.downSampleResX, this.downSampleResY );
+		this.DownSampleMaterial.uniforms[ 'resolution' ].value.set( width, height );
+		this.BokehMaterial.uniforms[ 'resolution' ].value.set( width, height );
 		this.FileterMaterial.uniforms[ 'resolution' ].value.set( this.downSampleResX, this.downSampleResY );
 		this.ScatterMaterial.uniforms[ 'resolution' ].value.set( this.downSampleResX, this.downSampleResY );
 		this.BlendMaterial.uniforms[ 'resolution' ].value.set(width, height);

src/examples/jsm/postprocessing/TAARenderPass2.js

@@ -79,7 +79,7 @@ class TAARenderPass2 extends Pass {
 	}
 
 	render( renderer, writeBuffer, readBuffer, deltaTime ) {
-		this.camera.updateProjectionMatrix()
+		// this.camera.updateProjectionMatrix()
 
 		// if(this.accumulateIndex > 8 && this.accumulate && this.computeAccumulate){
 		// 	// console.log('completed')
@@ -87,6 +87,9 @@ class TAARenderPass2 extends Pass {
 		// 	this.renderPass( renderer, this.copyMaterial, writeBuffer );
 		// 	return;
 		// }
+		const jitterOffsets = Halton[this.frame % 8];
+		this.camera.projectionMatrix.elements[8] += (jitterOffsets[0] - 0.5) / readBuffer.width * 2.0 * this.jitterStrength;
+		this.camera.projectionMatrix.elements[9] += (jitterOffsets[1] - 0.5) / readBuffer.width * 2.0 * this.jitterStrength;
 	
 		this.mixMaterial.uniforms['tLast'].value = this.lastRenderTarget.texture;
 		this.mixMaterial.uniforms['tCurrent'].value = readBuffer.texture;
@@ -96,13 +99,12 @@ class TAARenderPass2 extends Pass {
 		this.copyMaterial.uniforms[ 'tDiffuse' ].value = writeBuffer.texture;
 		
 		this.renderPass( renderer, this.copyMaterial, this.lastRenderTarget)
+		this.camera.updateProjectionMatrix()
 
-		const jitterOffsets = Halton[this.frame % 8];
-		// this.camera.projectionMatrix.elements[8] += jitterOffsets[0] / readBuffer.width * this.jitterStrength;
-		// this.camera.projectionMatrix.elements[9] += jitterOffsets[1] / readBuffer.height * this.jitterStrength;
 
-		this.camera.projectionMatrix.elements[8] += (jitterOffsets[0] - 0.5) / readBuffer.width * 2.0 * this.jitterStrength;
-		this.camera.projectionMatrix.elements[9] += (jitterOffsets[1] - 0.5) / readBuffer.width * 2.0 * this.jitterStrength;
+		// const jitterOffsets = Halton[this.frame % 8];
+		// this.camera.projectionMatrix.elements[8] += (jitterOffsets[0] - 0.5) / readBuffer.width * 2.0 * this.jitterStrength;
+		// this.camera.projectionMatrix.elements[9] += (jitterOffsets[1] - 0.5) / readBuffer.width * 2.0 * this.jitterStrength;
 
 
 

src/examples/jsm/shaders/UnrealDofShader1.js

@@ -252,13 +252,11 @@ 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);
 			if(inPolygon == 0.0) {
 				return;
 			}
 			ofs *= bokehRadius;
-			// vec2 ofs = bokehRadius * offset;
 			float dist = length(ofs);
 			ofs *= texelSize;
 			vec4 samp = texture2D(tDiffuse, vUv + ofs);
@@ -494,9 +492,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, 10, stride, 1.0);
-
+			// vec2 stride = 1.0 / resolution;
+			// vec4 color = GaussNxN(tDiffuse, vUv, 5, stride, 1.0);
+			vec4 color = texture2D(tDiffuse, vUv);
 			gl_FragColor = color;
 
 		}`
@@ -635,6 +633,9 @@ const BlendShader = {
 			value = clamp(value * bokehRadius * 0.1, value, 1.0);
 			float alpha = max(bokeh.r, max(bokeh.g, bokeh.b));
 			vec4 color = mix(source, vec4(bokeh.rgb, alpha), value);
+
+
+
 			#if DEBUG == 1
 				vec4 diffColor = texture2D(tDiffuse, vUv);
 				gl_FragColor = vec4(diffColor.rgb, 1.0);
@@ -651,7 +652,7 @@ const BlendShader = {
 			#elif DEBUG == 5
 				gl_FragColor = vec4(vec3(value), 1.0);
 				return;
-			#else
+			#else // DEBUG == 0
 				gl_FragColor = color;
 			#endif
 

src/views/Renderer.vue

@@ -652,6 +652,9 @@
 			folderCamera.add(params.camera, 'fov').min(10).max(90).step(0.1).onChange(() => {
 				camera.fov = params.camera.fov;
 				cameraMove()
+				setTimeout(() => {
+					cameraMove()
+				},10)
 			})
 			const cameraFun = {
 				saveCameraPos: getCameraData,
@@ -757,7 +760,9 @@
 			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(() => {
+				onWindowResize()
+			})
 
 			folderSSR.add(ssrPass, 'output', {
 				'Default': SSRPass.OUTPUT.Default,
@@ -865,29 +870,12 @@
 			folderBloom.add(params.bloom, 'strength').min(0).max(3).step(0.01).onChange(() => {
 				bloomPass.strength = params.bloom.strength;
 			});
-			folderBloom.add(params.bloom, 'radius').min(0).max(1).onChange(() => {
+			folderBloom.add(params.bloom, 'radius').min(0.01).max(1).step(0.01).onChange(() => {
 				bloomPass.radius = params.bloom.radius;
 			});
 			folderBloom.close();
 
 			//dof
-			// const folderDOF = gui.addFolder('景深');
-			// folderDOF.add(params.dof, 'enabled').onChange(() => {
-			// 	bokehPass.enabled = params.dof.enabled;
-			// });
-			// folderDOF.add(params.dof, 'aperture').min(0).max(0.05).step(0.0001).onChange(() => {
-			// 	bokehPass.aperture = params.dof.aperture;
-			// });
-			// folderDOF.add(params.dof, 'maxblur').min(0).max(0.02).step(0.0001).onChange(() => {
-			// 	bokehPass.maxblur = params.dof.maxblur;
-			// });
-			// folderDOF.add(bokehPass, 'threshold').min(0).max(1).step(0.01)
-			// folderDOF.add(params.dof, 'autoBlur').onChange(() => {
-			// 	bokehPass.autoBlur = params.dof.autoBlur;
-			// });
-			// folderDOF.add(bokehPass, 'debug').min(0).max(1).step(1);
-			// folderDOF.close();
-
 			const folderDOF = gui.addFolder('景深');
 			folderDOF.add(params.dof, 'enabled').onChange(() => {
 				bokehPass.enabled = params.dof.enabled;
@@ -898,32 +886,33 @@
 			cameraMove()
 				
 			});
-			folderDOF.add(params.dof, 'maxblur').min(0.1).max(20).step(0.01).onChange(() => {
+			folderDOF.add(params.dof, 'maxblur').min(0.1).max(40).step(0.01).onChange(() => {
 				bokehPass.bokehRadius = params.dof.maxblur;
 				cameraMove()
-			
 			});
 			folderDOF.add(params.dof.dofBlurNearFar, 'x').min(0).max(1).step(0.01).onChange(() => {
 				bokehPass.dofBlurNearFar.x = params.dof.dofBlurNearFar.x;
-			
 				cameraMove()
 			}).name('foregroundBlurriness');
 			folderDOF.add(params.dof.dofBlurNearFar, 'y').min(0).max(1).step(0.01).onChange(() => {
 				bokehPass.dofBlurNearFar.y = params.dof.dofBlurNearFar.y;
 				cameraMove()
-			
 			}).name('backgroundBlurriness');
+			
 			folderDOF.add(bokehPass, 'bladeCount').min(5).max(10).step(1).onChange(() => {
 				bokehPass.bokehPass = params.dof.bokehPass;
 				cameraMove()
 			})
+			// 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)
 			// folderDOF.add(params.dof, 'autoBlur').onChange(() => {
 				// bokehPass.autoBlur = params.dof.autoBlur;
 			// });
-			// folderDOF.add(bokehPass, 'debug').min(0).max(5).step(1);
+			folderDOF.add(bokehPass, 'debug').min(0).max(5).step(1);
 			folderDOF.close();
 
 			// RGBShitf
@@ -1778,7 +1767,7 @@
 			if(!params.dof.bladeCount) {
 				params.dof.bladeCount = 6
 			}
-			
+			// params.camera = oriParams.camera
 			// params.lock = false
 
 			// params.colorBalance = {