Giter Club home page Giter Club logo

cesiummeshvisualizer's Introduction

CesiumMeshVisualizer

Make you can use three.js geometry in Cesium,and use mesh,geometry,material like three.js to manage renderable object in Cesium.

Build

npm install --save-dev
npm run build

Install

npm install cesiummeshvisualizer

Download

CesiumMeshVisualizer.js

CesiumMeshVisualizer.min.js

Usage

1.commonjs

html:

<script src="./ThirdParty/Cesium/Cesium.js"></script>

js:

var CesiumMeshVisualizer=require('./dist/CesiumMeshVisualizer.js')
//...
//npm install
//var CesiumMeshVisualizer=require('cesiummeshvisualizer')
//...

2.module

var g=typeof(window)!='undefined'?window:(typeof(global)!='undefined'?global:globalThis);
import Cesium from 'cesium/Source/Cesium.js'
g.Cesium=Cesium;
import CesiumMeshVisualizer from './Source/Main.js'

//npm install
//import CesiumMeshVisualizer from 'cesiummeshvisualizer/Source/Main.js'
//...

or

<script src="./ThirdParty/Cesium/Cesium.js"></script>
import CesiumMeshVisualizer from './Source/Main.js'

3.script element

<script src="./ThirdParty/Cesium/Cesium.js"></script>
<script src="./dist/CesiumMeshVisualizer.js"></script>
<script>
  console.log(CesiumMeshVisualizer,Cesium)
  //...
</script>

Example

        MeshVisualizer = Cesium.MeshVisualizer;
        Mesh = Cesium.Mesh;
        MeshMaterial = Cesium.MeshMaterial; 
        FramebufferTexture = Cesium.FramebufferTexture;

        var center = Cesium.Cartesian3.fromDegrees(homePosition[0], homePosition[1], 50000);
        var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);

        var meshVisualizer = new MeshVisualizer({
            modelMatrix: modelMatrix,
        });
        viewer.scene.primitives.add(meshVisualizer);


        //示例1:Cesium.Geometry+Cesium.MeshMaterial组合
        var box = Cesium.BoxGeometry.createGeometry(Cesium.BoxGeometry.fromDimensions({
            dimensions: new Cesium.Cartesian3(100000, 50000, 50000),
            vertexFormat: Cesium.VertexFormat.POSITION_ONLY
        }));
        
        var material = new MeshMaterial({
            defaultColor: "rgba(255,0,0,1.0)",
            wireframe: false,
            side: MeshMaterial.Sides.DOUBLE
        });
        var boxMesh = new Mesh(box, material);

        meshVisualizer.add(boxMesh);

        //示例2:Cesium.CSG+Cesium.MeshMaterial组合,可以用Cesium.CSG做布尔运算并渲染运算结果

        //首先使用Cesium创建球体
         var sphere = new Cesium.SphereGeometry({
             radius: 50000.0,
             vertexFormat: Cesium.VertexFormat.POSITION_ONLY
         });
         sphere = Cesium.SphereGeometry.createGeometry(sphere);
        
         var sphereMesh = new Mesh(sphere, material);
         sphereMesh.position = new Cesium.Cartesian3(100000, 0, 0)
         meshVisualizer.add(sphereMesh);

         //将球体对象Cesium.SphereGeometry转成Cesium.CSG实例
         sphere = CSG.toCSG(sphere);
         //将盒子对象转成Cesium.CSG实例
         box = CSG.toCSG(box);

          //做布尔运算
          var subResult = sphere.subtract(box);
          //渲染运算结果
          var subResultMesh = new Mesh(subResult, material);
          subResultMesh.position = new Cesium.Cartesian3(700000, 0, 0)
          meshVisualizer.add(subResultMesh);

          //示例3:使用帧缓存作纹理,实际应用中如体绘制,风场流场绘制等等都可以运用此技术

          function createGeometry() {
            var p1 = new Cesium.Cartesian3(-50000, 50000, 100);
            var p2 = new Cesium.Cartesian3(-50000, -50000, 100);
            var p3 = new Cesium.Cartesian3(50000, -50000, 100);
            var p4 = new Cesium.Cartesian3(50000, 50000, 100);

            var positions = new Float64Array([
              p1.x, p1.y, p1.z,
              p2.x, p2.y, p2.z,
              p3.x, p3.y, p3.z,
              p4.x, p4.y, p4.z
            ]);
            var indices = new Uint16Array([
              0, 1, 3,
              1, 2, 3,
            ]);
            var sts = new Float32Array([
              1, 1,
              1, 0,
              0, 0,
              0, 1
            ]);
            var geometry = new Cesium.Geometry({
                attributes: {
                    position: new Cesium.GeometryAttribute({
                        componentDatatype: Cesium.ComponentDatatype.DOUBLE,
                        componentsPerAttribute: 3,
                        values: positions
                    }),
                    st: new Cesium.GeometryAttribute({
                        componentDatatype: Cesium.ComponentDatatype.FLOAT,
                        componentsPerAttribute: 2,
                        values: sts
                    })
                },
                indices: indices,
                primitiveType: Cesium.PrimitiveType.TRIANGLES,
                boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
            });

            return geometry;
        }
        //将上文中的盒子渲染到缓存,作为纹理参与createGeometry()方法创建的几何体渲染过程
        var framebufferTex = new FramebufferTexture(boxMesh);
        var geometry = createGeometry();
        var customMesh = new Mesh(geometry, new MeshMaterial({

            uniforms: {
                u_textureMap: framebufferTex//Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/STK.png')
            },
            side: MeshMaterial.Sides.DOUBLE,
            vertexShader : "\n\
                \n\
                varying vec3 v_position;\n\
                varying vec2 v_st;\n\
                \n\
                void main(void) \n\
                {\n\
                vec4 pos = u_modelViewMatrix * vec4(position,1.0);\n\
                v_position = pos.xyz;\n\
                v_st=st;\n\
                gl_Position = u_projectionMatrix * pos;\n\
                }",
            fragmentShader : "varying vec2 v_st;\
                uniform sampler2D u_textureMap;\
                void main()\
                {\
                gl_FragColor = texture2D(u_textureMap,v_st);\n\
                \
                }\
                "
        }));
        customMesh.position = new Cesium.Cartesian3(100000, 0, 0);
        meshVisualizer.add(customMesh);

 

Document

Document

Online Demos


 demos(示例中常用操作有:左击发射,Q、A——左、右摆动,W、S、A、D——前进、后退、左转弯、右转弯):


CSG


LOD

MeshVisualizer

physics/helloworld


physics/cloth


physics/vehicle


physics/terrain



physics/softbody_volume


physics/softbody_volume2


physics/softbody_rope


physics/convex_break

ReferenceMesh


VolumeRendering

fluid2d

instancing

module


CustomImageryLayer+FramebufferTexture

当初的想法,啰嗦几句

携源码示例和文档,诚意奉献,https://github.com/MikesWei/CesiumMeshVisualizer , 名字不重要。
个人觉得Threejs里的Mesh、Geometry、Material极好,尤其是各个属性可以独立地、动态地编辑的特点,是目前在Cesium的Primitive中没有充分体现的。比如 你渲染一个立方体,想要旋转,竟然还需要自己去算新的ModelMatrix;再比如画个波动的水面竟然不能只修改顶点位置属性,修改完顶点位置后竟然需要移除旧的 Primitive再创建一个。。。也许我没找到接口,但是真心难找啊!还好,稍微扒过Cesium Primitive的都知道,再往稍微底层一点的还有DrawCommand可以灵活使用, 但是也太灵活,代码量大,还容易出错,所以决定自己模仿Threejs的Mesh、Geometry、Material并实现一个负责渲染和管理它们的更支持动态管理可渲染对象的 Primitive;之前的思路是直接转换Threejs的Mesh,产物就是Cesium3js,但是名字太大,误以为是要完全整合Cesium和Threejs,这与我本意不符,遂重新整理优化:

  • 1、不直接支持threejs的mesh,但是支持Threejs的Geometry和BufferGeometry来构建几何体。内置了Threejs Geometry、BufferGeometry到Cesium.Geometry的转换接口,同时提供Cesium.Geometry到Threejs BufferGeometry的转换接口。这些接口由GeometryUtils类提供。
  • 2、定义Mesh,支持Cesium.Geometry、THREE.Geometry、THREE.BufferGeometry以及CSG运算结果模型。
  • 3、更方便的动态渲染和管理。同一个mesh,可以单独修改mesh的位置(position)、缩放(scale)、旋转角度(rotation/Quaternion)等属性;也可以单独修改 geometry和material;同一个geometry可以单独修改各个属性和索引。方便管理,且减少对象的局部变化带来的整个drawCommand重新构建次数,以期在更多动态渲染 对象同时改变的情况下(比如结合物理引擎做模拟),仍然保持较高的帧率,当然也牺牲了一定的内存。
  • 4、定义MeshMaterial,目的是更方便的引用Threejs圈的那些炫酷特效Shader,减少整合所需的代码量。尤其是Cesium的Appearance从fragmentShader中分离出Material部分的Shader,并且作用域不一样之后,带来好多不便,引入网上那些炫酷特效Shader的时候真是头疼死了,谁做过谁才解其中味~ MeshMaterial区别于Cesium的Material,更像Threejs的Material,但不完全是。。。好像有点四不像~
  • 5、定义FramebufferTexture,启发于Threejs的RenderTarget,暂且叫帧缓存纹理类吧,反正名字不重要~ MeshVisualizer和MeshMaterial一起支持此类纹 理,就当是普通的一张图片纹理就好了。它的用处就是,把Mesh渲染到帧缓存中,作为纹理参与其他Mesh的渲染。可以参考VolumeRendering示例。另外RendererUtils 提供了一个单次执行渲染到纹理的接口RendererUtils.renderToTexture。在不使用MeshVisualizer的时候,也就是自己基于drawCommand自定义一个Primitive的时 候也可以用得上。
  • 6、整合CSG.js,支持使用Cesium.Geometry、THREE.Geometry、THREE.BufferGeometry做交、并、补等运算,并提供将运算结果CSG对象转成Cesium.Geometry、THREE.Geometry的接口。参考CSG示例
  • 7、提供基于ammo.js物理引擎的示例,示例源码源于Threejs,使用MeshVisualizer,可以在更少的代码修改情况下完成迁移整合,甚合我意。

cesiummeshvisualizer's People

Contributors

mikeswei avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.