webgl_camera_logarithmicdepthbuffer_multiSample

by trigger0607

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

<div id="container">
		<div id="container_normal">
			<h2 class="renderer_label">normal z-buffer</h2>
		</div>
		<div id="container_logzbuf">
			<h2 class="renderer_label">logarithmic z-buffer</h2>
		</div>
		<div id="renderer_border"></div>
	</div>

CSS

body {
			touch-action: none;
		}

		.renderer_label {
			position: absolute;
			bottom: 1em;
			width: 100%;
			color: white;
			z-index: 10;
			display: block;
			text-align: center;
		}

		#container {
			display: flex;
		}

		#container_normal {
			width: 50%;
			display: inline-block;
			position: relative;
		}

		#container_logzbuf {
			width: 50%;
			display: inline-block;
			position: relative;
		}

		#renderer_border {
			position: absolute;
			top: 0;
			left: 25%;
			bottom: 0;
			width: 2px;
			z-index: 10;
			opacity: .8;
			background: #ccc;
			border: 1px inset #ccc;
			cursor: col-resize;
		}

JavaScript

import * as THREE from "three"

import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js"
import { RenderPass } from "three/addons/postprocessing/RenderPass.js"
import { OutputPass } from "three/addons/postprocessing/OutputPass.js"

import Stats from "three/addons/libs/stats.module.js"

// 1 micrometer to 100 billion light years in one scene, with 1 unit = 1 meter?  preposterous!  and yet...
const NEAR = 0.1,
  FAR = 40000
let SCREEN_WIDTH = window.innerWidth
let SCREEN_HEIGHT = window.innerHeight
let screensplit = 0.5,
  screensplit_right = 0
const mouse = [0.5, 0.5]
let zoompos = -100,
  minzoomspeed = 0.015
let zoomspeed = minzoomspeed

let container, border, stats
const objects = {}

// Generate a number of text labels, from 1µm in size up to 100,000,000 light years
// Try to use some descriptive real-world examples of objects at each scale

init()

function init() {
  container = document.getElementById("container")

  const scene = initScene()

  // Initialize two copies of the same scene, one with normal z-buffer and one with logarithmic z-buffer
  objects.normal = initView(scene, "normal", false)
  objects.logzbuf = initView(scene, "logzbuf", true)

  stats = new Stats()
  container.appendChild(stats.dom)

  // Resize border allows the user to easily compare effects of logarithmic depth buffer over the whole scene
  border = document.getElementById("renderer_border")
  border.addEventListener("pointerdown", onBorderPointerDown)

  window.addEventListener("mousemove", onMouseMove)
  window.addEventListener("resize", onWindowResize)
  window.addEventListener("wheel", onMouseWheel)

  animate()
}

function initView(scene, name, logDepthBuf) {
  const framecontainer = document.getElementById("container_" + name)

  const camera = new THREE.PerspectiveCamera(
    50,
    (screensplit * SCREEN_WIDTH) / SCREEN_HEIGHT,
    NEAR,
    FAR,
  )
  //scene.add(camera);
  camera.position.set(0, -50, 0)
  camera.lookAt(0, 0, 0)
  const renderer =...