PointsMaterial: add alphaMap support

docs/api/en/materials/PointsMaterial.html

@@ -65,6 +65,17 @@ scene.add( starField );
 		<h2>Properties</h2>
 		<p>See the base [page:Material] class for common properties.</p>
 
+		<h3>[property:Texture alphaMap]</h3>
+		<p>The alpha map is a grayscale texture that controls the opacity across the surface
+			(black: fully transparent; white: fully opaque). Default is null.<br /><br />
+
+			Only the color of the texture is used, ignoring the alpha channel if one exists.
+			For RGB and RGBA textures, the [page:WebGLRenderer WebGL] renderer will use the
+			green channel when sampling this texture due to the extra bit of precision provided
+			for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and
+			luminance/alpha textures will also still work as expected.
+		</p>
+
 		<h3>[property:Color color]</h3>
 		<p>[page:Color] of the material, by default set to white (0xffffff).</p>
 

src/materials/PointsMaterial.d.ts

@@ -25,7 +25,8 @@ export class MultiMaterial extends Material {
 
 export interface PointsMaterialParameters extends MaterialParameters {
 	color?: Color | string | number;
-	map?: Texture;
+	map?: Texture | null;
+	alphaMap?: Texture | null;
 	size?: number;
 	sizeAttenuation?: boolean;
 }
@@ -36,6 +37,7 @@ export class PointsMaterial extends Material {
 
 	color: Color;
 	map: Texture | null;
+	alphaMap: Texture | null;
 	size: number;
 	sizeAttenuation: boolean;
 

src/materials/PointsMaterial.js

@@ -9,6 +9,7 @@ import { Color } from '../math/Color.js';
  *  color: <hex>,
  *  opacity: <float>,
  *  map: new THREE.Texture( <Image> ),
+ *  alphaMap: new THREE.Texture( <Image> ),
  *
  *  size: <float>,
  *  sizeAttenuation: <bool>
@@ -27,6 +28,8 @@ function PointsMaterial( parameters ) {
 
 	this.map = null;
 
+	this.alphaMap = null;
+
 	this.size = 1;
 	this.sizeAttenuation = true;
 
@@ -49,6 +52,8 @@ PointsMaterial.prototype.copy = function ( source ) {
 
 	this.map = source.map;
 
+	this.alphaMap = source.alphaMap;
+
 	this.size = source.size;
 	this.sizeAttenuation = source.sizeAttenuation;
 

src/renderers/WebGLRenderer.js

@@ -2181,17 +2181,43 @@ function WebGLRenderer( parameters ) {
 		uniforms.size.value = material.size * _pixelRatio;
 		uniforms.scale.value = _height * 0.5;
 
-		uniforms.map.value = material.map;
+		if ( material.map ) {
+
+			uniforms.map.value = material.map;
+
+		}
+
+		if ( material.alphaMap ) {
+
+			uniforms.alphaMap.value = material.alphaMap;
+
+		}
 
-		if ( material.map !== null ) {
+		// uv repeat and offset setting priorities
+		// 1. color map
+		// 2. alpha map
 
-			if ( material.map.matrixAutoUpdate === true ) {
+		var uvScaleMap;
 
-				material.map.updateMatrix();
+		if ( material.map ) {
+
+			uvScaleMap = material.map;
+
+		} else if ( material.alphaMap ) {
+
+			uvScaleMap = material.alphaMap;
+
+		}
+
+		if ( uvScaleMap !== undefined ) {
+
+			if ( uvScaleMap.matrixAutoUpdate === true ) {
+
+				uvScaleMap.updateMatrix();
 
 			}
 
-			uniforms.uvTransform.value.copy( material.map.matrix );
+			uniforms.uvTransform.value.copy( uvScaleMap.matrix );
 
 		}
 

src/renderers/shaders/ShaderChunk/map_particle_fragment.glsl.js

 export default /* glsl */`
-#ifdef USE_MAP
+#if defined( USE_MAP ) || defined( USE_ALPHAMAP )
 
 	vec2 uv = ( uvTransform * vec3( gl_PointCoord.x, 1.0 - gl_PointCoord.y, 1 ) ).xy;
+
+#endif
+
+#ifdef USE_MAP
+
 	vec4 mapTexel = texture2D( map, uv );
 	diffuseColor *= mapTexelToLinear( mapTexel );
 
+#endif
+
+#ifdef USE_ALPHAMAP
+
+	diffuseColor.a *= texture2D( alphaMap, uv ).g;
+
 #endif
 `;

src/renderers/shaders/ShaderChunk/map_particle_pars_fragment.glsl.js

 export default /* glsl */`
-#ifdef USE_MAP
+#if defined( USE_MAP ) || defined( USE_ALPHAMAP )
 
 	uniform mat3 uvTransform;
+
+#endif
+
+#ifdef USE_MAP
+
 	uniform sampler2D map;
 
+#endif
+
+#ifdef USE_ALPHAMAP
+
+	uniform sampler2D alphaMap;
+
 #endif
 `;

src/renderers/shaders/UniformsLib.js

@@ -182,6 +182,7 @@ var UniformsLib = {
 		size: { value: 1.0 },
 		scale: { value: 1.0 },
 		map: { value: null },
+		alphaMap: { value: null },
 		uvTransform: { value: new Matrix3() }
 
 	},