TSL: Output of pass node into screen space
HTML
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three/build/three.webgpu.js",
"three/webgpu": "https://unpkg.com/three/build/three.webgpu.js",
"three/tsl": "https://unpkg.com/three/build/three.tsl.js",
"three/addons/": "https://unpkg.com/three/examples/jsm/"
}
}
</script>
CSS
body {
margin: 0px;
}
JavaScript
import * as THREE from 'three';
import { Fn, color, pass, mix, screenUV, step } from 'three/tsl'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const textureLoader = new THREE.TextureLoader();
const imgUrl = 'https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c74c5243388bbfa21a39c3e824ddba702a623dec.png'
let mesh, renderer, scene, camera, controls;
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 );
// scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
const maskScene = new THREE.Scene();
textureLoader.load(imgUrl, (tex) => {
tex.matrixAutoUpdate = false;
tex.magFilter = THREE.NearestFilter;
tex.minFilter = THREE.LinearMipMapLinearFilter;
const geom = new THREE.PlaneGeometry(20, 20);
const mat = new THREE.MeshBasicMaterial({
map: tex,
transparent: true,
});
const plane = new THREE.Mesh(geom, mat);
scene.add(plane)
maskScene.add(plane.clone())
});
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 0, 20 );
// controls
controls = new OrbitControls( camera, renderer.domElement );
// ambient
scene.add( new THREE.AmbientLight( 0x222222 ) );
// light
const light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 0,0, 20 );
scene.add( light );
// geometry
const geometry = new THREE.SphereGeometry( 3, 12, 8 );
// material
const material = new THREE.MeshStandardNodeMaterial();
const maskScenePass =...