@plastic-software/three 0.174.0 → 0.175.1

package/src/renderers/common/XRManager.js

@@ -1,14 +1,19 @@
 import { ArrayCamera } from '../../cameras/ArrayCamera.js';
 import { EventDispatcher } from '../../core/EventDispatcher.js';
 import { PerspectiveCamera } from '../../cameras/PerspectiveCamera.js';
+import { Quaternion } from '../../math/Quaternion.js';
 import { RAD2DEG } from '../../math/MathUtils.js';
 import { Vector2 } from '../../math/Vector2.js';
 import { Vector3 } from '../../math/Vector3.js';
 import { Vector4 } from '../../math/Vector4.js';
 import { WebXRController } from '../webxr/WebXRController.js';
-import { DepthFormat, DepthStencilFormat, RGBAFormat, UnsignedByteType, UnsignedInt248Type, UnsignedIntType } from '../../constants.js';
+import { AddEquation, BackSide, CustomBlending, DepthFormat, DepthStencilFormat, FrontSide, RGBAFormat, UnsignedByteType, UnsignedInt248Type, UnsignedIntType, ZeroFactor } from '../../constants.js';
 import { DepthTexture } from '../../textures/DepthTexture.js';
 import { XRRenderTarget } from './XRRenderTarget.js';
+import { CylinderGeometry } from '../../geometries/CylinderGeometry.js';
+import { PlaneGeometry } from '../../geometries/PlaneGeometry.js';
+import { MeshBasicMaterial } from '../../materials/MeshBasicMaterial.js';
+import { Mesh } from '../../objects/Mesh.js';
 
 const _cameraLPos = /*@__PURE__*/ new Vector3();
 const _cameraRPos = /*@__PURE__*/ new Vector3();
@@ -146,6 +151,40 @@ class XRManager extends EventDispatcher {
 		 */
 		this._xrRenderTarget = null;
 
+		/**
+		 * An array holding all the non-projection layers
+		 *
+		 * @private
+		 * @type {Array<Object>}
+		 * @default []
+		 */
+		this._layers = [];
+
+		/**
+		 * Whether the device has support for all layer types.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
+		this._supportsLayers = false;
+
+		/**
+		 * Helper function to create native WebXR Layer.
+		 *
+		 * @private
+		 * @type {Function}
+		 */
+		this._createXRLayer = createXRLayer.bind( this );
+
+		/**
+		* The current WebGL context.
+		*
+		* @private
+		* @type {?WebGL2RenderingContext}
+		* @default null
+		*/
+		this._gl = null;
+
 		/**
 		 * The current animation context.
 		 *
@@ -229,7 +268,7 @@ class XRManager extends EventDispatcher {
 		 * The current XR reference space type.
 		 *
 		 * @private
-		 * @type {string}
+		 * @type {XRReferenceSpaceType}
 		 * @default 'local-floor'
 		 */
 		this._referenceSpaceType = 'local-floor';
@@ -439,7 +478,7 @@ class XRManager extends EventDispatcher {
 	/**
 	 * Returns the reference space type.
 	 *
-	 * @return {string} The reference space type.
+	 * @return {XRReferenceSpaceType} The reference space type.
 	 */
 	getReferenceSpaceType() {
 
@@ -452,7 +491,7 @@ class XRManager extends EventDispatcher {
 	 *
 	 * This method can not be used during a XR session.
 	 *
-	 * @param {string} type - The reference space type.
+	 * @param {XRReferenceSpaceType} type - The reference space type.
 	 */
 	setReferenceSpaceType( type ) {
 
@@ -502,7 +541,7 @@ class XRManager extends EventDispatcher {
 	/**
 	 * Returns the environment blend mode from the current XR session.
 	 *
-	 * @return {?('opaque'|'additive'|'alpha-blend')} The environment blend mode. Returns `null` when used outside of a XR session.
+	 * @return {'opaque'|'additive'|'alpha-blend'|undefined} The environment blend mode. Returns `undefined` when used outside of a XR session.
 	 */
 	getEnvironmentBlendMode() {
 
@@ -525,6 +564,190 @@ class XRManager extends EventDispatcher {
 
 	}
 
+	createQuadLayer( width, height, translation, quaternion, pixelwidth, pixelheight, rendercall, attributes = [] ) {
+
+		const geometry = new PlaneGeometry( width, height );
+		const renderTarget = new XRRenderTarget(
+			pixelwidth,
+			pixelheight,
+			{
+				format: RGBAFormat,
+				type: UnsignedByteType,
+				depthTexture: new DepthTexture(
+					pixelwidth,
+					pixelheight,
+					attributes.stencil ? UnsignedInt248Type : UnsignedIntType,
+					undefined,
+					undefined,
+					undefined,
+					undefined,
+					undefined,
+					undefined,
+					attributes.stencil ? DepthStencilFormat : DepthFormat
+				),
+				stencilBuffer: attributes.stencil,
+				resolveDepthBuffer: false,
+				resolveStencilBuffer: false
+			} );
+
+		const material = new MeshBasicMaterial( { color: 0xffffff, side: FrontSide } );
+		material.map = renderTarget.texture;
+		material.map.offset.y = 1;
+		material.map.repeat.y = - 1;
+		const plane = new Mesh( geometry, material );
+		plane.position.copy( translation );
+		plane.quaternion.copy( quaternion );
+
+		const layer = {
+			type: 'quad',
+			width: width,
+			height: height,
+			translation: translation,
+			quaternion: quaternion,
+			pixelwidth: pixelwidth,
+			pixelheight: pixelheight,
+			plane: plane,
+			material: material,
+			rendercall: rendercall,
+			renderTarget: renderTarget };
+
+		this._layers.push( layer );
+
+		if ( this._session !== null ) {
+
+			layer.plane.material = new MeshBasicMaterial( { color: 0xffffff, side: FrontSide } );
+			layer.plane.material.blending = CustomBlending;
+			layer.plane.material.blendEquation = AddEquation;
+			layer.plane.material.blendSrc = ZeroFactor;
+			layer.plane.material.blendDst = ZeroFactor;
+
+			layer.xrlayer = this._createXRLayer( layer );
+
+			const xrlayers = this._session.renderState.layers;
+			xrlayers.unshift( layer.xrlayer );
+			this._session.updateRenderState( { layers: xrlayers } );
+
+		} else {
+
+			renderTarget.isXRRenderTarget = false;
+
+		}
+
+		return plane;
+
+	}
+
+	createCylinderLayer( radius, centralAngle, aspectratio, translation, quaternion, pixelwidth, pixelheight, rendercall, attributes = [] ) {
+
+		const geometry = new CylinderGeometry( radius, radius, radius * centralAngle / aspectratio, 64, 64, true, Math.PI - centralAngle / 2, centralAngle );
+		const renderTarget = new XRRenderTarget(
+			pixelwidth,
+			pixelheight,
+			{
+				format: RGBAFormat,
+				type: UnsignedByteType,
+				depthTexture: new DepthTexture(
+					pixelwidth,
+					pixelheight,
+					attributes.stencil ? UnsignedInt248Type : UnsignedIntType,
+					undefined,
+					undefined,
+					undefined,
+					undefined,
+					undefined,
+					undefined,
+					attributes.stencil ? DepthStencilFormat : DepthFormat
+				),
+				stencilBuffer: attributes.stencil,
+				resolveDepthBuffer: false,
+				resolveStencilBuffer: false
+			} );
+
+		const material = new MeshBasicMaterial( { color: 0xffffff, side: BackSide } );
+		material.map = renderTarget.texture;
+		material.map.offset.y = 1;
+		material.map.repeat.y = - 1;
+		const plane = new Mesh( geometry, material );
+		plane.position.copy( translation );
+		plane.quaternion.copy( quaternion );
+
+		const layer = {
+			type: 'cylinder',
+			radius: radius,
+			centralAngle: centralAngle,
+			aspectratio: aspectratio,
+			translation: translation,
+			quaternion: quaternion,
+			pixelwidth: pixelwidth,
+			pixelheight: pixelheight,
+			plane: plane,
+			material: material,
+			rendercall: rendercall,
+			renderTarget: renderTarget };
+
+		this._layers.push( layer );
+
+		if ( this._session !== null ) {
+
+			layer.plane.material = new MeshBasicMaterial( { color: 0xffffff, side: BackSide } );
+			layer.plane.material.blending = CustomBlending;
+			layer.plane.material.blendEquation = AddEquation;
+			layer.plane.material.blendSrc = ZeroFactor;
+			layer.plane.material.blendDst = ZeroFactor;
+
+			layer.xrlayer = this._createXRLayer( layer );
+
+			const xrlayers = this._session.renderState.layers;
+			xrlayers.unshift( layer.xrlayer );
+			this._session.updateRenderState( { layers: xrlayers } );
+
+		} else {
+
+			renderTarget.isXRRenderTarget = false;
+
+		}
+
+		return plane;
+
+	}
+
+	renderLayers( ) {
+
+		const translationObject = new Vector3();
+		const quaternionObject = new Quaternion();
+
+		const wasPresenting = this.isPresenting;
+		this.isPresenting = false;
+
+		for ( const layer of this._layers ) {
+
+			layer.renderTarget.isXRRenderTarget = this._session !== null;
+			layer.renderTarget.hasExternalTextures = layer.renderTarget.isXRRenderTarget;
+			layer.renderTarget.autoAllocateDepthBuffer = ! layer.renderTarget.isXRRenderTarget;
+
+			if ( layer.renderTarget.isXRRenderTarget && this._supportsLayers ) {
+
+				layer.xrlayer.transform = new XRRigidTransform( layer.plane.getWorldPosition( translationObject ), layer.plane.getWorldQuaternion( quaternionObject ) );
+
+				const glSubImage = this._glBinding.getSubImage( layer.xrlayer, this._xrFrame );
+				this._renderer.backend.setXRRenderTargetTextures(
+					layer.renderTarget,
+					glSubImage.colorTexture,
+					glSubImage.depthStencilTexture );
+
+			}
+
+			this._renderer.setRenderTarget( layer.renderTarget );
+			layer.rendercall();
+
+		}
+
+		this.isPresenting = wasPresenting;
+		this._renderer.setRenderTarget( null );
+
+	}
+
+
 	/**
 	 * Returns the current XR session.
 	 *
@@ -550,7 +773,9 @@ class XRManager extends EventDispatcher {
 		const renderer = this._renderer;
 		const backend = renderer.backend;
 
-		const gl = renderer.getContext();
+		this._gl = renderer.getContext();
+		const gl = this._gl;
+		const attributes = gl.getContextAttributes();
 
 		this._session = session;
 
@@ -602,12 +827,11 @@ class XRManager extends EventDispatcher {
 
 				const glBinding = new XRWebGLBinding( session, gl );
 				const glProjLayer = glBinding.createProjectionLayer( projectionlayerInit );
+				const layersArray = [ glProjLayer ];
 
 				this._glBinding = glBinding;
 				this._glProjLayer = glProjLayer;
 
-				session.updateRenderState( { layers: [ glProjLayer ] } );
-
 				renderer.setPixelRatio( 1 );
 				renderer.setSize( glProjLayer.textureWidth, glProjLayer.textureHeight, false );
 
@@ -620,12 +844,39 @@ class XRManager extends EventDispatcher {
 						colorSpace: renderer.outputColorSpace,
 						depthTexture: new DepthTexture( glProjLayer.textureWidth, glProjLayer.textureHeight, depthType, undefined, undefined, undefined, undefined, undefined, undefined, depthFormat ),
 						stencilBuffer: renderer.stencil,
+						samples: attributes.antialias ? 4 : 0,
 						resolveDepthBuffer: ( glProjLayer.ignoreDepthValues === false ),
 						resolveStencilBuffer: ( glProjLayer.ignoreDepthValues === false ),
 					} );
 
 				this._xrRenderTarget.hasExternalTextures = true;
 
+				this._referenceSpace = await session.requestReferenceSpace( this.getReferenceSpaceType() );
+
+				this._supportsLayers = session.enabledFeatures.includes( 'layers' );
+
+				if ( this._supportsLayers ) {
+
+					// switch layers to native
+					for ( const layer of this._layers ) {
+
+						// change material so it "punches" out a hole to show the XR Layer.
+						layer.plane.material = new MeshBasicMaterial( { color: 0xffffff, side: layer.type === 'cylinder' ? BackSide : FrontSide } );
+						layer.plane.material.blending = CustomBlending;
+						layer.plane.material.blendEquation = AddEquation;
+						layer.plane.material.blendSrc = ZeroFactor;
+						layer.plane.material.blendDst = ZeroFactor;
+
+						layer.xrlayer = this._createXRLayer( layer );
+
+						layersArray.unshift( layer.xrlayer );
+
+					}
+
+				}
+
+				session.updateRenderState( { layers: layersArray } );
+
 			} else {
 
 				// fallback to XRWebGLLayer
@@ -665,8 +916,6 @@ class XRManager extends EventDispatcher {
 
 			this.setFoveation( this.getFoveation() );
 
-			this._referenceSpace = await session.requestReferenceSpace( this.getReferenceSpaceType() );
-
 			renderer._animation.setAnimationLoop( this._onAnimationFrame );
 			renderer._animation.setContext( session );
 			renderer._animation.start();
@@ -965,10 +1214,50 @@ function onSessionEnd() {
 
 	renderer.backend.setXRTarget( null );
 	renderer.setOutputRenderTarget( null );
+	renderer.setRenderTarget( null );
 
 	this._session = null;
 	this._xrRenderTarget = null;
 
+	// switch layers back to emulated
+	if ( this._supportsLayers === true ) {
+
+		for ( const layer of this._layers ) {
+
+			// Recreate layer render target to reset state
+			layer.renderTarget = new XRRenderTarget(
+				layer.pixelwidth,
+				layer.pixelheight,
+				{
+					format: RGBAFormat,
+					type: UnsignedByteType,
+					depthTexture: new DepthTexture(
+						layer.pixelwidth,
+						layer.pixelheight,
+						layer.stencilBuffer ? UnsignedInt248Type : UnsignedIntType,
+						undefined,
+						undefined,
+						undefined,
+						undefined,
+						undefined,
+						undefined,
+						layer.stencilBuffer ? DepthStencilFormat : DepthFormat
+					),
+					stencilBuffer: layer.stencilBuffer,
+					resolveDepthBuffer: false,
+					resolveStencilBuffer: false
+				} );
+
+			layer.renderTarget.isXRRenderTarget = false;
+
+			layer.plane.material = layer.material;
+			layer.material.map = layer.renderTarget.texture;
+			delete layer.xrlayer;
+
+		}
+
+	}
+
 	//
 
 	this.isPresenting = false;
@@ -1055,6 +1344,40 @@ function onInputSourcesChange( event ) {
 
 }
 
+// Creation method for native WebXR layers
+function createXRLayer( layer ) {
+
+	if ( layer.type === 'quad' ) {
+
+		return this._glBinding.createQuadLayer( {
+			transform: new XRRigidTransform( layer.translation, layer.quaternion ),
+			depthFormat: this._gl.DEPTH_COMPONENT,
+			width: layer.width / 2,
+			height: layer.height / 2,
+			space: this._referenceSpace,
+			viewPixelWidth: layer.pixelwidth,
+			viewPixelHeight: layer.pixelheight
+		} );
+
+	} else {
+
+		return this._glBinding.createCylinderLayer( {
+			transform: new XRRigidTransform( layer.translation, layer.quaternion ),
+			depthFormat: this._gl.DEPTH_COMPONENT,
+			radius: layer.radius,
+			centralAngle: layer.centralAngle,
+			aspectRatio: layer.aspectRatio,
+			space: this._referenceSpace,
+			viewPixelWidth: layer.pixelwidth,
+			viewPixelHeight: layer.pixelheight
+		} );
+
+	}
+
+}
+
+// Animation Loop
+
 function onAnimationFrame( time, frame ) {
 
 	if ( frame === undefined ) return;

package/src/renderers/common/extras/PMREMGenerator.js

@@ -100,6 +100,11 @@ const _outputDirection = /*@__PURE__*/ vec3( _direction.x, _direction.y, _direct
 */
 class PMREMGenerator {
 
+	/**
+	 * Constructs a new PMREM generator.
+	 *
+	 * @param {Renderer} renderer - The renderer.
+	 */
 	constructor( renderer ) {
 
 		this._renderer = renderer;
@@ -641,6 +646,7 @@ class PMREMGenerator {
 	 * the poles) to approximate the orthogonally-separable blur. It is least
 	 * accurate at the poles, but still does a decent job.
 	 *
+	 * @private
 	 * @param {RenderTarget} cubeUVRenderTarget - The cubemap render target.
 	 * @param {number} lodIn - The input level-of-detail.
 	 * @param {number} lodOut - The output level-of-detail.

package/src/renderers/common/nodes/NodeBuilderState.js

@@ -14,9 +14,9 @@ class NodeBuilderState {
 	/**
 	 * Constructs a new node builder state.
 	 *
-	 * @param {?string} vertexShader - The native vertex shader code.
-	 * @param {?string} fragmentShader - The native fragment shader code.
-	 * @param {?string} computeShader - The native compute shader code.
+	 * @param {string} vertexShader - The native vertex shader code.
+	 * @param {string} fragmentShader - The native fragment shader code.
+	 * @param {string} computeShader - The native compute shader code.
 	 * @param {Array<NodeAttribute>} nodeAttributes - An array of node attributes.
 	 * @param {Array<BindGroup>} bindings - An array of bind groups.
 	 * @param {Array<Node>} updateNodes - An array of nodes that implement their `update()` method.

package/src/renderers/shaders/ShaderChunk/alphamap_fragment.glsl.js

@@ -1,7 +1,16 @@
 export default /* glsl */`
 #ifdef USE_ALPHAMAP
+	#ifdef USE_ALPHAMAP_TRIPLANAR
 
-	diffuseColor.a *= texture2D( alphaMap, vAlphaMapUv ).g;
+		diffuseColor.a *= texture2DTriplanar( alphaMap, alphaMapTransform, triplanarCoords, triplanarWeights ).g;
 
+	#else
+    #if defined( USE_ALPHAMAP_CYLINDRICAL )
+      vec2 vAlphaMapUv = ( alphaMapTransform * vec3( positionBasedUv, 1 ) ).xy;
+    #endif
+
+		diffuseColor.a *= texture2D( alphaMap, vAlphaMapUv ).g;
+
+	#endif
 #endif
 `;

package/src/renderers/shaders/ShaderChunk/aomap_fragment.glsl.js

@@ -2,7 +2,14 @@ export default /* glsl */`
 #ifdef USE_AOMAP
 
 	// reads channel R, compatible with a combined OcclusionRoughnessMetallic (RGB) texture
-	float ambientOcclusion = ( texture2D( aoMap, vAoMapUv ).r - 1.0 ) * aoMapIntensity + 1.0;
+  #ifdef USE_AOMAP_TRIPLANAR
+		float ambientOcclusion = ( texture2DTriplanar( aoMap, aoMapTransform, triplanarCoords, triplanarWeights ).r - 1.0 ) * aoMapIntensity + 1.0;
+  #else
+    #if defined( USE_AOMAP_CYLINDRICAL )
+      vec2 vAoMapUv = ( aoMapTransform * vec3( positionBasedUv, 1 ) ).xy;
+    #endif
+		float ambientOcclusion = ( texture2D( aoMap, vAoMapUv ).r - 1.0 ) * aoMapIntensity + 1.0;
+  #endif
 
 	reflectedLight.indirectDiffuse *= ambientOcclusion;
 

package/src/renderers/shaders/ShaderChunk/clearcoat_normal_fragment_maps.glsl.js

@@ -1,5 +1,9 @@
 export default /* glsl */`
-#ifdef USE_CLEARCOAT_NORMALMAP
+#ifdef USE_CLEARCOAT_NORMALMAP_TRIPLANAR
+
+	normal = normalize(normalMatrix * transpose(mat3(texture3DMatrix)) * texture2DTriplanarNormal( clearcoatNormalMap, clearcoatNormalMapTransform, clearcoatNormalScale, normalize(mat3(texture3DMatrix) * vModelNormal.xyz), triplanarCoords, triplanarWeights ));
+
+#elif defined( USE_CLEARCOAT_NORMALMAP )
 
 	vec3 clearcoatMapN = texture2D( clearcoatNormalMap, vClearcoatNormalMapUv ).xyz * 2.0 - 1.0;
 	clearcoatMapN.xy *= clearcoatNormalScale;

package/src/renderers/shaders/ShaderChunk/common.glsl.js

@@ -134,4 +134,86 @@ float F_Schlick( const in float f0, const in float f90, const in float dotVH ) {
 	return f0 * ( 1.0 - fresnel ) + ( f90 * fresnel );
 
 } // validated
+
+#if defined( USE_MAP_TRIPLANAR ) || \
+  defined( USE_ALPHAMAP_TRIPLANAR ) || \
+  defined( USE_NORMALMAP_TRIPLANAR ) || \
+  defined( USE_ROUGHNESSMAP_TRIPLANAR ) || \
+  defined( USE_AOMAP_TRIPLANAR ) || \
+  defined( USE_METALNESSMAP_TRIPLANAR ) || \
+  defined( USE_CLEARCOAT_NORMALMAP_TRIPLANAR )
+
+  #define USE_TRIPLANAR
+
+#endif
+
+#if defined( USE_MAP_TRIPLANAR ) || \
+  defined( USE_ALPHAMAP_TRIPLANAR ) || \
+  defined( USE_ROUGHNESSMAP_TRIPLANAR ) || \
+  defined( USE_AOMAP_TRIPLANAR ) || \
+  defined( USE_METALNESSMAP_TRIPLANAR )
+
+  vec4 texture2DTriplanar( sampler2D map, mat3 uvTransform, vec3 coords, vec3 weights ) {
+    return weights.x * texture2D( map, (uvTransform * vec3(coords.zy, 1)).xy ) +
+           weights.y * texture2D( map, (uvTransform * vec3(coords.xz, 1)).xy ) +
+           weights.z * texture2D( map, (uvTransform * vec3(coords.xy, 1)).xy );
+  
+  }
+
+#endif
+
+#if defined( USE_NORMALMAP_TRIPLANAR ) || defined( USE_CLEARCOAT_NORMALMAP_TRIPLANAR )
+
+  vec3 texture2DTriplanarNormal( sampler2D normalMap, mat3 uvTransform, vec2 normalMapScale, vec3 normal, vec3 coords, vec3 weights ) {
+    // Whiteout blend
+  
+    // Triplanar uvs
+    vec2 uvX = coords.zy; // x facing plane
+    vec2 uvY = coords.xz; // y facing plane
+    vec2 uvZ = coords.xy; // z facing plane
+  
+    // Tangent space normal maps
+    vec3 tnormalX = texture2D( normalMap, (uvTransform * vec3(uvX, 1)).xy ).xyz * 2.0 - 1.0;
+    vec3 tnormalY = texture2D( normalMap, (uvTransform * vec3(uvY, 1)).xy ).xyz * 2.0 - 1.0;
+    vec3 tnormalZ = texture2D( normalMap, (uvTransform * vec3(uvZ, 1)).xy ).xyz * 2.0 - 1.0;
+
+    tnormalX.xy *= normalMapScale;
+    tnormalY.xy *= normalMapScale;
+    tnormalZ.xy *= normalMapScale;
+  
+    // Swizzle world normals into tangent space and apply Whiteout blend
+    tnormalX = vec3(
+        tnormalX.xy + normal.zy,
+        abs(tnormalX.z) * normal.x
+        );
+    tnormalY = vec3(
+        tnormalY.xy + normal.xz,
+        abs(tnormalY.z) * normal.y
+        );
+    tnormalZ = vec3(
+        tnormalZ.xy + normal.xy,
+        abs(tnormalZ.z) * normal.z
+        );
+    
+    // Swizzle tangent normals to match world orientation and triblend
+    return normalize(
+        tnormalX.zyx * weights.x +
+        tnormalY.xzy * weights.y +
+        tnormalZ.xyz * weights.z
+        );
+  }
+
+#endif
+
+#if defined( USE_MAP_CYLINDRICAL ) || \
+  defined( USE_ALPHAMAP_CYLINDRICAL ) || \
+  defined( USE_NORMALMAP_CYLINDRICAL ) || \
+  defined( USE_ROUGHNESSMAP_CYLINDRICAL ) || \
+  defined( USE_AOMAP_CYLINDRICAL ) || \
+  defined( USE_METALNESSMAP_CYLINDRICAL ) || \
+  defined( USE_CLEARCOAT_NORMALMAP_CYLINDRICAL )
+
+  #define USE_CYLINDRICAL
+
+#endif
 `;

package/src/renderers/shaders/ShaderChunk/defaultnormal_vertex.glsl.js

@@ -5,6 +5,11 @@ vec3 transformedNormal = objectNormal;
 
 	vec3 transformedTangent = objectTangent;
 
+#endif
+#if defined( USE_TANGENT_FROM_NORMAL ) || defined( USE_NORMALMAP_TRIPLANAR )
+
+  mat3 tangentMatrix = mat3(1.0);
+
 #endif
 
 #ifdef USE_BATCHING
@@ -20,7 +25,12 @@ vec3 transformedNormal = objectNormal;
 
 		transformedTangent = bm * transformedTangent;
 
-	#endif
+  #endif
+  #if defined( USE_TANGENT_FROM_NORMAL ) || defined( USE_NORMALMAP_TRIPLANAR )
+
+    tangentMatrix = bm * tangentMatrix;
+
+  #endif
 
 #endif
 
@@ -37,7 +47,12 @@ vec3 transformedNormal = objectNormal;
 
 		transformedTangent = im * transformedTangent;
 
-	#endif
+  #endif
+  #if defined( USE_TANGENT_FROM_NORMAL ) || defined( USE_NORMALMAP_TRIPLANAR )
+
+    tangentMatrix = im * tangentMatrix;
+
+  #endif
 
 #endif
 
@@ -59,5 +74,10 @@ transformedNormal = normalMatrix * transformedNormal;
 
 	#endif
 
+#endif
+#if defined( USE_TANGENT_FROM_NORMAL ) || defined( USE_NORMALMAP_TRIPLANAR )
+
+  tangentMatrix = mat3( modelViewMatrix ) * tangentMatrix;
+
 #endif
 `;

package/src/renderers/shaders/ShaderChunk/map_fragment.glsl.js

@@ -1,7 +1,18 @@
 export default /* glsl */`
 #ifdef USE_MAP
 
-	vec4 sampledDiffuseColor = texture2D( map, vMapUv );
+	#ifdef USE_MAP_TRIPLANAR
+
+		vec4 sampledDiffuseColor = texture2DTriplanar( map, mapTransform, triplanarCoords, triplanarWeights );
+
+	#else
+    #if defined( USE_MAP_CYLINDRICAL )
+      vec2 vMapUv = ( mapTransform * vec3( positionBasedUv, 1 ) ).xy;
+    #endif
+
+		vec4 sampledDiffuseColor = texture2D( map, vMapUv );
+
+	#endif
 
 	#ifdef DECODE_VIDEO_TEXTURE