Merge pull request #273 from gkjohnson/transparent-fix

Transparent fix

Author: gkjohnson

example/materialBall.js

@@ -589,6 +589,7 @@ function animate() {
 	m1.iridescenceThicknessRange = [ 0, params.material1.iridescenceThickness ];
 	m1.specularColor.set( params.material1.specularColor ).convertSRGBToLinear();
 	m1.specularIntensity = params.material1.specularIntensity;
+	m1.transparent = m1.opacity < 1;
 
 	const m2 = materials[ 1 ];
 	m2.color.set( params.material2.color ).convertSRGBToLinear();
@@ -610,11 +611,13 @@ function animate() {
 	m2.iridescenceThicknessRange = [ 0, params.material2.iridescenceThickness ];
 	m2.specularColor.set( params.material2.specularColor ).convertSRGBToLinear();
 	m2.specularIntensity = params.material2.specularIntensity;
+	m2.transparent = m2.opacity < 1;
 
 	const m3 = materials[ 2 ];
 	m3.color.set( params.material3.color ).convertSRGBToLinear();
 	m3.metalness = params.material3.metalness;
 	m3.roughness = params.material3.roughness;
+	m3.transparent = m3.opacity < 1;
 
 	ptRenderer.material.materials.updateFrom( sceneInfo.materials, sceneInfo.textures );
 	ptRenderer.material.materials.setMatte( 0, params.material1.matte );

example/viewerTest.js

@@ -439,10 +439,6 @@ async function updateModel() {
 
 		generator.dispose();
 
-		envMap.mapping = EquirectangularReflectionMapping;
-		scene.environment = envMap;
-		scene.background = envMap;
-
 		loadingEl.style.visibility = 'hidden';
 
 		creditEl.innerHTML = modelInfo.credit || '';
@@ -467,7 +463,20 @@ async function updateModel() {
 		controls.update();
 		camera.updateMatrixWorld();
 
-		ptRenderer.material.backgroundAlpha = renderSkybox ? 1 : 0;
+		envMap.mapping = EquirectangularReflectionMapping;
+		scene.environment = envMap;
+		if ( renderSkybox ) {
+
+			scene.background = envMap;
+			ptRenderer.material.backgroundAlpha = 1;
+
+		} else {
+
+			renderer.setClearAlpha( 0 );
+			scene.background = null;
+			ptRenderer.material.backgroundAlpha = 0;
+
+		}
 
 		ptRenderer.reset();
 

src/materials/PhysicalPathTracingMaterial.js

@@ -273,7 +273,7 @@ export class PhysicalPathTracingMaterial extends MaterialBase {
 									|| useAlphaTest && albedo.a < alphaTest
 
 									// opacity
-									|| ! useAlphaTest && albedo.a < rand()
+									|| material.transparent && ! useAlphaTest && albedo.a < rand()
 								)
 							) {
 
@@ -580,7 +580,7 @@ export class PhysicalPathTracingMaterial extends MaterialBase {
 							|| useAlphaTest && albedo.a < alphaTest
 
 							// opacity
-							|| ! useAlphaTest && albedo.a < rand()
+							|| material.transparent && ! useAlphaTest && albedo.a < rand()
 						) {
 
 							vec3 point = rayOrigin + rayDirection * dist;

src/shader/shaderStructs.js

@@ -81,6 +81,7 @@ export const shaderMaterialStructs = /* glsl */ `
 		int sheenRoughnessMap;
 
 		bool vertexColors;
+		bool transparent;
 
 		mat3 mapTransform;
 		mat3 metalnessMapTransform;
@@ -192,6 +193,7 @@ export const shaderMaterialStructs = /* glsl */ `
 		m.matte = bool( s14.r );
 		m.castShadow = ! bool( s14.g );
 		m.vertexColors = bool( s14.b );
+		m.transparent = bool( s14.a );
 
 		uint firstTextureTransformIdx = i + 15u;
 

src/uniforms/MaterialsTexture.js

@@ -368,7 +368,7 @@ export class MaterialsTexture extends DataTexture {
 			index ++; // matte
 			index ++; // shadow
 			floatArray[ index ++ ] = Number( m.vertexColors ); // vertexColors
-			index ++;
+			floatArray[ index ++ ] = Number( m.transparent ); // transparent
 
 			// map transform 15
 			index += writeTextureMatrixToArray( m, 'map', floatArray, index );

src/utils/GeometryPreparationUtils.js

@@ -104,7 +104,7 @@ export function setCommonAttributes( geometry, options ) {
 	if ( ! geometry.attributes.color && ( attributes && attributes.includes( 'color' ) ) ) {
 
 		const vertCount = geometry.attributes.position.count;
-		geometry.setAttribute( 'color', new BufferAttribute( new Float32Array( vertCount * 4 ), 4, true ) );
+		geometry.setAttribute( 'color', new BufferAttribute( new Float32Array( vertCount * 4 ), 4 ) );
 
 	}