TX3D ENGINE

# 材质

# 巷道材质

巷道分为 'Standard'（纯色）和 'Gradient'（透明渐变）两种材质方案，默认情况所有巷道会使用相同的材质进行渲染。如果想不同的巷道使用不同的材质进行渲染，首先需要巷道原始数据中包含材质名称（例如，'material': '大巷' ），其次需要在加载巷道之前创建相应的巷道材质组以确保巷道可以使用正确的材质进行渲染。

注意

巷道颜色不是通过材质控制的，而且通过顶点属性控制的。

# 创建巷道材质组

使用引擎（Engine）materialManager属性的createLanewayMaterialGroup接口创建巷道材质组。

// 创建巷道材质组
engine.materialManager.createLanewayMaterialGroup( '大巷', 'Standard', {

    shininess: 50.0,
    arrowMap: 'assets/textures/laneway/arrow.png',
    leftMap: 'assets/textures/laneway/left.jpg',
    rightMap: 'assets/textures/laneway/right.jpg',
    topMap: 'assets/textures/laneway/top.jpg',
    bottomMap: 'assets/textures/laneway/bottom.jpg'

} );
1
2
3
4
5
6
7
8
9
10
11

提示

巷道材质组创建参数，详见LanewayMaterialGroupParameters。

# 获取巷道材质组

使用引擎（Engine）materialManager属性的getLanewayMaterialGroup接口获取巷道材质组。

// 获取巷道材质组
const materialGroup = engine.materialManager.getLanewayMaterialGroup( '大巷', 'Standard' );
1
2

提示

巷道材质组，详见LanewayMaterialGroup。

# 巷道材质组属性

🌏 edgeMaterial 巷道边框材质，只读。

// 获取巷道边框材质
const edgeMaterial = materialGroup.edgeMaterial;
1
2

🌏 colorMaterial 巷道外壁纯色材质，只读。

// 获取巷道外壁纯色材质
const colorMaterial = materialGroup.colorMaterial;
1
2

🌏 gradientMaterial 巷道外壁渐变材质，只读。

// 获取巷道外壁渐变材质
const gradientMaterial = materialGroup.gradientMaterial;
1
2

注意

gradientMaterial为“Gradient”材质方案特有材质！！！

🌏 leftMaterial 巷道内壁左邦材质，只读。

// 获取巷道内壁左邦材质
const leftMaterial = materialGroup.leftMaterial;
1
2

🌏 rightMaterial 巷道内壁右邦材质，只读。

// 获取巷道内壁右邦材质
const rightMaterial = materialGroup.rightMaterial;
1
2

🌏 topMaterial 巷道内壁顶板材质，只读。

// 获取巷道内壁顶板材质
const topMaterial = materialGroup.topMaterial;
1
2

🌏 bottomMaterial 巷道内壁底板材质，只读。

// 获取巷道内壁底板材质
const bottomMaterial = materialGroup.bottomMaterial;
1
2

🌏 arrowMap 设置巷道外壁箭头纹理，只写。

// 设置巷道外壁箭头纹理
materialGroup.arrowMap = "./assets/textures/laneway/arrow.png";
1
2

提示

如果将arrowMap设置为null或undefined，则表示删除当前使用的箭头纹理，不推荐这样操作！

// 删除巷道外壁箭头纹理
materialGroup.arrowMap = null;
1
2

🌏 leftMap 设置巷道内壁左邦纹理，只写。

// 设置巷道内壁左邦纹理
materialGroup.leftMap = "./assets/textures/laneway/left.jpg";
1
2

提示

如果将leftMap设置为null或undefined，则表示删除当前使用的左邦纹理，不推荐这样操作！

// 删除巷道内壁左邦纹理
materialGroup.leftMap = null;
1
2

🌏 rightMap 设置巷道内壁右邦纹理，只写。

// 设置巷道内壁右邦纹理
materialGroup.rightMap = "./assets/textures/laneway/right.jpg";
1
2

提示

如果将rightMap设置为null或undefined，则表示删除当前使用的右邦纹理，不推荐这样操作！

// 删除巷道内壁右邦纹理
materialGroup.rightMap = null;
1
2

🌏 topMap 设置巷道内壁顶板纹理，只写。

// 设置巷道内壁顶板纹理
materialGroup.topMap = "./assets/textures/laneway/top.jpg";
1
2

提示

如果将topMap设置为null或undefined，则表示删除当前使用的顶板纹理，不推荐这样操作！

// 删除巷道内壁顶板纹理
materialGroup.topMap = null;
1
2

🌏 bottomMap 设置巷道内壁底板纹理，只写。

// 设置巷道内壁底板纹理
materialGroup.bottomMap = "./assets/textures/laneway/bottom.jpg";
1
2

提示

如果将bottomMap设置为null或undefined，则表示删除当前使用的底板纹理，不推荐这样操作！

// 删除巷道内壁底板纹理
materialGroup.bottomMap = null;
1
2

# 管线材质

管线原始数据中包含材质名称（例如，'material': '排水'），在加载管线之前创建相应的管线材质组以确保管线可以使用正确的材质进行渲染。

注意

管线颜色不是通过材质控制的，而且通过顶点属性控制的。

# 创建管线材质组

使用引擎（Engine）materialManager属性的createPipelineMaterialGroup接口创建管线材质组。

// 创建管线材质组
const materialGroup = engine.materialManager.createPipelineMaterialGroup( '排水', {

    arrowMap: 'assets/textures/arrow.png',
    map: 'assets/textures/排水.jpg'

} );
1
2
3
4
5
6
7

提示

管线材质组创建参数，详见PipelineMaterialGroupParameters。

# 获取管线材质组

使用引擎（Engine）materialManager属性的getPipelineMaterialGroup接口获取管线材质组。

// 获取管线材质组
const materialGroup = engine.materialManager.getPipelineMaterialGroup( '排水' );
1
2

提示

管线材质组，详见PipelineMaterialGroup。

# 地质材质

地质原始数据（地层、断层、钻孔、陷落柱等）中包含材质名称（例如，'material': '砂岩'），在加载地质数据之前创建相应的地质材质组以确保地质对象可以使用正确的材质进行渲染。

# 创建或者检索地质材质组

使用引擎（Engine）materialManager属性的createOrRetrieveGeologicalMaterialGroup接口创建或更新地质材质组。

import { FrontSide } from 'three';

// 创建或检索地质材质组
const materialGroup = engine.materialManager.createOrRetrieveGeologicalMaterialGroup( '砂岩', {

    side: FrontSide

} );
1
2
3
4
5
6
7
8

提示

如果已存在相同名称的材质组，则不会新建而是直接返回该材质组。

# 更新地质材质组

使用引擎（Engine）materialManager属性的updateGeologicalMaterialGroup接口更新地质材质组。

// 更新地质材质组
engine.materialManager.updateGeologicalMaterialGroup( '砂岩', {

    color: '#ff0dac'

} );
1
2
3
4
5
6

提示

地质材质组参数，详见GeologicalMaterialGroupParameters。

# 获取地质材质组

使用引擎（Engine）materialManager属性的getGeologicalMaterialGroup接口获取地质材质组。

// 获取地质材质组
const materialGroup = engine.materialManager.getGeologicalMaterialGroup( '砂岩' );
1
2

提示

地质材质组，详见GeologicalMaterialGroup。

# Shader编写规范

# 文件格式

Shader文件必须使用 .glsl 格式，不允许使用字符串类型的Shader文件，如下图所示：

avatar

正确写法如下所示：

顶点Shader（vertex.glsl）：

varying vec2 vUv;

void main() {

    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 

}
1
2
3
4
5
6
7
8

像素Shader（fragment.glsl）：

uniform vec3 color;
uniform sampler2D map;

varying vec2 vUv;

void main() {

    vec4 diffuseColor = vec4( color, 1.0 );
    vec4 texelColor = texture2D( map. vUv );

    gl_FragColor = diffuseColor * texelColor;

}
1
2
3
4
5
6
7
8
9
10
11
12
13

使用：

import { ShaderMaterial } from 'three';
import vertex from 'vertex.glsl';
import fragment from 'fragment.glsl';

// 创建材质
const material = new ShaderMaterial( {

    uniforms: {},

    vertexShader: vertex,
    fragmentShader: fragments

} );
1
2
3
4
5
6
7
8
9
10
11
12
13

# 模块复用

# 通过glslify插件实现模块复用

定义GLSL模块（add.glsl）：

// 定义add函数
float add( float a, float b ) {

    return a + b;

}

// 导出add函数
#pragma glslify: export(add);
1
2
3
4
5
6
7
8
9

在像素Shader中（fragment.glsl），引用GLSL模块：

uniform vec3 color;

// 引入add函数
#pragma glslify: requie( './add.glsl' );

void main() {

    float opacity = clamp( 0.0, 1.0, add( color.r, color.b ) );
    
    gl_FragColor = vec4( color, opacity );

}
1
2
3
4
5
6
7
8
9
10
11
12

提示

有关glslify插件的详细使用说明请访问链接 (opens new window)。

注意

glslify目前仅适用相同包（package）内的GLSL模块复用，不适用跨包的GLSL模块复用！

# 通过扩展ShaderChunk实现模块复用

定义GLSL模块（add.glsl）：

// 定义add函数
float add( float a, float b ) {

    return a + b;

}
1
2
3
4
5
6

使用ShaderChunk的injectShaderChunk接口注入GLSL模块：

import { ShaderChunk } from '@tx3d/core';
import add from 'add.glsl';

// 注入add模块
ShaderChunk.injectShaderChunk( 'add', add );
1
2
3
4
5

在像素Shader中（fragment.glsl），引用GLSL模块：

uniform vec3 color;

// 引入add函数
#include <add>;

void main() {

    float opacity = clamp( 0.0, 1.0, add( color.r, color.b ) );
    
    gl_FragColor = vec4( color, opacity );

}
1
2
3
4
5
6
7
8
9
10
11
12

提示

ShaderChunk扩展方式即支持同包内的GLSL模块复用，也支持跨包的GLSL模块复用。

# 内置GLSL模块

🌏 perlin_classic_noise_2d


varying vec2 vSamplePoint;

#include <perlin_classic_noise_2d>

float p = perlin_classic_noise_2d( vSamplePoint );
1
2
3
4
5
6
7

🌏 perlin_classic_noise_3d

varying vec3 v;

#include <perlin_classic_noise_3d>

float p = perlin_classic_noise_3d( vSamplePoint );
1
2
3
4
5

🌏 perlin_classic_noise_4d

varying vec4 vSamplePoint;

#include <perlin_classic_noise_4d>

float p = perlin_classic_noise_4d( vSamplePoint );
1
2
3
4
5

🌏 perlin_periodic_noise_2d

uniform float time;

varying vec2 vSamplePoint;

#include <perlin_periodic_noise_2d>

float p = perlin_periodic_noise_2d( vSamplePoint, vec2( sin( time ) ) );
1
2
3
4
5
6
7

🌏 perlin_periodic_noise_3d

uniform float time;

varying vec3 vSamplePoint;

#include <perlin_periodic_noise_3d>

float p = perlin_periodic_noise_2d( vSamplePoint, vec3( sin( time ) ) );
1
2
3
4
5
6
7

🌏 perlin_periodic_noise_4d

uniform float time;

varying vec4 vSamplePoint;

float p = perlin_periodic_noise_4d( vSamplePoint, vec4( sin( time ) ) );
1
2
3
4
5

🌏 simplex_noise_2d

varying vec2 vSamplePoint;

#include <simplex_noise_2d>

float p = simplex_noise_2d( vSamplePoint );
1
2
3
4
5

🌏 simplex_noise_3d

varying vec3 vSamplePoint;

#include <simplex_noise_3d>

float p = simplex_noise_3d( vSamplePoint );
1
2
3
4
5

🌏 simplex_noise_4d

varying vec4 vSamplePoint;

#include <simplex_noise_4d>

float p = simplex_noise_4d( vSamplePoint );
1
2
3
4
5

🌏 voronoi_noise_2d

varying vec2 vSamplePoint;

#include <voronoi_noise_2d>

float p = voronoi_noise_2d( vSamplePoint );
1
2
3
4
5

🌏 voronoi_noise_3d

varying vec3 vSamplePoint;

#include <voronoi_noise_3d>

float p = voronoi_noise_3d( vSamplePoint );
1
2
3
4
5
Last Updated: 10/24/2023, 2:04:08 PM

← 缓存 →