如何在 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中文網其他相關文章！