Cesium中离屏渲染的应用

Cesium中离屏渲染的应用

离屏渲染(Off-Screen Rendering)顾名思义,指的是定义另外一个相机,并让GPU在当前屏幕缓冲区之外再开辟一个新的缓冲区,通过自定义的另一个相机进行渲染操作。

这一块新的frame buffer可以用来作为画面输出,也可以用于参与计算。

作为画面输出

将离屏渲染得到的frame buffer直接做为图像,输出到Canvas上的效果可以参考这篇文章。

作为画面输出

同时拾取多个对象

cesium的pick原理是根据物体的id,将物体绘制成不同的颜色,然后通过判断渲染结果上有哪些颜色,来判断拾取到了什么物体。

cesium的pick只返回选中的第一个物体,我们可以通过修改pick的视锥体和拾取方式,实现大范围内拾取多个物体的效果。

下面的示例中定义了一个与当前相机位置和方向相同的拾取相机,并且拾取相机的远平面为2000,近平面为0.1,视场角为45°,纵横比为1。所有拾取到的Cesium3DTileFeature颜色改为红色。

同时拾取一百万个坐标

cesium的 pickPosition 或者 sampleHeight 这类的拾取坐标的方法,原理都是进行深度测试,再将深度值转化为世界坐标。

cesium拾取坐标的方法通常只能拾取到一个位置(或者说一个方向上的位置),同样的,我们可以通过修改pick的视锥和计算方式,实现同时拾取一个范围内的点。

假设我们需要拾取一定范围内一百万个点的坐标,如果单纯使用Cesium定义的方式,就需要额外增加一百万个渲染批次。

而如果我们可以定义pick的视锥,并规定深度图的大小为1024*1024,通过一次离屏的深度测试后,再将深度图上的点全部转化为世界坐标,就可以实现仅通过增加一趟额外的渲染,就能够拾取到一定范围内的一百多万个坐标点。

下面的实例中,为了方便计算,所以pick的视锥使用的是正交投影视锥,宽高都是1000。深度图的尺寸是1024*1024。


由于csdn无法添加自定义的html,所以,如果想体验的话,可以去Cesium中离屏渲染的应用中体验

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
离屏渲染是一种将图形渲染到与屏幕不直接关联的缓冲区的技术。在Cesium中,离屏渲染可以通过使用WebGL的帧缓冲对象(Framebuffer Object,FBO)来实现。 离屏渲染Cesium中的应用场景包括: 1. 生成纹理:可以将场景渲染到一个纹理中,然后将该纹理用于其他的图形操作,例如后期处理、投影等。 2. 阴影计算:可以将场景渲染到一个深度纹理中,然后使用该深度纹理来计算阴影效果。 3. 屏幕空间反射(Screen Space Reflection,SSR):可以将场景渲染到一个颜色纹理和一个法线纹理中,然后使用这些纹理来计算屏幕空间反射效果。 具体实现离屏渲染的步骤如下: 1. 创建一个帧缓冲对象(Framebuffer Object,FBO)。 2. 创建一个纹理附件(Texture Attachment),用于存储渲染结果。 3. 将帧缓冲对象绑定到渲染管线中。 4. 渲染场景到帧缓冲对象中的纹理附件。 5. 解绑帧缓冲对象,将渲染结果用于其他的图形操作。 以下是一个使用Cesium进行离屏渲染的示例代码: ```javascript // 创建帧缓冲对象 var framebuffer = new Cesium.Framebuffer({ context: viewer.scene.context, colorTextures: [new Cesium.Texture({ context: viewer.scene.context })], depthTexture: new Cesium.Texture({ context: viewer.scene.context, format: Cesium.PixelFormat.DEPTH_COMPONENT }) }); // 将帧缓冲对象绑定到渲染管线中 viewer.scene.frameState.framebuffer = framebuffer; // 渲染场景到帧缓冲对象中的纹理附件 viewer.scene.render(); // 解绑帧缓冲对象 viewer.scene.frameState.framebuffer = undefined; // 获取渲染结果的纹理 var resultTexture = framebuffer.getColorTexture(0); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值