地图建筑群的光影效果原理和应用实践

简介: 高德开放平台在2020年初推出了AMap JSAPI 2.0版本,现在版本已经稳定下来。在JSAPI 2.0版本中我们采用了新的渲染管线,在每个渲染流程中都针对性的进行了性能优化。



背景

高德开放平台在2020年初推出了AMap JSAPI 2.0版本,现在版本已经稳定下来。在JSAPI 2.0版本中我们采用了新的渲染管线,在每个渲染流程中都针对性的进行了性能优化。


因此,各方面相较于上一个稳定版本都有了很大的提升。为了还原更加真实的世界,我们希望地图中的建筑元素拥有更多的光影效果,来模拟真实世界中无处不在的光照。并且,真实世界的楼体建筑也应该拥有不同的材质,对光源有不同的响应。


今天我们就来聊一下地图上立体建筑元素的光照效果如何渲染。


现状

目前主流地图服务商的地图渲染效果都有各自的侧重点,主要的方案有以下几种:


方案一:楼体没有高度信息,只有贴地的多边形色块代表。


image.png

方案一效果图


方案二:拥有盒子形状楼体渲染,支持太阳光模拟光照的简单立体效果。在某些角度下会出立面无法区分的情况。

image.png

image.gif

方案二效果图


方案三:猜测利用倾斜摄影资源,类似3DTile的加载方式,实现了接近真实世界的渲染效果,而且性能优异。

image.png

image.gif

方案三效果图


当时,高德使用的也是类似方案二中的简单光照盒子效果的立体建筑,我们希望在新的数据资源下能够渲染出更加真实的效果。具体希望达到以下效果:


  • 实现更加柔和立体的光照效果,解决立面在某些角度下会由于光照强度和角度一致导致糊成一片,丧失立体效果。


  • 实现照亮指定的区域,模拟城市的夜晚效果。


  • 满足某些特殊场景下立体物体的金属光泽特效。


方案调研


Blinn-Phong光照模型

Blinn-Phong光照模型中规定了一个片元的颜色是有三个不同的光反射量组成:


  • 环境光
    环境光是模拟现实世界中各种光源在不同的物体表面无休止的反射而最终生成的光,因为现实世界光的反射太过于复杂,在冯氏光照中我们直接定义一个光源,无差别的反射在每个物体的表面来模拟环境光。


    <环境光> = 环境光强度 x 环境光颜色。



  • 漫射光
    漫射光是模拟物体对一个光源的反射强度。从下面的图中我们能看到,漫射光的反射强度取决于物体表面的法向量和入射光的夹角,夹角越大物体反射越弱,反之,越强。


    <漫射光> = 光强度 x 光颜色 x cos(光和平面法向量的夹角)。


  • 镜面反射光
    镜面反射主要针对表面拥有粗糙度的物体,当物体表面比较光滑的时候--比如一个由抛光金属制成的物体,那么光照射到物体表面会形成光点或者光斑。


    <镜面反射光> = 光强度 x 光颜色 x cos(光在平面上的反射夹角)^平面光泽度。


一个片段颜色就是三个反射的和:总反射 = 环境反射 + 漫反射 + 镜面反射。


image.pngimage.gif

光源和材质

灯光按照不同的类型大致分为四类:


  • 环境光
    上面冯氏光照中已经介绍。



  • 平行光
    是一种理想型光源,主要模拟真实世界中的太阳光,因为太阳距离地球很远,射向地球的光可以近似的看做平行光。


  • 点光
    点光源主要模拟的是现实世界中的灯泡光。也可以理解为太阳是整个太阳系中的一个巨大点光源。


  • 聚光灯
    聚光灯光源也可以认为是锥形光源,一般使用在一些特殊场景中。


image.gifimage.png



三点布光法

为了解决单光源导致某些角度下的光线死角问题,我们发现了一种经典和常用的打光方式:三点布光法。它侧重指灯位在不同的三个点上。用三个不同强度和方向的光分布在一个场景中不同的位置将整个场景照的层次分明。


image.png

BACKLIGHT

THESUBJECT

KEYLIGHT

CAMERA

FILLLIGHT

(图片来源于网络)


主要分为:


主光:它规定了方向、角度、与范围,规定了照明光轴与照射角。起着主要造型和确定光影格调的作用,确定了整个环境的主体明暗基调。


辅助光:它起着辅助主光未照眀的区域并通过副光来调整光比,柔化主光形成的阴影。避免光的背面一片漆黑而失去立体感。


轮廓光:前两度光完成后,需要把物体与环境隔开,产生一种深度与层次。增强整个环境的柔和度和层次感。


对比和实施

为了得到比较好的物体光照效果和场景渲染,我们最终决定对上面的三种技术方案都进行实现。


使用Blinn-Phong光照模型模拟物体反射,使用环境光、平行光、点光进行光照模拟,最后使用三点布光法进行光源分布。这样在场景中能保证最好光照效果。


高德JSAPI 2.0版本中,我们绘制了简单的立体楼块。下面我们开始使用新的光照方案。

image.png

中国光大银行

沙美大楼

怡和洋行

南中路路

国家能源局

宁波小区

华东监管局

申华金胜大厦

上海市黄浦区

陈毅广场

中医医院

外滩五席

珠江大楼

外滩新界商铺

外滩.中央

新世界大丸百货

南京东路

上海公库

中央大厦

汉庭酒店

万国博览建筑群

网红邮筒

南京东路

宏伊国际广场

汉庭酒店

联合大楼

圣三一堂

久事商务大厦

交通银行

外滩金牛广场

汉光大楼

旗昌洋行

上海银行

福州路88号大楼

地2021AutoNaviGs(2019)6379号

image.png

海外沃

上海大厦宁

华隆大厦

原划船俱乐部

路桥

恒丰大楼

协进大楼

最美花园

外滩源33

三和里

上海市人民

上海外滩美术馆

东门

英雄纪念塔

箱包世界

上海半岛酒店

国家能源局

中国光大银行

西门

华东监管局

益丰.外滩源

观景平台

申华金融大厦

怡和洋行

业广地产有限公司

喜士多

浦老大食堂

中国银行大楼

惠罗公司

外滩五席

沙逊大厦旧址

南门

外滩.中央

陈毅广场

万国禁烟会会址

外滩新界商铺

外滩18号

嘉凌小区

(东1门)

淡淡的忧伤餐厅

春江大楼

正信银行

可的便利店

上海公库

中国邮政储蓄银行

性国肤烤族

银信资产

华俄道胜银行

评估有限公司

沈大成

万国博览建筑群

观景台

高地2021AutoNaviG(2019)6379号


Blinn-Phong光照模型是基于每个面的法线和光照的方向两个向量,对这两个向量进行各种运算来模拟真实世界中的光照对物体的影响。


我们先着手准备每个平面的法向量。每一个平面其实都有两个法向量,这两个法向量代表平面的“正面”和“反面”。平面中计算法向量的公式就是平面上两个任意向量的叉乘。


<平面法向量> = cross(平面向量A,平面向量 B)。


根据平面自身的缠绕方向,我们需要计算出楼块面朝外的法向量。


image.png

7

(图片来源于网络)


对于环境光和平行光来说是比较简单的,只需要光照强度、光的颜色、光的方向(平行光)。但是对于点光源来说稍微复杂一点,还需要有光的衰减。通常来说一个点光源对不同距离远的物体的光照强度是不一样的,因此需要对物体上的每一个片元都进行衰减计算。


加上平行光和环境光之后我们有了这样一个楼体效果:


image.png

OpenControls

济柠

瓦德地习2021AUtONa


为了能聚焦到主要物体上面,应该使用点光源将需要聚焦的范围点亮,让整个场景更加有层次感。


点光源的位置就设置在东方明珠上方1000米处的空中,设置光的衰减距离为一万米。这样他就会照亮整个一万米范围的城市建筑。从下图中我们就可以看出点光源照亮了整个东方明珠的区域。


image.png

OpenControls

image.png

OpenControls

 

至此,地图楼体建筑的光照效果已经基本完成。


小结

我们首先使用平行光从正南方向照射进场景中,来模拟太阳的正点照射。但是仅仅有这一个光源会导致上面提到的在某些角度下楼体的立面还是会出现整片的暗色。因此,我们需要在地图的北方增加一个弱化的背面平行光,用来点亮楼体背面。最后,为了突出东方明珠这块区域,又增加了一个半径为十公里的点光源,这样整个区域的光照就能很好的突出层次感。


在地图渲染这个方向上,有很多基础理论可以借鉴其他领域中已经很成熟的理论和最佳实践,来帮助我们渲染出更加接近真实世界的地图。


参考文献

[1] Andreas Anyuru [美] 著,吴文国译《WebGl 高级编程--开发 Web 3D 图形》. 北京:清华大学出版社,2013.06. 第一版


[2] Kouichi Matsuda [美],Rodger Lea [美] 著, 谢光磊译 《WebGL 编程指南》. 北京:电子工业出版社,2014.6


招聘

阿里巴巴高德地图技术中心长期招聘Java、Golang、Python、Android、iOS 前端资深工程师和技术专家,职位地点:北京。欢迎投递简历到gdtech@alibaba-inc.com,邮件主题为:姓名-应聘团队-应聘方向。


image.gif


相关文章
|
开发工具 Android开发 数据安全/隐私保护
Cocos Creator Android 平台 Facebook 原生登录(一)
Cocos Creator Android 平台 Facebook 原生登录
769 0
|
定位技术
Echarts实战案例代码(16):geomap地图散点图和label轮播的解决方案
Echarts实战案例代码(16):geomap地图散点图和label轮播的解决方案
513 0
|
11月前
|
机器学习/深度学习 数据采集 人工智能
AI赋能教育:深度学习在个性化学习系统中的应用
【10月更文挑战第26天】随着人工智能的发展,深度学习技术正逐步应用于教育领域,特别是个性化学习系统中。通过分析学生的学习数据,深度学习模型能够精准预测学生的学习表现,并为其推荐合适的学习资源和规划学习路径,从而提供更加高效、有趣和个性化的学习体验。
584 9
|
12月前
|
机器学习/深度学习 移动开发 前端开发
解密 SSE,像 ChatGPT 一样返回流式响应
解密 SSE,像 ChatGPT 一样返回流式响应
625 1
|
算法 C++
起点,而非终点——我的创作纪念日
起点,而非终点——我的创作纪念日
234 0
|
消息中间件 监控 Kafka
蓝绿部署中,如何确保数据一致性?
在蓝绿部署中,确保数据一致性是一个关键问题。以下是一些建议来确保数据一致性: 1. 数据库复制:在蓝绿部署的两个环境中,确保数据库是同步的。这可以通过设置数据库复制或使用数据库集群来实现。这样,在部署过程中,两个环境的数据将保持一致。 2. 数据同步工具:使用数据同步工具(如Apache Kafka、RabbitMQ等)在蓝绿部署的两个环境之间实时同步数据。这样可以确保在部署过程中,两个环境的数据保持一致。 3. 分布式事务:在分布式系统中,使用分布式事务来确保数据一致性。例如,可以使用两阶段提交(2PC)协议或者三阶段提交(3PC)协议来实现分布式事务。 4. 服务幂等性:确保服务具
873 4
|
机器学习/深度学习 人工智能 安全
安全多方计算之九:不经意传输
安全多方计算之九:不经意传输
|
Python
【python】pygame实现贪吃蛇小游戏(附源码,带注释)
【python】pygame实现贪吃蛇小游戏(附源码,带注释)
1959 1
|
定位技术
使用Echarts实现地图展示
使用Echarts实现地图展示
337 0
电烙铁焊接基础知识
(1)外热式电烙铁 ①结构:由烙铁头、烙铁芯、外壳、木柄、电源线及引线插头组成。 ②规格:25W、45W、75W、100W、150W等(功率越大,烙铁头的温度就越高) (2)内热式电烙铁 ①结构:由烙铁头、烙铁芯、外壳、木柄、电源线及引线插头组成。 ②规格:20W、30W、50W等。 ③内热式电烙铁效率高,20W内热式电烙铁相当于40W左右外热式电烙铁。
737 0
电烙铁焊接基础知识