天空的实现

zhangiser

已于 2024-03-06 11:07:44 修改

阅读量35

点赞数

分类专栏： Cesium 文章标签：前端图形渲染

于 2023-06-01 14:43:16 首次发布

本文链接：https://blog.csdn.net/azxc12345/article/details/130987786

版权

Cesium 专栏收录该内容

12 篇文章 2 订阅 ¥89.90 ¥99.00

订阅专栏

超级会员免费看

本文主要探讨如何在前端开发中利用图形渲染技术，通过shader实现天空盒效果。首先介绍了天空盒的概念，然后详细讲解了如何用shader创建蓝天，包括使用text的值加上sin扰动进行颜色线性差值，计算太阳光角度以及根据太阳位置调整天空颜色。最后，通过代码示例展示了具体的实现过程。

摘要由CSDN通过智能技术生成

一：有关天空盒

二：有关shader

1：用shader实现蓝天。

（1）蓝天的效果是天是蓝的，下面是白色的，用text的值加上sin扰动来作为变量来实现颜色的线性差值。mix 函数是来实现颜色线性差值的。

（2）计算太阳光的角度

或者计算太阳光方向在Z轴的投影长度用来判断太阳是否在地平线上。

（3）通过混合算出最终的天空颜色

具体实现代码如下：

    vec4 skyColor = vec4(mix(vec3(1.0,1.0,1.0),vec3(0.4,0.8,1.0),sin(v_texCoord.z *                1.5707963267948966)),czm_morphTime);



        float dotNum = dot(vec3(0.0,0.0,1.0),czm_lightDirectionWC);

        float directionMix = 1.0;

        if( dotNum < 0.0 ) {

            gl_FragColor = spaceColor;

            return;

        } else {

            directionMix = clamp(dotNum / 0.1, 0.0, 1.0);

            gl_FragColor = mix(spaceColor, skyColor, directionMix);

        }