セシウム中間チュートリアル7 - ジオメトリと外観形状と外観

2019ユニコーン企業重く募集エンジニアのPythonの標準>>>

セシウム中国のネットワーク：http://cesiumcn.org/ |国内の高速アクセス：http://cesium.coinidea.com/

このチュートリアルでは、システムのジオメトリと外観を提供してプリミティブAPIを使用するためにあなたを紹介します。これは、セシウム志向の代わりに、一般的なユーザーのカスタムメッシュ、形状、数量及び外観CesiumJSを持って拡張するための高度なトピックです。あなたは、地球上の図形とボリュームの多様性を描画する方法を学ぶことに興味を持っている場合は、参照エンティティの作成チュートリアルを。CesiumJS（例えば、多角形や楕円）を使用し、幾何学的エンティティの種類を作成することができます。たとえば、コピーして貼り付けます次のコードのHello Worldサンドキャッスルの例では、球面上の点を有する矩形パターンを作成します。

var viewer = new Cesium.Viewer('cesiumContainer');

viewer.entities.add({
    rectangle : {
        coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
        material : new Cesium.StripeMaterialProperty({
            evenColor: Cesium.Color.WHITE,
            oddColor: Cesium.Color.BLUE,
            repeat: 5
        })
    }
});

このチュートリアルでは、それらの構成ジオメトリと外観の種類を確認するためにボンネットの下に潜るます。プリミティブ形状定義された構造、すなわち、基体の三角形、線、またはポイントを形成します。その完全な着色シートGLSL頂点と面、およびレンダリング状態を含む有色の原始的な外観、。

ジオメトリと外観を使用することの利点は次のとおりです。

• パフォーマンス（パフォーマンス）：プリミティブ（各ポリゴンのための米国のZIPコード）を大量に描画するときに、直接ジオメトリーを使用すると、私たちはCPUのオーバーヘッドとGPUのよりよい利用を減らすために、単一のジオメトリにそれらを組み合わせることができます。プリミティブの組み合わせは、UIの応答性を維持するために、ウェブワーカー上で実行されます。
• 柔軟性（フレキシビリティ）：ジオメトリと外観のプリミティブ組み合わせ。それらを分離することにより、我々は、それぞれ独立に変更することができます。我々は、多くの異なった新しいジオメトリの外観、およびその逆との互換性を追加することができます。
• 低レベルのアクセス（下位レベルへのアクセス）：エクステリアレンダリングは気にせずに直接使用、金属に近いアクセスを提供レンダラすべての詳細。次のような状況の出現が容易：
  • すべてのパッチの頂点とGLSLシェーダを書きます
  • カスタムレンダラの状態を使用します

もちろん、いくつかの欠点があります。

• ジオメトリと外観を直接使用することは、より多くのコードやグラフィックスのより深い理解が必要です。エンティティは、マッピング・アプリケーションのための抽象化のレベルである、抽象度の幾何学的形状とに近い外観伝統的な3Dエンジン。
• 静的データの幾何学的形状効果的な組み合わせ、動的データが有効ではないかもしれません。

のは、コード例を書き換え初期形状と外観を使用してみましょう：

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

// original code
//viewer.entities.add({
//    rectangle : {
//        coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
//        material : new Cesium.StripeMaterialProperty({
//            evenColor: Cesium.Color.WHITE,
//            oddColor: Cesium.Color.BLUE,
//            repeat: 5
//        })
//    }
//});

var instance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
    vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
  })
});

scene.primitives.add(new Cesium.Primitive({
  geometryInstances : instance,
  appearance : new Cesium.EllipsoidSurfaceAppearance({
    material : Cesium.Material.fromType('Stripe')
  })
}));

我々は、プリミティブ（使用プリミティブ）の代わりにジオメトリと外観を組み合わせた、直方体。今、我々は区別しませんジオメトリとGemometryInstance。インスタンスは、それ以上の容器であるインスタンスジオメトリ、です。

長方形の幾何学的形状、即ち矩形領域と球面曲率の三角形について、三角形のカバーを作成するために、我々は、作成たRectangleGeometryを。

それは表面上にあるので、私たちは使用することができEllipsoidSurfaceAppearanceを。これは、幾何学的形状を想定してメモリを節約するために、表面上又は楕円上記一定の高さです。

ジオメトリタイプのジオメトリタイプ

ジオメトリ次CesiumJS：

幾何学的形状の組み合わせ

我々はプリミティブの描画より静的ジオメトリを使用する場合、我々はパフォーマンス上の利点を参照してください。例えば、2つの長方形でプリミティブを描画します。

 var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
    vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
  })
});

var anotherInstance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
    vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
  })
});

scene.primitives.add(new Cesium.Primitive({
  geometryInstances : [instance, anotherInstance],
  appearance : new Cesium.EllipsoidSurfaceAppearance({
    material : Cesium.Material.fromType('Stripe')
  })
}));

我々は、別の異なる矩形のインスタンス、およびプリミティブに設けられた2つの例を作成します。これは、2つの例と同じ外観を描画します。

有些外观允许每个实例提供唯一的属性。例如，我们可以使用PerinstanceColorAppearance对每个实例使用不同的颜色进行着色。

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
    vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
  }),
  attributes : {
    color : new Cesium.ColorGeometryInstanceAttribute(0.0, 0.0, 1.0, 0.8)
  }
});

var anotherInstance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
    vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
  }),
  attributes : {
    color : new Cesium.ColorGeometryInstanceAttribute(1.0, 0.0, 0.0, 0.8)
  }
});

scene.primitives.add(new Cesium.Primitive({
  geometryInstances : [instance, anotherInstance],
  appearance : new Cesium.PerInstanceColorAppearance()
}));

每个实例都有一个颜色属性。Primitive是用PerinstanceColorAppearance构造的，它使用每个实例的颜色属性来确定着色。

组合几何图形可以使CesiumJS有效地绘制许多几何图形。下面的示例绘制2592个颜色独特的矩形。

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instances = [];

for (var lon = -180.0; lon < 180.0; lon += 5.0) {
  for (var lat = -85.0; lat < 85.0; lat += 5.0) {
    instances.push(new Cesium.GeometryInstance({
      geometry : new Cesium.RectangleGeometry({
        rectangle : Cesium.Rectangle.fromDegrees(lon, lat, lon + 5.0, lat + 5.0),
        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
      }),
      attributes : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({alpha : 0.5}))
      }
    }));
  }
}

scene.primitives.add(new Cesium.Primitive({
  geometryInstances : instances,
  appearance : new Cesium.PerInstanceColorAppearance()
}));

Picking 拾取

实例合并后可以独立访问。为实例分配一个ID，并使用它来确定是否使用Scene.Pick拾取该实例。

下面的示例创建一个带id的实例，并在单击该实例时将消息写入控制台。

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var instance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
  }),
  id : 'my rectangle',
  attributes : {
    color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
  }
});

scene.primitives.add(new Cesium.Primitive({
  geometryInstances : instance,
  appearance : new Cesium.PerInstanceColorAppearance()
}));

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
    var pick = scene.pick(movement.position);
    if (Cesium.defined(pick) && (pick.id === 'my rectangle')) {
      console.log('Mouse clicked rectangle.');
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

使用id避免了在内存中，在Primitive构造之后，对整个实例的引用，包括几何图形。

Geometry instances 几何实例

实例可用于在场景的不同部分定位、缩放和旋转相同的几何体。这是可能的，因为多个实例可以引用相同的Geometry，并且每个实例可以具有不同的modelMatrix。这允许我们只计算一次几何图形，并多次重复使用它。

以下示例创建一个EllipsoidGeometry和两个实例。每个实例引用相同的椭球几何体，但使用不同的modelMatrix放置它，导致一个椭球位于另一个椭球之上。

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var ellipsoidGeometry = new Cesium.EllipsoidGeometry({
    vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
    radii : new Cesium.Cartesian3(300000.0, 200000.0, 150000.0)
});

var cyanEllipsoidInstance = new Cesium.GeometryInstance({
    geometry : ellipsoidGeometry,
    modelMatrix : Cesium.Matrix4.multiplyByTranslation(
        Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
        new Cesium.Cartesian3(0.0, 0.0, 150000.0),
        new Cesium.Matrix4()
    ),
    attributes : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.CYAN)
    }
});

var orangeEllipsoidInstance = new Cesium.GeometryInstance({
    geometry : ellipsoidGeometry,
    modelMatrix : Cesium.Matrix4.multiplyByTranslation(
        Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
        new Cesium.Cartesian3(0.0, 0.0, 450000.0),
        new Cesium.Matrix4()
    ),
    attributes : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
    }
});

scene.primitives.add(new Cesium.Primitive({
    geometryInstances : [cyanEllipsoidInstance, orangeEllipsoidInstance],
    appearance : new Cesium.PerInstanceColorAppearance({
        translucent : false,
        closed : true
    })
}));

Updating per-instance attributes 更新实例属性

将几何图形添加到Primitive后，更新几何图形的每个实例属性以更改可视化效果。每个实例的属性包括：

• Color: ColorGeometryInstanceAttribute决定了颜色实例。Primitive必须具有PerInstanceColorAppearance。
• Show：boolean类型决定实例是否可见。所有实例都具有该属性。

下列展示了如何改变几何实例的颜色：

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var circleInstance = new Cesium.GeometryInstance({
    geometry : new Cesium.CircleGeometry({
        center : Cesium.Cartesian3.fromDegrees(-95.0, 43.0),
        radius : 250000.0,
        vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
    }),
    attributes : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))
    },
    id: 'circle'
});
var primitive = new Cesium.Primitive({
    geometryInstances : circleInstance,
    appearance : new Cesium.PerInstanceColorAppearance({
        translucent : false,
        closed : true
    })
});
scene.primitives.add(primitive);

setInterval(function() {
    var attributes = primitive.getGeometryInstanceAttributes('circle');
    attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromRandom({alpha : 1.0}));
},2000);

几何图形实例的属性可以被primitive使用primitive.getGeometryInstanceAttributes检索。attirbutes的属性可以直接被改变。

外观

几何定义结构。primitive的另一个关键属性，appearance，定义了primitive的纹理，即单个像素的颜色。primitive可以有多个几何实例，但只能有一个外观。根据外观的类型，外观将具有定义着色的主体的material。

CesiumJS具有下列外观：

外观定义了绘制Primitive时在GPU上执行的完整GLSL顶点和面片着色器。外观还定义了完整的渲染状态，它控制绘制primitvie时GPU的状态。我们可以直接定义渲染状态，也可以使用更高级的属性，如“闭合(closed)”和“半透明(translucent)”，外观将转换为渲染状态。例如：

// Perhaps for an opaque box that the viewer will not enter.
//  - Backface culled and depth tested.  No blending.

var appearance  = new Cesium.PerInstanceColorAppearance({
  translucent : false,
  closed : true
});

// This appearance is the same as above
var anotherAppearance  = new Cesium.PerInstanceColorAppearance({
  renderState : {
    depthTest : {
      enabled : true
    },
    cull : {
      enabled : true,
      face : Cesium.CullFace.BACK
    }
  }
});

创建外观后，不能更改其renderState属性，但可以更改其material。我们还可以更改primitive的appearnace属性。

大多数外观还具有flat和faceForward属性，这些属性间接控制GLSL着色器。

• flat：平面阴影。不要考虑照明。
• faceForward：照明时，翻转法线，使其始终面向观众。回避背面的黑色区域，例如墙的内侧。

Geometry and appearance compatibility 几何图形和外观兼容

并非所有外观都适用于所有几何图形。例如，EllipsoidSurfaceAppearance外观不适用于WallGeometry几何图形，因为墙不在球体的表面上。

要使外观与几何图形兼容，它们必须具有匹配的顶点格式，这意味着几何图形必须具有外观所期待的输入数据。创建几何图形时可以提供vertexFormat。

几何图形的vertexFormat确定它是否可以与其他几何图形组合。两个几何图形不必是相同的类型，但它们需要匹配的顶点格式。

为方便起见，外观要么具有vertexFormat属性，要么具有可作为几何体选项传入的VERTEX_FORMAT静态常量。

var geometry = new Ceisum.RectangleGeometry({
  vertexFormat : Ceisum.EllipsoidSurfaceAppearance.VERTEX_FORMAT
  // ...
});

var geometry2 = new Ceisum.RectangleGeometry({
  vertexFormat : Ceisum.PerInstanceColorAppearance.VERTEX_FORMAT
  // ...
});

var appearance = new Ceisum.MaterialAppearance(/* ... */);
var geometry3 = new Ceisum.RectangleGeometry({
  vertexFormat : appearance.vertexFormat
  // ...
});

リソースリソース

参照文献：

• すべてのジオメトリ
• すべての出演
• プリミティブ
• GeometryInstance

より多くの材料のために参照してください：ファブリックより将来の計画は、下記をご覧ください：ジオメトリと外観ロードマップ

セシウム中国のネット交換QQグループ：807 482 793

この記事は管理者の使用して作成、クリエイティブ・コモンズ表示3.0中国本土ライセンス契約ライセンスのために。それは自由に、再現名前の著者で引用されたとの記事のソースを示すことができます。

セシウム中国のネット交換QQグループ：807 482 793

セシウム中国のネットワーク：http://cesiumcn.org/ |国内の高速アクセス：http://cesium.coinidea.com/

ます。https：//my.oschina.net/u/1470240/blog/3057398で再現