qd-changjing/public/static/Build/Documentation/CustomShader.html

738 lines
60 KiB
HTML
Raw Normal View History

2022-07-05 16:56:29 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CustomShader - Cesium Documentation</title>
<!--[if lt IE 9]>
<script src="javascript/html5.js"></script>
<![endif]-->
<link href="styles/jsdoc-default.css" rel="stylesheet">
<link href="styles/prism.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1 class="page-title">
<a href="index.html"><img src="Images/CesiumLogo.png" class="cesiumLogo"></a>
CustomShader
<div class="titleCenterer"></div>
</h1>
<section>
<header>
</header>
<article>
<div class="container-overview">
<div class="nameContainer">
<h4 class="name" id="CustomShader">
<a href="#CustomShader" class="doc-link"></a>
new Cesium.CustomShader<span class="signature">(options)</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/ModelExperimental/CustomShader.js#L122">Scene/ModelExperimental/CustomShader.js 122</a>
</div>
</h4>
</div>
<div class="description">
A user defined GLSL shader used with <a href="ModelExperimental.html"><code>ModelExperimental</code></a> as well
as <a href="Cesium3DTileset.html"><code>Cesium3DTileset</code></a>.
<p>
If texture uniforms are used, additional resource management must be done:
</p>
<ul>
<li>
The <code>update</code> function must be called each frame. When a
custom shader is passed to a <a href="ModelExperimental.html"><code>ModelExperimental</code></a> or a
<a href="Cesium3DTileset.html"><code>Cesium3DTileset</code></a>, this step is handled automaticaly
</li>
<li>
<code>CustomShader#destroy</code> must be called when the custom shader is
no longer needed to clean up GPU resources properly. The application
is responsible for calling this method.
</li>
</ul>
<p>
To enable the use of <a href="ModelExperimental.html"><code>ModelExperimental</code></a> in <a href="Cesium3DTileset.html"><code>Cesium3DTileset</code></a>, set <a href="global.html#ExperimentalFeatures#.enableModelExperimental"><code>ExperimentalFeatures.enableModelExperimental</code></a> to <code>true</code> or tileset.enableModelExperimental to <code>true</code>.
</p>
<p>
See the <a href="https://github.com/CesiumGS/cesium/tree/main/Documentation/CustomShaderGuide">Custom Shader Guide</a> for more detailed documentation.
</p>
</div>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last">
An object with the following options
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>mode</code></td>
<td class="type">
<span class="param-type"><a href="global.html#CustomShaderMode">CustomShaderMode</a></span>
</td>
<td class="default">
<code class="language-javascript">CustomShaderMode.MODIFY_MATERIAL</code>
</td>
<td class="description last">
<span class="optional">optional</span>
The custom shader mode, which determines how the custom shader code is inserted into the fragment shader.</td>
</tr>
<tr>
<td class="name"><code>lightingModel</code></td>
<td class="type">
<span class="param-type"><a href="global.html#LightingModel">LightingModel</a></span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
The lighting model (e.g. PBR or unlit). If present, this overrides the default lighting for the model.</td>
</tr>
<tr>
<td class="name"><code>isTranslucent</code></td>
<td class="type">
<span class="param-type">Boolean</span>
</td>
<td class="default">
<code class="language-javascript">false</code>
</td>
<td class="description last">
<span class="optional">optional</span>
If set, the model will be rendered as translucent. This overrides the default settings for the model.</td>
</tr>
<tr>
<td class="name"><code>uniforms</code></td>
<td class="type">
<span class="param-type">Object.&lt;String, <a href="global.html#UniformSpecifier">UniformSpecifier</a>></span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
A dictionary for user-defined uniforms. The key is the uniform name that will appear in the GLSL code. The value is an object that describes the uniform type and initial value</td>
</tr>
<tr>
<td class="name"><code>varyings</code></td>
<td class="type">
<span class="param-type">Object.&lt;String, <a href="global.html#VaryingType">VaryingType</a>></span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
A dictionary for declaring additional GLSL varyings used in the shader. The key is the varying name that will appear in the GLSL code. The value is the data type of the varying. For each varying, the declaration will be added to the top of the shader automatically. The caller is responsible for assigning a value in the vertex shader and using the value in the fragment shader.</td>
</tr>
<tr>
<td class="name"><code>vertexShaderText</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
The custom vertex shader as a string of GLSL code. It must include a GLSL function called vertexMain. See the example for the expected signature. If not specified, the custom vertex shader step will be skipped in the computed vertex shader.</td>
</tr>
<tr>
<td class="name"><code>fragmentShaderText</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="default">
</td>
<td class="description last">
<span class="optional">optional</span>
The custom fragment shader as a string of GLSL code. It must include a GLSL function called fragmentMain. See the example for the expected signature. If not specified, the custom fragment shader step will be skipped in the computed fragment shader.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
<h5>Example:</h5>
<pre><code class="language-javascript">const customShader = new CustomShader({
uniforms: {
u_colorIndex: {
type: Cesium.UniformType.FLOAT,
value: 1.0
},
u_normalMap: {
type: Cesium.UniformType.SAMPLER_2D,
value: new Cesium.TextureUniform({
url: "http://example.com/normal.png"
})
}
},
varyings: {
v_selectedColor: Cesium.VaryingType.VEC3
},
vertexShaderText: `
void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {
v_selectedColor = mix(vsInput.attributes.color_0, vsInput.attributes.color_1, u_colorIndex);
vsOutput.positionMC += 0.1 * vsInput.attributes.normal;
}
`,
fragmentShaderText: `
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
material.normal = texture2D(u_normalMap, fsInput.attributes.texCoord_0);
material.diffuse = v_selectedColor;
}
`
});</code></pre>
<div class="tag-experimental">
<h5>Experimental</h5>
<p>This feature is using part of the 3D Tiles spec that is not final and is subject to change without Cesium's standard deprecation policy.</p>
</div>
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<div class="nameContainer">
<h4 class="name" id="setUniform">
<a href="#setUniform" class="doc-link"></a>
setUniform<span class="signature">(uniformName, value)</span>
<div class="source-link rightLinks">
<a href="https://github.com/CesiumGS/cesium/blob/1.91/Source/Scene/ModelExperimental/CustomShader.js#L393">Scene/ModelExperimental/CustomShader.js 393</a>
</div>
</h4>
</div>
<div class="description">
Update the value of a uniform declared in the shader
</div>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>uniformName</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">
The GLSL name of the uniform. This must match one of the uniforms declared in the constructor</td>
</tr>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type">Boolean</span>
|
<span class="param-type">Number</span>
|
<span class="param-type"><a href="Cartesian2.html">Cartesian2</a></span>
|
<span class="param-type"><a href="Cartesian3.html">Cartesian3</a></span>
|
<span class="param-type"><a href="Cartesian4.html">Cartesian4</a></span>
|
<span class="param-type"><a href="Matrix2.html">Matrix2</a></span>
|
<span class="param-type"><a href="Matrix3.html">Matrix3</a></span>
|
<span class="param-type"><a href="Matrix4.html">Matrix4</a></span>
|
<span class="param-type">String</span>
|
<span class="param-type"><a href="Resource.html">Resource</a></span>
</td>
<td class="description last">
The new value of the uniform.</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</article>
</section>
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a>
</footer>
</div>
<div class="nav">
<div class="menu">
<input type="text" class="classFilter" id="ClassFilter" placeholder="Search">
<ul id="ClassList"><li data-name="Animation"><a href="Animation.html">Animation</a></li><li data-name="AnimationViewModel"><a href="AnimationViewModel.html">AnimationViewModel</a></li><li data-name="Appearance"><a href="Appearance.html">Appearance</a></li><li data-name="ArcGisMapServerImageryProvider"><a href="ArcGisMapServerImageryProvider.html">ArcGisMapServerImageryProvider</a></li><li data-name="ArcGISTiledElevationTerrainProvider"><a href="ArcGISTiledElevationTerrainProvider.html">ArcGISTiledElevationTerrainProvider</a></li><li data-name="ArcType"><a href="global.html#ArcType">ArcType</a></li><li data-name="AssociativeArray"><a href="AssociativeArray.html">AssociativeArray</a></li><li data-name="Axis"><a href="global.html#Axis">Axis</a></li><li data-name="AxisAlignedBoundingBox"><a href="AxisAlignedBoundingBox.html">AxisAlignedBoundingBox</a></li><li data-name="backFaceCulling"><a href="global.html#backFaceCulling">backFaceCulling</a></li><li data-name="barycentricCoordinates"><a href="global.html#barycentricCoordinates">barycentricCoordinates</a></li><li data-name="BaseLayerPicker"><a href="BaseLayerPicker.html">BaseLayerPicker</a></li><li data-name="BaseLayerPickerViewModel"><a href="BaseLayerPickerViewModel.html">BaseLayerPickerViewModel</a></li><li data-name="Billboard"><a href="Billboard.html">Billboard</a></li><li data-name="BillboardCollection"><a href="BillboardCollection.html">BillboardCollection</a></li><li data-name="BillboardGraphics"><a href="BillboardGraphics.html">BillboardGraphics</a></li><li data-name="BillboardVisualizer"><a href="BillboardVisualizer.html">BillboardVisualizer</a></li><li data-name="binarySearch"><a href="global.html#binarySearch">binarySearch</a></li><li data-name="binarySearchComparator"><a href="global.html#binarySearchComparator">binarySearchComparator</a></li><li data-name="BingMapsGeocoderService"><a href="BingMapsGeocoderService.html">BingMapsGeocoderService</a></li><li data-name="BingMapsImageryProvider"><a href="BingMapsImageryProvider.html">BingMapsImageryProvider</a></li><li data-name="BingMapsStyle"><a href="global.html#BingMapsStyle">BingMapsStyle</a></li><li data-name="BlendEquation"><a href="global.html#BlendEquation">BlendEquation</a></li><li data-name="BlendFunction"><a href="global.html#BlendFunction">BlendFunction</a></li><li data-name="BlendingState"><a href="BlendingState.html">BlendingState</a></li><li data-name="BlendOption"><a href="global.html#BlendOption">BlendOption</a></li><li data-name="BoundingRectangle"><a href="BoundingRectangle.html">BoundingRectangle</a></li><li data-name="BoundingSphere"><a href="BoundingSphere.html">BoundingSphere</a></li><li data-name="boundingSphere"><a href="global.html#boundingSphere">boundingSphere</a></li><li data-name="BoxEmitter"><a href="BoxEmitter.html">BoxEmitter</a></li><li data-name="BoxGeometry"><a href="BoxGeometry.html">BoxGeometry</a></li><li data-name="BoxGeometryUpdater"><a href="BoxGeometryUpdater.html">BoxGeometryUpdater</a></li><li data-name="BoxGraphics"><a href="BoxGraphics.html">BoxGraphics</a></li><li data-name="BoxOutlineGeometry"><a href="BoxOutlineGeometry.html">BoxOutlineGeometry</a></li><li data-name="buildModuleUrl"><a href="global.html#buildModuleUrl">buildModuleUrl</a></li><li data-name="CallbackProperty"><a href="CallbackProperty.html">CallbackProperty</a></li><li data-name="Camera"><a href="Camera.html">Camera</a></li><li data-name="CameraEventAggregator"><a href="CameraEventAggregator.html">CameraEventAggregator</a></li><li data-name="CameraEventType"><a href="global.html#CameraEventType">CameraEventType</a></li><li data-name="cancelAnimationFrame"><a href="global.html#cancelAnimationFrame">cancelAnimationFrame</a></li><li data-name="Cartesian2"><a href="Cartesian2.html">Cartesian2</a></li><li data-name="Cartesian3"><a href="Cartesian3.html">Cartesian3</a></li><li data-name="Cartesian4"><a href="Cartesian4.html">Cartesian4</a></li><li data-name="Cartographic"><a href="Cartographic.html">Cartographic</a></li><li data-name="CartographicGeocoderService"><a href="CartographicGeocoderServic
</div>
</div>
<script>
if (window.frameElement) {
document.body.className = 'embedded';
var ele = document.createElement('a');
ele.className = 'popout';
ele.target = '_blank';
ele.href = window.location.href;
ele.title = 'Pop out';
document.getElementById('main').appendChild(ele);
}
// Set targets on external links. Sandcastle and GitHub shouldn't be embedded in any iframe.
Array.prototype.forEach.call(document.getElementsByTagName('a'), function(a) {
if (/^https?:/i.test(a.getAttribute('href'))) {
a.target='_blank';
}
});
</script>
<script src="javascript/prism.js"></script>
<script src="javascript/cesiumDoc.js"></script>
</body>
</html>