Doni/ModelHandle
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add blur to the shadow example.

Browse Source
This commit is contained in:
kovacsv 2022-12-20 13:54:23 +01:00
parent da324bcaa7
commit 8457b7e988
1 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
sandbox/three_shadow.html
View File

@ -98,7 +98,7 @@
let shadowMaterial = new THREE.MeshDepthMaterial (); let shadowMaterial = new THREE.MeshDepthMaterial ();
shadowMaterial.depthTest = false; shadowMaterial.depthTest = false;
shadowMaterial.depthWrite = false; shadowMaterial.depthWrite = false;
shadowMaterial.userData.darkness = { value: 1.0 }; shadowMaterial.userData.darkness = { value: 0.7 };
shadowMaterial.onBeforeCompile = (shader) => { shadowMaterial.onBeforeCompile = (shader) => {
shader.uniforms.darkness = shadowMaterial.userData.darkness; shader.uniforms.darkness = shadowMaterial.userData.darkness;
shader.fragmentShader = /* glsl */` shader.fragmentShader = /* glsl */`
@ -113,13 +113,25 @@
// let cameraHelper = new THREE.CameraHelper (shadowCamera); // let cameraHelper = new THREE.CameraHelper (shadowCamera);
// shadowGroup.add (cameraHelper); // shadowGroup.add (cameraHelper);
let blurPlaneGeometry = new THREE.PlaneGeometry (planeSizeX, planeSizeY)
let blurRenderTarget = new THREE.WebGLRenderTarget (512, 512); let blurRenderTarget = new THREE.WebGLRenderTarget (512, 512);
blurRenderTarget.texture.generateMipmaps = false; blurRenderTarget.texture.generateMipmaps = false;
let blurPlaneMesh = new THREE.Mesh (shadowPlaneGeometry); let blurPlaneMesh = new THREE.Mesh (blurPlaneGeometry);
blurPlaneMesh.visible = false; blurPlaneMesh.visible = false;
shadowGroup.add (blurPlaneMesh); shadowGroup.add (blurPlaneMesh);
let blurCamera = new THREE.OrthographicCamera (
-planeSizeX / 2.0,
planeSizeX / 2.0,
planeSizeY / 2.0,
-planeSizeY / 2.0,
0.0,
1.0,
);
shadowGroup.add (blurCamera);
horizontalBlurMaterial = new THREE.ShaderMaterial (THREE.HorizontalBlurShader); horizontalBlurMaterial = new THREE.ShaderMaterial (THREE.HorizontalBlurShader);
horizontalBlurMaterial.depthTest = false; horizontalBlurMaterial.depthTest = false;
@ -142,21 +154,27 @@
blurPlaneMesh.visible = true; blurPlaneMesh.visible = true;
let amount = 5.0; let amount = 5.0;
for (let i = 0; i < 2; i++) {
if (i == 2) {
amount *= 1;
}
blurPlaneMesh.material = horizontalBlurMaterial; blurPlaneMesh.material = horizontalBlurMaterial;
blurPlaneMesh.material.uniforms.tDiffuse.value = shadowRenderTarget.texture; blurPlaneMesh.material.uniforms.tDiffuse.value = shadowRenderTarget.texture;
horizontalBlurMaterial.uniforms.h.value = amount * 1 / 256; horizontalBlurMaterial.uniforms.h.value = amount * 1 / 256;
renderer.setRenderTarget (blurRenderTarget); renderer.setRenderTarget (blurRenderTarget);
renderer.render (blurPlaneMesh, shadowCamera); renderer.render (blurPlaneMesh, blurCamera);
blurPlaneMesh.material = verticalBlurMaterial; blurPlaneMesh.material = verticalBlurMaterial;
blurPlaneMesh.material.uniforms.tDiffuse.value = blurRenderTarget.texture; blurPlaneMesh.material.uniforms.tDiffuse.value = blurRenderTarget.texture;
verticalBlurMaterial.uniforms.v.value = amount * 1 / 256; verticalBlurMaterial.uniforms.v.value = amount * 1 / 256;
renderer.setRenderTarget (shadowRenderTarget); renderer.setRenderTarget (shadowRenderTarget);
renderer.render (blurPlaneMesh, shadowCamera); renderer.render (blurPlaneMesh, blurCamera);
}
blurPlaneMesh.visible = false; blurPlaneMesh.visible = false;
renderer.setRenderTarget (null); renderer.setRenderTarget (null);
renderer.render (scene, camera); renderer.render (scene, camera);
}); });