Post Processing

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://unpkg.com/[email protected]/build/three.module.js",
          "BufferGeometryUtils": "https://unpkg.com/[email protected]/examples/jsm/utils/BufferGeometryUtils.js",
          "ArcballControls": "https://unpkg.com/[email protected]/examples/jsm/controls/ArcballControls.js",
          "EffectComposer": "https://unpkg.com/[email protected]/examples/jsm/postprocessing/EffectComposer.js",
          "RenderPass": "https://unpkg.com/[email protected]/examples/jsm/postprocessing/RenderPass.js",
          "ShaderPass": "https://unpkg.com/[email protected]/examples/jsm/postprocessing/ShaderPass.js"
        }
      }
    </script>
	</head>
	<body>
    <div id="container">
    </div>
	</body>
</html>

CSS

body
{
  margin: 0;
}
canvas
{
  width: 100%;
  height: 100%
}

JavaScript

import * as THREE from "three";
import * as BufferGeometryUtils from "BufferGeometryUtils";
import {ArcballControls} from "ArcballControls";
import {EffectComposer} from "EffectComposer";
import {RenderPass} from "RenderPass";
import {ShaderPass} from "ShaderPass";

const vertexShaderDepth =
`
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`;
const fragmentShaderDepth =
`
#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.rgb = 1.0 - vec3(depth);
  gl_FragColor.a = 1.0;
  /* Working Shader Test */
  //gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
var depthshader =
{
  uniforms: {cameraNear: {value: 0}, cameraFar: {value: 0}, tDiffuse: {value: null}, tDepth: {value: null}},
  vertexShader: vertexShaderDepth,
  fragmentShader: fragmentShaderDepth
};
var container = document.getElementById("container"), compose = true;
var renderer, scene, depthrender, composer, camera, light, amesh, controls, raycaster = new THREE.Raycaster(), clone;
var speedx = 0, speedy = 1, speedz = 0, paused = true, reqid, camup, mincam, maxcam, radius = 6371, scale = 99;

function render()
{
  raycast();
  if (controls) {controls.update();};
  if (compose) {renderer.setRenderTarget(depthrender);};
  renderer.render(scene, camera);
  if (compose) {composer.render();};
};

function createterrain(g, t)
{
  var tercvs = document.createElement("canvas"), terctx = tercvs.getContext("2d"), imgpix,
      posidx, posval = new THREE.Vector3(), dirval = new...