stencilbuffer with reflector and postprocess

by GnanaSai

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://raw.githack.com/mrdoob/three.js/dev/build/three.webgpu.js",
      "three/webgpu": "https://raw.githack.com/mrdoob/three.js/dev/build/three.webgpu.js",
      "three/tsl": "https://raw.githack.com/mrdoob/three.js/dev/build/three.tsl.js",
      "three/addons/": "https://raw.githack.com/mrdoob/three.js/dev/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { Fn, vec2, vec4, texture, uv, textureBicubic, rangeFogFactor, reflector, time, mx_noise_vec3, positionGeometry, screenUV, color, mrt, output, pass, uniform } from 'three/tsl';
import { anamorphic } from 'three/addons/tsl/display/AnamorphicNode.js';
let mesh, renderer, scene, camera, controls, postProcessing;

init();

function init() {

  // renderer
  renderer = new THREE.WebGPURenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setAnimationLoop(animate);
  document.body.appendChild(renderer.domElement);
  renderer.stencil = true;



  // const threshold = uniform(1.4);
  // const scaleNode = uniform(5);
  // const intensity = uniform(1);
  // const samples = 64;

  // const anamorphicPass = anamorphic(scenePass.getTextureNode(), threshold, scaleNode, samples);
  // anamorphicPass.resolutionScale = 1; // 1 = full resolution

  // postProcessing = new THREE.PostProcessing(renderer);
  // postProcessing.outputNode = scenePass.getTextureNode();


  // scene
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x000000);

  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(20, 20, 20);


  //PostProcess
  const scenePass = pass(scene, camera);

  scenePass.setMRT(mrt({
    output,
  }));
  postProcessing = new THREE.PostProcessing(renderer);

  postProcessing.outputNode = scenePass.getTextureNode();


  // controls
  controls = new OrbitControls(camera, renderer.domElement);

  // ambient
  scene.add(new THREE.AmbientLight(0x222222));
  scene.background = new THREE.Color("#aaaaaa")
  // light
  const light = new THREE.DirectionalLight(0xffffff, 2);
  light.position.set(20, 20, 0);
  scene.add(light);


  const light1 = new...