Wie kann ich in Three.js eine Atmosphäre um einen Planeten rendern?

Wie kann ich in Three.js eine „Atmosphäre“ über einer Darstellung der Erde rendern?

Problem

Ich versuche es zu bringen Three.js wird zum Leben erweckt. Das Problem, auf das ich gestoßen bin, ist, dass mein Browser das Laden von Texturen verhindert hat, was durch Befolgen der Anweisungen hier behoben wurde.

Außerdem baue ich ein Weltraumnavigatorspiel für eine meiner Klassen, das Raumfahrzeuge enthält Navigation. Als Ergebnis rendere ich eine Gruppe von Planeten, darunter auch die Erde. Ich habe unten ein Bild meiner Erddarstellung eingefügt. Es scheint in einem guten Zustand zu sein, aber ich versuche, seinen Realismus zu verbessern, indem ich eine „Atmosphäre“ um es herum füge.

Ich habe mich umgesehen und einige wirklich gut aussehende Kreationen entdeckt, die Glanz verwenden, aber Ich glaube nicht, dass sie auf meine Situation zutreffen.

Und hier ist der Code, der die Erde in meiner Szene platziert (es ist eine modifizierte Version des Codes, den ich aus einem Three.js-Tutorial erhalten habe):

    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);
    }

Lösung

[Bearbeiten 3]

Hier ist ein kompaktes CPU-Seitencodebeispiel, das ich in meiner Engine verwende, um die Atmosphäre mithilfe des bereitgestellten Shaders zu rendern oben:

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 <-1,+1> ... 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();
    }

Es wurde von meiner Engine übernommen, daher verwendet es eine Vielzahl von Dingen, die Sie nicht haben, aber es sollte Ihnen eine Vorstellung davon geben, wie Dinge verwendet werden. g2l_dir übersetzt beispielsweise Vektoren statt Positionen und l2g übersetzt Positionen statt Vektoren. fromscr wandelt Bildschirmkoordinaten in 3D-Koordinaten (lokal zur Kamera) um und vector_one normalisiert einen Vektor in einen Einheitsvektor. Ich hoffe, ich habe nicht vergessen, etwas zu erklären.

Zusätzliche Informationen

• [Ist es möglich, eine realistische Simulation eines N-Körper-Sonnensystems in Bezug auf Größe und Masse durchzuführen? ](https://forum. threejs.org/viewtopic.php?t=14122)

Beispiel für atmosphärisches Rendering

Hier sind einige beeindruckende Beispiele für atmosphärische Streuung und GLSL:

• [Atmosphärische Streuung für Echtzeit-3D-Grafiken entmystifizieren](https://marcinignac.com/2014/04/03/demystifying-atmospheric-scattering/)
• [Atmosphärisch Lichtstreuung (Teil 1)](https://www.clicktorelease.com/blog/atmospheric-light-scattering-part-1)
• [Javidx9/raymarching_

Das obige ist der detaillierte Inhalt vonWie kann ich in Three.js eine Atmosphäre um einen Planeten rendern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!