如何在 Three.js 中渲染行星周围的大气层？

如何在 Three.js 中渲染地球上的“大气层”？

问题

我正在尝试引入Three.js 纹理栩栩如生。我遇到的问题是我的浏览器阻止纹理加载，已按照此处的说明修复了该问题。

此外，我正在为我的一个课程构建一个太空导航游戏，其中包括航天器导航。结果，我渲染了一组行星，地球就是其中之一。我在下面添加了我的地球渲染图像。它看起来状况良好，但我正在尝试通过在其周围添加“氛围”来提高其真实感。

我环顾四周，发现了一些使用发光的非常漂亮的创作，但是我不相信它们适用于我的情况。

这是将地球放置在我的场景中的代码（这是我从 Three.js 获得的代码的修改版本）教程）：

    function addEarth(x,y){

        var sphereMaterial =
        new THREE.MeshLambertMaterial({
            //color: 0x0000ff,
            map: earthTexture
        });

        // set up the sphere vars
        var radius = 75;
        segments = 16;
        rings = 16;

        // create a new mesh with
        // sphere geometry - we will cover
        // the sphereMaterial next!
        earth = new THREE.Mesh(

        new THREE.SphereGeometry(
        radius,
        segments,
        rings),

        sphereMaterial);

        earth.position.x = x;
        earth.position.y = y;

        // add the sphere to the scene
        scene.add(earth);
    }

> ;

解决方案

[编辑3]

这是一个紧凑的 CPU 侧代码示例，我在引擎中使用它来使用上面提供的着色器渲染大气：

if (sys->_enable_bodya) // has planet atmosphere?
 if (view_depth>=0.0)
    {
    glColor4f(1.0,1.0,1.0,1.0);
    double a,b,p[3],d[3];
    sys->shd_engine.unbind();
    sys->shd_scatter.bind(); // this is the atmospheric shader
    if (1) //*** GLSL_uniform_supported (leftover from old GL engine version)
        {
        int j;
        double *w;
        AnsiString s;
        a=re; b=rp; a=divide(1.0,a*a); b=divide(1.0,b*b); // radius of planet re equatoral and rp polar and ha is atmosphere thickness
        sys->shd_scatter.set3f("planet_r",a,a,b);
        a=re+ha; b=rp+ha;   a=divide(1.0,a*a); b=divide(1.0,b*b);
        sys->shd_scatter.set3f("planet_R"  ,a,a,b);
        sys->shd_scatter.set1f("planet_h"  ,ha);
        sys->shd_scatter.set1f("view_depth",view_depth); // visibility distance
        sys->shd_scatter.set4f("B0",B0[0],B0[1],B0[2],B0[3]); // saturated atmosphere color and overglow
        sys->shd_scatter.set1i("lights",sys->local_star.num); // local stars
        for (j=0;j<sys->local_star.num;j++)
            {
            a=sys->local_star[j].r;
            w=sys->local_star[j].p;
            s=AnsiString().sprintf("light_posr[%i]",j);
            sys->shd_scatter.set4f(s,w[0],w[1],w[2],divide(1.0,a*a));

            w=sys->local_star[j].d;
            s=AnsiString().sprintf("light_dir[%i]",j);
            sys->shd_scatter.set3f(s,w[0],w[1],w[2]);

            vector_mul(p,sys->local_star[j].col,10.0);
            s=AnsiString().sprintf("light_col[%i]",j);
            sys->shd_scatter.set3f(s,p[0],p[1],p[2]);
            }
        }
    glEnable(GL_BLEND);
    glBlendFunc(GL_ONE,GL_ONE_MINUS_SRC_ALPHA);
    a=1.0;
    b=-2.0*view.scr->views[view.scr->view].znear;
    // color  = pixel pos in screen space  ... no Projection/ModelView is used :)
    // vertex = pixel pos in elypsoid space
    // normal = eye-pixel direction in elypsoid space
    zsort.rep0.g2l_dir(d,zsort.obj_pos0);
    glDepthMask(0);
    glBegin(GL_QUADS);
    a=divide(1.0,view.zoom);
    glColor4d(-1.0,-1.0,0.0,1.0); vector_ld(p,-a,-a,b); view.scr->fromscr(p,p); view.eye0.l2g(q,p); zsort.rep0.g2l_dir(q,q); vector_sub(p,q,d); vector_one(q,q); glNormal3dv(q); glVertex3dv(p);
    glColor4d(+1.0,-1.0,0.0,1.0); vector_ld(p,+a,-a,b); view.scr->fromscr(p,p); view.eye0.l2g(q,p); zsort.rep0.g2l_dir(q,q); vector_sub(p,q,d); vector_one(q,q); glNormal3dv(q); glVertex3dv(p);
    glColor4d(+1.0,+1.0,0.0,1.0); vector_ld(p,+a,+a,b); view.scr->fromscr(p,p); view.eye0.l2g(q,p); zsort.rep0.g2l_dir(q,q); vector_sub(p,q,d); vector_one(q,q); glNormal3dv(q); glVertex3dv(p);
    glColor4d(-1.0,+1.0,0.0,1.0); vector_ld(p,-a,+a,b); view.scr->fromscr(p,p); view.eye0.l2g(q,p); zsort.rep0.g2l_dir(q,q); vector_sub(p,q,d); vector_one(q,q); glNormal3dv(q); glVertex3dv(p);
    glEnd();
    glDepthMask(1);
    glDisable(GL_BLEND);
    sys->shd_scatter.unbind();
    sys->shd_engine.bind();
    }</sys->

它取自我的引擎，因此它使用了各种您没有的东西，但它应该让您了解如何使用这些东西。例如，g2l_dir 转换向量而不是位置，l2g 转换位置而不是向量。 fromscr 将屏幕坐标转换为 3D 坐标（相机本地坐标），而 vector_one 将向量标准化为单位向量。我希望我没有忘记解释任何事情。

附加信息

• [是否有可能在尺寸和质量方面进行现实的n体太阳系模拟？ ](https://forum.thirdjs.org/viewtopic.php?t=14122)

示例大气渲染

以下是大气散射和 GLSL 的一些令人印象深刻的示例：

• [揭秘实时 3D 大气散射图形](https://marcinignac.com/2014/04/03/demystifying-atmospheric-scattering/)
• [大气光散射（部分） 1)](https://www.clicktorelease.com/blog/atmospheric-light-scattering-part-1)
• [Javidx9/raymarching_

以上是如何在 Three.js 中渲染行星周围的大气层？的详细内容。更多信息请关注PHP中文网其他相关文章！