Accueil / npm / three@0.186.1 / examples / jsm / tsl / display / CRT.js
CRT.js
import { Fn, float, vec2, vec3, sin, screenUV, mix, clamp, dot, convertToTexture, time, uv, select } from 'three/tsl';
import { circle } from './Shape.js';
/**
* Creates barrel-distorted UV coordinates.
* The center of the screen appears to bulge outward (convex distortion).
*
* @tsl
* @function
* @param {Node<float>} [curvature=0.1] - The amount of curvature (0 = flat, 0.5 = very curved).
* @param {Node<vec2>} [coord=uv()] - The input UV coordinates.
* @return {Node<vec2>} The distorted UV coordinates.
*/
export const barrelUV = Fn( ( [ curvature = float( 0.1 ), coord = uv() ] ) => {
// Center UV coordinates (-1 to 1)
const centered = coord.sub( 0.5 ).mul( 2.0 );
// Calculate squared distance from center
const r2 = dot( centered, centered );
// Barrel distortion: push center outward (bulge effect)
const distortion = float( 1.0 ).sub( r2.mul( curvature ) );
// Calculate scale to compensate for edge expansion
// At corners r² = 2, so we scale by the inverse of corner distortion
const cornerDistortion = float( 1.0 ).sub( curvature.mul( 2.0 ) );
// Apply distortion and compensate scale to keep edges aligned
const distorted = centered.div( distortion ).mul( cornerDistortion ).mul( 0.5 ).add( 0.5 );
return distorted;
} );
/**
* Checks if UV coordinates are inside the valid 0-1 range.
* Useful for masking areas inside the distorted screen.
*
* @tsl
* @function
* @param {Node<vec2>} coord - The UV coordinates to check.
* @return {Node<float>} 1.0 if inside bounds, 0.0 if outside.
*/
export const barrelMask = Fn( ( [ coord ] ) => {
const outOfBounds = coord.x.lessThan( 0.0 )
.or( coord.x.greaterThan( 1.0 ) )
.or( coord.y.lessThan( 0.0 ) )
.or( coord.y.greaterThan( 1.0 ) );
return select( outOfBounds, float( 0.0 ), float( 1.0 ) );
} );
/**
* Applies color bleeding effect to simulate horizontal color smearing.
* Simulates the analog signal bleeding in CRT displays where colors
* "leak" into adjacent pixels horizontally.
*
* @tsl
* @function
* @param {Node} color - The input texture node.
* @param {Node<float>} [amount=0.002] - The amount of color bleeding (0-0.01).
* @return {Node<vec3>} The color with bleeding effect applied.
*/
export const colorBleeding = Fn( ( [ color, amount = float( 0.002 ) ] ) => {
const inputTexture = convertToTexture( color );
// Get the original color
const original = inputTexture.sample( screenUV ).rgb;
// Sample colors from the left (simulating signal trailing)
const left1 = inputTexture.sample( screenUV.sub( vec2( amount, 0.0 ) ) ).rgb;
const left2 = inputTexture.sample( screenUV.sub( vec2( amount.mul( 2.0 ), 0.0 ) ) ).rgb;
const left3 = inputTexture.sample( screenUV.sub( vec2( amount.mul( 3.0 ), 0.0 ) ) ).rgb;
// Red bleeds more (travels further in analog signal)
const bleedR = original.r
.add( left1.r.mul( 0.4 ) )
.add( left2.r.mul( 0.2 ) )
.add( left3.r.mul( 0.1 ) );
// Green bleeds medium
const bleedG = original.g
.add( left1.g.mul( 0.25 ) )
.add( left2.g.mul( 0.1 ) );
// Blue bleeds least
const bleedB = original.b
.add( left1.b.mul( 0.15 ) );
// Normalize and clamp
const r = clamp( bleedR.div( 1.7 ), 0.0, 1.0 );
const g = clamp( bleedG.div( 1.35 ), 0.0, 1.0 );
const b = clamp( bleedB.div( 1.15 ), 0.0, 1.0 );
return vec3( r, g, b );
} );
/**
* Applies scanline effect to simulate CRT monitor horizontal lines with animation.
*
* @tsl
* @function
* @param {Node<vec3>} color - The input color.
* @param {Node<float>} [intensity=0.3] - The intensity of the scanlines (0-1).
* @param {Node<float>} [count=240] - The number of scanlines (typically matches vertical resolution).
* @param {Node<float>} [speed=0.0] - The scroll speed of scanlines (0 = static, 1 = normal CRT roll).
* @param {Node<vec2>} [coord=uv()] - The UV coordinates to use for scanlines.
* @return {Node<vec3>} The color with scanlines applied.
*/
export const scanlines = Fn( ( [ color, intensity = float( 0.3 ), count = float( 240.0 ), speed = float( 0.0 ), coord = uv() ] ) => {
// Animate scanlines scrolling down (like CRT vertical sync roll)
const animatedY = coord.y.sub( time.mul( speed ) );
// Create scanline pattern
const scanline = sin( animatedY.mul( count ) );
const scanlineIntensity = scanline.mul( 0.5 ).add( 0.5 ).mul( intensity );
// Darken alternate lines
return color.mul( float( 1.0 ).sub( scanlineIntensity ) );
} );
/**
* Applies vignette effect to darken the edges of the screen.
*
* @tsl
* @function
* @param {Node<vec3>} color - The input color.
* @param {Node<float>} [intensity=0.4] - The intensity of the vignette (0-1).
* @param {Node<float>} [smoothness=0.5] - The smoothness of the vignette falloff.
* @param {Node<vec2>} [coord=uv()] - The UV coordinates to use for vignette calculation.
* @return {Node<vec3>} The color with vignette applied.
*/
export const vignette = Fn( ( [ color, intensity = float( 0.4 ), smoothness = float( 0.5 ), coord = uv() ] ) => {
// Use circle for radial gradient (1.42 ≈ √2 covers full diagonal)
const mask = circle( float( 1.42 ), smoothness, coord );
// Apply vignette: center = 1, edges = (1 - intensity)
const vignetteAmount = mix( float( 1.0 ).sub( intensity ), float( 1.0 ), mask );
return color.mul( vignetteAmount );
} );