Cesium源码剖析---Clipping Plane

最新推荐文章于 2024-11-08 16:10:43 发布

转载

最新推荐文章于 2024-11-08 16:10:43 发布 · 2.6k 阅读

10 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webgl-angela/p/9197672.html

本文详细介绍了Cesium的平面裁剪功能，从效果展示到调用方式，再到其实现原理。Cesium通过在片源着色器中添加代码，利用视空间坐标系和点乘判断模型顶点是否被裁剪。关键在于clip函数，它计算模型顶点与裁剪平面的像素距离，从而实现模型的裁剪效果。文章适合对Cesium源码和WebGL感兴趣的读者。

　　之前就一直有写博客的想法，别人也建议写一写，但一直没有动手写，自己想了一下原因，就一个字：懒、懒、懒。为了改掉这个毛病，决定从今天开始写博客了，一方面对自己掌握的知识做一个梳理，另一方面和大家做一个交流，更能深化对问题的理解。废话好像有点多，好了，各位乘客，收起小桌板，系好安全带，要发车喽。

　　Cesium作为一个开源的webgl三维地球渲染引擎，具备很多的基础功能和高级功能。之前已经有很多文章对Cesium做了相关的介绍以及如何使用API等等，我想和大家分享的是Cesium一些功能的底层实现。作为一个源码研究爱好者，希望能将底层优秀代码和大家分享。我们不是代码的生产者，我们只是代码世界的搬运工，哈哈。听说Cesium最近集成了平面剪裁功能，我们赶紧去看一看。

一 Cesium平面裁剪效果

　　Cesium裁剪模型的效果如下：

　　这就是Cesium中根据一个平面对模型进行裁剪的效果，看上去很神奇。除了可以对单个模型进行裁剪，还支持对3D Tiles模型、地形进行裁剪，裁剪面可以定义成单个面也可以设置成多个面。

二 Cesium平面裁剪调用

　　在Cesium中添加模型以及对模型进行裁剪非常简单好用，只需下面几行代码就可以实现：　

 1 var modelEntityClippingPlanes;//定义的裁剪平面集合
 2 function loadModel(url) {
 3     var clippingPlanes = [
 4         new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), -100.0)
 5     ];//裁剪平面数组
 6 
 7     modelEntityClippingPlanes = new Cesium.ClippingPlaneCollection({
 8         planes : clippingPlanes,
 9         edgeWidth : viewModel.edgeStylingEnabled ? 1.0 : 0.0
10     });
11 　　//更新裁剪平面的位置
12     function updateClippingPlanes() {
13         return modelEntityClippingPlanes;
14     }
15 　　//添加要裁剪的飞机模型，并设置裁剪平面
16     var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 100.0);
17     var heading = Cesium.Math.toRadians(135.0);
18     var pitch = 0.0;
19     var roll = 0.0;
20     var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
21