LineMaterial: Automatically adjust the USE_DASH define when setting "dashed" (#21797)

* Automatically adjust the USE_DASH define when setting "dashed"

* adjust conditions

examples/jsm/lines/LineMaterial.js

@@ -284,8 +284,6 @@ class LineMaterial extends ShaderMaterial {
 
 		} );
 
-		this.dashed = false;
-
 		Object.defineProperties( this, {
 
 			color: {
@@ -324,6 +322,38 @@ class LineMaterial extends ShaderMaterial {
 
 			},
 
+			dashed: {
+
+				enumerable: true,
+
+				get: function () {
+
+					return Boolean( 'USE_DASH' in this.defines );
+
+				},
+
+				set( value ) {
+
+					if ( Boolean( value ) !== Boolean( 'USE_DASH' in this.defines ) ) {
+
+						this.needsUpdate = true;
+
+					}
+
+					if ( value === true ) {
+
+						this.defines.USE_DASH = '';
+
+					} else {
+
+						delete this.defines.USE_DASH;
+
+					}
+
+				}
+
+			},
+
 			dashScale: {
 
 				enumerable: true,
@@ -450,7 +480,7 @@ class LineMaterial extends ShaderMaterial {
 
 					}
 
-					if ( value ) {
+					if ( value === true ) {
 
 						this.defines.ALPHA_TO_COVERAGE = '';
 						this.extensions.derivatives = true;

examples/webgl_lines_fat.html

@@ -242,13 +242,6 @@
 				gui.add( param, 'dashed' ).onChange( function ( val ) {
 
 					matLine.dashed = val;
-
-					// dashed is implemented as a defines -- not as a uniform. this could be changed.
-					// ... or THREE.LineDashedMaterial could be implemented as a separate material
-					// temporary hack - renderer should do this eventually
-					if ( val ) matLine.defines.USE_DASH = ""; else delete matLine.defines.USE_DASH;
-					matLine.needsUpdate = true;
-
 					line1.material = val ? matLineDashed : matLineBasic;
 
 				} );