Three.js Blocks

Home
Documentation
Examples
Tools

MeshTransmissionNodeMaterial

@three-blocks/coreWebGPUWebGL
new MeshTransmissionNodeMaterial(parameters : Object)
Extends
THREE.MeshPhysicalNodeMaterial

Constructs a new transmission node material. Use setValues(parameters) to override properties; see property docs below.

Constructor Parameters
parametersoptionalObject
Optional material parameters.
Default is {}.
  • chromaticAberrationoptionalnumber
    Strength of per-channel IOR dispersion.
    Default is 0.4.
  • anisotropicBluroptionalnumber
    Minimum smear in the thickness direction for rough surfaces.
    Default is 0.38.
  • timeoptionalnumber
    Time uniform used by temporal distortion.
    Default is 0.
  • distortionoptionalnumber
    Distortion amount applied to the refraction normal via noise; scales amplitude, 0 disables.
    Default is 0.
  • distortionScaleoptionalnumber
    Distortion noise scale in world units.
    Default is 0.
  • temporalDistortionoptionalnumber
    Strength of time-based distortion animation.
    Default is 0.
  • ditherStrengthoptionalnumber
    Blue-noise jitter strength for sampling stability.
    Default is 0.5.
  • ditherScaleoptionalnumber
    Blue-noise tiling frequency (higher values tile smaller).
    Default is 128.
  • coloroptionalTHREE.Color | string | number
    Base albedo color.
    Default is 0xffffff.
  • viewportBufferoptional*
    Optional TSL sampler/texture node used to sample the scene; defaults to renderer viewport mip texture.
    Default is null.
Example
import { MeshTransmissionNodeMaterial } from '@three-blocks/core';
import * as THREE from 'three/webgpu';

// Create transmission material
const mat = new MeshTransmissionNodeMaterial({
  color: new THREE.Color('#ffffff'),
  roughness: 0.2,
  thickness: 0.5,
  ior: 1.5,
  chromaticAberration: 0.4,
  anisotropicBlur: 0.1,
  distortion: 0.0,
  attenuationDistance: 0.5,
  attenuationColor: new THREE.Color('#ffffff')
});

const geometry = new THREE.TorusKnotGeometry(1, 0.4, 128, 32);
const mesh = new THREE.Mesh(geometry, mat);
scene.add(mesh);

Properties

.isMeshTransmissionNodeMaterial : boolean

This flag can be used for type testing.
Default is true.

.forceSinglePass : boolean

Render in a single pass. Yield better visual and performance results when sampling the backdrop texture.
Default is true.

.chromaticAberration : number

Strength of per-channel IOR dispersion. Higher values increase color fringing.
Default is 0.4.

.transmissionMap : THREE.Texture|null

Optional map kept for API parity with other materials. Not sampled by this material.
Default is null.

.attenuationDistance : number

Beer–Lambert attenuation distance; set to Infinity to disable attenuation.
Default is Infinity.

.anisotropicBlur : number

Minimum smear in the thickness direction for rough surfaces.
Default is 0.38.

.time : number

Time value used for temporal distortion animation.
Default is 0.

.distortion : number

Distortion amount applied to the perturbed refraction normal via noise. Values scale the noise amplitude; 0 disables the effect.
Default is 0.

.distortionScale : number

Distortion noise scale in world units.
Default is 0.

.temporalDistortion : number

Strength of time-based distortion animation.
Default is 0.

.ditherStrength : number

Blue-noise jitter strength for sampling stability.
Default is 0.5.

.ditherScale : number

Blue-noise tiling frequency (higher values tile smaller).
Default is 128.

.viewportBuffer : *

Optional TSL sampler/texture node used to sample the scene/backdrop. If null, the renderer's viewport mip texture is used.
Default is null.

.backdropNode : *

Backdrop refraction node injected into the physical transmission pipeline.

Methods

attachGUI#

attachGUI(gui : *) : void

Attaches a debug UI for tuning transmission parameters. Compatible with lil-gui, dat.gui, and Three.js Inspector.

Parameters
gui*
GUI instance (e.g., lil-gui/dat.gui or renderer.inspector.createParameters()).
Returns
void

disposeGUI#

disposeGUI() : this

Destroys and clears the debug folder if attached.

Returns
this

dispose#

dispose()

Disposes material resources and detaches any debug UI.