From da324bcaa79b227c20a43c1bdf3d396dfdce4604 Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Tue, 20 Dec 2022 11:43:23 +0100
Subject: [PATCH] Contact shadow next try.

---
 sandbox/three_shadow.html | 97 +++++++++++++++++++++++++++------------
 1 file changed, 67 insertions(+), 30 deletions(-)

diff --git a/sandbox/three_shadow.html b/sandbox/three_shadow.html
index c05ad61..ecb66bd 100644
--- a/sandbox/three_shadow.html
+++ b/sandbox/three_shadow.html
@@ -49,7 +49,7 @@
 			camera.lookAt (new THREE.Vector3 (0.0, 0.0, 0.0));
 			scene.add (camera);
 
-			let box = new THREE.BoxGeometry (1.0, 1.0, 1.0);
+			let box = new THREE.BoxGeometry (0.5, 1.6, 0.75);
 			let boxMaterial = new THREE.MeshPhongMaterial ({
 				color : 0xcc0000,
 				side : THREE.DoubleSide
@@ -57,46 +57,50 @@
 			let boxMesh = new THREE.Mesh (box, boxMaterial);
 			scene.add (boxMesh);
 
-			let shadowGroup = new THREE.Group ();
+			let planeSizeX = 3.0;
+			let planeSizeY = 3.0;
+			let planeZ = -1.0;
+
+			let shadowGroup = new THREE.Object3D ();
 			scene.add (shadowGroup);
 
-			let renderTarget = new THREE.WebGLRenderTarget (512, 512);
-			renderTarget.texture.generateMipmaps = false;
+			let shadowRenderTarget = new THREE.WebGLRenderTarget (512, 512);
+			shadowRenderTarget.texture.generateMipmaps = false;
 
-			let planeWidth = 2.0;
-			let planeHeight = 2.0;
-			let plane = new THREE.PlaneGeometry (planeWidth, planeHeight).translate (0.0, 0.0, -1.0);
-			let planeMaterial = new THREE.MeshBasicMaterial ({
-				map : renderTarget.texture,
+			let shadowPlaneGeometry = new THREE.PlaneGeometry (planeSizeX, planeSizeY)
+			shadowPlaneMaterial = new THREE.MeshBasicMaterial ({
+				//color : 0x0000cc,
+				map : shadowRenderTarget.texture,
 				opacity : 1.0,
 				transparent: true,
 				depthWrite : false
 			});
 
-			let planeMesh = new THREE.Mesh (plane, planeMaterial);
-			planeMesh.renderOrder = 1;
-			planeMesh.scale.y = -1;
-			shadowGroup.add (planeMesh);
+			let shadowPlaneMesh = new THREE.Mesh (shadowPlaneGeometry, shadowPlaneMaterial);
+			shadowPlaneMesh.position.z = planeZ;
+			shadowPlaneMesh.scale.y = -1.0;
+
+			shadowGroup.add (shadowPlaneMesh);
 
 			let shadowCamera = new THREE.OrthographicCamera (
-				-planeWidth / 2.0,
-				planeWidth / 2.0,
-				planeHeight / 2.0,
-				-planeHeight / 2.0,
+				-planeSizeX / 2.0,
+				planeSizeX / 2.0,
+				planeSizeY / 2.0,
+				-planeSizeY / 2.0,
 				0.0,
 				2.0,
 			);
+			shadowCamera.rotation.x = Math.PI;
+			shadowCamera.position.z = planeZ;
 
-			shadowCamera.position.set (0.0, 0.0, -1.0);
-			shadowCamera.up.set (0.0, -1.0, 0.0);
-			shadowCamera.lookAt (new THREE.Vector3 (0.0, 0.0, 0.0));
+			shadowGroup.add (shadowCamera);
 
-			let depthMaterial = new THREE.MeshDepthMaterial ();
-			depthMaterial.userData.darkness = { value: 1.0 };
-			depthMaterial.depthTest = false;
-			depthMaterial.depthWrite = false;
-			depthMaterial.onBeforeCompile = function (shader) {
-				shader.uniforms.darkness = depthMaterial.userData.darkness;
+			let shadowMaterial = new THREE.MeshDepthMaterial ();
+			shadowMaterial.depthTest = false;
+			shadowMaterial.depthWrite = false;
+			shadowMaterial.userData.darkness = { value: 1.0 };
+			shadowMaterial.onBeforeCompile = (shader) => {
+				shader.uniforms.darkness = shadowMaterial.userData.darkness;
 				shader.fragmentShader = /* glsl */`
 					uniform float darkness;
 					${shader.fragmentShader.replace (
@@ -106,23 +110,56 @@
 				`;
 			};
 
+			// let cameraHelper = new THREE.CameraHelper (shadowCamera);
+			// shadowGroup.add (cameraHelper);
+
+			let blurRenderTarget = new THREE.WebGLRenderTarget (512, 512);
+			blurRenderTarget.texture.generateMipmaps = false;
+
+			let blurPlaneMesh = new THREE.Mesh (shadowPlaneGeometry);
+			blurPlaneMesh.visible = false;
+			shadowGroup.add (blurPlaneMesh);
+
+			horizontalBlurMaterial = new THREE.ShaderMaterial (THREE.HorizontalBlurShader);
+			horizontalBlurMaterial.depthTest = false;
+
+			verticalBlurMaterial = new THREE.ShaderMaterial (THREE.VerticalBlurShader);
+			verticalBlurMaterial.depthTest = false;
+
 			new THREE.OrbitControls (camera, renderer.domElement);
 
-			//scene.background = new THREE.Color (0.0, 1.0, 0.0);
+			scene.background = new THREE.Color (0.8, 0.8, 0.8);
 			renderer.setAnimationLoop ((time) => {
 				boxMesh.rotation.x = time / 3000;
 				boxMesh.rotation.y = time / 3000;
 				boxMesh.rotation.z = time / 3000;
 
-				scene.overrideMaterial = depthMaterial;
-				renderer.setRenderTarget (renderTarget);
+				scene.overrideMaterial = shadowMaterial;
+				renderer.setRenderTarget (shadowRenderTarget);
 				renderer.render (scene, shadowCamera);
 				scene.overrideMaterial = null;
 
+				blurPlaneMesh.visible = true;
+
+				let amount = 5.0;
+
+				blurPlaneMesh.material = horizontalBlurMaterial;
+				blurPlaneMesh.material.uniforms.tDiffuse.value = shadowRenderTarget.texture;
+				horizontalBlurMaterial.uniforms.h.value = amount * 1 / 256;
+				renderer.setRenderTarget (blurRenderTarget);
+				renderer.render (blurPlaneMesh, shadowCamera);
+
+				blurPlaneMesh.material = verticalBlurMaterial;
+				blurPlaneMesh.material.uniforms.tDiffuse.value = blurRenderTarget.texture;
+				verticalBlurMaterial.uniforms.v.value = amount * 1 / 256;
+				renderer.setRenderTarget (shadowRenderTarget);
+				renderer.render (blurPlaneMesh, shadowCamera);
+
+				blurPlaneMesh.visible = false;
+
 				renderer.setRenderTarget (null);
 				renderer.render (scene, camera);
 			});
-
 		}
 
 		window.onload = function () {