Cesium JS API
AppearanceArcGisMapServerImageryProviderArcGISTiledElevationTerrainProviderArcTypeAssociativeArrayAxisAxisAlignedBoundingBoxbarycentricCoordinatesBillboardBillboardCollectionBillboardGraphicsBillboardVisualizerbinarySearchbinarySearchComparatorBingMapsGeocoderServiceBingMapsImageryProviderBingMapsStyleBlendEquationBlendFunctionBlendingStateBlendOptionBoundingRectangleBoundingSphereBoxEmitterBoxGeometryBoxGeometryUpdaterBoxGraphicsBoxOutlineGeometrybuildModuleUrlCallbackPropertyCameraCameraEventAggregatorCameraEventTypeCartesian2Cartesian3Cartesian4CartographicCartographicGeocoderServiceCatmullRomSplineCesium3DTileCesium3DTileColorBlendModeCesium3DTileContentCesium3DTileFeatureCesium3DTilePointFeatureCesium3DTilesetCesium3DTilesetGraphicsCesium3DTilesetVisualizerCesium3DTileStyleCesium3DTilesVoxelProviderCesiumTerrainProviderCesiumWidgetCheckerboardMaterialPropertyCircleEmitterCircleGeometryCircleOutlineGeometryClassificationPrimitiveClassificationTypeClippingPlaneClippingPlaneCollectionClockClockRangeClockStepcloneCloudCollectionCloudTypeColorColorBlendModeColorGeometryInstanceAttributeColorMaterialPropertycombineComponentDatatypeCompositeEntityCollectionCompositeMaterialPropertyCompositePositionPropertyCompositePropertyCompressedTextureBufferConditionsExpressionConeEmitterConstantPositionPropertyConstantPropertyConstantSplineContextOptionsCoplanarPolygonGeometryCoplanarPolygonOutlineGeometryCornerTypeCorridorGeometryCorridorGeometryUpdaterCorridorGraphicsCorridorOutlineGeometrycreateElevationBandMaterialcreateElevationBandMaterialBandcreateElevationBandMaterialEntrycreateGuidcreateOsmBuildingscreateTangentSpaceDebugPrimitivecreateWorldImagerycreateWorldTerrainCreditCreditDisplayCubicRealPolynomialCullFaceCullingVolumeCumulusCloudCustomDataSourceCustomHeightmapTerrainProviderCustomShaderCustomShaderModeCustomShaderTranslucencyModeCylinderGeometryCylinderGeometryUpdaterCylinderGraphicsCylinderOutlineGeometryCzmlDataSourceDataSourceDataSourceClockDataSourceCollectionDataSourceDisplayDebugAppearanceDebugCameraPrimitiveDebugModelMatrixPrimitiveDefaultProxydefaultValuedefinedDepthFunctiondestroyObjectDeveloperErrorDirectionalLightDirectionUpDiscardEmptyTileImagePolicyDiscardMissingTileImagePolicyDistanceDisplayConditionDistanceDisplayConditionGeometryInstanceAttributeEasingFunctionEllipseGeometryEllipseGeometryUpdaterEllipseGraphicsEllipseOutlineGeometryEllipsoidEllipsoidGeodesicEllipsoidGeometryEllipsoidGeometryUpdaterEllipsoidGraphicsEllipsoidOutlineGeometryEllipsoidRhumbLineEllipsoidSurfaceAppearanceEllipsoidTangentPlaneEllipsoidTerrainProviderEntityEntityClusterEntityCollectionEntityViewEventEventHelperexcludesReverseAxisexportKmlexportKmlModelCallbackexportKmlResultKmlexportKmlResultKmzExpressionExtrapolationTypeFeatureDetectionFogformatErrorFrameRateMonitorFrustumGeometryFrustumOutlineGeometryFullscreenGeocoderServiceGeocodeTypeGeographicProjectionGeographicTilingSchemeGeoJsonDataSourceGeometryGeometryAttributeGeometryAttributesGeometryFactoryGeometryInstanceGeometryInstanceAttributeGeometryPipelineGeometryUpdaterGeometryVisualizergetAbsoluteUrigetBaseUrigetExtensionFromUriGetFeatureInfoFormatgetFilenameFromUrigetImagePixelsgetTimestampGlobeGlobeTranslucencyGoogleEarthEnterpriseImageryProviderGoogleEarthEnterpriseMapsProviderGoogleEarthEnterpriseMetadataGoogleEarthEnterpriseTerrainDataGoogleEarthEnterpriseTerrainProviderGpxDataSourceGregorianDateGridImageryProviderGridMaterialPropertyGroundGeometryUpdaterGroundPolylineGeometryGroundPolylinePrimitiveGroundPrimitiveHeadingPitchRangeHeadingPitchRollHeadingPitchRollValuesHeightmapEncodingHeightmapTerrainDataHeightReferenceHermitePolynomialApproximationHermiteSplineHilbertOrderHorizontalOriginI3SDataProviderI3SFeatureI3SFieldI3SGeometryI3SLayerI3SNodeImageBasedLightingImageMaterialPropertyImageryLayerImageryLayerCollectionImageryLayerFeatureInfoImageryProviderImageryTypesincludesReverseAxisIndexDatatypeIntersectIntersections2DIntersectionTestsIntervalIonIonGeocoderServiceIonImageryProviderIonResourceIonWorldImageryStyleisLeapYearIso8601JulianDateKeyboardEventModifierKmlCameraKmlDataSourceKmlFeatureDataKmlLookAtKmlTourKmlTourFlyToKmlTourWaitLabelLabelCollectionLabelGraphicsLabelStyleLabelVisualizerLagrangePolynomialApproximationLeapSecondLightLightingModelLinearApproximationLinearSplineMapboxImageryProviderMapboxStyleImageryProviderMapMode2DMapProjectionMaterialMaterialAppearanceMaterialSupportMaterialPropertyMathMatrix2Matrix3Matrix4mergeSortmergeSortComparatorMetadataClassMetadataClassPropertyMetadataComponentTypeMetadataEnumMetadataEnumValueMetadataSchemaMetadataTypeModelModelAnimationModelAnimationCollectionModelAnimationLoopModelFeatureModelGraphicsModelNodeModelVisualizerMoonMorphWeightSplineNearFarScalarNeverTileDiscardPolicyNodeTransformationPropertyobjectToQueryOccluderOpenCageGeocoderServiceOpenStreetMapImageryProviderOrientedBoundingBoxOrthographicFrustumOrthographicOffCenterFrustumPackableForInterpolationParticleParticleBurstParticleEmitterParticleSystemPathGraphicsPathVisualizerPeliasGeocoderServicePerInstanceColorAppearancePerspectiveFrustumPerspectiveOffCenterFrustumPinBuilderPixelDatatypePixelFormatPlanePlaneGeometryPlaneGeometryUpdaterPlaneGraphicsPlaneOutlineGeometryPointCloudShadingPointGraphicspointInsideTrianglePointPrimitivePointPrimitiveCollectionPointVisualizerPolygonGeometryPolygonGeometryUpdaterPolygonGraphicsPolygonHierarchyPolygonOutlineGeometryPolylinePolylineArrowMaterialPropertyPolylineCollectionPolylineColorAppearancePolylineDashMaterialPropertyPolylineGeometryPolylineGeometryUpdaterPolylineGlowMaterialPropertyPolylineGraphicsPolylineMaterialAppearancePolylineOutlineMaterialPropertyPolylineVisualizerPolylineVolumeGeometryPolylineVolumeGeometryUpdaterPolylineVolumeGraphicsPolylineVolumeOutlineGeometryPositionPropertyPositionPropertyArrayPostProcessStagePostProcessStageCollectionPostProcessStageCompositePostProcessStageLibraryPostProcessStageSampleModePrimitivePrimitiveCollectionPrimitiveTypePropertyPropertyArrayPropertyBagProxyQuadraticRealPolynomialQuantizedMeshTerrainDataQuarticRealPolynomialQuaternionQuaternionSplinequeryToObjectQueueRayreadyPromiseRectangleRectangleGeometryRectangleGeometryUpdaterRectangleGraphicsRectangleOutlineGeometryReferenceFrameReferencePropertyremoveExtensionRequestRequestErrorEventRequestSchedulerRequestStateRequestTypeResourceRuntimeErrorSampledPositionPropertySampledPropertysampleTerrainsampleTerrainMostDetailedSceneSceneModeSceneTransformsScreenSpaceCameraControllerScreenSpaceEventHandlerScreenSpaceEventTypeshaderDefinesshaderMaximumIntersectionsLengthshaderUniformsShadowMapShadowModeShowGeometryInstanceAttributeSimon1994PlanetaryPositionsSimplePolylineGeometrySingleTileImageryProviderSkyAtmosphereSkyBoxSphereEmitterSphereGeometrySphereOutlineGeometrySphericalSplineSplitDirectionStencilFunctionStencilOperationSteppedSplineStripeMaterialPropertyStripeOrientationStyleExpressionsubdivideArraySunSunLightTaskProcessorTerrainDataTerrainProviderTextureMagnificationFilterTextureMinificationFilterTextureUniformTileAvailabilityTileCoordinatesImageryProviderTileDiscardPolicyTileMapServiceImageryProviderTileProviderErrorTilingSchemeTimeDynamicImageryTimeDynamicPointCloudTimeIntervalTimeIntervalCollectionTimeIntervalCollectionPositionPropertyTimeIntervalCollectionPropertyTimeStandardTransformsTranslationRotationScaleTridiagonalSystemSolverTrustedServersUniformSpecifierUniformTypeUrlTemplateImageryProviderVaryingTypeVelocityOrientationPropertyVelocityVectorPropertyVertexFormatVerticalOriginVideoSynchronizerViewportQuadVisibilityVisualizerVoxelPrimitiveVoxelProviderVoxelShapeTypeVRTheWorldTerrainProviderWallGeometryWallGeometryUpdaterWallGraphicsWallOutlineGeometryWebGLConstantsWebGLOptionsWebMapServiceImageryProviderWebMapTileServiceImageryProviderWebMercatorProjectionWebMercatorTilingSchemeWindingOrderwriteTextToCanvasAnimationAnimationViewModelBaseLayerPickerBaseLayerPickerViewModelCesium3DTilesInspectorCesium3DTilesInspectorViewModelCesiumInspectorCesiumInspectorViewModelClockViewModelCommandcreateCommandFullscreenButtonFullscreenButtonViewModelGeocoderGeocoderViewModelHomeButtonHomeButtonViewModelInfoBoxInfoBoxViewModelNavigationHelpButtonNavigationHelpButtonViewModelPerformanceWatchdogPerformanceWatchdogViewModelProjectionPickerProjectionPickerViewModelProviderViewModelSceneModePickerSceneModePickerViewModelSelectionIndicatorSelectionIndicatorViewModelSvgPathBindingHandlerTimelineToggleButtonViewModelViewerviewerCesium3DTilesInspectorMixinviewerCesiumInspectorMixinviewerDragDropMixinviewerPerformanceWatchdogMixinviewerVoxelInspectorMixinVoxelInspectorVoxelInspectorViewModelVRButtonVRButtonViewModel

BlendOption

BlendOption是CesiumJS中用于定义材质混合选项的对象。它通常被用于定义渲染透明材料时的混合选项参数。

以下是BlendOption对象的构造函数:

new Cesium.BlendOption({
    enabled: true,
    separateRgbBlendFunction: Cesium.BlendFunction.SOURCE_ALPHA,
    separateAlphaBlendFunction: Cesium.BlendFunction.SOURCE_ALPHA,
    blendEquation: Cesium.BlendEquation.ADD,
    rgbBlendEquation: Cesium.BlendEquation.ADD,
    alphaBlendEquation: Cesium.BlendEquation.ADD,
    sourceRgbBlendFactor: Cesium.BlendFactor.SOURCE_ALPHA,
    destinationRgbBlendFactor: Cesium.BlendFactor.ONE_MINUS_SOURCE_ALPHA,
    sourceAlphaBlendFactor: Cesium.BlendFactor.SOURCE_ALPHA,
    destinationAlphaBlendFactor: Cesium.BlendFactor.ONE_MINUS_SOURCE_ALPHA
})

下面将逐个参数进行介绍:

enabled

类型:Boolean,可选项。默认值为true

是否启用混合选项。

separateRgbBlendFunction

类型:Cesium.BlendFunction,可选项。默认值为Cesium.BlendFunction.SOURCE_ALPHA

RGB颜色通道的混合函数。

可用选项有:

  • Cesium.BlendFunction.ZERO
  • Cesium.BlendFunction.ONE
  • Cesium.BlendFunction.SOURCE_COLOR
  • Cesium.BlendFunction.ONE_MINUS_SOURCE_COLOR
  • Cesium.BlendFunction.DESTINATION_COLOR
  • Cesium.BlendFunction.ONE_MINUS_DESTINATION_COLOR
  • Cesium.BlendFunction.SOURCE_ALPHA
  • Cesium.BlendFunction.ONE_MINUS_SOURCE_ALPHA
  • Cesium.BlendFunction.DESTINATION_ALPHA
  • Cesium.BlendFunction.ONE_MINUS_DESTINATION_ALPHA
  • Cesium.BlendFunction.CONSTANT_COLOR
  • Cesium.BlendFunction.ONE_MINUS_CONSTANT_COLOR
  • Cesium.BlendFunction.CONSTANT_ALPHA
  • Cesium.BlendFunction.ONE_MINUS_CONSTANT_ALPHA

其中,源颜色表示要绘制在屏幕上的新像素颜色,目标颜色表示新像素覆盖的已存在像素的颜色(即背景颜色)。

separateAlphaBlendFunction

类型:Cesium.BlendFunction,可选项。默认值为Cesium.BlendFunction.SOURCE_ALPHA

Alpha通道的混合函数。

可用选项与separateRgbBlendFunction相同。

blendEquation

类型:Cesium.BlendEquation,可选项。默认值为Cesium.BlendEquation.ADD

同时指定RGB和Alpha通道的混合方程式。

可用选项有:

  • Cesium.BlendEquation.ADD
  • Cesium.BlendEquation.SUBTRACT
  • Cesium.BlendEquation.REVERSE_SUBTRACT
  • Cesium.BlendEquation.MIN
  • Cesium.BlendEquation.MAX

该选项指定了两个颜色进行混合时的运算方式,类似于加减法。具体运算方式请参考glBlendEquation

rgbBlendEquation

类型:Cesium.BlendEquation,可选项。默认值为Cesium.BlendEquation.ADD

RGB颜色通道的混合方程式。

可用选项与blendEquation相同。

alphaBlendEquation

类型:Cesium.BlendEquation,可选项。默认值为Cesium.BlendEquation.ADD

Alpha通道的混合方程式。

可用选项与blendEquation相同。

sourceRgbBlendFactor

类型:Cesium.BlendFactor,可选项。默认值为Cesium.BlendFactor.SOURCE_ALPHA

用于设置RGB颜色通道的混合因子。表示新像素颜色占比。

可用选项有:

  • Cesium.BlendFactor.ZERO
  • Cesium.BlendFactor.ONE
  • Cesium.BlendFactor.SOURCE_COLOR
  • Cesium.BlendFactor.ONE_MINUS_SOURCE_COLOR
  • Cesium.BlendFactor.DESTINATION_COLOR
  • Cesium.BlendFactor.ONE_MINUS_DESTINATION_COLOR
  • Cesium.BlendFactor.SOURCE_ALPHA
  • Cesium.BlendFactor.ONE_MINUS_SOURCE_ALPHA
  • Cesium.BlendFactor.DESTINATION_ALPHA
  • Cesium.BlendFactor.ONE_MINUS_DESTINATION_ALPHA
  • Cesium.BlendFactor.CONSTANT_COLOR
  • Cesium.BlendFactor.ONE_MINUS_CONSTANT_COLOR
  • Cesium.BlendFactor.CONSTANT_ALPHA
  • Cesium.BlendFactor.ONE_MINUS_CONSTANT_ALPHA

其中,源颜色表示要绘制在屏幕上的新像素颜色,目标颜色表示新像素覆盖的已存在像素的颜色(即背景颜色)。

destinationRgbBlendFactor

类型:Cesium.BlendFactor,可选项。默认值为Cesium.BlendFactor.ONE_MINUS_SOURCE_ALPHA

用于设置RGB颜色通道的混合因子。表示已存在像素颜色占比。

可用选项与sourceRgbBlendFactor相同。

sourceAlphaBlendFactor

类型:Cesium.BlendFactor,可选项。默认值为Cesium.BlendFactor.SOURCE_ALPHA

用于设置Alpha通道的混合因子。表示新像素Alpha值占比。

可用选项与sourceRgbBlendFactor相同。

destinationAlphaBlendFactor

类型:Cesium.BlendFactor,可选项。默认值为Cesium.BlendFactor.ONE_MINUS_SOURCE_ALPHA

用于设置Alpha通道的混合因子。表示已存在像素Alpha值占比。

可用选项与sourceRgbBlendFactor相同。

示例

下面是一个定义了部分混合选项参数的示例:

var blendOption = new Cesium.BlendOption({
    separateRgbBlendFunction: Cesium.BlendFunction.ONE_MINUS_SOURCE_COLOR, // RGB通道不透明度为背景色的反相
    separateAlphaBlendFunction: Cesium.BlendFunction.SOURCE_ALPHA, // Alpha通道使用源色的透明度
    sourceRgbBlendFactor: Cesium.BlendFactor.DESTINATION_COLOR, // 新像素RGB颜色类型采用背景色
    destinationRgbBlendFactor: Cesium.BlendFactor.SOURCE_ALPHA, // 已存在像素RGB颜色类型采用源色
    sourceAlphaBlendFactor: Cesium.BlendFactor.SOURCE_ALPHA, // 新像素Alpha值采用源色透明度
    destinationAlphaBlendFactor: Cesium.BlendFactor.ONE_MINUS_SOURCE_ALPHA // 已存在像素Alpha值采用背景色的反相
})

// 应用混合选项到材质
material.blending = Cesium.BlendingState.ALPHA_BLEND;
material.blendOptions = blendOption;

该示例定义了一个混合选项,它将RGB颜色设置为不透明度为背景色的反相,同时Alpha通道使用源色的透明度。并在源颜色和背景颜色之间使用不同的混合函数和混合方程式进行混合。最后将该混合选项应用到材质中。