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

Contact shadow next try.

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

97
sandbox/three_shadow.html
View File

@ -49,7 +49,7 @@
camera.lookAt (new THREE.Vector3 (0.0, 0.0, 0.0)); camera.lookAt (new THREE.Vector3 (0.0, 0.0, 0.0));
scene.add (camera); 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 ({ let boxMaterial = new THREE.MeshPhongMaterial ({
color : 0xcc0000, color : 0xcc0000,
side : THREE.DoubleSide side : THREE.DoubleSide
@ -57,46 +57,50 @@
let boxMesh = new THREE.Mesh (box, boxMaterial); let boxMesh = new THREE.Mesh (box, boxMaterial);
scene.add (boxMesh); 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); scene.add (shadowGroup);
let renderTarget = new THREE.WebGLRenderTarget (512, 512); let shadowRenderTarget = new THREE.WebGLRenderTarget (512, 512);
renderTarget.texture.generateMipmaps = false; shadowRenderTarget.texture.generateMipmaps = false;
let planeWidth = 2.0; let shadowPlaneGeometry = new THREE.PlaneGeometry (planeSizeX, planeSizeY)
let planeHeight = 2.0; shadowPlaneMaterial = new THREE.MeshBasicMaterial ({
let plane = new THREE.PlaneGeometry (planeWidth, planeHeight).translate (0.0, 0.0, -1.0); //color : 0x0000cc,
let planeMaterial = new THREE.MeshBasicMaterial ({ map : shadowRenderTarget.texture,
map : renderTarget.texture,
opacity : 1.0, opacity : 1.0,
transparent: true, transparent: true,
depthWrite : false depthWrite : false
}); });
let planeMesh = new THREE.Mesh (plane, planeMaterial); let shadowPlaneMesh = new THREE.Mesh (shadowPlaneGeometry, shadowPlaneMaterial);
planeMesh.renderOrder = 1; shadowPlaneMesh.position.z = planeZ;
planeMesh.scale.y = -1; shadowPlaneMesh.scale.y = -1.0;
shadowGroup.add (planeMesh);
shadowGroup.add (shadowPlaneMesh);
let shadowCamera = new THREE.OrthographicCamera ( let shadowCamera = new THREE.OrthographicCamera (
-planeWidth / 2.0, -planeSizeX / 2.0,
planeWidth / 2.0, planeSizeX / 2.0,
planeHeight / 2.0, planeSizeY / 2.0,
-planeHeight / 2.0, -planeSizeY / 2.0,
0.0, 0.0,
2.0, 2.0,
); );
shadowCamera.rotation.x = Math.PI;
shadowCamera.position.z = planeZ;
shadowCamera.position.set (0.0, 0.0, -1.0); shadowGroup.add (shadowCamera);
shadowCamera.up.set (0.0, -1.0, 0.0);
shadowCamera.lookAt (new THREE.Vector3 (0.0, 0.0, 0.0));
let depthMaterial = new THREE.MeshDepthMaterial (); let shadowMaterial = new THREE.MeshDepthMaterial ();
depthMaterial.userData.darkness = { value: 1.0 }; shadowMaterial.depthTest = false;
depthMaterial.depthTest = false; shadowMaterial.depthWrite = false;
depthMaterial.depthWrite = false; shadowMaterial.userData.darkness = { value: 1.0 };
depthMaterial.onBeforeCompile = function (shader) { shadowMaterial.onBeforeCompile = (shader) => {
shader.uniforms.darkness = depthMaterial.userData.darkness; shader.uniforms.darkness = shadowMaterial.userData.darkness;
shader.fragmentShader = /* glsl */` shader.fragmentShader = /* glsl */`
uniform float darkness; uniform float darkness;
${shader.fragmentShader.replace ( ${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); 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) => { renderer.setAnimationLoop ((time) => {
boxMesh.rotation.x = time / 3000; boxMesh.rotation.x = time / 3000;
boxMesh.rotation.y = time / 3000; boxMesh.rotation.y = time / 3000;
boxMesh.rotation.z = time / 3000; boxMesh.rotation.z = time / 3000;
scene.overrideMaterial = depthMaterial; scene.overrideMaterial = shadowMaterial;
renderer.setRenderTarget (renderTarget); renderer.setRenderTarget (shadowRenderTarget);
renderer.render (scene, shadowCamera); renderer.render (scene, shadowCamera);
scene.overrideMaterial = null; 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.setRenderTarget (null);
renderer.render (scene, camera); renderer.render (scene, camera);
}); });
} }
window.onload = function () { window.onload = function () {