Maison > interface Web > js tutoriel > Comment puis-je restituer une atmosphère autour d'une planète dans Three.js ?

Comment puis-je restituer une atmosphère autour d'une planète dans Three.js ?

DDD
Libérer: 2024-11-12 07:30:02
original
219 Les gens l'ont consulté

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

Comment puis-je restituer une « atmosphère » sur un rendu de la Terre dans Three.js ?

Problème

J'essaie d'apporter Three.js donne vie à la texture. Le problème que j'ai rencontré est que mon navigateur empêchait le chargement des textures, ce qui a été résolu en suivant les instructions ici.

De plus, je construis un jeu de navigation spatiale pour l'une de mes classes qui inclut des vaisseaux spatiaux. navigation. En conséquence, je restitue un groupe de planètes, la Terre en faisant partie. J'ai inclus une image de mon rendu Terre ci-dessous. Il semble être en bon état, mais j'essaie d'améliorer son réalisme en ajoutant une « atmosphère » autour de lui.

J'ai regardé autour de moi et découvert de très jolies créations qui utilisent la lueur, mais Je ne pense pas qu'ils s'appliquent à ma situation.

Et voici le code qui place la terre dans ma scène (c'est une version modifiée du code que j'ai obtenu d'un tutoriel 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);
    }
Copier après la connexion

entrez la description de l'image ici

Solution

[Edit 3]

Voici un exemple de code côté CPU compact que j'utilise dans mon moteur pour restituer l'atmosphère à l'aide du shader fourni ci-dessus :

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();
    }
Copier après la connexion

Il a été extrait de mon moteur, il utilise donc une variété de choses que vous n'avez pas, mais cela devrait vous donner une idée de la façon dont les choses sont utilisées. g2l_dir, par exemple, traduit les vecteurs plutôt que les positions, et l2g traduit les positions plutôt que les vecteurs. fromscr convertit les coordonnées de l'écran en coordonnées 3D (locales à la caméra) et vector_one normalise un vecteur en vecteur unitaire. J'espère que je n'ai rien oublié d'expliquer.

Informations supplémentaires

  • [Est-il possible de réaliser une simulation réaliste du système solaire à n corps en termes de taille et de masse ? ](https://forum.troisjs.org/viewtopic.php?t=14122)

Exemple de rendu atmosphérique

Voici quelques exemples impressionnants de diffusion atmosphérique et de GLSL :

  • [Démystifier la diffusion atmosphérique pour les graphiques 3D en temps réel](https://marcinignac.com/2014/04/03/demystifying-atmospheric-scattering/)
  • [La diffusion atmosphérique Diffusion de la lumière (Partie 1)](https://www.clicktorelease.com/blog/atmospheric-light-scattering-part-1)
  • [Javidx9/raymarching_

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal