From 8f3d579c83a09db266fba3770341a78574d71b74 Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Fri, 5 May 2023 20:16:13 +0200
Subject: [PATCH] Minor modifications.

---
 sandbox/three_shadow2.html | 73 ++++++++++++++++++++++++++++++++------
 1 file changed, 62 insertions(+), 11 deletions(-)

diff --git a/sandbox/three_shadow2.html b/sandbox/three_shadow2.html
index 06999f4..6ba7b0c 100644
--- a/sandbox/three_shadow2.html
+++ b/sandbox/three_shadow2.html
@@ -14,12 +14,59 @@
 	</style>
 
 	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
-	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/helpers/CameraHelper.js"></script>
 	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/HorizontalBlurShader.js"></script>
 	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/VerticalBlurShader.js"></script>
 	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/controls/OrbitControls.js"></script>
 	<script type='text/javascript'>
-		class ShadowPlane
+		class ThreeBlurEffect
+		{
+			constructor (parentGroup, renderTarget, sizeX, sizeY)
+			{
+				this.parentGroup = parentGroup;
+				this.renderTarget = renderTarget;
+
+				this.blurGroup = new THREE.Object3D ();
+				this.parentGroup.add (this.blurGroup);
+
+				this.blurPlaneGeometry = new THREE.PlaneGeometry (sizeX, sizeY);
+				this.blurPlaneMesh = new THREE.Mesh (this.blurPlaneGeometry);
+				this.blurPlaneMesh.visible = false;
+				this.blurGroup.add (this.blurPlaneMesh);
+
+				this.blurCamera = new THREE.OrthographicCamera (-sizeX / 2.0, sizeX / 2.0, sizeY / 2.0, -sizeY / 2.0, 0.0, 1.0);
+				this.blurGroup.add (this.blurCamera);
+
+				this.blurRenderTarget = new THREE.WebGLRenderTarget (renderTarget.width, renderTarget.height);
+				this.blurRenderTarget.texture.generateMipmaps = false;
+
+				this.horizontalBlurMaterial = new THREE.ShaderMaterial (THREE.HorizontalBlurShader);
+				this.horizontalBlurMaterial.depthTest = false;
+
+				this.verticalBlurMaterial = new THREE.ShaderMaterial (THREE.VerticalBlurShader);
+				this.verticalBlurMaterial.depthTest = false;
+			}
+
+			Render (renderer, amount)
+			{
+				this.blurPlaneMesh.visible = true;
+
+				this.blurPlaneMesh.material = this.horizontalBlurMaterial;
+				this.blurPlaneMesh.material.uniforms.tDiffuse.value = this.renderTarget.texture;
+				this.horizontalBlurMaterial.uniforms.h.value = amount * 1 / 256;
+				renderer.setRenderTarget (this.blurRenderTarget);
+				renderer.render (this.blurPlaneMesh, this.blurCamera);
+
+				this.blurPlaneMesh.material = this.verticalBlurMaterial;
+				this.blurPlaneMesh.material.uniforms.tDiffuse.value = this.blurRenderTarget.texture;
+				this.verticalBlurMaterial.uniforms.v.value = amount * 1 / 256;
+				renderer.setRenderTarget (this.renderTarget);
+				renderer.render (this.blurPlaneMesh, this.blurCamera);
+
+				this.blurPlaneMesh.visible = false;
+			}
+		}
+
+		class ThreeShadowPlane
 		{
 			constructor (parentGroup, size, position, up)
 			{
@@ -50,18 +97,27 @@
 
 				let helper = new THREE.CameraHelper( this.camera );
 				this.parentGroup.add (helper);
+
+				this.shadowMaterial = new THREE.MeshBasicMaterial ({
+					color : '#00cc00'
+				});
 			}
 
 			Render (renderer, scene)
 			{
 				this.planeMesh.visible = false;
+				scene.overrideMaterial = this.shadowMaterial;
 				renderer.setRenderTarget (this.renderTarget);
+
 				renderer.render (scene, this.camera);
+
+				renderer.setRenderTarget (null);
+				scene.overrideMaterial = null;
 				this.planeMesh.visible = true;
 			}
 		}
 
-		class ContactShadow
+		class ThreeContactShadow
 		{
 			constructor (renderer, scene, size, position, up)
 			{
@@ -71,18 +127,12 @@
 				this.shadowGroup = new THREE.Object3D ();
 				this.scene.add (this.shadowGroup);
 
-				this.shadowPlane = new ShadowPlane (this.shadowGroup, size, position, up);
-				this.shadowMaterial = new THREE.MeshBasicMaterial ({
-					color : '#00cc00'
-				});
+				this.shadowPlane = new ThreeShadowPlane (this.shadowGroup, size, position, up);
 			}
 
 			Render ()
 			{
-				this.scene.overrideMaterial = this.shadowMaterial;
 				this.shadowPlane.Render (this.renderer, this.scene);
-				this.scene.overrideMaterial = null;
-				this.renderer.setRenderTarget (null);
 			}
 		}
 
@@ -100,6 +150,7 @@
 			let renderer = new THREE.WebGLRenderer (parameters);
 			renderer.setClearColor ('#ffffff', 1);
 			renderer.setSize (width, height);
+			renderer.localClippingEnabled = true;
 
 			let scene = new THREE.Scene ();
 
@@ -131,7 +182,7 @@
 			let size = new THREE.Vector3 (100.0, 100.0, 100.0);
 			let position = new THREE.Vector3 (0.0, 0.0, -20.0);
 			let upVector = new THREE.Vector3 (0.0, 0.0, 1.0);
-			let shadow = new ContactShadow (renderer, scene, size, position, upVector);
+			let shadow = new ThreeContactShadow (renderer, scene, size, position, upVector);
 
 			scene.background = new THREE.Color (0.8, 0.8, 0.8);
 			renderer.setAnimationLoop ((time) => {