Merge pull request BabylonJS#10915 from Popov72/proctext-cloud

Add amplitude and numOctaves properties to cloud procedural texture
wuqianju · Aug 23, 2021 · fe83c5d · fe83c5d
2 parents f717020 + 4d5e971
commit fe83c5d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git a/proceduralTexturesLibrary/src/cloud/cloudProceduralTexture.fragment.fx b/proceduralTexturesLibrary/src/cloud/cloudProceduralTexture.fragment.fx
@@ -4,6 +4,8 @@ varying vec2 vUV;
 
 uniform vec4 skyColor;
 uniform vec4 cloudColor;
+uniform float amplitude;
+uniform int numOctaves;
 
 float rand(vec2 n) {
 	return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
@@ -16,11 +18,11 @@ float noise(vec2 n) {
 }
 
 float fbm(vec2 n) {
-	float total = 0.0, amplitude = 1.0;
-	for (int i = 0; i < 4; i++) {
-		total += noise(n) * amplitude;
+	float total = 0.0, ampl = amplitude;
+	for (int i = 0; i < numOctaves; i++) {
+		total += noise(n) * ampl;
 		n += n;
-		amplitude *= 0.5;
+		ampl *= 0.5;
 	}
 	return total;
 }

diff --git a/proceduralTexturesLibrary/src/cloud/cloudProceduralTexture.ts b/proceduralTexturesLibrary/src/cloud/cloudProceduralTexture.ts
@@ -1,4 +1,4 @@
-import { serializeAsColor4, SerializationHelper } from "babylonjs/Misc/decorators";
+import { serialize, serializeAsColor4, SerializationHelper } from "babylonjs/Misc/decorators";
 import { Color4 } from "babylonjs/Maths/math.color";
 import { Texture } from "babylonjs/Materials/Textures/texture";
 import { ProceduralTexture } from "babylonjs/Materials/Textures/Procedurals/proceduralTexture";
@@ -10,6 +10,8 @@ import "./cloudProceduralTexture.fragment";
 export class CloudProceduralTexture extends ProceduralTexture {
     private _skyColor = new Color4(0.15, 0.68, 1.0, 1.0);
     private _cloudColor = new Color4(1, 1, 1, 1.0);
+    private _amplitude = 1;
+    private _numOctaves = 4;
 
     constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
         super(name, size, "cloudProceduralTexture", scene, fallbackTexture, generateMipMaps);
@@ -19,6 +21,8 @@ export class CloudProceduralTexture extends ProceduralTexture {
     public updateShaderUniforms() {
         this.setColor4("skyColor", this._skyColor);
         this.setColor4("cloudColor", this._cloudColor);
+        this.setFloat("amplitude", this._amplitude);
+        this.setInt("numOctaves", this._numOctaves);
     }
 
     @serializeAsColor4()
@@ -41,6 +45,26 @@ export class CloudProceduralTexture extends ProceduralTexture {
         this.updateShaderUniforms();
     }
 
+    @serialize()
+    public get amplitude(): number {
+        return this._amplitude;
+    }
+
+    public set amplitude(value: number) {
+        this._amplitude = value;
+        this.updateShaderUniforms();
+    }
+
+    @serialize()
+    public get numOctaves(): number {
+        return this._numOctaves;
+    }
+
+    public set numOctaves(value: number) {
+        this._numOctaves = value;
+        this.updateShaderUniforms();
+    }
+
     /**
      * Serializes this cloud procedural texture
      * @returns a serialized cloud procedural texture object