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은 벡터를 단위 벡터로 정규화합니다. 설명하는 것을 잊지 않았으면 좋겠습니다.

추가 정보

• [크기와 질량 측면에서 현실적인 무체 태양계 시뮬레이션을 만드는 것이 가능합니까? ](https://forum. threejs.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!