ShaderPass Depth

by miguelmyers8

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";

const postVertexShader =
`
varying vec2 vUv;
void main()
{
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
const postFragmentShader =
`
#include <packing>
uniform sampler2D tDiffuse;
uniform sampler2D tDepth;
uniform float cameraNear;
uniform float cameraFar;
varying vec2 vUv;
float readDepth(sampler2D depthSampler, vec2 coord)
{
  float fragCoordZ = texture2D(depthSampler, coord).x;
  float viewZ = perspectiveDepthToViewZ(fragCoordZ, cameraNear, cameraFar);
  return viewZToOrthographicDepth(viewZ, cameraNear, cameraFar);
}
void main()
{
  vec4 diffuse = texture2D(tDiffuse, vUv);
  float depth = readDepth(tDepth, vUv);
  gl_FragColor = vec4(diffuse.rgb * (1.0 - depth), 1.0);
}
`;


const sphereVertexShader =
`
varying vec2 vUv;
varying vec4 modelViewPosition;
varying vec3 vCameraDirection;
varying vec4 newCameraPosition;

void main()
{
  vUv = uv;
  modelViewPosition = modelMatrix * vec4(position, 1.0);
  newCameraPosition = modelMatrix * vec4(cameraPosition, 1.0);
  vCameraDirection = normalize( modelViewPosition - newCameraPosition ).xyz;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
const sphereFragmentShader =
`
  varying vec3 vCameraDirection;
  varying vec4 newCameraPosition;


vec2 raySphereIntersect(vec3 ro, vec3 rd, vec3 s, float sr) {
  float t = dot(s-ro,rd);
  vec3 P = ro + rd*t;
  float y = length(s-P);

  if (y>sr){
  return vec2(-1.0);
  }

  float x = sqrt(sr*sr-y*y);
  float t1 = max(t-x,0.0);
  float t2 = t+x;
return vec2(t1,t2);
}


void main()
{
  //vec3 rayOrigin =...