Merge pull request #296 from gkjohnson/implicit-side

MaterialTexture: Automatically use side from Material

Author: gkjohnson

README.md

@@ -722,14 +722,6 @@ Three.js materials support only a single set of UV transforms in a certain fallb
 
 See fallback order documentation [here](https://threejs.org/docs/#api/en/textures/Texture.offset).
 
-### .setSide
-
-```js
-setSide( index : Number, side : FrontSide | BackSide | DoubleSide ) : void
-```
-
-Sets the side to render for the given material.
-
 ### .setMatte
 
 ```js

example/index.html

@@ -60,7 +60,7 @@
 			</div>
 		</div>
 		<script type="module">
-			import { MeshPhysicalMaterial, Color } from 'three';
+			import { MeshPhysicalMaterial, Color, DoubleSide } from 'three';
 
 			window.MODEL_LIST = {
 				'M2020 Rover': {
@@ -300,6 +300,7 @@
 							roughness: 0.25,
 							transmission: 1,
 							ior: 1.5,
+							side: DoubleSide,
 						} ) ;
 
 						model.traverse( c => {

example/index.js

@@ -4,7 +4,6 @@ import {
 	Box3,
 	LoadingManager,
 	Sphere,
-	Color,
 	DoubleSide,
 	Mesh,
 	MeshStandardMaterial,
@@ -166,7 +165,8 @@ async function init() {
 			transparent: true,
 			color: 0x080808,
 			roughness: 0.1,
-			metalness: 0.0
+			metalness: 0.0,
+			side: DoubleSide,
 		} )
 	);
 	floorPlane.scale.setScalar( 3 );
@@ -176,8 +176,7 @@ async function init() {
 	document.body.appendChild( stats.dom );
 	renderer.physicallyCorrectLights = true;
 	renderer.toneMapping = ACESFilmicToneMapping;
-	ptRenderer.material.setDefine( 'FEATURE_GRADIENT_BG', 1 );
-	scene.background = new Color( 0x060606 );
+	scene.background = backgroundMap;
 	ptRenderer.tiles.set( params.tilesX, params.tilesY );
 
 	updateCamera( params.cameraProjection );
@@ -374,7 +373,7 @@ function buildGui() {
 
 		if ( v === 'Gradient' ) {
 
-			scene.background = new Color( 0x060606 );
+			scene.background = backgroundMap;
 			ptRenderer.material.backgroundMap = backgroundMap;
 
 		} else {

src/uniforms/MaterialsTexture.js

@@ -3,7 +3,6 @@ import { DataTexture, RGBAFormat, ClampToEdgeWrapping, FloatType, FrontSide, Bac
 const MATERIAL_PIXELS = 45;
 const MATERIAL_STRIDE = MATERIAL_PIXELS * 4;
 
-const SIDE_OFFSET = 13 * 4 + 3; // s12.a
 const MATTE_OFFSET = 14 * 4 + 0; // s14.r
 const SHADOW_OFFSET = 14 * 4 + 1; // s14.g
 
@@ -39,45 +38,6 @@ export class MaterialsTexture extends DataTexture {
 
 	}
 
-	setSide( materialIndex, side ) {
-
-		const array = this.image.data;
-		const index = materialIndex * MATERIAL_STRIDE + SIDE_OFFSET;
-		switch ( side ) {
-
-		case FrontSide:
-			array[ index ] = 1;
-			break;
-		case BackSide:
-			array[ index ] = - 1;
-			break;
-		case DoubleSide:
-			array[ index ] = 0;
-			break;
-
-		}
-
-	}
-
-	getSide( materialIndex ) {
-
-		const array = this.image.data;
-		const index = materialIndex * MATERIAL_STRIDE + SIDE_OFFSET;
-		switch ( array[ index ] ) {
-
-		case 0:
-			return DoubleSide;
-		case 1:
-			return FrontSide;
-		case - 1:
-			return BackSide;
-
-		}
-
-		return 0;
-
-	}
-
 	setMatte( materialIndex, matte ) {
 
 		const array = this.image.data;
@@ -336,8 +296,9 @@ export class MaterialsTexture extends DataTexture {
 			floatArray[ index ++ ] = getField( m, 'specularIntensity', 1.0 );
 			floatArray[ index ++ ] = getTexture( m, 'specularIntensityMap' );
 
-			// thickness
-			floatArray[ index ++ ] = getField( m, 'thickness', 0.0 ) === 0.0 && getField( m, 'attenuationDistance', Infinity ) === Infinity;
+			// isThinFilm
+			const isThinFilm = getField( m, 'thickness', 0.0 ) === 0.0 && getField( m, 'attenuationDistance', Infinity ) === Infinity;
+			floatArray[ index ++ ] = Number( isThinFilm );
 			index ++;
 
 			// sample 12
@@ -364,7 +325,27 @@ export class MaterialsTexture extends DataTexture {
 			// side & matte
 			floatArray[ index ++ ] = m.opacity;
 			floatArray[ index ++ ] = m.alphaTest;
-			index ++; // side
+			if ( ! isThinFilm && m.transmission > 0.0 ) {
+
+				floatArray[ index ++ ] = 0;
+
+			} else {
+
+				switch ( m.side ) {
+
+				case FrontSide:
+					floatArray[ index ++ ] = 1;
+					break;
+				case BackSide:
+					floatArray[ index ++ ] = - 1;
+					break;
+				case DoubleSide:
+					floatArray[ index ++ ] = 0;
+					break;
+
+				}
+
+			}
 
 			// sample 14
 			index ++; // matte