cesium结合shader系列之有倒影的流动水面

有倒影的流动水面

若仅想实现动态水面效果，利用cesium的相关接口配置material的uniforms就可以实现了。但这种方式调配出的水面相对失真，无法实现现实水面具反射周围地物效果。为了更逼真的模拟客观世界真实水面，需要对cesium固有的water.js文件进行修改，即修改cesium固有shader来完善基于cesium的真实水面模拟。
1.实现原理剖析
首先是有参考价值的文章：
GLSL实现水面倒影
倒影(reflections)效果的实现
ShaderForge-水中倒影效果
untiy shader 水的模拟
以上文章很好的总结了水面反射效果，即：

倒影：就是将uv的v值翻转一下，
倒影在水的扭曲效果：就是让图片不同部位uv值的增量不同，如果不太熟悉扭曲效果的，可以参见unity shader 贴图流动
最后利用透明度用Lerp操作将原图和倒影图合成到一起

将此原理应用在cesium里同样适用。
当然，实现该效果的方法并非仅这一种，如下文所述，个人认为实则同根同源：
webgl通过shader实现逼真水面
综合以上信息以及cesium和three.js里配置shader的方式可以将客观世界真实水面模拟的方法（仅限本文所涉内容）总结为两种，即不直接配置specularMap的方法（例如three.js里的实现方式）和直接配置specularMap的方法，本次基于cesium的实现方式采用了后者，其中specularMap指的是每一帧三维场景图片，通过UV反转将其转变为投影，同时为了更逼真模拟客观世界真实水面效果，需要进一步对颜色、噪音值、光照等属性进行配置。初步效果见下图，功能仍不完善，效果不是最佳，后续会进一步调优。

cesium结合shader系列之有倒影的流动水面相关推荐

Unity3D Shader系列之描边
目录 1 引言 2 顶点沿法线外拓方式 2.1 法线外拓+ZTest Always 2.1.1 代码 2.1.2 问题点 2.2 法线外拓+Cull Front 2.2.1 代码 2.2.2 改进点 ...
cesium 入门开发系列矢量瓦片加载展示(附源码下载)
前言 cesium 入门开发系列环境知识点了解: cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等 cesium 在线例子内容概览 cesium 实现矢量瓦片加载效果 ...
Unity3D Shader系列之全息投影
1 效果展示 2 实现原理全息投影其实是几个效果的叠加:①半透明效果②上下条纹的扫描效果③边缘光效果④模拟信号传输不稳定的顶点偏移效果. 咱们依次来看看这几个效果背后的原理. ①半透明效果在Uni ...
Cesium自定义shader材质实现逼真水面，支持uniforms属性实时修改
水的shader代码参考的是Shader - Shadertoy BETA 本文主要解决在cesium的shader中如何实时修改时间变量iTime,从而实现材质的动态变化. MaterialAppe ...
rgb立方体用html语言,解读Unity中的CG编写Shader系列一
CG=C for Graphics 用于计算机图形编程的C语言超集前提知识点: 1.CG代码必须用 CGPROGRAM ... ENDCG括起来 2.顶点着色器与片段着色器的主函数名称可随意,但需 ...
[转]解读Unity中的CG编写Shader系列3——表面剔除与剪裁模式
在上一个例子中,我们得到了由mesh组件传递的信息经过数学转换至合适的颜色区间以颜色的形式着色到物体上.这篇文章将要在此基础上研究片段的擦除(discarding fragments)和前面剪裁.后面 ...
cocos2d-js Shader系列2：在cc.Sprite上使用Shader（黑白、灰度、造旧效果）
在Sprite中使用Shader做特殊的颜色处理比较简单,只需要把Shader程序绑定到Sprite上即可: sprite.shaderProgram = alphaTestShader; Cocos ...
Smoothness 平滑度 Standard Shader系列9
Smoothness 平滑度本文档主要是对Unity官方手册的个人理解与总结(其实以翻译记录为主:>) 仅作为个人学习使用,不得作为商业用途,欢迎转载,并请注明出处. 文章中涉及到的操作都是基 ...
解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader
http://blog.csdn.net/mobanchengshuang/article/details/38731035 上篇文章中我们掌握了表面剔除和剪裁模式这篇文章将利用这些知识实现一个简单 ...

cesium结合shader系列之有倒影的流动水面

有倒影的流动水面

cesium结合shader系列之有倒影的流动水面相关推荐

最新文章

热门文章