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-devnpm run build
Install
npm install cesiummeshvisualizer
Download
Usage
1.commonjs
html:
js:
var CesiumMeshVisualizer=//...//npm install//var CesiumMeshVisualizer=require('cesiummeshvisualizer')//...
2.module
var g=typeofwindow!='undefined'?window:typeofglobal!='undefined'?global:globalThis;gCesium=Cesium;//npm install//import CesiumMeshVisualizer from 'cesiummeshvisualizer/Source/Main.js'//...
or
3.script element
Example
MeshVisualizer = CesiumMeshVisualizer; Mesh = CesiumMesh; MeshMaterial = CesiumMeshMaterial; FramebufferTexture = CesiumFramebufferTexture; var center = CesiumCartesian3; var modelMatrix = CesiumTransforms; var meshVisualizer = modelMatrix: modelMatrix ; viewersceneprimitives; //示例1:Cesium.Geometry+Cesium.MeshMaterial组合 var box = CesiumBoxGeometry; var material = defaultColor: "rgba(255,0,0,1.0)" wireframe: false side: MeshMaterialSidesDOUBLE ; var boxMesh = box material; meshVisualizer; //示例2:Cesium.CSG+Cesium.MeshMaterial组合,可以用Cesium.CSG做布尔运算并渲染运算结果 //首先使用Cesium创建球体 var sphere = radius: 500000 vertexFormat: CesiumVertexFormatPOSITION_ONLY ; sphere = CesiumSphereGeometry; var sphereMesh = sphere material; sphereMeshposition = 100000 0 0 meshVisualizer; //将球体对象Cesium.SphereGeometry转成Cesium.CSG实例 sphere = CSG; //将盒子对象转成Cesium.CSG实例 box = CSG; //做布尔运算 var subResult = sphere; //渲染运算结果 var subResultMesh = subResult material; subResultMeshposition = 700000 0 0 meshVisualizer; //示例3:使用帧缓存作纹理,实际应用中如体绘制,风场流场绘制等等都可以运用此技术 { var p1 = -50000 50000 100; var p2 = -50000 -50000 100; var p3 = 50000 -50000 100; var p4 = 50000 50000 100; var positions = p1x p1y p1z p2x p2y p2z p3x p3y p3z p4x p4y p4z ; var indices = 0 1 3 1 2 3 ; var sts = 1 1 1 0 0 0 0 1 ; var geometry = attributes: position: componentDatatype: CesiumComponentDatatypeDOUBLE componentsPerAttribute: 3 values: positions st: componentDatatype: CesiumComponentDatatypeFLOAT componentsPerAttribute: 2 values: sts indices: indices primitiveType: CesiumPrimitiveTypeTRIANGLES boundingSphere: CesiumBoundingSphere ; return geometry; } //将上文中的盒子渲染到缓存,作为纹理参与createGeometry()方法创建的几何体渲染过程 var framebufferTex = boxMesh; var geometry = ; var customMesh = geometry uniforms: u_textureMap: framebufferTex//Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/STK.png') side: MeshMaterialSidesDOUBLE 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\ \ }\ " ; customMeshposition = 100000 0 0; meshVisualizer;
Document
Online Demos
demos(示例中常用操作有:左击发射,Q、A——左、右摆动,W、S、A、D——前进、后退、左转弯、右转弯):
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
当初的想法,啰嗦几句
携源码示例和文档,诚意奉献,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,可以在更少的代码修改情况下完成迁移整合,甚合我意。