Merge pull request #281 from gkjohnson/thin-film

Thin film

Author: gkjohnson

example/index.js

@@ -624,6 +624,8 @@ async function updateModel() {
 
 			if ( c.material ) {
 
+				// set the thickness so we render the material as a volumetric object
+				c.material.thickness = 1.0;
 				c.material.side = DoubleSide;
 
 			}

example/interior.js

@@ -116,6 +116,17 @@ async function init() {
 		.loadAsync( 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/pathtracing-bathroom/modernbathroom.glb' )
 		.then( gltf => {
 
+			gltf.scene.traverse( c => {
+
+				if ( c.material ) {
+
+					// set the thickness so volume rendering is used for transmissive objects.
+					c.material.thickness = 1.0;
+
+				}
+
+			} );
+
 			const group = new THREE.Group();
 			group.add( gltf.scene );
 

example/materialBall.js

@@ -25,6 +25,7 @@ const params = {
 		metalness: 0.8,
 		ior: 1.495,
 		transmission: 0.0,
+		thinFilm: false,
 		attenuationColor: '#ffffff',
 		attenuationDistance: 0.5,
 		opacity: 1.0,
@@ -47,6 +48,7 @@ const params = {
 		roughness: 0.9,
 		metalness: 0.1,
 		transmission: 0.0,
+		thinFilm: false,
 		attenuationColor: '#ffffff',
 		attenuationDistance: 0.5,
 		ior: 1.495,
@@ -433,6 +435,7 @@ async function init() {
 	matFolder1.add( params.material1, 'metalness', 0, 1 ).onChange( reset );
 	matFolder1.add( params.material1, 'opacity', 0, 1 ).onChange( reset );
 	matFolder1.add( params.material1, 'transmission', 0, 1 ).onChange( reset );
+	matFolder1.add( params.material1, 'thinFilm', 0, 1 ).onChange( reset );
 	matFolder1.add( params.material1, 'attenuationDistance', 0.05, 2.0 ).onChange( reset );
 	matFolder1.addColor( params.material1, 'attenuationColor' ).onChange( reset );
 	matFolder1.add( params.material1, 'ior', 0.9, 3.0 ).onChange( reset );
@@ -457,6 +460,7 @@ async function init() {
 	matFolder2.add( params.material2, 'metalness', 0, 1 ).onChange( reset );
 	matFolder2.add( params.material2, 'opacity', 0, 1 ).onChange( reset );
 	matFolder2.add( params.material2, 'transmission', 0, 1 ).onChange( reset );
+	matFolder1.add( params.material2, 'thinFilm', 0, 1 ).onChange( reset );
 	matFolder2.add( params.material2, 'attenuationDistance', 0.05, 2.0 ).onChange( reset );
 	matFolder2.addColor( params.material2, 'attenuationColor' ).onChange( reset );
 	matFolder2.add( params.material2, 'ior', 0.9, 3.0 ).onChange( reset );
@@ -578,7 +582,7 @@ function animate() {
 	m1.metalness = params.material1.metalness;
 	m1.roughness = params.material1.roughness;
 	m1.transmission = params.material1.transmission;
-	m1.attenuationDistance = params.material1.attenuationDistance;
+	m1.attenuationDistance = params.material1.thinFilm ? Infinity : params.material1.attenuationDistance;
 	m1.attenuationColor.set( params.material1.attenuationColor );
 	m1.ior = params.material1.ior;
 	m1.opacity = params.material1.opacity;
@@ -600,7 +604,7 @@ function animate() {
 	m2.metalness = params.material2.metalness;
 	m2.roughness = params.material2.roughness;
 	m2.transmission = params.material2.transmission;
-	m2.attenuationDistance = params.material2.attenuationDistance;
+	m2.attenuationDistance = params.material2.thinFilm ? Infinity : params.material2.attenuationDistance;
 	m2.attenuationColor.set( params.material2.attenuationColor );
 	m2.ior = params.material2.ior;
 	m2.opacity = params.material2.opacity;

src/materials/PhysicalPathTracingMaterial.js

@@ -571,10 +571,9 @@ export class PhysicalPathTracingMaterial extends MaterialBase {
 						// and we're rendering the other then we skip it. Do the opposite on subsequent bounces to get incoming light.
 						float alphaTest = material.alphaTest;
 						bool useAlphaTest = alphaTest != 0.0;
-						bool isFirstHit = i == 0;
 						if (
 							// material sidedness
-							material.side != 0.0 && ( side != material.side ) == isFirstHit
+							material.side != 0.0 && side != material.side
 
 							// alpha test
 							|| useAlphaTest && albedo.a < alphaTest
@@ -799,7 +798,8 @@ export class PhysicalPathTracingMaterial extends MaterialBase {
 						// frontFace is used to determine transmissive properties and PDF. If no transmission is used
 						// then we can just always assume this is a front face.
 						surfaceRec.frontFace = side == 1.0 || transmission == 0.0;
-						surfaceRec.iorRatio = surfaceRec.frontFace ? 1.0 / material.ior : material.ior;
+						surfaceRec.iorRatio = material.thinFilm || surfaceRec.frontFace ? 1.0 / material.ior : material.ior;
+						surfaceRec.thinFilm = material.thinFilm;
 
 						// Compute the filtered roughness value to use during specular reflection computations.
 						// The accumulated roughness value is scaled by a user setting and a "magic value" of 5.0.

src/shader/shaderMaterialSampling.js

@@ -14,6 +14,7 @@ struct SurfaceRec {
 	vec3 color;
 	vec3 emission;
 	float transmission;
+	bool thinFilm;
 	float ior;
 	float iorRatio;
 	float clearcoat;
@@ -220,14 +221,20 @@ vec3 transmissionDirection( vec3 wo, SurfaceRec surf ) {
 	vec3 halfVector = normalize( vec3( 0.0, 0.0, 1.0 ) + randDirection() * roughness );
 	vec3 lightDirection = refract( normalize( - wo ), halfVector, iorRatio );
 
+	if ( surf.thinFilm ) {
+
+		lightDirection = - refract( normalize( - lightDirection ), - vec3( 0.0, 0.0, 1.0 ), 1.0 / iorRatio );
+
+	}
 	return normalize( lightDirection );
 
 }
 
 vec3 transmissionColor( vec3 wo, vec3 wi, SurfaceRec surf ) {
 
 	// only attenuate the color if it's on the way in
-	return surf.frontFace ? surf.color : vec3( 1.0 );
+	vec3 col = surf.thinFilm || surf.frontFace ? surf.color : vec3( 1.0 );
+	return surf.transmission * col;
 
 }
 

src/shader/shaderStructs.js

@@ -62,6 +62,7 @@ export const shaderMaterialStructs = /* glsl */ `
 
 		float specularIntensity;
 		int specularIntensityMap;
+		bool thinFilm;
 
 		vec3 attenuationColor;
 		float attenuationDistance;
@@ -180,6 +181,7 @@ export const shaderMaterialStructs = /* glsl */ `
 
 		m.specularIntensity = s11.r;
 		m.specularIntensityMap = int( round( s11.g ) );
+		m.thinFilm = bool( s11.b );
 
 		m.attenuationColor = s12.rgb;
 		m.attenuationDistance = s12.a;

src/uniforms/MaterialsTexture.js

@@ -335,7 +335,9 @@ export class MaterialsTexture extends DataTexture {
 			// specular intensity
 			floatArray[ index ++ ] = getField( m, 'specularIntensity', 1.0 );
 			floatArray[ index ++ ] = getTexture( m, 'specularIntensityMap' );
-			index ++;
+
+			// thickness
+			floatArray[ index ++ ] = getField( m, 'thickness', 0.0 ) === 0.0 && getField( m, 'attenuationDistance', Infinity ) === Infinity;
 			index ++;
 
 			// sample 12