程序纹理
更新时间: 2025-04-02 17:10:19
在本教程中，我们将学习什么是程序纹理，以及如何在babylonjs中使用程序纹理。
# 什么是程序纹理
本质上它是一种基于算法而不是图像，以代码生成的纹理。
我们要学的第一个程序纹理，是Perlin Noise
珍珠噪声，是一种常见于计算机图形学，程序化生成(地形，云层，火焰)以及视觉特效的伪随机梯度噪声算法。
# 使用程序纹理
- 创建一个平面
const plane = new BABYLON.MeshBuilder.CreatePlane()
const planeMat = new BABYLON.StandardMaterial()
plane.material = planeMat
1
2
3
2
3
- 创建噪声纹理
const noiseTexture = new BABYLON.NoiseProceduralTexture('noiseText', 256, scene)
planeMat.emissiveTexture = noiseTexture
1
2
2
我们可以通过改变其属性值来更新此纹理的外观
noiseTexture.octaves = 4
1
noiseTexture.persistence = 2
1
还可以改变动画运行的速度
noiseTexture.animationSpeedFactor = 1.5
1
# 应用场景
将噪声纹理设置为不透明度贴图可以创造一些很酷的效果
const plane = new BABYLON.MeshBuilder.CreatePlane()
const planeMat = new BABYLON.StandardMaterial()
plane.material = planeMat
const noiseTexture = new BABYLON.NoiseProceduralTexture('noiseText', 256, scene)
planeMat.emissiveTexture = new BABYLON.Texture('/bg.jpg')
noiseTexture.octaves = 4
noiseTexture.persistence = 2
noiseTexture.animationSpeedFactor = 3
// 不透明度纹理读取的红通道，我们修改一下属性改成基于白色计算
noiseTexture.getAlphaFromRGB = true
planeMat.opacityTexture = noiseTexture
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 其他纹理
除了噪声纹理，Babylonjs中还有七种程序纹理，使用它们需要安装程序纹理模块
npm install @babylonjs/procedural-textures
- 火焰程序纹理
import {FireProceduralTexture} from '@babylonjs/procedural-textures'
const fireTexture = new FireProceduralTexture('fireTexture', 256, scene)
planeMat.emissiceTexture = fireTexture
// 修改火焰速度
fireTexture.speed = new BABYLON.Vector2(-1, -1)
// 火焰颜色
fireTexture.fireColors = FireProceduralTexture.PurpleFireColors
// 修改火焰颜色的另一种形式
fireTexture.fireColors = [
new BABYLON.Color3(0, 1, 0),
new BABYLON.Color3(0, 1, 1),
new BABYLON.Color3(1, 1, 0),
new BABYLON.Color3(1, 0, 0),
new BABYLON.Color3(0, 0, 0),
new BABYLON.Color3(1, 1, 1)
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
我们可以再次使用这个程序纹理作为不透明度纹理
- 大理石纹理
import {MarbleProceduralTexture} from '@babylonjs/procedural-textures'
const marbleTexture = new MarbleProceduralTexture('marbleTexture', 512, scene)
planeMat.emissiveTexture = marbleTexture
marbleTexture.jointColor = BABYLON.Color3.Blue()
marbleTexture.numberOfTilesHeight = 6
marbleTexture.numberOfTilesWidth = 6
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
