Cesium - custom primitve 的使用

最新推荐文章于 2025-01-22 11:48:09 发布

原创

最新推荐文章于 2025-01-22 11:48:09 发布 · 661 阅读

标签

#webgl #Cesium

博客介绍了Cesium官方例子Custom Primitive的作用，通过该例子可学习在Cesium中自定义几何体和着色器。还提及对例子的修改，运行修改后的例子能动态修改着色器的attribute属性，实现可编辑形状的primitive，同时要注意primitive的modelMatrix和boundingSphere需初始化。

cesium的官方例子 Custom Primitive 很有用，通过这个例子可以学到如何在 cesium 中自定义几何体和着色器。

<!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, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta name="description" content="Custom Primitive example." />
    <meta name="cesium-sandcastle-labels" content="Development" />
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script
      type="text/javascript"
      src="../../../Build/CesiumUnminified/Cesium.js"
      nomodule
    ></script>
    <script type="module" src="../load-cesium-es6.js"></script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
    <style>
      @import url(../templates/bucket.css);
      #toolbar input[type="range"] {
   
   
        width: 70px;
      }
      #toolbar input {
   
   
        vertical-align: middle;
        padding-top: 2px;
        padding-bottom: 2px;
      }
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>

    <script id="cesium_sandcastle_script">
      window.startup = async function (Cesium) {
   
   
        "use strict";
        //Sandcastle_Begin

        const viewer = new Cesium.Viewer("cesiumContainer");

        /**
         * Simple example of writing a Primitive from scratch. This
         * primitive displays a procedurally-generated surface at a given
         * position on the globe.
         */
        function CustomPrimitive(cartographicPosition) {
   
   
          this.show = true;

          // This is initialized in the first call of update()
          // so we don't need a context
          this.drawCommand = undefined;

          // number of faces wide. There are resolution + 1 vertices.
          this.faceResolution = 1;

          // Compute a model matrix that puts the surface at a specific point on
          // the globe.
          this.cartographicPosition = cartographicPosition;
          const cartesianPosition = Cesium.Cartographic.toCartesian(
            cartographicPosition,
            Cesium.Ellipsoid.WGS84,
            new Cesium.Cartesian3()
          );
          this.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
            cartesianPosition,
            Cesium.Ellipsoid.WGS84,
            new Cesium.Matrix4()
          );

          this.halfWidthMeters = 10000;
          this.boundingSphere = new Cesium.BoundingSphere(
            cartesianPosition,
            this.halfWidthMeters * Math.SQRT2
          );

          this.time = undefined;
        }

        /**
         * generate a quad that's subdivided into faceResolution x faceResolution quads.
         * The vertices will be adjusted in the vertex shader.
         */
        function generateVertices(faceResolution, halfWidthMeters) {
   
   
          const vertexResolution = faceResolution + 1;
          const vertexCount = vertexResolution * vertexResolution;
          const componentsPerVertex = 3;
          const vertices = new Float32Array(vertexCount * componentsPerVertex);
          for (let i = 0; i < vertexResolution; i++) {
   
   
            for (let j = 0; j < vertexResolution; j++) {
   
   
              const u = i / (vertexResolution - 1);
              const v = j / (vertexResolution - 1);
              const index = i * vertexResolution + j;
              const x = halfWidthMeters * (2 * u - 1);
              const y = halfWidthMeters * (2 * v - 1);
              const z = 0;

              vertices[index * componentsPerVertex] = x;
              vertices[index * componentsPerVertex + 1] = y;
              vertices[index * componentsPerVertex + 2]

最低0.47元/天解锁文章