Skip to content

WebGPUPathtracer: Iridescence extension #762

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TheBlek wants to merge 2 commits into
base: webgpu-pathtracer
Choose a base branch
from
Open

WebGPUPathtracer: Iridescence extension #762

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7814496
Implement iridescent layer functions, integrate them into GltfComplia…
TheBlek Apr 29, 2026
c3277ae
Indentation fixes, use mat3 node
TheBlek May 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions src/webgpu/materials/GltfCompliantMaterial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { texture, textureStore, globalId, float } from 'three/tsl';
import { StorageTexture, RedFormat, LinearFilter, TextureLoader, HalfFloatType } from 'three/webgpu';
import { wgslTagFn } from '../lib/nodes/WGSLTagFnNode';
import { PathtracingMaterial } from './PathtracingMaterial';
import { specularBrdfFunc, diffuseBrdfFunc, fresnelMixFunc, conductorFresnelFunc, albedoIntegralMetallic, fresnelCoatFunc } from '../nodes/material.wgsl.js';
import { specularBrdfFunc, diffuseBrdfFunc, fresnelMixFunc, conductorFresnelFunc, albedoIntegralMetallic, fresnelCoatFunc, iridescentDielectricLayerFunc, iridescentConductorLayerFunc } from '../nodes/material.wgsl.js';
import { diffuseDirectionFunc, getLobeWeightsFunc } from '../nodes/sampling.wgsl.js';
import { ggxDirectionFunc, ggxReflectionAdjustedPDFFunc } from '../nodes/ggx.wgsl.js';
import { bxdfContextStruct, scatterRecordStruct, surfaceRecordStruct } from '../nodes/structs.wgsl.js';
Expand All @@ -27,6 +27,8 @@ export class GltfCompliantMaterial extends PathtracingMaterial {
fresnelMix = fresnelMixFunc,
conductorFresnel = conductorFresnelFunc,
fresnelCoat = fresnelCoatFunc,
iridescentDielectricLayer = iridescentDielectricLayerFunc,
iridescentConductorLayer = iridescentConductorLayerFunc,
calculateTurquinTexture = false,
} = options;

Expand All @@ -53,6 +55,8 @@ export class GltfCompliantMaterial extends PathtracingMaterial {
this.fresnelMix = fresnelMix;
this.conductorFresnel = conductorFresnel( turquinNode );
this.fresnelCoat = fresnelCoat;
this.iridescentDielectricLayer = iridescentDielectricLayer;
this.iridescentConductorLayer = iridescentConductorLayer;
this.calculateTurquinTexture = calculateTurquinTexture;

}
Expand Down Expand Up @@ -85,9 +89,19 @@ export class GltfCompliantMaterial extends PathtracingMaterial {

let specular = ${ this.specularBrdf }( ctx.NdotL, ctx.NdotV, ctx.NdotH, alpha );
let diffuse = ${ this.diffuseBrdf }( ctx.NdotV, ctx.NdotL, ctx.VdotH, surf );
let dielectric = ${ this.fresnelMix }( ctx.VdotH, surf.ior, diffuse, specular );
let dielectricBase = ${ this.fresnelMix }( ctx.VdotH, surf.ior, diffuse, specular );

let metallic = ${ this.conductorFresnel }( ctx.NdotV, ctx.VdotH, surf.color, specular, alpha );
let dielectric = ${ this.iridescentDielectricLayer }(
dielectricBase, diffuse, specular, ctx.VdotH, /* outsideIor */ 1.0,
surf.ior, surf.iridescenceIor, surf.iridescenceThickness, surf.iridescence
);

let metallicBase = ${ this.conductorFresnel }( ctx.NdotV, ctx.VdotH, surf.color, specular, alpha );

let metallic = ${ this.iridescentConductorLayer }(
metallicBase, specular, surf.color, ctx.VdotH, /* outsideIor */ 1.0,
surf.iridescenceIor, surf.iridescenceThickness, surf.iridescence
);
Comment on lines +94 to +104
Copy link
Copy Markdown
Owner

@gkjohnson gkjohnson May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm guessing for "outsideIor" this is something we'll need to track per ray? Something like the "current medium"? I expect other path tracers will track multiple mediums but I'm not exactly sure what the right way to do this would be considering we can have overlapping geometries 🤔

Copy link
Copy Markdown
Author

@TheBlek TheBlek May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, ior tracking is not really a viable option since we can enter a transmissive body, never hit a back facing triangle and still "exit" the body because of alpha transparency/non-watertight meshes.
If we think about it as an ior of medium that interfaces with iridescence layer, then its 1.0 ( other value in case there is a clearcoat layer? ) when triangle is hit from the front and ior of the object itself when hit from the back.

Copy link
Copy Markdown
Owner

@gkjohnson gkjohnson May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, ior tracking is not really a viable option since we can enter a transmissive body, never hit a back facing triangle and still "exit" the body because of alpha transparency/non-watertight meshes.

I think it's okay. If users are marking non-watertight meshes as transmissive it will have to be expected that things may behave a bit oddly. This is a probably for another time, though, I think.

If we think about it as an ior of medium that interfaces with iridescence layer, then its 1.0 ( other value in case there is a clearcoat layer? ) when triangle is hit from the front and ior of the object itself when hit from the back.

I'm not sure I'm completely following this. Perhaps we're talking about different things, but Ignoring clearcoat for a moment (which I believe is modeled as above the iridescence layer) what I'm intended to say is: we're tracking a ray as it enters the iridescence layer, is color shifted based on the ior difference, and then bounced back out of it. So that "outside ior" depends on the medium that the ray had last entered - a ray entering a body of water and then bouncing off of an iridescent object, for example. The "outside ior" should have to be ~1.33 in that case and will impact the color shift from the model.

Not that we have to get to this level of granularity. I just want to know where the lines are at the moment and keep things in mind for later.

Copy link
Copy Markdown
Author

@TheBlek TheBlek May 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If users are marking non-watertight meshes as transmissive it will have to be expected that things may behave a bit oddly. This is a probably for another time, though, I think.

Hm, I wonder if some kind of cheap check can be done on transmissive meshes for users that encounter weird artifacts. This ties into the idea of checking user's mesh attributes for valid tangent / normal combination mentioned in #758 (comment).

a ray entering a body of water and then bouncing off of an iridescent object, for example

Okay, yes, I overlooked that case. Ior would need to be tracked for correct interactions of light with objects inside of other objects. What I meant to say is that material has a layered model:

ray from back -> | base | iridescence | clearcoat | <- ray from front

So if the ray is entering from the back, it interacts with base and then transmits to iridescence layer which makes baseIor the outside ior for this interaction.

And if its entering from the front, then maybe clearcoatIor should be used as outsideIor for the interaction if the layer exists.

At least this is my understanding of how it should be modeled taking layers into account. I don't recall seeing this anywhere so should be double-checked.

Tracking current medium's ior does make me think about how one would determine ior in the camera point.

I agree, this is an issue for a more detailed transmission implementation.

Copy link
Copy Markdown
Owner

@gkjohnson gkjohnson May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tracking current medium's ior does make me think about how one would determine ior in the camera point.

In the WebGL version the ray origin is tested for being within any relevant volume using single raycast. If a backside is hit that means we're "inside" the volume. This was done for fog volumes, at least - I hadn't added transmissive volume support for this but the same should apply.

ray from back -> | base | iridescence | clearcoat | <- ray from front

This is my impression, as well, which gets a bit complicated. Though iridescent + clearcoat models may be less common.


let material = mix( dielectric, metallic, surf.metalness );

Expand Down
141 changes: 140 additions & 1 deletion src/webgpu/nodes/material.wgsl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import { wgslFn } from 'three/tsl';
import { mat3, wgslFn } from 'three/tsl';
import {
inverseMat3x3Func,
getBasisFromNormalFunc,
iorToF0Func,
schlickFresnelFunc,
schlickFresnelVecFunc,
sampleTexelFunc,
iorToF0GeneralFunc,
fresnel0ToIorFunc,
iorToF0GeneralVecFunc,
} from './utils.wgsl.js';
import {
ggxSmithVisibilityFunc,
Expand All @@ -16,6 +19,7 @@ import {
import { constants, surfaceRecordStruct, scatterRecordStruct } from './structs.wgsl.js';
import { sampleSphereCosineFn } from './sampling.wgsl.js';
import { pcgInit, pcgRand2 } from './random.wgsl.js';
import { wgslTagFn } from '../lib/nodes/WGSLTagFnNode.js';

export const getSurfaceRecordFunc = wgslFn( /* wgsl */ `

Expand Down Expand Up @@ -353,6 +357,141 @@ export const fresnelMixFunc = wgslFn( /* wgsl */ `

`, [ schlickFresnelFunc, iorToF0Func ] );

const XYZ_TO_REC709 = mat3(
3.2404542, - 0.9692660, 0.0556434,
- 1.5371385, 1.8760108, - 0.2040259,
- 0.4985314, 0.0415560, 1.0572252,
);

const evalSensitivityFunc = wgslTagFn/* wgsl */`

fn evalSensitivity( OPD: f32, shift: vec3f ) -> vec3f {

let phase = 2.0 * ${ Math.PI } * OPD * 1.0e-9;
const val = vec3(5.4856e-13, 4.4201e-13, 5.2481e-13);
const pos = vec3(1.6810e+06, 1.7953e+06, 2.2084e+06);
const _var = vec3(4.3278e+09, 9.3046e+09, 6.6121e+09);

var xyz = val * sqrt(2.0 * ${ Math.PI } * _var) * cos(pos * phase + shift) * exp(-phase * phase * _var);
xyz.x += 9.7470e-14 * sqrt(2.0 * ${ Math.PI } * 4.5282e+09) * cos(2.2399e+06 * phase + shift.x) * exp(-4.5282e+09 * phase * phase);
xyz /= 1.0685e-7;

let rgb = ${ XYZ_TO_REC709 } * xyz;
return rgb;

}

`;

// Reference: Belcour/Barla, 2017
// https://belcour.github.io/blog/research/publication/2017/05/01/brdf-thin-film.html
// This is a simplified model that ignores light polarization and uses fresnel approximation
export const iridescentFresnelFunc = wgslFn( /* wgsl */ `

fn iridescentFresnel(
cosTheta1: f32, baseF0: vec3f, iridescenceIor: f32,
outsideIor: f32, iridescenceThickness: f32,
) -> vec3f {

let sinTheta2Sq = pow( outsideIor / iridescenceIor, 2.0 ) * ( 1.0 - pow( cosTheta1, 2.0 ) );
let cosTheta2Sq = 1.0 - sinTheta2Sq;

// Handle total internal reflection
if ( cosTheta2Sq < 0.0 ) {

return vec3( 1.0 );

}

let cosTheta2 = sqrt( cosTheta2Sq );

// First interface: air -> iridescent thin film
let R0 = iorToF0General( iridescenceIor, outsideIor );
let R12 = schlickFresnel( cosTheta1, R0 );
let R21 = R12;
let T121 = 1.0 - R12;
let phi12 = select( 0.0, PI, iridescenceIor < outsideIor );
let phi21 = PI - phi12;

// Second interface: iridescent thin film -> base material
let baseIor = fresnel0ToIor( baseF0 + 0.0001 ); // guard against 1.0
let R1 = iorToF0GeneralVec( baseIor, vec3( iridescenceIor ) );
let R23 = schlickFresnelVec( cosTheta2, R1, vec3( 1.0 ) );
let phi23 = select( vec3( 0.0 ), vec3( PI ), baseIor < vec3( iridescenceIor ) );

// Phase shift
let OPD = 2.0 * iridescenceIor * iridescenceThickness * cosTheta2;
let phi = vec3( phi21 ) + phi23;

// Analytical integration
// Compound terms
let R123 = clamp( R12 * R23, vec3( 1e-5 ), vec3( 0.9999 ) );
let r123 = sqrt( R123 );
let Rs = T121 * T121 * R23 / ( vec3( 1.0 ) - R123 );

// Reflectance term for m = 0 (DC term amplitude)
let C0 = R12 + Rs;
var I = C0;

// Reflectance term for m > 0 (pairs of diracs)
var Cm = Rs - T121;
for (var m = 1; m <= 2; m += 1) {

Cm *= r123;
let Sm = 2.0 * evalSensitivity( f32( m ) * OPD, f32( m ) * phi );
I += Cm * Sm;

}

return max( I, vec3(0.0) );

}

`, [ iorToF0GeneralFunc, iorToF0GeneralVecFunc, schlickFresnelFunc, fresnel0ToIorFunc, evalSensitivityFunc ] );

const rgbMixFunc = wgslFn( /* wgsl */ `

fn rgbMix( base: vec3f, specular: vec3f, rgbAlpha: vec3f ) -> vec3f {

let alphaMax = max( max( rgbAlpha.x, rgbAlpha.y ), rgbAlpha.z );
return ( 1 - alphaMax ) * base + rgbAlpha * specular;

}

` );

export const iridescentDielectricLayerFunc = wgslFn( /* wgsl */ `

fn iridescentDielectricLayer(
dielectricBase: vec3f, base: vec3f, specular: vec3f, HdotL: f32,
outsideIor: f32, baseIor: f32, iridescenceIor: f32, thickness: f32, strength: f32,
) -> vec3f {

let baseF0 = vec3( iorToF0( baseIor ) );

let iridescentF = iridescentFresnel( HdotL, baseF0, iridescenceIor, outsideIor, thickness );

return mix( dielectricBase, rgbMix( base, specular, iridescentF ), strength );

}

`, [ iorToF0Func, iridescentFresnelFunc, rgbMixFunc ] );

export const iridescentConductorLayerFunc = wgslFn( /* wgsl */ `

fn iridescentConductorLayer(
metalBase: vec3f, specular: vec3f, baseF0: vec3f, HdotL: f32,
outsideIor: f32, iridescenceIor: f32, thickness: f32, strength: f32,
) -> vec3f {

let iridescenceF = iridescentFresnel( HdotL, baseF0, iridescenceIor, outsideIor, thickness );

return mix( metalBase, specular * iridescenceF, strength );

}

`, [ iridescentFresnelFunc ] );

export const conductorFresnelFunc = ( turquinTexture ) => wgslFn( /* wgsl */ `

fn conductorFresnel( NdotV: f32, VdotH: f32, f0: vec3f, bsdf: vec3f, alpha: f32 ) -> vec3f {
Expand Down
32 changes: 32 additions & 0 deletions src/webgpu/nodes/utils.wgsl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,38 @@ export const iorToF0Func = wgslFn( /* wgsl */ `

` );

export const iorToF0GeneralFunc = wgslFn( /* wgsl */ `

fn iorToF0General( transmittedIor: f32, incidentIor: f32 ) -> f32 {

return pow( ( transmittedIor - incidentIor ) / ( transmittedIor + incidentIor ), 2 );

}

` );

export const iorToF0GeneralVecFunc = wgslFn( /* wgsl */ `

fn iorToF0GeneralVec( transmittedIor: vec3f, incidentIor: vec3f ) -> vec3f {

let v = ( transmittedIor - incidentIor ) / ( transmittedIor + incidentIor );
return v * v;

}

` );

export const fresnel0ToIorFunc = wgslFn( /* wgsl */ `

fn fresnel0ToIor( f0: vec3f ) -> vec3f {

let sqrtF0 = sqrt( f0 );
return ( vec3( 1.0 ) + sqrtF0 ) / ( vec3( 1.0 ) - sqrtF0 );

}

` );

export const schlickFresnelFunc = wgslFn( /* wgsl */ `

fn schlickFresnel( cosine: f32, f0: f32 ) -> f32 {
Expand Down