# `CustomShader` Documentation
**Note**: This README is stored in `ModelExperimental/` temporarily while
this is an experimental feature. In the future, this may move to the
`Documentation/` directory.
## Constructor
```js
var customShader = new Cesium.CustomShader({
// Any custom uniforms the user wants to add to the shader.
// these can be changed at runtime via customShader.setUniform()
uniforms: {
u_time: {
value: 0, // initial value
type: Cesium.UniformType.FLOAT
},
// Textures can be loaded from a URL, a Resource, or a TypedArray.
// See the Uniforms section for more detail
u_externalTexture: {
value: new Cesium.TextureUniform({
url: "http://example.com/image.png"
}),
type: Cesium.UniformType.SAMPLER_2D
}
}
// Custom varyings that will appear in the custom vertex and fragment shader
// text.
varyings: {
v_customTexCoords: Cesium.VaryingType.VEC2
},
// configure where in the fragment shader's materials/lighting pipeline the
// custom shader goes. More on this below.
mode: Cesium.CustomShaderMode.MODIFY_MATERIAL,
// either PBR (physically-based rendering) or UNLIT depending on the desired
// results.
lightingModel: Cesium.LightingModel.PBR,
// required when setting material.alpha in the fragment shader
isTranslucent: true,
// Custom vertex shader. This is a function from model space -> model space.
// VertexInput is documented below
vertexShaderText: `
// IMPORTANT: the function signature must use these parameter names. This
// makes it easier for the runtime to generate the shader and make optimizations.
void vertexMain(VertexInput vsInput, inout vec3 positionMC) {
// code goes here. e.g. for a no-op:
return positionMC;
}
`,
// Custom fragment shader.
// FragmentInput will be documented below
// Regardless of the mode, this always takes in a material and modifies it in place.
fragmentShaderText: `
// IMPORTANT: the function signature must use these parameter names. This
// makes it easier for the runtime to generate the shader and make optimizations.
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
// code goes here. e.g. to set the diffuse color to a translucent red:
material.diffuse = vec3(1.0, 0.0, 0.0);
material.alpha = 0.5;
}
`,
});
```
## Applying A Custom Shader
Custom shaders can be applied to either 3D Tiles or `ModelExperimental` as
follows:
```js
var customShader = new Cesium.CustomShader(/* ... */);
// Applying to all tiles in a tileset.
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: "http://example.com/tileset.json",
customShader: customShader
}));
// Applying to a model directly
var model = Cesium.ModelExperimental.fromGltf({,
gltf: "http://example.com/model.gltf",
customShader: customShader
});
```
**Note**: As of this writing, only tilesets that use the `3DTILES_content_gltf`
extension will support `CustomShaders`. Future releases will add support for
other formats such as B3DM.
## Uniforms
Custom Shaders currently supports the following uniform types:
| UniformType | GLSL type | JS type |
| ------------ | ----------- | ---------------- |
| `FLOAT` | `float` | `Number` |
| `VEC2` | `vec2` | `Cartesian2` |
| `VEC3` | `vec3` | `Cartesian3` |
| `VEC4` | `vec4` | `Cartesian4` |
| `INT` | `int` | `Number` |
| `INT_VEC2` | `ivec2` | `Cartesian2` |
| `INT_VEC3` | `ivec3` | `Cartesian3` |
| `INT_VEC4` | `ivec4` | `Cartesian4` |
| `BOOL` | `bool` | `Boolean` |
| `BOOL_VEC2` | `bvec2` | `Cartesian2` |
| `BOOL_VEC3` | `bvec3` | `Cartesian3` |
| `BOOL_VEC4` | `bvec4` | `Cartesian4` |
| `MAT2` | `mat2` | `Matrix2` |
| `MAT3` | `mat3` | `Matrix3` |
| `MAT4` | `mat4` | `Matrix4` |
| `SAMPLER_2D` | `sampler2D` | `TextureUniform` |
### Texture Uniforms
Texture uniforms have more options, which have been encapsulated in the
`TextureUniform` class. Textures can be loaded from a URL, a `Resource` or a
typed array. Here are some examples:
```js
var textureFromUrl = new Cesium.TextureUniform({
url: "https://example.com/image.png",
});
var textureFromTypedArray = new Cesium.TextureUniform({
typedArray: new Uint8Array([255, 0, 0, 255]),
width: 1,
height: 1,
pixelFormat: Cesium.PixelFormat.RGBA,
pixelDatatype: Cesium.PixelDatatype.UNSIGNED_BYTE,
});
// TextureUniform also provides options for controlling the sampler
var textureWithSampler = new Cesium.TextureUniform({
url: "https://example.com/image.png",
repeat: false,
minificationFilter: Cesium.TextureMinificationFilter.NEAREST,
magnificationFilter: Cesium.TextureMagnificationFilter.NEAREST,
});
```
## Varyings
Varyings are declared in the `CustomShader` constructor. This automatically
adds a line such as `varying float v_userDefinedVarying;` to the top of the
GLSL shader.
The user is responsible for assigning a value to this varying in
`vertexShaderText` and using it in `fragmentShaderText`. For example:
```js
var customShader = new Cesium.CustomShader({
// Varying is declared here
varyings: {
v_selectedColor: VaryingType.VEC3,
},
// User assigns the varying in the vertex shader
vertexShaderText: `
void vertexMain(VertexInput vsInput, inout vec3 positionMC) {
float positiveX = step(0.0, positionMC.x);
v_selectedColor = mix(
vsInput.attributes.color_0,
vsInput.attributes.color_1,
positionMC.x
);
return positionMC;
}
`,
// User uses the varying in the fragment shader
fragmentShaderText: `
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
material.diffuse = v_selectedColor;
}
`,
});
```
Custom Shaders supports the following varying types:
| VaryingType | GLSL type |
| ----------- | --------- |
| `FLOAT` | `float` |
| `VEC2` | `vec2` |
| `VEC3` | `vec3` |
| `VEC4` | `vec4` |
| `MAT2` | `mat2` |
| `MAT3` | `mat3` |
| `MAT4` | `mat4` |
## Custom Shader Modes
The custom fragment shader is configurable so it can go before/after materials or lighting. here's a summary of what
modes are available.
| Mode | Fragment shader pipeline | Description |
| --------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------- |
| `MODIFY_MATERIAL` (default) | material -> custom shader -> lighting | The custom shader modifies the results of the material stage |
| `REPLACE_MATERIAL` | custom shader -> lighting | Don't run the material stage at all, but procedurally generate it in the custom shader |
In the above, "material" does preprocessing of textures, resulting in a `czm_modelMaterial`. This is mostly relevant for PBR, but even for UNLIT, the base color texture is handled.
## `VertexInput` struct
An automatically-generated GLSL struct that contains attributes.
```glsl
struct VertexInput {
// Processed attributes. See the Attributes Struct section below.
Attributes attributes;
// In the future, metadata will be added here.
};
```
## `FragmentInput` struct
This struct is similar to `VertexInput`, but there are a few more automatic
variables for positions in various coordinate spaces.
```glsl
struct FragmentInput {
// Processed attribute values. See the Attributes Struct section below.
Attributes attributes;
// In the future, metadata will be added here.
};
```
## Attributes Struct
The `Attributes` struct is dynamically generated given the var
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为:https://blog.csdn.net/QQ98281642/article/details/121602331
资源推荐
资源详情
资源评论
收起资源包目录
60.(cesium篇)cesium叠加3D模型(glb模型,gltf模型).zip (378个子文件)
0.bin 14KB
widgets.css 22KB
lighter.css 5KB
InfoBoxDescription.css 3KB
Animation.css 2KB
CesiumInspector.css 2KB
BaseLayerPicker.css 2KB
Cesium3DTilesInspector.css 2KB
CesiumWidget.css 2KB
NavigationHelpButton.css 2KB
lighter.css 2KB
shared.css 2KB
SceneModePicker.css 2KB
InfoBox.css 1KB
Geocoder.css 1KB
Viewer.css 1KB
Timeline.css 1KB
ProjectionPicker.css 1KB
lighterShared.css 878B
lighter.css 863B
lighter.css 598B
lighter.css 391B
SelectionIndicator.css 332B
lighter.css 325B
lighter.css 263B
PerformanceWatchdog.css 250B
FullscreenButton.css 101B
VRButton.css 93B
CesiumMilkTruck.dae 207KB
info-loading.gif 723B
Cesium_Air.glb 573KB
CesiumMilkTruck.glb 432KB
fireman-run.gltf 1.28MB
CesiumMilkTruck.gltf 10KB
60.(cesium篇)cesium叠加3D模型(glb模型,gltf模型).html 3KB
CesiumMilkTruck.jpg 289KB
waterNormals.jpg 287KB
StarBurst.jpg 191KB
tycho2t3_80_mz.jpg 164KB
tycho2t3_80_py.jpg 149KB
tycho2t3_80_pz.jpg 149KB
tycho2t3_80_my.jpg 149KB
tycho2t3_80_px.jpg 120KB
tycho2t3_80_mx.jpg 116KB
DirtMask.jpg 111KB
waterNormalsSmall.jpg 33KB
moonSmall.jpg 18KB
2.jpg 16KB
2.jpg 16KB
2.jpg 16KB
3.jpg 15KB
1.jpg 15KB
3.jpg 15KB
0.jpg 14KB
1.jpg 13KB
1.jpg 13KB
1.jpg 13KB
3.jpg 12KB
1.jpg 12KB
1.jpg 12KB
2.jpg 12KB
0.jpg 12KB
3.jpg 12KB
3.jpg 12KB
3.jpg 12KB
2.jpg 11KB
2.jpg 11KB
1.jpg 11KB
1.jpg 11KB
2.jpg 11KB
3.jpg 11KB
0.jpg 10KB
0.jpg 10KB
0.jpg 10KB
3.jpg 10KB
1.jpg 10KB
1.jpg 10KB
0.jpg 9KB
0.jpg 9KB
1.jpg 9KB
0.jpg 9KB
0.jpg 8KB
0.jpg 8KB
2.jpg 8KB
0.jpg 8KB
0.jpg 7KB
0.jpg 7KB
1.jpg 7KB
0.jpg 6KB
Cesium.js 3.86MB
google-earth-dbroot-parser.js 203KB
Transforms-d13cc04e.js 117KB
draco_decoder_nodejs.js 57KB
Matrix2-9aa31791.js 54KB
basis_transcoder.js 33KB
GeometryPipeline-b1a36b18.js 29KB
pako_deflate.min.js 27KB
createVerticesFromHeightmap.js 26KB
transcodeKTX2.js 25KB
decodeGoogleEarthEnterprisePacket.js 24KB
共 378 条
- 1
- 2
- 3
- 4
地图之家家长
- 粉丝: 4770
- 资源: 138
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
- 3
前往页