首页 > web前端 > js教程 > 正文

如何在 Three.js 中渲染行星周围的大气层?

DDD
发布: 2024-11-12 07:30:02
原创
182 人浏览过

How can I render an atmosphere around a planet in 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);
    }
登录后复制

如何在 Three.js 中渲染行星周围的大气层?

> ;

解决方案

[编辑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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板