Cesium逼真水面，动态水波，倒影

最新推荐文章于 2024-09-06 11:09:45 发布
最新推荐文章于 2024-09-06 11:09:45 发布
阅读量3.9k 收藏 26
点赞数 7
分类专栏： WebGL实战 文章标签： 图形渲染 前端 材质 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25169689/article/details/131329122
版权

在上一篇的基础上，增加水面的倒影。上篇地址：

​Cesium自定义shader材质实现逼真水面，支持uniforms属性实时修改_cesium uniforms_微笑面对bug的博客-CSDN博客

倒影的原理：计算相机到水平面视点的入射光线的反射光线，用反射光线方向向量在一个天空盒上采样。由于没找到自定义材质传入CubeTexture的接口，索性传入6张图片，手动实现一遍textureCube采样。

源码地址：https://gitee.com/changjiuxiong/Cesium-1.62Test/blob/master/Apps/shaderMaterial_uniforms_skybox.html

仓库地址：https://gitee.com/changjiuxiong/Cesium-1.62Test

版权所有，请勿用于商业用途。

附源码：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
    @import url(../Build/Cesium/Widgets/widgets.css);
    html, body, #cesiumContainer {
      width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    }
  </style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNjJjMzY0OS1hZGQxLTRiZmYtYWYwNS03NmIyM2MwMDgwZDAiLCJpZCI6MTIzMTgsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjA4NDQ3Mjd9.OLTL_rs2gAi2R9zoztBHcJPDHnVl2Q7OZxRtZhoCeZE';

  var viewer = new Cesium.Viewer('cesiumContainer');

  var box = new Cesium.BoxGeometry({
    vertexFormat : Cesium.VertexFormat.POSITION_NORMAL_AND_ST,
    maximum : new Cesium.Cartesian3(250000.0, 250000.0, 0),
    minimum : new Cesium.Cartesian3(-250000.0, -250000.0, 0)
  });
  var geometry = Cesium.BoxGeometry.createGeometry(box);

  let inst = new Cesium.GeometryInstance({
    geometry: geometry
  });

  let planePos = Cesium.Cartesian3.fromDegrees(110, 40, 0);
  let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
          planePos
  );
  let planeNor = Cesium.Cartesian3.normalize(planePos, new Cesium.Cartesian3());

  // 自定义材质
  let aper = new Cesium.MaterialAppearance({
    material: new Cesium.Material({
      fabric: {
        uniforms: {
          iTime: 0,
          planeNor: planeNor,
          skyBoxU: './img/py.png',
          skyBoxD: './img/ny.png',
          skyBoxR: './img/px.png',
          skyBoxL: './img/nx.png',
          skyBoxF: './img/nz.png',
          skyBoxB: './img/pz.png',
        },
        source:`
        const int NUM_STEPS = 8;
      const float PI     = 3.141592;
      const float EPSILON  = 1e-3;
      //#define EPSILON_NRM (0.1 / iResolution.x)
      #define EPSILON_NRM (0.1 / 200.0)

      // sea
      const int ITER_GEOMETRY = 3;
      const int ITER_FRAGMENT = 5;
      const float SEA_HEIGHT = 0.6;
      const float SEA_CHOPPY = 4.0;
      const float SEA_SPEED = 1.8;
      const float SEA_FREQ = 0.16;
      const vec3 SEA_BASE = vec3(0.1,0.19,0.22);
      const vec3 SEA_WATER_COLOR = vec3(0.8,0.9,0.6);
      //#define SEA_TIME (1.0 + iTime * SEA_SPEED)

      const mat2 octave_m = mat2(1.6,1.2,-1.2,1.6);

      // math
      mat3 fromEuler(vec3 ang) {
        vec2 a1 = vec2(sin(ang.x),cos(ang.x));
        vec2 a2 = vec2(sin(ang.y),cos(ang.y));
        vec2 a3 = vec2(sin(ang.z),cos(ang.z));
        mat3 m;
        m[0] = vec3(a1.y*a3.y+a1.x*a2.x*a3.x,a1.y*a2.x*a3.x+a3.y*a1.x,-a2.y*a3.x);
        m[1] = vec3(-a2.y*a1.x,a1.y*a2.y,a2.x);
        m[2] = vec3(a3.y*a1.x*a2.x+a1.y*a3.x,a1.x*a3.x-a1.y*a3.y*a2.x,a2.y*a3.y);
        return m;
      }
      float hash( vec2 p ) {
        float h = dot(p,vec2(127.1,311.7));
        return fract(sin(h)*43758.5453123);
      }
      float noise( in vec2 p ) {
        vec2 i = floor( p );
        vec2 f = fract( p );
        vec2 u = f*f*(3.0-2.0*f);
        return -1.0+2.0*mix( mix( hash( i + vec2(0.0,0.0) ),
                 hash( i + vec2(1.0,0.0) ), u.x),
              mix( hash( i + vec2(0.0,1.0) ),
                 hash( i + vec2(1.0,1.0) ), u.x), u.y);
      }

      // lighting
      float diffuse(vec3 n,vec3 l,float p) {
        return pow(dot(n,l) * 0.4 + 0.6,p);
      }
      float specular(vec3 n,vec3 l,vec3 e,float s) {
        float nrm = (s + 8.0) / (PI * 8.0);
        return pow(max(dot(reflect(e,n),l),0.0),s) * nrm;
      }

      // sky
      vec3 getSkyColor(vec3 e) {
        e.y = max(e.y,0.0);
        return vec3(pow(1.0-e.y,2.0), 1.0-e.y, 0.6+(1.0-e.y)*0.4);
      }

      // sea
      float sea_octave(vec2 uv, float choppy) {
        uv += noise(uv);
        vec2 wv = 1.0-abs(sin(uv));
        vec2 swv = abs(cos(uv));
        wv = mix(wv,swv,wv);
        return pow(1.0-pow(wv.x * wv.y,0.65),choppy);
      }

      float map(vec3 p) {
        float freq = SEA_FREQ;
        float amp = SEA_HEIGHT;
        float choppy = SEA_CHOPPY;
        vec2 uv = p.xz; uv.x *= 0.75;

        float d, h = 0.0;
        float SEA_TIME = 1.0 + iTime * SEA_SPEED;
        for(int i = 0; i < ITER_GEOMETRY; i++) {
          d = sea_octave((uv+SEA_TIME)*freq,choppy);
          d += sea_octave((uv-SEA_TIME)*freq,choppy);
          h += d * amp;
          uv *= octave_m; freq *= 1.9; amp *= 0.22;
          choppy = mix(choppy,1.0,0.2);
        }
        return p.y - h;
      }

      float map_detailed(vec3 p) {
        float freq = SEA_FREQ;
        float amp = SEA_HEIGHT;
        float choppy = SEA_CHOPPY;
        vec2 uv = p.xz; uv.x *= 0.75;

        float SEA_TIME = 1.0 + iTime * SEA_SPEED;

        float d, h = 0.0;
        for(int i = 0; i < ITER_FRAGMENT; i++) {
          d = sea_octave((uv+SEA_TIME)*freq,choppy);
          d += sea_octave((uv-SEA_TIME)*freq,choppy);
          h += d * amp;
          uv *= octave_m; freq *= 1.9; amp *= 0.22;
          choppy = mix(choppy,1.0,0.2);
        }
        return p.y - h;
      }

      vec3 getSeaColor(vec3 p, vec3 n, vec3 l, vec3 eye, vec3 dist) {
        float fresnel = clamp(1.0 - dot(n,-eye), 0.0, 1.0);
        fresnel = pow(fresnel,3.0) * 0.65;

        vec3 reflected = getSkyColor(reflect(eye,n));
        vec3 refracted = SEA_BASE + diffuse(n,l,80.0) * SEA_WATER_COLOR * 0.12;

        vec3 color = mix(refracted,reflected,fresnel);

        float atten = max(1.0 - dot(dist,dist) * 0.001, 0.0);
        color += SEA_WATER_COLOR * (p.y - SEA_HEIGHT) * 0.18 * atten;

        color += vec3(specular(n,l,eye,60.0));

        return color;
      }

      // tracing
      vec3 getNormal(vec3 p, float eps) {
        vec3 n;
        n.y = map_detailed(p);
        n.x = map_detailed(vec3(p.x+eps,p.y,p.z)) - n.y;
        n.z = map_detailed(vec3(p.x,p.y,p.z+eps)) - n.y;
        n.y = eps;
        return normalize(n);
      }

      float heightMapTracing(vec3 ori, vec3 dir, out vec3 p) {
        float tm = 0.0;
        float tx = 1000.0;
        float hx = map(ori + dir * tx);
        if(hx > 0.0) return tx;
        float hm = map(ori + dir * tm);
        float tmid = 0.0;
        for(int i = 0; i < NUM_STEPS; i++) {
          tmid = mix(tm,tx, hm/(hm-hx));
          p = ori + dir * tmid;
          float hmid = map(p);
          if(hmid < 0.0) {
            tx = tmid;
            hx = hmid;
          } else {
            tm = tmid;
            hm = hmid;
          }
        }
        return tmid;
      }

           vec4 czm_getMaterial(vec2 vUv, vec3 positionWC)
           {
            vec2 uv = vUv;
            uv = vUv * 2.0 - 1.0;
            // return texture2D(skyBox,uv);

            float time = iTime * 0.3 + 0.0*0.01;


            // ray
            vec3 ang = vec3(0, 1.2, 0.0);
              vec3 ori = vec3(0.0,3.5,0);
            vec3 dir = normalize(vec3(uv.xy,-2.0)); dir.z += length(uv) * 0.15;
            dir = normalize(dir) * fromEuler(ang);

            // tracing
            vec3 p;
            heightMapTracing(ori,dir,p);
            vec3 dist = p - ori;
            vec3 n = getNormal(p, dot(dist,dist) * EPSILON_NRM);
            vec3 light = normalize(vec3(0.0,1.0,0.8));

            // color
            vec3 color = mix(
              getSkyColor(dir),
              getSeaColor(p,n,light,dir,dist),
              pow(smoothstep(0.0,-0.05,dir.y),0.3)
            );

            vec3 cameraPos = czm_encodedCameraPositionMCHigh + czm_encodedCameraPositionMCLow;
            vec3 inDir = normalize(positionWC - cameraPos);
            vec3 refDir = normalize( reflect(inDir, planeNor) );

            vec2 dirOnUp = normalize( vec2(refDir.x,refDir.y) );

            float theta = acos(dot(refDir, vec3(0,0,1.0)));
            float len = tan(theta);
            vec2 dirOnPlane = normalize( vec2(refDir.x,refDir.y) );
            vec2 interPos = len * dirOnPlane;
            vec2 uvSky = (interPos+1.0)/2.0;
            vec3 skyColor = texture2D(skyBoxU,uvSky).rgb;
            // skyColor = vec3(1.0,1.0,0.0);

            if(refDir.z<0.0){
              theta = acos(dot(refDir, vec3(0,0,-1.0)));
              len = tan(theta);
              dirOnPlane = normalize( vec2(refDir.x,-refDir.y) );
              interPos = len * dirOnPlane;
              uvSky = (interPos+1.0)/2.0;
              skyColor = texture2D(skyBoxD,uvSky).rgb;
              // skyColor = vec3(1.0,1.0,1.0);
            }

            if(abs(interPos.x)>1.0 || abs(interPos.y)>1.0){
              float thetaX = acos(dot(dirOnUp, vec2(1.0,0.0)));
              float thetaXM = acos(dot(dirOnUp, vec2(-1.0,0.0)));
              float thetaY = acos(dot(dirOnUp, vec2(0.0,1.0)));
              float thetaYM = acos(dot(dirOnUp, vec2(0.0,-1.0)));

              if(thetaX<PI/4.0){
                theta = acos(dot(refDir, vec3(1.0,0,0)));
                len = tan(theta);
                dirOnPlane = normalize( vec2(refDir.y,refDir.z) );
                interPos = len * dirOnPlane;
                uvSky = (interPos+1.0)/2.0;
                skyColor = texture2D(skyBoxR,uvSky).rgb;
                // skyColor = vec3(0.0,1.0,0);
              }else if(thetaXM<PI/4.0){
                theta = acos(dot(refDir, vec3(-1.0,0,0)));
                len = tan(theta);
                dirOnPlane = normalize( vec2(-refDir.y,refDir.z) );
                interPos = len * dirOnPlane;
                uvSky = (interPos+1.0)/2.0;
                skyColor = texture2D(skyBoxL,uvSky).rgb;
                // skyColor = vec3(0.0,0.0,1.0);
              }else if(thetaYM<PI/4.0){
                theta = acos(dot(refDir, vec3(0,1.0,0)));
                len = tan(theta);
                dirOnPlane = normalize( vec2(refDir.x,-refDir.z) );
                interPos = len * dirOnPlane;
                uvSky = (interPos+1.0)/2.0;
                skyColor = texture2D(skyBoxB,uvSky).rgb;
                // skyColor = vec3(1.0,0.5,0.0);
              }else if(thetaY<PI/4.0){
                theta = acos(dot(refDir, vec3(0,-1.0,0)));
                len = tan(theta);
                dirOnPlane = normalize( vec2(refDir.x,-refDir.z) );
                interPos = len * dirOnPlane;
                uvSky = (interPos+1.0)/2.0;
                skyColor = texture2D(skyBoxF,uvSky).rgb;
                // skyColor = vec3(1.0,0.0,0.0);
              }
            }

            vec3 seaColorV3 = pow(color,vec3(0.75));

            vec3 finallColor = seaColorV3*0.4+skyColor*0.6;
            return vec4( finallColor, 1.0 );
           }
        `,
      }
    }),
    translucent: true,
    vertexShaderSource: `
        attribute vec3 position3DHigh;
        attribute vec3 position3DLow;
        attribute float batchId;
        attribute vec2 st;
        attribute vec3 normal;
        varying vec2 v_st;
        varying vec3 v_positionEC;
        varying vec3 v_normalEC;
        varying vec3 positionWC;

        void main() {
            v_st = st;

            vec4 p = czm_computePosition();

            v_positionEC = (czm_modelViewRelativeToEye * p).xyz;      // position in eye coordinates
            v_normalEC = czm_normal * normal;                         // normal in eye coordinates

            positionWC = position3DHigh + position3DLow;
            gl_Position = czm_modelViewProjectionRelativeToEye * p;
        }
                    `,
    fragmentShaderSource: `
      varying vec2 v_st;
      varying vec3 v_positionEC;
      varying vec3 v_normalEC;
      varying vec3 positionWC;

      void main()  {
        vec3 positionToEyeEC = -v_positionEC;
        vec3 normalEC = normalize(v_normalEC);
        czm_materialInput materialInput;
        materialInput.normalEC = normalEC;
        materialInput.positionToEyeEC = positionToEyeEC;
        materialInput.st = v_st;
        vec4 color = czm_getMaterial(v_st,positionWC);

        gl_FragColor = color;


      }
                `,
  });

  viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: inst,
    appearance: aper,
    modelMatrix: modelMatrix,
  }));

  viewer.camera.flyToBoundingSphere(new Cesium.BoundingSphere(
          Cesium.Cartesian3.fromDegrees(110, 40, 10), 950000,
  ),{
    duration: 0.1,
  });

  function renderLoop(timestamp){
    aper.material.uniforms.iTime = timestamp/1000;
    requestAnimationFrame(renderLoop);
  }

  renderLoop();


</script>
</body>
</html>


 

cesium河流流水（cesium篇.63）
地图之家
12-03 3257
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/Cesium/Cesium.js"></script> <link rel="st
Cesium 展示——绘制水面动态升高
虎康的博客
08-26 515
如图，绘制水面动态升高，作为洪水淹没的效果。
cesium结合shader系列之有倒影的流动水面
shenwuyuexy的博客
11-24 6883
有倒影的流动水面 若仅想实现动态水面效果，利用cesium的相关接口配置material的uniforms就可以实现了。但这种方式调配出的水面相对失真，无法实现现实水面具反射周围地物效果。为了更逼真的模拟客观世界真实水面，需要对cesium固有的water.js文件进行修改，即修改cesium固有shader来完善基于cesium的真实水面模拟。 1.实现原理剖析 首先是有参考价值的文章： GLSL实现水面倒影 倒影(reflections)效果的实现 ShaderForge-水中倒影效果 untiy sh
Cesium模拟真实湖泊效果
qq_43474235的博客
03-17 1040
在这里需要推荐一个关于Cesium博主，对初学者有很大帮助。
Cesium淹没分析（动态纹理水体）
最新发布
zengjingshan的博客
09-06 1062
Cesium淹没分析通过动态纹理水体渲染
Cesium动态水面（任意多边形PolygonGeometry）保姆级教程
qq_42628798的博客
01-05 2902
Cesium实现多边形动态水面
Cesium实现动态水面效果
qq_37312180的博客
01-24 1265
水面动态效果。
Cesium创建水面效果
Passerby_OK的博客
02-20 960
通过创建primitives添加水面效果
cesium实现水面水流及淹没效果绘制的封装
weixin_42496466的博客
10-27 3950
perPositionHeight : true//注释掉此属性水面就贴地了。//extrudedHeight: 0,//注释掉此属性可以只显示水面。show: true,// 默认隐藏。// 可以设置内置的水面shader。之前写的绘制河流代码比较原生，现在用es6重写封装及项目应用。//如果当前实体不存在则绘制。name:'水面',四、厂区洪水淹没应用效果。一、配置数据结构信息。
cesium水面波纹（动态水面）（cesium篇.62）
地图之家
12-03 2889
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/Cesium/Cesium.js"></script> <link rel="st
基于反射和折射离屏渲染的水面特效在Cesium中的实现
行走的过客
03-24 1403
水面特效。
62.（cesium篇）cesium水面波纹（动态水面）.zip
06-13
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“62.（cesium篇）cesium水面波纹（动态水面）”。如下载有问题，可联系博主。 解压密码：cesium
Cesium 海面波纹waterNormals.jpg
10-12
Cesium 海面波纹waterNormals.jpg viewer.scene.primitives.add(_entity);
53.（cesium篇）cesium叠加波纹点，水波纹（贴地）(着色器).zip
06-13
该资源包的执行效果查看地址：...“地图之家”专栏中的“53.（cesium篇）cesium叠加波纹点，水波纹（贴地）(着色器)”。如下载有问题，可联系博主。 解压密码：cesium
62.（cesium篇）cesium水面波纹（动态水面）
GIS之家家长
04-08 1347
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/Cesium/Cesium.js"></script> <link rel="st
62.（cesium之家）cesium水面波纹（动态水面）
地图之家
12-14 480
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/Cesium/Cesium.js"></script> <link rel="st
Cesium 实战 06 - 自定义标绘多边形实现水面效果
linzi19900517的博客
01-03 1763
Cesium 实战 - 自定义标绘多边形实现水面效果。
cesium 海洋水面动态效果
12-29
以下是使用Cesium实现海洋水面动态效果的示例代码： ```javascript // 引入Cesium库 import * as Cesium from 'cesium'; // 创建场景 const viewer = new Cesium.Viewer('cesiumContainer'); // 创建水体材质 function createWaterMaterial() { return new Cesium.Material({ fabric: { type: 'Water', uniforms: { baseWaterColor: Cesium.Color.AQUA.withAlpha(0.3), normalMap: 'static/images/effects/waterNormalsSmall.jpg', frequency: 1000.0, animationSpeed: 0.03, amplitude: 10.0, specularIntensity: 5, }, }, }); } // 创建水体 const water = viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.PlaneGeometry({ vertexFormat: Cesium.VertexFormat.POSITION_ONLY, minimum: new Cesium.Cartesian3(-1000000.0, -1000000.0, 0.0), maximum: new Cesium.Cartesian3(1000000.0, 1000000.0, 0.0), }), }), appearance: new Cesium.MaterialAppearance({ material: createWaterMaterial(), faceForward: true, flat: true, }), })); // 设置相机位置 viewer.camera.setView({ destination: new Cesium.Cartesian3.fromDegrees(0, 0, 10000000), }); // 渲染场景 viewer.render(); ``` 这段代码使用Cesium库创建了一个场景，并在场景中添加了一个水体，通过调整参数可以实现不同样式的水体特效。其中，`baseWaterColor`表示水体的基础颜色，`normalMap`表示水体的法线贴图，`frequency`表示水体波纹的频率，`animationSpeed`表示水体波纹的动画速度，`amplitude`表示水体波纹的振幅，`specularIntensity`表示水体的高光强度。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值