Heim > Web-Frontend > js-Tutorial > Wie kann ich in Three.js eine Atmosphäre um einen Planeten rendern?

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

DDD
Freigeben: 2024-11-12 07:30:02
Original
219 Leute haben es durchsucht

How can I render an atmosphere around a planet in Three.js?

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);
    }
Nach dem Login kopieren

Bildbeschreibung hier eingeben

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();
    }
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage