コメントの修正、simplex-noiseを依存関係から削除

Author: ics-kitagawa

package-lock.json

@@ -20,7 +20,6 @@
   },
   "dependencies": {
     "lil-gui": "^0.21.0",
-    "simplex-noise": "^4.0.3",
     "three": "^0.180.0"
   }
 }

package.json

@@ -1,12 +1,12 @@
 import * as THREE from "three";
-import { createNoise2D } from "simplex-noise";
+import { SimplexNoise } from "three/examples/jsm/Addons.js";
 
-const noise2D = createNoise2D();
+const simplexNoise = new SimplexNoise();
 
 const seaParams = {
   color: "#52ebff",
-  frequency: 0.1,
-  amplitude: 0.7,
+  frequency: 0.09,
+  amplitude: 0.75,
   waveSpeed: 0.2,
   waveAmplitude: 0.4,
 };
@@ -27,7 +27,7 @@ const applyNoise = () => {
     const x = positionAttribute.getX(index);
     const y = positionAttribute.getY(index);
 
-    const noiseValue = noise2D(x * seaParams.frequency, y * seaParams.frequency);
+    const noiseValue = simplexNoise.noise(x * seaParams.frequency, y * seaParams.frequency);
     const height = noiseValue * seaParams.amplitude;
 
     positionAttribute.setZ(index, height);
@@ -68,7 +68,7 @@ export const animateSea = (elapsedTime: number) => {
     const originalZ = originalZPositions[index];
 
     // xとyの値からノイズを生成し、timeで変化させる
-    const noiseValue = noise2D(x * seaParams.frequency + time, y * seaParams.frequency + time);
+    const noiseValue = simplexNoise.noise(x * seaParams.frequency + time, y * seaParams.frequency + time);
     const waveHeight = noiseValue * seaParams.waveAmplitude;
 
     // 元のz座標を基準に波の高さを加算

sea/src/three/createSea.ts

@@ -3,7 +3,7 @@ import type { TextureNode } from "three/webgpu";
 import { bloom } from "three/examples/jsm/tsl/display/BloomNode.js";
 
 /**
- * bloomエフェクトの作成
+ * Bloomエフェクトの作成
  * @param node
  */
 export const createBloom = (node: ShaderNodeObject<TextureNode>) => {

sea/src/three/postprocess/bloom.ts

@@ -6,7 +6,7 @@ import * as THREE from "three";
 import { float, uniform } from "three/tsl";
 
 /**
- * chromaticエフェクトの作成
+ * Chromatic Aberration + Depth of Fieldエフェクトの作成
  * @param node
  * @param viewZ
  */

sea/src/three/postprocess/chromatic.ts

@@ -3,7 +3,7 @@ import type * as THREE from "three";
 import { pixelationPass } from "three/examples/jsm/tsl/display/PixelationPassNode.js";
 
 /**
- * pixelationエフェクトの作成
+ * Pixelationエフェクトの作成
  * @param node
  */
 export const createPixelation = (scene: THREE.Scene, camera: THREE.PerspectiveCamera) => {

sea/src/three/postprocess/pixelation.ts

@@ -5,7 +5,7 @@ import { film as filmPass } from "three/examples/jsm/tsl/display/FilmNode.js";
 import { gaussianBlur as gaussianBlurPass } from "three/examples/jsm/tsl/display/GaussianBlurNode.js";
 
 /**
- * sepiaエフェクトの作成
+ *  Sepia + Film + Gaussian Blurエフェクトの作成
  * @param node
  */
 export const createSepia = (node: ShaderNodeObject<TextureNode>) => {