ShaderPass Depth

by YinCognito

HTML

<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="importmap">
      {
        "imports":
        {
          "three": "https://threejs.org/build/three.module.js"
        }
      }
    </script>
	</head>
	<body>
	</body>
</html>

CSS

body {
			background-color: #000;
			margin: 0px;
			overflow: hidden;
		}

JavaScript

import * as THREE from "three";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import {EffectComposer} from "https://threejs.org/examples/jsm/postprocessing/EffectComposer.js";
import {RenderPass} from "https://threejs.org/examples/jsm/postprocessing/RenderPass.js";
import {ShaderPass} from "https://threejs.org/examples/jsm/postprocessing/ShaderPass.js";
import {CopyShader} from "https://threejs.org/examples/jsm/shaders/CopyShader.js";
import {FXAAShader} from "https://threejs.org/examples/jsm/shaders/FXAAShader.js";



//var camera, scene, renderer;
var geometry, material, mesh;
var composer, depthRenderTarget, depthShader;

var scene = new THREE.Scene( );


var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
// Light
var ambientLight = new THREE.AmbientLight(0xFFFFFF,0.9);
scene.add(ambientLight);
//Red Geometry (Glow)
geometry = new THREE.ConeGeometry( 200, 400, 10 );
	    var geo = new THREE.EdgesGeometry( geometry );
	  	var mat = new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 2 } );

mesh = new THREE.LineSegments(geo, mat);
scene.add(mesh);
//White Wall


var wall_geometry = new THREE.BoxGeometry( 1000, 500, 20 );
var wall_mat = new THREE.MeshBasicMaterial( { color: 0xFFFFFF} );
var wall_mesh = new THREE.Mesh( wall_geometry, wall_mat );
scene.add( wall_mesh );
wall_mesh.position.x=0;
wall_mesh.position.z=-660;
wall_mesh.position.y=40;



var controls = new OrbitControls( camera, renderer.domElement );
var renderScene = new RenderPass(scene, camera);

var effectFXAA = new ShaderPass(FXAAShader);
effectFXAA.uniforms.resolution.value.set(0.2 / window.innerWidth, 0.2 / window.innerHeight);

var copyShader = new ShaderPass(CopyShader);
copyShader.renderToScreen =...