CN117197329A - 一种基于WebGL的动态水体渲染方法 - Google Patents

一种基于WebGL的动态水体渲染方法 Download PDF

Info

Publication number
CN117197329A
CN117197329A CN202311100782.1A CN202311100782A CN117197329A CN 117197329 A CN117197329 A CN 117197329A CN 202311100782 A CN202311100782 A CN 202311100782A CN 117197329 A CN117197329 A CN 117197329A
Authority
CN
China
Prior art keywords
water surface
color
water
height
coordinate
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202311100782.1A
Other languages
English (en)
Inventor
魏浩
吴曦
章维鑫
龚婷婷
冷红伟
贺一桐
李建平
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
China Survey Surveying And Mapping Technology Co ltd
Original Assignee
China Survey Surveying And Mapping Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by China Survey Surveying And Mapping Technology Co ltd filed Critical China Survey Surveying And Mapping Technology Co ltd
Priority to CN202311100782.1A priority Critical patent/CN117197329A/zh
Publication of CN117197329A publication Critical patent/CN117197329A/zh
Pending legal-status Critical Current

Links

Landscapes

  • Processing Or Creating Images (AREA)

Abstract

本发明涉及一种基于WebGL的动态水体渲染方法，包括：基于地理信息创建材质范围，包括地形高度图与水深高度图，用于确定三维水面的位置和水面的高度，获取水面法线图与水面高度图；定义渲染模型，加入水面动态波浪效果，根据光照模型计算水面反射与水面折射颜色，根据反射颜色与折射颜色计算水面渲染颜色；使用Cesium的后处理对象，根据渲染模型定义片元着色器进行水面渲染。本发明解决了如何基于地理信息系统，使用WebGL实现动态水体的三维仿真效果的问题。

Description

一种基于WebGL的动态水体渲染方法
技术领域
本发明属于数字孪生技术领域，涉及一种基于WebGL的动态水体渲染方法。
背景技术
随着WebGL的快速发展，基于WebGL建立的数字地球、数字园区、数字流域等三维虚拟仿真应用处于井喷式状态。而水利实体对象具有明显的时空分布特征，水体渲染是三维仿真应用中的重要部分。
传统的水面渲染技术可实现水面流动效果，多以面作为水面效果渲染，无法准确的展现水面的波动效果和与物体碰撞的浪花效果，并且水流向也是一个方向，无法真实的模拟水多方向流动的效果。
发明内容
本发明解决的技术问题是：克服现有技术的不足，提出一种基于WebGL的动态水体渲染方法，解决了如何基于地理信息系统，使用WebGL实现动态水体的三维仿真效果的问题。
本发明解决技术的方案是：一种基于WebGL的动态水体渲染方法，包括：
步骤一、基于卫星拍摄获得的地形数据创建地形高度图与水面高度图，获取现有的水波纹理图与水面法线图；
步骤二、根据地形高度图确定水面范围：判断任一屏幕坐标是否在地形高度图的四个角点坐标范围内，若是，进入步骤三，否则重复步骤二；
步骤三、根据地形高度图和水面高度图计算视点坐标位置处真实的水面地理高度，并与视点坐标中的高度值进行比较，判断视点与水面的位置关系，当视点位于水面上，进入步骤四，否则方法结束；
步骤四、根据视点坐标和任一屏幕坐标确定视点方向矢量，计算视点方向矢量与水面交点坐标，基于水波纹理图对所述交点坐标进行波浪添加，得到交点波浪坐标，基于水面法线图计算交点波浪坐标的法向量；
步骤五、将交点波浪坐标的法向量、视点方向矢量代入Cook-Torrance光照模型计算水面反射强度，将水面反射强度代入Blinn-phong光照模型计算水面反射颜色；根据水面深度、地面颜色、光照颜色以及水面颜色计算水面折射颜色，将水面反射颜色与水面折射颜色进行比例相加，得到水面渲染颜色赋值给WebGL内置颜色输出变量；
步骤六、利用WebGL开源框架Cesium的后处理对象，根据步骤二～步骤五的处理流程定义片元着色器，进行水面渲染。
进一步的，步骤一所述地形数据包括地形真实高度，在创建的地形高度图中，地形真实高度通过以下方法进行表示：
height1＝-10000+((R*256*256+G*256+B)*0.1)
其中，height1为地形真实高度，R、G、B分别对应了图片的红、绿、蓝三个波段，创建出来的地形高度图为RGB彩色图片；
在创建的水面高度图中，真实水面高度通过以下方法进行表示：
height2＝R/10
其中height2是真实水面高度，R对应图片的红R波段，创建出来的水面高度图是单波段的灰度图。
进一步的，步骤三所述计算视点坐标位置处真实的水面地理高度，具体为：
对于视点坐标cameraPosition，获取地形高度图中与所述视点坐标对应位置处的地形真实高度height1，获取水面高度图中与所述视点坐标对应位置处的真实水面高度height2，将获取的height1与height2相加，得到所述视点坐标位置处真实的水面地理高度currentHeight。
进一步的，步骤四所述计算视点方向矢量与水面交点坐标，具体为：
步骤401、首先，将任一屏幕坐标position与视点坐标cameraPosition分别转换为相对地形高度图中心的相对模型坐标，分别记为m_position与m_CameraPosition；m_position减m_CameraPosition得到视点方向矢量eyeVec，并对视点方向矢量eyeVec进行归一化处理，得到eyeVecNorm；
步骤402、定义高度比例t1为：
t1＝(currentHeight-m_CameraPostion_z)/eyeVecNorm_z；
根据高度比例t1计算视点方向矢量与水面交点坐标surfacePoint1为：
surfacePoint1＝m_CameraPostion+eyeVecNorm*t1；
其中，currentHeight为该视点坐标位置处真实的水面地理高度，m_CameraPosition_z为m_CameraPosition的高度值，eyeVecNorm_z为eyeVecNorm的高度值。
进一步的，步骤四所述基于水波纹理图对所述交点坐标进行波浪添加，得到交点波浪坐标，具体为：
定义偏移材质坐标texC如下：
texC＝[(surfacePoint1_x,surfacePoint1_y)+(eyeVecNorm_x,eyeVecNorm_y)*biasFactor]+czm_frameNumber*0.01*0.03*m_windDirection
其中，surfacePoint1_x,surfacePoint1_y为所述交点坐标surfacePoint1的平面坐标；eyeVecNorm_x,eyeVecNorm_y为eyeVecNorm的平面坐标；biasFactor为偏执因子；czm_frameNumber为动态帧，属于WebGL的内置变量；m_windDirection为二维风向矢量；
获取水波纹理图在偏移材质坐标texC处的R波段像素值texC_R，定义中间变量bias＝texC_R*biasFactor，进而定义中间变量t2为：
t2＝(currentHeight+bias*m_MaxAmplitude-m_CameraPostion_z)/eyeVecNorm_z；
其中，m_MaxAmplitude为水面波浪最大高度；
根据中间变量t2计算交点波浪坐标surfacePoint2如下：
surfacePoint2＝m_CameraPostion+eyeVecNorm*t2。
进一步的，步骤四所述基于水面法线图计算交点波浪坐标的法向量，具体为：
获取水面法线图在偏移材质坐标texC位置处上下左右相邻的四个坐标，计算所述四个坐标的法向量，对计算出的四个法向量进行均值处理，得到交点波浪坐标surfacePoint2的法向量surface_Normal。
进一步的，步骤五所述计算水面反射强度，具体为：
fresnel＝m_R0-m_RefractionStrength+(1-θ)5*(1-m_R0)；
其中，fresnel表示水面反射强度，m_R0表示折射率，m_RefractionStrength表示折射强度，θ表示法向量surface_Normal与视角方向矢量eyeVec的夹角，θ≥0，单位为弧度。
进一步的，步骤五所述计算水面反射颜色，具体为：
reflection＝ksIlθ512；
ks＝(1-fresnel)*f(-lightDir_y)；
Il＝m_Shininess*1.8+0.2
其中，reflection表示水面反射颜色，ks表示反射系数，lightDir表示太阳到水面交点的方向矢量，lightDir_y表示lightDir的y坐标，f(-lightDir_y)用于将-lightDir_y归一化到0-1之间；Il表示点光源强度，m_Shininess表示光照强度。
进一步的，步骤五所述计算水面折射颜色，具体为：
refraction＝A1*mixcolor+(1-A1)*m_DeepWatercolor*waterCol；
mixcolor＝A2*groundcolor+(1-A2)*m_Watercolor*waterCol；
A1＝f(depth/m_ColorExtinction)；
A2＝f(depth/3)；
waterCol＝f(m_lightcolor_length/m_SunScale)
其中，refraction表示水面折射颜色，m_DeepWatercolor表示水中颜色，groundcolor表示地面颜色，m_Watercolor表示水面颜色，depth为水深，m_ColorExtinction为颜色衰弱值，m_SunScale为光照等级，m_lightcolor_length表示光照颜色m_lightcolor的波长，取值为其中，r、g、b分别对应光照颜色m_lightcolor的R、G、B值；waterCol表示对m_lightcolor_length/m_SunScale归一化后的结果。
进一步的，步骤五所述将水面反射颜色与水面折射颜色进行比例相加，得到水面渲染颜色，具体为：
color＝fresnel*refraction+(1-fresnel)*reflection
其中，color为水面渲染颜色。
本发明与现有技术相比的有益效果是：
(1)本发明基于地理信息系统，通过数字孪生技术实现了水体场景的精准还原，更加真实的刻画了水库河流场景，能够动态的显示水面范围、水面高度等重要指数，为防汛抗旱等工作提供重要支持；
(2)本发明使用WebGL进行水体渲染，具有高效、可移植、跨平台等优点，可以在不同的浏览器和设备上进行渲染。同时，它还利用了GPU并行处理的特点，通过在GPU上运行着色器程序，实现了高效的水体渲染；
(3)本发明能够实现真实的物理模拟，利用了流体力学等相关领域的物理模型，实现了真实的水体物理模拟；通过对水体的流体动力学、波动、反射、折射、透明度等进行模拟，实现了真实的水体效果。
附图说明
图1为本发明方法的流程图；
图2a为本发明实施例的水波纹理图；
图2b为本发明实施例的水面法线图；
图3a、图3b为本发明实施例基于WebGL的动态水体渲染效果示意图。
具体实施方式
下面结合实施例对本发明作进一步阐述。
如图1所示，本发明所述的一种基于WebGL的动态水体渲染方法，包括以下流程：
步骤一、基于卫星拍摄获得的地形数据创建材质范围，包括地形高度图与水面高度图，获取现有的水波纹理图与水面法线图；所述地形数据包括地形真实高度。
步骤一具体为：
根据卫星拍摄获得的地形数据创建地形高度图时，采用Mapbox高度图生成方法，创建公式如下：
height1＝-10000+((R*256*256+G*256+B)*0.1)
其中，height1为地形真实高度，R、G、B分别对应了图片的红、绿、蓝三个波段，使用上述公式创建出来的地形高度图为RGB彩色图片。
水面高度图使用单波段定义方式，根据实际场景，水面高度保留一位小数，但是图片中不存在小数，本发明中使用下面公式进行定义：
height2＝R/10
其中height2是真实水面高度，R对应图片的红R波段，使用上述公式创建出来的水面高度图是单波段的灰度图；这样创建的水面高度图，水面最大高度为25.5米，该最大高度已满足实际需求。
得到的地形高度图用于步骤二中确定水面范围，得到的水面高度图用于步骤二中确定水面深度。
水波纹理图与水面法线图可以从网站上下载得到，没有特殊限定，用于步骤二中渲染水面动态效果。
步骤二、根据地形高度图确定水面范围：判断任一屏幕坐标是否在地形高度图的四个角点坐标范围内，若是，进入步骤三，否则不进行处理。
步骤二具体为：
将地形高度图的四个角点坐标转换为对应的屏幕坐标，然后与任一屏幕坐标position进行比较，如果任一屏幕坐标position在四个角点坐标范围内，则执行步骤三，否则，不进行处理。其中，所述的四个角点坐标是指地形高度图的四个角的坐标，为经纬度坐标，通过WebGL转换为对应的屏幕坐标后进行比较。
步骤三、根据地形高度图和水面高度图确定视点坐标位置处真实的水面地理高度currentHeight，并与视点坐标中的高度值进行比较，判断视点与水面的位置关系，当视点位于水面上，进入步骤四，否则不进行处理。
确定视点坐标位置处真实的水面地理高度currentHeight的方法具体为：
对于视点坐标cameraPosition，获取地形高度图中与所述视点坐标对应位置处的地形真实高度height1，获取水面高度图中与所述视点坐标对应位置处的真实水面高度height2，将获取的height1与height2相加，得到所述视点坐标位置处真实的水面地理高度currentHeight。
步骤四、根据视点坐标和任一屏幕坐标position确定视点方向矢量，计算视点方向矢量与水面交点坐标，基于水波纹理图对所述交点坐标进行波浪添加，得到交点波浪坐标，基于水面法线图计算交点波浪坐标的法向量。
步骤四具体为：
(1)首先，将任一屏幕坐标position与视点坐标cameraPosition分别转换为相对地形高度图中心的相对模型坐标，分别记为m_position与m_CameraPosition；m_position减m_CameraPosition得到视点方向矢量eyeVec，并对视点方向矢量eyeVec进行归一化处理，得到eyeVecNorm。
(2)定义高度比例t1为：
t1＝(currentHeight-m_CameraPostion_z)/eyeVecNorm_z；
根据高度比例t1计算视点方向矢量与水面交点坐标surfacePoint1为：
surfacePoint1＝m_CameraPostion+eyeVecNorm*t1；
其中，currentHeight为该视点坐标位置处真实的水面地理高度，m_CameraPosition_z为m_CameraPosition的高度值，eyeVecNorm_z为eyeVecNorm的高度值。
(3)得到精确的视点方向矢量与水面交点坐标surfacePoint1后，对所述交点坐标进行波浪添加，包括：
定义偏移材质坐标texC如下：
texC＝[(surfacePoint1_x,surfacePoint1_y)+(eyeVecNorm_x,eyeVecNorm_y)*biasFactor]+czm_frameNumber*0.01*0.03*m_windDirection
其中，surfacePoint1_x,surfacePoint1_y为所述交点坐标surfacePoint1的平面坐标；eyeVecNorm_x,eyeVecNorm_y为eyeVecNorm的平面坐标；biasFactor为偏执因子，默认为0.1；czm_frameNumber为动态帧，属于WebGL的内置变量；m_windDirection为二维风向矢量，例如，本实施例中用(0，-1)表示南风。
获取水波纹理图在偏移材质坐标texC处的R波段像素值texC_R，定义中间变量bias＝texC_R*biasFactor，进而定义中间变量t2为：
t2＝(currentHeight+bias*m_MaxAmplitude-m_CameraPostion_z)/eyeVecNorm_z；
其中，m_MaxAmplitude为水面波浪最大高度；
根据中间变量t2计算交点波浪坐标surfacePoint2如下：
surfacePoint2＝m_CameraPostion+eyeVecNorm*t2。
(4)利用水面法线图计算交点波浪坐标surfacePoint2的法向量，包括：
获取水面法线图在偏移材质坐标texC位置处上下左右相邻的四个坐标，计算所述四个坐标的法向量，对计算出的四个法向量进行均值处理，得到交点波浪坐标surfacePoint2的法向量surface_Normal。
步骤五、将交点波浪坐标的法向量、视点方向矢量代入Cook-Torrance光照模型计算水面反射强度，将水面反射强度代入Blinn-phong光照模型计算水面反射颜色；根据水面深度、地面颜色、光照颜色以及水面颜色计算水面折射颜色，将水面反射颜色与水面折射颜色进行比例相加，得到水面渲染颜色赋值给WebGL内置颜色输出变量。
步骤五具体为：
(1)水面反射首先使用了Cook-Torrance光照模型中的Frensenl公式，得到反射强度fresnel，公式如下：
fresnel＝m_R0-m_RefractionStrength+(1-θ)5*(1-m_R0)；
其中，m_R0表示折射率，m_RefractionStrength表示折射强度，θ表示法向量surface_Normal与视角方向矢量eyeVec的夹角，θ≥0，单位为弧度。上式对Frensenl公式进行了一些简化，减少了矩阵的计算。
(2)反射强度计算完成之后，根据水面颜色与太阳光颜色计算出真实的反射颜色，使用Blinn-phong光照模型思想计算水面反射颜色reflection，包括：
reflection＝ksIlθ512；
ks＝(1-fresnel)*f(-lightDir_y)；
Il＝m_Shininess*1.8+0.2
其中，ks表示反射系数，lightDir表示太阳到水面交点的方向矢量，lightDir_y表示lightDir的y坐标，f(-lightDir_y)用于将-lightDir_y归一化到0-1之间；Il表示点光源强度，m_Shininess表示光照强度。
(3)因为水是半透明的，所以需要考虑折射，根据水面深度、地面颜色、光照颜色以及水面颜色计算水面折射颜色refraction，包括：
refraction＝A1*mixcolor+(1-A1)*m_DeepWatercolor*waterCol；
mixcolor＝A2*groundcolor+(1-A2)*m_Watercolor*waterCol；
A1＝f(depth/m_ColorExtinction)；
A2＝f(depth/3)；
waterCol＝f(m_lightcolor_length/m_SunScale)
其中，m_DeepWatercolor表示水中颜色(一般与水面颜色一致)，groundcolor表示地面颜色，m_Watercolor表示水面颜色，depth为水深，m_ColorExtinction为颜色衰弱值，m_SunScale为光照等级，m_lightcolor_length表示光照颜色m_lightcolor的波长，取值为其中，r、g、b分别对应光照颜色m_lightcolor的R、G、B值；waterCol表示对m_lightcolor_length/m_SunScale归一化后的结果。
(4)将水面反射颜色与水面折射颜色进行比例相加，具体为：
color＝fresnel*refraction+(1-fresnel)*reflection
其中，color为水面渲染颜色。
最后，将得到的水面渲染颜色color赋予WebGL内置颜色输出变量gl_FragColor进行颜色输出。
步骤六、利用WebGL开源框架Cesium的后处理对象，根据步骤二～步骤五的处理流程定义片元着色器，进行水面渲染。
实施例1
本实施例基于WebGL的开源框架Cesium进行编程实现，包括：
步骤一、基于卫星拍摄获得的地形数据创建材质范围，包括地形高度图与水面高度图，获取水波纹理图与水面法线图；所述地形数据包括地形的真实高度。
采用Mapbox高度图生成地形高度图：
height1＝-10000+((R*256*256+G*256+B)*0.1)
其中，height1为地形真实高度，R、G、B分别对应了图片的红、绿、蓝三个波段，使用上述公式创建出来的地形高度图为RGB彩色图片。
水面高度图使用单波段定义方式：
height2＝R/10
其中height2是真实水面高度，R对应图片的红R波段，使用上述公式创建出来的水面高度图是单波段的灰度图；这样创建的水面高度图，水面最大高度为25.5米，该最大高度已满足实际需求。
水波纹理图与水面法线图可以从网站上下载得到，用于步骤二中渲染水面动态效果；本实施例中，水波纹理图如图2a所示，水面法线图如图2b所示。
步骤二、根据地形高度图确定水面范围：判断任一屏幕坐标是否在地形高度图的四个角点坐标范围内，若是，进入步骤三，否则不进行处理。
步骤三、根据地形高度图和水面高度图确定视点坐标位置处真实的水面地理高度currentHeight，并与视点坐标中的高度值进行比较，判断视点与水面的位置关系，当视点位于水面上，进入步骤四，否则不进行处理。
步骤四、根据视点坐标和任一屏幕坐标position确定视点方向矢量，计算视点方向矢量与水面交点坐标，基于水波纹理图对所述交点坐标进行波浪添加，得到交点波浪坐标，基于水面法线图计算交点波浪坐标的法向量。
(1)计算视点方向矢量与水面交点坐标surfacePoint1为：
vec3 eyeVec＝m_position-m_CameraPosition
vec3 eyeVecNorm＝normalize(eyeVec)
float t1＝(currentHeight-m_CameraPosition.z)/eyeVecNorm.z
vec3 surfacePoint1＝M_CarmeraPosition+eyeVecNorm*t1
其中，normalize为WebGL内置函数，用于归一化矢量，currentHeight为该视点坐标位置处真实的水面地理高度，m_CameraPosition.z为m_CameraPosition的高度值，eyeVecNorm.z为eyeVecNorm的高度值
(2)对surfacePoint1进行波浪添加：
vec2 texC＝(suffacePoint.xy+eyeVecNorm.xy*biasFactor)+czm_frameNumber*0.01*0.03*m_windDirection
float bias＝texture2D(m_Heightmap，texC).r；
bias*＝biasFactor；
t2＝(currentHeight+bias*m_MaxAmplitude-m_CameraPosition.z)/eyeVecNorm.z
surfacePoint2＝m_CameraPosition+eyeVecNorn*t2
其中，m_Heightmap为图2a所示的水波纹理图；偏执因子biasFactor取0.1，surfacePoint1.xy为所述交点坐标surfacePoint1的平面坐标；eyeVecNorm.xy为eyeVecNorm的平面坐标；m_windDirection为二维风向矢量，本实施例取为(0，-1)；texture2D为WebGL内置函数，用于获取指定图像中指定坐标的图片像素值。
(3)利用水面法线图计算交点波浪坐标surfacePoint2的法向量，包括：
normal1＝texture2D(m_normalMap，(texC+vec(-1.0，0.0)/256.0)).r
normal2＝texture2D(m_normalMap，(texC+vec(1.0，0.0)/256.0)).r
normal3＝texture2D(m_normalMap，(texC+vec(0.0，-1.0)/256.0)).r
normal4＝texture2D(m_normalMap，(texC+vec(0.0，1.0)/256.0)).r
surface_Normal
＝normalize(vec3(normal1-normal2)*m_MaxAmplitude，m_NormalScale，(normal3-normal4)*m_MaxAmplitude)
其中，m_normalMap为图2b所示的水面法线图，normal1～normal4分别为水面法线图在偏移材质坐标texC位置处左、右、上、下相邻的四个坐标的R波段值；m_MaxAmplitude为水面波浪最大高度；m_NormalScale为法平面尺寸，用于收缩，默认为1.0；surface_Normal为所求的交点波浪坐标surfacePoint2的法向量。
步骤五、将交点波浪坐标的法向量、视点方向矢量代入Cook-Torrance光照模型计算水面反射强度，将水面反射强度代入Blinn-phong光照模型计算水面反射颜色；根据水面深度、地面颜色、光照颜色以及水面颜色计算水面折射颜色，将水面反射颜色与水面折射颜色进行比例相加，得到水面渲染颜色赋值给WebGL内置颜色输出变量。
(1)使用Frensenl公式计算反射强度fresnel：
fresnel＝m_R0-m_RefractionStrength+(1.0-max(0.0，dot(surface_Normal，eyeVec)))5*(1.0-m_R0)
其中，dot(surface_Normal，eyeVec)用于求解法向量surface_Normal与视角方向矢量eyeVec的夹角，范围0～π；max为取大值函数。
(2)计算水面反射颜色reflection：
reflection＝vec3((1.0-fresnel)*saturate(-lightDir.y)*((pow(dotSpec，512.0))*(m_Shininess*1.8+0.2)
其中，saturate函数用于将值归一化到0-1之间；lightDir表示太阳到水面交点的方向矢量，lightDir.y表示lightDir的y坐标；dotSpec为法向量surface_Normal与视角方向矢量eyeVec的夹角，为dot(surface_Normal，eyeVec)的计算结果；函数pow(A，B)表示求解A的B次幂，m_Shininess表示光照强度。
(3)计算水面折射颜色refraction：
refraction＝groundcolor
waterCol＝saturate(length(m_Lightcolor)/m_SunScale)
refraction＝mix(mix(refraction，m_Watercolor.rgb*waterCol，saturate(depth/3.0))，m_DeepWatercolor.rgb*waterCol，saturate(depth/m_ColorExtinction))
其中，m_DeepWatercolor.rgb表示水中颜色(一般与水面颜色一致)，groundcolor表示地面颜色，m_Watercolor.rgb表示水面颜色，depth为水深，m_ColorExtinction为颜色衰弱值，m_SunScale为光照等级，length(m_lightcolor)表示计算光照颜色m_lightcolor的波长，取值为其中，r、g、b分别对应光照颜色m_lightcolor的R、G、B值；mix(A，B，c)为webGL内置函数，用于对两个变量进行比例相加，结果为c＊A+(1-c)＊B。
(4)计算水面渲染颜色color：
color＝mix(refraction，reflection，fresnel)
最后将水面渲染颜色color赋予gl_FragColor变量(该变量为WebGL内置颜色输出变量)进行颜色输出。
步骤六、根据步骤二～步骤五的处理流程定义片元着色器，渲染水面。
这里使用基于WebGL的开源框架Cesium的后处理对象，该方式类似于后期图片美化处理，可以通过该方式实现很多效果，该对象定义如下：
其中fragmentShader为WebGL内置函数，根据步骤二～步骤五定义的水面渲染算法编写GLSL语言，后面根据帧渲染进行水面实现。uniforms是可变对象，可以尝试修改光照强度光照等级m_SunScale，水面颜色m_Watercolor，水面波浪最大高度m_MaxAmplitude等，实现了水面可调试，提高使用的交互性。
本发明实施例基于WebGL的动态水体渲染效果示意图如图3a、图3b所示。
综上所述，本发明基于WebGL的动态水体渲染方法在高效的渲染、真实的物理模拟以及可视化交互等方面都具有创新性，为水体场景的模拟和可视化带来了全新的可能性。
本发明虽然已以较佳实施例公开如上，但其并不是用来限定本发明，任何本领域技术人员在不脱离本发明的精神和范围内，都可以利用上述揭示的方法和技术内容对本发明技术方案做出可能的变动和修改，因此，凡是未脱离本发明技术方案的内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化及修饰，均属于本发明技术方案的保护范围。

Claims (10)

1.一种基于WebGL的动态水体渲染方法，其特征在于，包括以下步骤：
步骤一、基于卫星拍摄获得的地形数据创建地形高度图与水面高度图，获取现有的水波纹理图与水面法线图；
步骤二、根据地形高度图确定水面范围：判断任一屏幕坐标是否在地形高度图的四个角点坐标范围内，若是，进入步骤三，否则重复步骤二；
步骤三、根据地形高度图和水面高度图计算视点坐标位置处真实的水面地理高度，并与视点坐标中的高度值进行比较，判断视点与水面的位置关系，当视点位于水面上，进入步骤四，否则方法结束；
步骤四、根据视点坐标和任一屏幕坐标确定视点方向矢量，计算视点方向矢量与水面交点坐标，基于水波纹理图对所述交点坐标进行波浪添加，得到交点波浪坐标，基于水面法线图计算交点波浪坐标的法向量；
步骤五、将交点波浪坐标的法向量、视点方向矢量代入Cook-Torrance光照模型计算水面反射强度，将水面反射强度代入Blinn-phong光照模型计算水面反射颜色；根据水面深度、地面颜色、光照颜色以及水面颜色计算水面折射颜色，将水面反射颜色与水面折射颜色进行比例相加，得到水面渲染颜色赋值给WebGL内置颜色输出变量；
步骤六、利用WebGL开源框架Cesium的后处理对象，根据步骤二～步骤五的处理流程定义片元着色器，进行水面渲染。
2.根据权利要求1所述的一种基于WebGL的动态水体渲染方法，其特征在于，步骤一所述地形数据包括地形真实高度，在创建的地形高度图中，地形真实高度通过以下方法进行表示：
height1＝-10000+((R*256*256+G*256+B)*0.1)
其中，height1为地形真实高度，R、G、B分别对应了图片的红、绿、蓝三个波段，创建出来的地形高度图为RGB彩色图片；
在创建的水面高度图中，真实水面高度通过以下方法进行表示：
height2＝R/10
其中height2是真实水面高度，R对应图片的红R波段，创建出来的水面高度图是单波段的灰度图。
3.根据权利要求1所述的一种基于WebGL的动态水体渲染方法，其特征在于，步骤三所述计算视点坐标位置处真实的水面地理高度，具体为：
对于视点坐标cameraPosition，获取地形高度图中与所述视点坐标对应位置处的地形真实高度height1，获取水面高度图中与所述视点坐标对应位置处的真实水面高度height2，将获取的height1与height2相加，得到所述视点坐标位置处真实的水面地理高度currentHeight。
4.根据权利要求1所述的一种基于WebGL的动态水体渲染方法，其特征在于，步骤四所述计算视点方向矢量与水面交点坐标，具体为：
步骤401、首先，将任一屏幕坐标position与视点坐标cameraPosition分别转换为相对地形高度图中心的相对模型坐标，分别记为m_position与m_CameraPosition；m_position减m_CameraPosition得到视点方向矢量eyeVec，并对视点方向矢量eyeVec进行归一化处理，得到eyeVecNorm；
步骤402、定义高度比例t1为：
t1＝(currentHeight-m_CameraPostion_z)/eyeVecNorm_z；
根据高度比例t1计算视点方向矢量与水面交点坐标surfacePoint1为：
surfacePoint1＝m_CameraPostion+eyeVecNorm*t1；
其中，currentHeight为该视点坐标位置处真实的水面地理高度，m_CameraPosition_z为m_CameraPosition的高度值，eyeVecNorm_z为eyeVecNorm的高度值。
5.根据权利要求4所述的一种基于WebGL的动态水体渲染方法，其特征在于，步骤四所述基于水波纹理图对所述交点坐标进行波浪添加，得到交点波浪坐标，具体为：
定义偏移材质坐标texC如下：
texC＝[(surfacePoint1_x,surfacePoint1_y)+(eyeVecNorm_x,eyeVecNorm_y)*biasFactor]+czm_frameNumber*0.01*0.03*m_windDirection
其中，surfacePoint1_x,surfacePoint1_y为所述交点坐标surfacePoint1的平面坐标；eyeVecNorm_x,eyeVecNorm_y为eyeVecNorm的平面坐标；biasFactor为偏执因子；czm_frameNumber为动态帧，属于WebGL的内置变量；m_windDirection为二维风向矢量；
获取水波纹理图在偏移材质坐标texC处的R波段像素值texC_R，定义中间变量bias＝texC_R*biasFactor，进而定义中间变量t2为：
t2＝(currentHeight+bias*m_MaxAmplitude-m_CameraPostion_z)/eyeVecNorm_z；
其中，m_MaxAmplitude为水面波浪最大高度；
根据中间变量t2计算交点波浪坐标surfacePoint2如下：
surfacePoint2＝m_CameraPostion+eyeVecNorm*t2。
6.根据权利要求5所述的一种基于WebGL的动态水体渲染方法，其特征在于，步骤四所述基于水面法线图计算交点波浪坐标的法向量，具体为：
获取水面法线图在偏移材质坐标texC位置处上下左右相邻的四个坐标，计算所述四个坐标的法向量，对计算出的四个法向量进行均值处理，得到交点波浪坐标surfacePoint2的法向量surface_Normal。
7.根据权利要求6所述的一种基于WebGL的动态水体渲染方法，其特征在于，步骤五所述计算水面反射强度，具体为：
fresnel＝m_R0-m_RefractionStrength+(1-θ)5*(1-m_R0)；
其中，fresnel表示水面反射强度，m_R0表示折射率，m_RefractionStrength表示折射强度，θ表示法向量surface_Normal与视角方向矢量eyeVec的夹角，θ≥0，单位为弧度。
8.根据权利要求7所述的一种基于WebGL的动态水体渲染方法，其特征在于，步骤五所述计算水面反射颜色，具体为：
reflection＝ksIlθ512；
ks＝(1-fresnel)*f(-lightDir_y)；
Il＝m_Shininess*1.8+0.2
其中，reflection表示水面反射颜色，ks表示反射系数，lightDir表示太阳到水面交点的方向矢量，lightDir_y表示lightDir的y坐标，f(-lightDir_y)用于将-lightDir_y归一化到0-1之间；Il表示点光源强度，m_Shininess表示光照强度。
9.根据权利要求8所述的一种基于WebGL的动态水体渲染方法，其特征在于，步骤五所述计算水面折射颜色，具体为：
refraction＝A1*mixcolor+(1-A1)*m_DeepWatercolor*waterCol；
mixcolor＝A2*groundcolor+(1-A2)*m_Watercolor*waterCol；
A1＝f(depth/m_ColorExtinction)；
A2＝f(depth/3)；
waterCol＝f(m_lightcolor_length/m_SunScale)
其中，refraction表示水面折射颜色，m_DeepWatercolor表示水中颜色，groundcolor表示地面颜色，m_Watercolor表示水面颜色，depth为水深，m_ColorExtinction为颜色衰弱值，m_SunScale为光照等级，m_lightcolor_length表示光照颜色m_lightcolor的波长，取值为其中，r、g、b分别对应光照颜色m_lightcolor的R、G、B值；waterCol表示对m_lightcolor_length/m_SunScale归一化后的结果。
10.根据权利要求9所述的一种基于WebGL的动态水体渲染方法，其特征在于，步骤五所述将水面反射颜色与水面折射颜色进行比例相加，得到水面渲染颜色，具体为：
color＝fresnel*refraction+(1-fresnel)*reflection
其中，color为水面渲染颜色。
CN202311100782.1A 2023-08-29 2023-08-29 一种基于WebGL的动态水体渲染方法 Pending CN117197329A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311100782.1A CN117197329A (zh) 2023-08-29 2023-08-29 一种基于WebGL的动态水体渲染方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311100782.1A CN117197329A (zh) 2023-08-29 2023-08-29 一种基于WebGL的动态水体渲染方法

Publications (1)

Publication Number Publication Date
CN117197329A true CN117197329A (zh) 2023-12-08

Family

ID=88999115

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311100782.1A Pending CN117197329A (zh) 2023-08-29 2023-08-29 一种基于WebGL的动态水体渲染方法

Country Status (1)

Country Link
CN (1) CN117197329A (zh)

Similar Documents

Publication Publication Date Title
CN102096941B (zh) 虚实融合环境下的光照一致性方法
CN107330964B (zh) 一种复杂三维物体的显示方法及系统
CN113674389B (zh) 场景渲染方法、装置、电子设备及存储介质
CN104835202A (zh) 一种三维虚拟场景快速构建方法
CN108805971B (zh) 一种环境光遮蔽方法
CN111968216A (zh) 一种体积云阴影渲染方法、装置、电子设备及存储介质
CN104091363A (zh) 一种基于屏幕空间实时的体积云计算方法
CN105574922A (zh) 一种鲁棒的三维模型高质量纹理映射方法
CN105488844B (zh) 一种三维场景中海量模型实时阴影的显示方法
CN110033509B (zh) 一种基于漫反射梯度偏振光构建三维人脸法线的方法
CN104517313A (zh) 基于屏幕空间的环境光遮蔽的方法
Ragia et al. 3D reconstruction and visualization of alternatives for restoration of historic buildings: A new approach
CN116385619B (zh) 对象模型渲染方法、装置、计算机设备和存储介质
CN113129420A (zh) 一种基于深度缓冲加速的光线追踪渲染方法
CN116894922A (zh) 一种基于实时图形引擎的夜视图像生成方法
CN116883573A (zh) 基于WebGL的地图建筑渲染方法及其系统
CN115409962B (zh) 虚幻引擎内构建坐标系统的方法、电子设备和存储介质
CN117197329A (zh) 一种基于WebGL的动态水体渲染方法
CN114820904A (zh) 支持光照的伪室内渲染方法、装置、介质和设备
Wang et al. A method for ink-wash painting rendering for 3D scenes
CN117274465B (zh) 匹配真实地理水域环境的水体渲染方法、系统、介质和设备
CN117456074B (zh) 基于数字孪生仿真的海上风电冲刷坑三维渲染方法和设备
Zhou et al. Gymnasium simulation design and implementation based on 3D virtual building
Elazab et al. Overlapping Shadow Rendering for Outdoor Augmented Reality.
CN116561842B (zh) 一种城市地标感知度三维地图构建方法

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination