Cloud Procedural Texture

Cloud Procedural texture

Using the cloud procedural texture

Cloud procedural texture can be found here:

Normal: Normal
Minified: Minified

Warning

The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN.

A demo can be found here: Cloud Procedural Texture Demo

This texture has 2 parameters:

skyColor : the color for the sky (BABYLON.Color3/4)
cloudColor : the color for the clouds (BABYLON.Color3/4)

Sample code to create a cloudy sky:

import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
import { Texture } from "@babylonjs/core/Materials/Textures/texture";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
import { CloudProceduralTexture } from "@babylonjs/procedural-textures/cloud/cloudProceduralTexture";
var cloud = MeshBuilder.CreateSphere("cloud", { segments: 100, diameter: 1000 }, scene);
var cloudMaterial = new StandardMaterial("cloudMat", scene);
var cloudProcTexture = new CloudProceduralTexture("cloudTex", 1024, scene);
cloudMaterial.emissiveTexture = cloudProcTexture;
cloudMaterial.backFaceCulling = false;
cloudMaterial.emissiveTexture.coordinatesMode = Texture.SKYBOX_MODE;
cloud.material = cloudMaterial;
cloud.position = new Vector3(0, 0, 12);