|
|
@@ -0,0 +1,277 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <title>three.js webgl - contact shadows</title>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
|
+ <link type="text/css" rel="stylesheet" href="main.css">
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ background-color: #fff;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ color: #08f;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="info">
|
|
|
+ <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - contact shadows
|
|
|
+ </div>
|
|
|
+ <script type="module">
|
|
|
+
|
|
|
+ import * as THREE from '../build/three.module.js';
|
|
|
+ import { OrbitControls } from './jsm/controls/OrbitControls.js';
|
|
|
+ import Stats from './jsm/libs/stats.module.js';
|
|
|
+ import { GUI } from './jsm/libs/dat.gui.module.js';
|
|
|
+ import { HorizontalBlurShader } from './jsm/shaders/HorizontalBlurShader.js';
|
|
|
+ import { VerticalBlurShader } from './jsm/shaders/VerticalBlurShader.js';
|
|
|
+
|
|
|
+ var camera, scene, renderer, stats, gui;
|
|
|
+
|
|
|
+ var meshes = [];
|
|
|
+
|
|
|
+ const PLANE_WIDTH = 2.5;
|
|
|
+ const PLANE_HEIGHT = 2.5;
|
|
|
+ const CAMERA_HEIGHT = 0.3;
|
|
|
+
|
|
|
+ var state = {
|
|
|
+ blur: 3.5,
|
|
|
+ darkness: 1,
|
|
|
+ opacity: 1,
|
|
|
+ showWireframe: false,
|
|
|
+ };
|
|
|
+
|
|
|
+ var shadowGroup, renderTarget, renderTargetBlur, shadowCamera, cameraHelper, depthMaterial, horizontalBlurMaterial, verticalBlurMaterial;
|
|
|
+
|
|
|
+ var planeGeometry, planeMaterial, plane, blurPlane;
|
|
|
+
|
|
|
+ init();
|
|
|
+ animate();
|
|
|
+
|
|
|
+ function init() {
|
|
|
+
|
|
|
+ camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
|
|
|
+ camera.position.set( 0.5, 1, 2 );
|
|
|
+
|
|
|
+ scene = new THREE.Scene();
|
|
|
+
|
|
|
+ stats = new Stats();
|
|
|
+ document.body.appendChild( stats.dom );
|
|
|
+
|
|
|
+ window.addEventListener( 'resize', onWindowResize );
|
|
|
+
|
|
|
+ // add the example meshes
|
|
|
+
|
|
|
+ var geometries = [
|
|
|
+ new THREE.BoxBufferGeometry( 0.4, 0.4, 0.4 ),
|
|
|
+ new THREE.IcosahedronBufferGeometry( 0.3 ),
|
|
|
+ new THREE.TorusKnotBufferGeometry( 0.4, 0.05, 256, 24, 1, 3 )
|
|
|
+ ];
|
|
|
+
|
|
|
+ var material = new THREE.MeshNormalMaterial();
|
|
|
+
|
|
|
+ for ( var i = 0, l = geometries.length; i < l; i ++ ) {
|
|
|
+
|
|
|
+ var angle = ( i / l ) * Math.PI * 2;
|
|
|
+
|
|
|
+ var geometry = geometries[ i ];
|
|
|
+ var mesh = new THREE.Mesh( geometry, material );
|
|
|
+ mesh.position.y = 0.1;
|
|
|
+ mesh.position.x = Math.cos( angle ) / 2.0;
|
|
|
+ mesh.position.z = Math.sin( angle ) / 2.0;
|
|
|
+ scene.add( mesh );
|
|
|
+ meshes.push( mesh );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // the container, if you need to move the plane just move this
|
|
|
+ shadowGroup = new THREE.Group();
|
|
|
+ shadowGroup.position.y = - 0.3;
|
|
|
+ scene.add( shadowGroup );
|
|
|
+
|
|
|
+ // the render target that will show the shadows in the plane texture
|
|
|
+ renderTarget = new THREE.WebGLRenderTarget( 512, 512 );
|
|
|
+ renderTarget.texture.generateMipmaps = false;
|
|
|
+
|
|
|
+ // the render target that we will use to blur the first render target
|
|
|
+ renderTargetBlur = new THREE.WebGLRenderTarget( 512, 512 );
|
|
|
+ renderTargetBlur.texture.generateMipmaps = false;
|
|
|
+
|
|
|
+
|
|
|
+ // make a plane and make it face up
|
|
|
+ planeGeometry = new THREE.PlaneGeometry( PLANE_WIDTH, PLANE_HEIGHT ).rotateX( Math.PI / 2 );
|
|
|
+ planeMaterial = new THREE.MeshBasicMaterial( {
|
|
|
+ map: renderTarget.texture,
|
|
|
+ opacity: state.opacity,
|
|
|
+ transparent: true,
|
|
|
+ } );
|
|
|
+ plane = new THREE.Mesh( planeGeometry, planeMaterial );
|
|
|
+ shadowGroup.add( plane );
|
|
|
+
|
|
|
+ // the y from the texture is flipped!
|
|
|
+ plane.scale.y = - 1;
|
|
|
+
|
|
|
+ // the plane onto which to blur the texture
|
|
|
+ blurPlane = new THREE.Mesh( planeGeometry );
|
|
|
+ blurPlane.visible = false;
|
|
|
+ shadowGroup.add( blurPlane );
|
|
|
+
|
|
|
+ // the camera to render the depth material from
|
|
|
+ shadowCamera = new THREE.OrthographicCamera( - PLANE_WIDTH / 2, PLANE_WIDTH / 2, PLANE_HEIGHT / 2, - PLANE_HEIGHT / 2, 0, CAMERA_HEIGHT );
|
|
|
+ shadowCamera.rotation.x = Math.PI / 2; // get the camera to look up
|
|
|
+ shadowGroup.add( shadowCamera );
|
|
|
+
|
|
|
+ cameraHelper = new THREE.CameraHelper( shadowCamera );
|
|
|
+
|
|
|
+ // like MeshDepthMaterial, but goes from black to transparent
|
|
|
+ depthMaterial = new THREE.ShaderMaterial( {
|
|
|
+ uniforms: {
|
|
|
+ darkness: { value: state.darkness },
|
|
|
+ },
|
|
|
+ vertexShader: THREE.ShaderChunk[ 'depth_vert' ],
|
|
|
+ fragmentShader: `
|
|
|
+ #define DEPTH_PACKING 3200
|
|
|
+ uniform float darkness;
|
|
|
+ ${THREE.ShaderChunk[ 'depth_frag' ].replace(
|
|
|
+ 'gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity );',
|
|
|
+ 'gl_FragColor = vec4( vec3( 0.0 ), ( 1.0 - fragCoordZ ) * darkness );'
|
|
|
+ )}
|
|
|
+ `,
|
|
|
+ } );
|
|
|
+ depthMaterial.depthTest = false;
|
|
|
+ depthMaterial.depthWrite = false;
|
|
|
+
|
|
|
+ horizontalBlurMaterial = new THREE.ShaderMaterial( HorizontalBlurShader );
|
|
|
+ horizontalBlurMaterial.depthTest = false;
|
|
|
+
|
|
|
+ verticalBlurMaterial = new THREE.ShaderMaterial( VerticalBlurShader );
|
|
|
+ verticalBlurMaterial.depthTest = false;
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ gui = new GUI();
|
|
|
+
|
|
|
+
|
|
|
+ gui.add( state, 'blur', 0, 15, 0.1 );
|
|
|
+ gui.add( state, 'darkness', 1, 5, 0.1 ).onChange( function () {
|
|
|
+
|
|
|
+ depthMaterial.uniforms.darkness.value = state.darkness;
|
|
|
+
|
|
|
+ } );
|
|
|
+ gui.add( state, 'opacity', 0, 1, 0.01 ).onChange( function () {
|
|
|
+
|
|
|
+ planeMaterial.opacity = state.opacity;
|
|
|
+
|
|
|
+ } );
|
|
|
+ gui.add( state, 'showWireframe', true ).onChange( function () {
|
|
|
+
|
|
|
+ if ( state.showWireframe ) {
|
|
|
+
|
|
|
+ scene.add( cameraHelper );
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ scene.remove( cameraHelper );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
|
|
|
+ renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+ renderer.outputEncoding = THREE.sRGBEncoding;
|
|
|
+ document.body.appendChild( renderer.domElement );
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ new OrbitControls( camera, renderer.domElement );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function onWindowResize() {
|
|
|
+
|
|
|
+ camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function blurShadow( amount ) {
|
|
|
+
|
|
|
+ blurPlane.visible = true;
|
|
|
+
|
|
|
+ // blur horizontally and draw in the renderTargetBlur
|
|
|
+ blurPlane.material = horizontalBlurMaterial;
|
|
|
+ blurPlane.material.uniforms.tDiffuse.value = renderTarget.texture;
|
|
|
+ horizontalBlurMaterial.uniforms.h.value = amount * 1 / 256;
|
|
|
+
|
|
|
+ renderer.setRenderTarget( renderTargetBlur );
|
|
|
+ renderer.render( blurPlane, shadowCamera );
|
|
|
+
|
|
|
+ // blur vertically and draw in the main renderTarget
|
|
|
+ blurPlane.material = verticalBlurMaterial;
|
|
|
+ blurPlane.material.uniforms.tDiffuse.value = renderTargetBlur.texture;
|
|
|
+ verticalBlurMaterial.uniforms.v.value = amount * 1 / 256;
|
|
|
+
|
|
|
+ renderer.setRenderTarget( renderTarget );
|
|
|
+ renderer.render( blurPlane, shadowCamera );
|
|
|
+
|
|
|
+ blurPlane.visible = false;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function animate( time ) {
|
|
|
+
|
|
|
+ requestAnimationFrame( animate );
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ meshes.forEach( mesh => {
|
|
|
+
|
|
|
+ mesh.rotation.x += 0.01;
|
|
|
+ mesh.rotation.y += 0.02;
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ // remove the background and force the depthMaterial to everything
|
|
|
+ var initialBackground = scene.background;
|
|
|
+ scene.background = null;
|
|
|
+
|
|
|
+ cameraHelper.visible = false;
|
|
|
+ scene.overrideMaterial = depthMaterial;
|
|
|
+
|
|
|
+ // render to the render target to get the depths
|
|
|
+ renderer.setRenderTarget( renderTarget );
|
|
|
+ renderer.render( scene, shadowCamera );
|
|
|
+
|
|
|
+ // and reset the override material
|
|
|
+ scene.overrideMaterial = null;
|
|
|
+ cameraHelper.visible = true;
|
|
|
+
|
|
|
+ blurShadow( state.blur );
|
|
|
+
|
|
|
+ // a second pass to reduce the artifacts
|
|
|
+ // (0.4 is the minimum blur amout so that the artifacts are gone)
|
|
|
+ blurShadow( state.blur * 0.4 );
|
|
|
+
|
|
|
+ // reset and render the normal scene
|
|
|
+ renderer.setRenderTarget( null );
|
|
|
+ scene.background = initialBackground;
|
|
|
+
|
|
|
+ renderer.render( scene, camera );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
Marco Fugaro