Home Reference Source

src/effects/GridEffect.js

  1. import { Uniform, Vector2 } from "three";
  2. import { BlendFunction } from "../enums/BlendFunction.js";
  3. import { Effect } from "./Effect.js";
  4.  
  5. import fragmentShader from "./glsl/grid.frag";
  6.  
  7. /**
  8.  * A grid effect.
  9.  */
  10.  
  11. export class GridEffect extends Effect {
  12.  
  13. 	/**
  14. 	 * Constructs a new grid effect.
  15. 	 *
  16. 	 * @param {Object} [options] - The options.
  17. 	 * @param {BlendFunction} [options.blendFunction=BlendFunction.OVERLAY] - The blend function of this effect.
  18. 	 * @param {Number} [options.scale=1.0] - The scale of the grid pattern.
  19. 	 * @param {Number} [options.lineWidth=0.0] - The line width of the grid pattern.
  20. 	 */
  21.  
  22. 	constructor({ blendFunction = BlendFunction.OVERLAY, scale = 1.0, lineWidth = 0.0 } = {}) {
  23.  
  24. 		super("GridEffect", fragmentShader, {
  25. 			blendFunction,
  26. 			uniforms: new Map([
  27. 				["scale", new Uniform(new Vector2())],
  28. 				["lineWidth", new Uniform(lineWidth)]
  29. 			])
  30. 		});
  31.  
  32. 		/**
  33. 		 * The original resolution.
  34. 		 *
  35. 		 * @type {Vector2}
  36. 		 * @private
  37. 		 */
  38.  
  39. 		this.resolution = new Vector2();
  40.  
  41. 		/**
  42. 		 * The grid scale, relative to the screen height.
  43. 		 *
  44. 		 * @type {Number}
  45. 		 * @private
  46. 		 */
  47.  
  48. 		this.s = 0;
  49. 		this.scale = scale;
  50.  
  51. 		/**
  52. 		 * The grid line width.
  53. 		 *
  54. 		 * @type {Number}
  55. 		 * @private
  56. 		 */
  57.  
  58. 		this.l = 0;
  59. 		this.lineWidth = lineWidth;
  60.  
  61. 	}
  62.  
  63. 	/**
  64. 	 * The scale.
  65. 	 *
  66. 	 * @type {Number}
  67. 	 */
  68.  
  69. 	get scale() {
  70.  
  71. 		return this.s;
  72.  
  73. 	}
  74.  
  75. 	set scale(value) {
  76.  
  77. 		this.s = Math.max(value, 1e-6);
  78. 		this.setSize(this.resolution.width, this.resolution.height);
  79.  
  80. 	}
  81.  
  82. 	/**
  83. 	 * Returns the current grid scale.
  84. 	 *
  85. 	 * @deprecated Use scale instead.
  86. 	 * @return {Number} The grid scale.
  87. 	 */
  88.  
  89. 	getScale() {
  90.  
  91. 		return this.scale;
  92.  
  93. 	}
  94.  
  95. 	/**
  96. 	 * Sets the grid scale.
  97. 	 *
  98. 	 * @deprecated Use scale instead.
  99. 	 * @param {Number} value - The new grid scale.
  100. 	 */
  101.  
  102. 	setScale(value) {
  103.  
  104. 		this.scale = value;
  105.  
  106. 	}
  107.  
  108. 	/**
  109. 	 * The line width.
  110. 	 *
  111. 	 * @type {Number}
  112. 	 */
  113.  
  114. 	get lineWidth() {
  115.  
  116. 		return this.l;
  117.  
  118. 	}
  119.  
  120. 	set lineWidth(value) {
  121.  
  122. 		this.l = value;
  123. 		this.setSize(this.resolution.width, this.resolution.height);
  124.  
  125. 	}
  126.  
  127. 	/**
  128. 	 * Returns the current grid line width.
  129. 	 *
  130. 	 * @deprecated Use lineWidth instead.
  131. 	 * @return {Number} The grid line width.
  132. 	 */
  133.  
  134. 	getLineWidth() {
  135.  
  136. 		return this.lineWidth;
  137.  
  138. 	}
  139.  
  140. 	/**
  141. 	 * Sets the grid line width.
  142. 	 *
  143. 	 * @deprecated Use lineWidth instead.
  144. 	 * @param {Number} value - The new grid line width.
  145. 	 */
  146.  
  147. 	setLineWidth(value) {
  148.  
  149. 		this.lineWidth = value;
  150.  
  151. 	}
  152.  
  153. 	/**
  154. 	 * Updates the size of this pass.
  155. 	 *
  156. 	 * @param {Number} width - The width.
  157. 	 * @param {Number} height - The height.
  158. 	 */
  159.  
  160. 	setSize(width, height) {
  161.  
  162. 		this.resolution.set(width, height);
  163.  
  164. 		const aspect = width / height;
  165. 		const scale = this.scale * (height * 0.125);
  166.  
  167. 		this.uniforms.get("scale").value.set(aspect * scale, scale);
  168. 		this.uniforms.get("lineWidth").value = (scale / height) + this.lineWidth;
  169.  
  170. 	}
  171.  
  172. }