那些遇到过的问题

如何在Three.js中呈现地球渲染的"氛围"？

Has*_*san 19 javascript html5 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);
    }
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

Spe*_*tre 26

Well an old and already answered question but I wanted to add my solution for beginer consideration out there. Have plaing along Atmospheric scattering and GLSL for a long time and come to this VEEERRRYYY Simplified version (if animation stops refresh page or view the GIF in something more decend):

[示例[1]

  1. planet is and ellipsoid (center x,y,z and radiuses rx,ry,rz)
  2. atmosphere is also ellipsod (the same but bigger by atmosphere height)
  3. all render is done normally but on top of that is added 1 pass for near observer planet
  4. that pass is single quad covering whole screen
  5. inside fragment it computes the intersection of pixel ray with these 2 ellipsoids
  6. take the visible part (not behind, not after ground)
  7. compute the ray length inside atmosphere
  8. 根据光线长度将原始颜色扭曲为r,g,b缩放参数的函数(类似于沿路径积分)
    • 一些给定的颜色......
    • 极大地影响颜色,因此可以通过几个属性来模拟不同的气氛
  9. 它在内部和大气之外(从远处)工作良好
  10. 可以添加近星作为光源(我使用最大3星系统)

结果令人惊叹,见下图:

在此输入图像描述 在此输入图像描述 在此输入图像描述 在此输入图像描述 在此输入图像描述

顶点:

/* SSH GLSL Atmospheric Ray light scattering ver 3.0

    glEnable(GL_BLEND);
    glBlendFunc(GL_ONE,GL_ONE);
    use with single quad covering whole screen

    no Modelview/Projection/Texture matrixes used

    gl_Normal   is camera direction in ellipsoid space
    gl_Vertex   is pixel in ellipsoid space
    gl_Color    is pixel pos in screen space <-1,+1>

    const int _lights=3;
    uniform vec3 light_dir[_lights];     // direction to local star in ellipsoid space
    uniform vec3 light_col[_lights];     // local star color * visual intensity
    uniform vec4 light_posr[_lights];    // local star position and radius^-2 in ellipsoid space
    uniform vec4 B0;                     // atmosphere scattering coefficient (affects color) (r,g,b,-)

    [ToDo:]
    add light map texture for light source instead of uniform star colide parameters
    - all stars and distant planets as dots
    - near planets ??? maybe too slow for reading pixels
    aspect ratio correction
*/

varying vec3 pixel_nor;       // camera direction in ellipsoid space
varying vec4 pixel_pos;       // pixel in ellipsoid space

void main(void)
    {
    pixel_nor=gl_Normal;
    pixel_pos=gl_Vertex;
    gl_Position=gl_Color;
    }
Run Code Online (Sandbox Code Playgroud)

分段:

varying vec3 pixel_nor;              // camera direction in ellipsoid space
varying vec4 pixel_pos;              // pixel in ellipsoid space

uniform vec3 planet_r;               // rx^-2,ry^-2,rz^-2 - surface
uniform vec3 planet_R;               // Rx^-2,Ry^-2,Rz^-2 - atmosphere
uniform float planet_h;              // atmoshere height [m]
uniform float view_depth;            // max. optical path length [m] ... saturation

// lights are only for local stars-atmosphere ray colision to set start color to star color
const int _lights=3;
uniform vec3 light_dir[_lights];     // direction to local star in ellipsoid space
uniform vec3 light_col[_lights];     // local star color * visual intensity
uniform vec4 light_posr[_lights];    // local star position and radius^-2 in ellipsoid space
uniform vec4 B0;                     // atmosphere scattering coefficient (affects color) (r,g,b,-)

// compute length of ray(p0,dp) to intersection with ellipsoid((0,0,0),r) -> view_depth_l0,1
// where r.x is elipsoid rx^-2, r.y = ry^-2 and r.z=rz^-2
float view_depth_l0=-1.0,view_depth_l1=-1.0;
bool _view_depth(vec3 p0,vec3 dp,vec3 r)
    {
    float a,b,c,d,l0,l1;
    view_depth_l0=-1.0;
    view_depth_l1=-1.0;
    a=(dp.x*dp.x*r.x)
     +(dp.y*dp.y*r.y)
     +(dp.z*dp.z*r.z); a*=2.0;
    b=(p0.x*dp.x*r.x)
     +(p0.y*dp.y*r.y)
     +(p0.z*dp.z*r.z); b*=2.0;
    c=(p0.x*p0.x*r.x)
     +(p0.y*p0.y*r.y)
     +(p0.z*p0.z*r.z)-1.0;
    d=((b*b)-(2.0*a*c));
    if (d<0.0) return false;
    d=sqrt(d);
    l0=(-b+d)/a;
    l1=(-b-d)/a;
    if (abs(l0)>abs(l1)) { a=l0; l0=l1; l1=a; }
    if (l0<0.0)          { a=l0; l0=l1; l1=a; }
    if (l0<0.0) return false;
    view_depth_l0=l0;
    view_depth_l1=l1;
    return true;
    }
// determine if ray (p0,dp) hits a sphere ((0,0,0),r)
// where r is (sphere radius)^-2
bool _star_colide(vec3 p0,vec3 dp,float r)
    {
    float a,b,c,d,l0,l1;
    a=(dp.x*dp.x*r)
     +(dp.y*dp.y*r)
     +(dp.z*dp.z*r); a*=2.0;
    b=(p0.x*dp.x*r)
     +(p0.y*dp.y*r)
     +(p0.z*dp.z*r); b*=2.0;
    c=(p0.x*p0.x*r)
     +(p0.y*p0.y*r)
     +(p0.z*p0.z*r)-1.0;
    d=((b*b)-(2.0*a*c));
    if (d<0.0) return false;
    d=sqrt(d);
    l0=(-b+d)/a;
    l1=(-b-d)/a;
    if (abs(l0)>abs(l1)) { a=l0; l0=l1; l1=a; }
    if (l0<0.0)          { a=l0; l0=l1; l1=a; }
    if (l0<0.0) return false;
    return true;
    }

// compute atmosphere color between ellipsoids (planet_pos,planet_r) and (planet_pos,planet_R) for ray(pixel_pos,pixel_nor)
vec3 atmosphere()
    {
    const int n=8;
    const float _n=1.0/float(n);
    int i;
    bool b0,b1;
    vec3 p0,p1,dp,p,c,b;
    // c - color of pixel from start to end

    float l0,l1,l2,h,dl;
    c=vec3(0.0,0.0,0.0);
    b0=_view_depth(pixel_pos.xyz,pixel_nor,planet_r);
    if ((b0)&&(view_depth_l0>0.0)&&(view_depth_l1<0.0)) return c;
    l0=view_depth_l0;
    b1=_view_depth(pixel_pos.xyz,pixel_nor,planet_R);
    l1=view_depth_l0;
    l2=view_depth_l1;

    dp=pixel_nor;
    p0=pixel_pos.xyz;

    if (!b0)
        {                                       // outside surface
        if (!b1) return c;                      // completly outside planet
        if (l2<=0.0)                            // inside atmosphere to its boundary
            {
            l0=l1;
            }
        else{                                   // throu atmosphere from boundary to boundary
            p0=p0+(l1*dp);
            l0=l2-l1;
            }
        // if a light source is in visible path then start color is light source color
        for (i=0;i<_lights;i++)
        if (light_posr[i].a<=1.0)
        if (_star_colide(p0-light_posr[i].xyz,dp,light_posr[i].a))
        c+=light_col[i];
        }
    else{                                       // into surface
        if (l0<l1) b1=false;                    // atmosphere is behind surface
        if (!b1)                                // inside atmosphere to surface
            {
            l0=l0;
            }
        else{                                   // from atmosphere boundary to surface
            p0=p0+(l1*dp);
            l0=l0-l1;
            }
        }
    dp*=l0;
    p1=p0+dp;
    dp*=_n;
/*
    p=normalize(p1);
    h=0.0; l2=0.0;
    for (i=0;i<_lights;i++)
     if (light_posr[i].a<=1.0)
        {
        dl=dot(pixel_nor,light_dir[i]);         // cos(ang: light-eye)
        if (dl<0.0) dl=0.0;
        h+=dl;
        dl=dot(p,light_dir[i]);                 // normal shading
        if (dl<0.0) dl=0.0;
        l2+=dl;
        }
    if (h>1.0) h=1.0;
    if (l2>1.0) l2=1.0;
    h=0.5*(2.0+(h*h));
*/
    float qqq=dot(normalize(p1),light_dir[0]);


    dl=l0*_n/view_depth;
    for (p=p1,i=0;i<n;p-=dp,i++)                // p1->p0 path throu atmosphere from ground
        {
        _view_depth(p,normalize(p),planet_R);   // view_depth_l0=depth above atmosphere top [m]
        h=exp(view_depth_l0/planet_h)/2.78;

        b=B0.rgb*h*dl;
        c.r*=1.0-b.r;
        c.g*=1.0-b.g;
        c.b*=1.0-b.b;
        c+=b*qqq;
        }
    if (c.r<0.0) c.r=0.0;
    if (c.g<0.0) c.g=0.0;
    if (c.b<0.0) c.b=0.0;
    h=0.0;
    if (h<c.r) h=c.r;
    if (h<c.g) h=c.g;
    if (h<c.b) h=c.b;
    if (h>1.0)
        {
        h=1.0/h;
        c.r*=h;
        c.g*=h;
        c.b*=h;
        }
    return c;
    }

void main(void)
    {
    gl_FragColor.rgb=atmosphere();
    }
Run Code Online (Sandbox Code Playgroud)

对不起,但它的一个非常古老的来源...应该可能转换为核心配置文件

[编辑1]抱歉忘了为地球大气添加输入散射常数

    double view_depth=1000000.0;    // [m] ... longer path is saturated atmosphere color
    double ha=40000.0;              // [m] ... usable atmosphere height (higher is too low pressure)

//  this is how B0 should be computed (for real atmospheric scattering with nested volume integration)
//  const float lambdar=650.0*0.000000001; // wavelengths for R,G,B rays
//  const float lambdag=525.0*0.000000001;
//  const float lambdab=450.0*0.000000001;
//  double r=1.0/(lambdar*lambdar*lambdar*lambdar); // B0 coefficients
//  double g=1.0/(lambdag*lambdag*lambdag*lambdag);
//  double b=1.0/(lambdab*lambdab*lambdab*lambdab);

//  and these are my empirical coefficients for earth like 
//  blue atmosphere with my simplified integration style
//  images above are rendered with this:
    float r=0.198141888310295;
    float g=0.465578010163675;
    float b=0.862540960504986;
    float B0=2.50000E-25;
    i=glGetUniformLocation(ShaderProgram,"planet_h");   glUniform1f(i,ha);
    i=glGetUniformLocation(ShaderProgram,"view_depth"); glUniform1f(i,view_depth);
    i=glGetUniformLocation(ShaderProgram,"B0");     glUniform4f(i,r,g,b,B0);
//  all other atributes are based on position and size of planet and are 
//  pretty straightforward so here is just the earth size i use ...
    double r_equator=6378141.2; // [m]
    double r_poles=6356754.8;   // [m]
Run Code Online (Sandbox Code Playgroud)

[edit2] 3.9.2014新的源代码

我最近有一段时间实现变焦到采矿引擎,并发现原始源代码在距离0.002 AU以上时不是很精确.没有缩放它只是几个像素,所以没有看到任何东西,但随着缩放所有的变化,所以我试图尽可能提高准确性.

经过一些更多调整后,我可以使用高达25.0 AU,插值伪影高达50.0-100.0 AU.这是当前HW的限制,因为我无法将non flat fp64从内插到顶点到片段.一种方法可能是将坐标系转换为片段但尚未尝试过.以下是一些变化:

  • 新源使用64位浮点数
  • 并添加uniform int lights哪个是使用过的灯数
  • B0意义上的一些变化(它们不再是波长相关的常数而是颜色),所以你需要稍微改变CPU代码中的统一值填充.
  • 增加了一些性能改进

[顶点]

/* SSH GLSL Atmospheric Ray light scattering ver 3.1

    glEnable(GL_BLEND);
    glBlendFunc(GL_ONE,GL_ONE_MINUS_SRC_ALPHA);
    use with single quad covering whole screen

    no Modelview/Projection/Texture matrixes used

    gl_Normal   is camera direction in ellipsoid space
    gl_Vertex   is pixel in ellipsoid space
    gl_Color    is pixel pos in screen space <-1,+1>

    const int _lights=3;
    uniform int  lights;                 // actual number of lights
    uniform vec3 light_dir[_lights];     // direction to local star in ellipsoid space
    uniform vec3 light_col[_lights];     // local star color * visual intensity
    uniform vec4 light_posr[_lights];    // local star position and radius^-2 in ellipsoid space
    uniform vec4 B0;                     // atmosphere scattering coefficient (affects color) (r,g,b,-)

    [ToDo:]
    add light map texture for light source instead of uniform star colide parameters
    - all stars and distant planets as dots
    - near planets ??? maybe too slow for reading pixels
    aspect ratio correction
*/

varying vec3 pixel_nor;       // camera direction in ellipsoid space
varying vec4 pixel_pos;       // pixel in ellipsoid space
varying vec4 pixel_scr;       // pixel in screen space <-1,+1>

varying vec3 p_r;               // rx,ry,rz
uniform vec3 planet_r;          // rx^-2,ry^-2,rz^-2 - surface

void main(void)
    {
    p_r.x=1.0/sqrt(planet_r.x);
    p_r.y=1.0/sqrt(planet_r.y);
    p_r.z=1.0/sqrt(planet_r.z);
    pixel_nor=gl_Normal;
    pixel_pos=gl_Vertex;
    pixel_scr=gl_Color;
    gl_Position=gl_Color;
    }
Run Code Online (Sandbox Code Playgroud)

[分段]

#extension GL_ARB_gpu_shader_fp64 : enable
double abs(double x) { if (x<0.0) x=-x; return x; }

varying vec3 pixel_nor;              // camera direction in ellipsoid space
varying vec4 pixel_pos;              // pixel in ellipsoid space
varying vec4 pixel_scr;              // pixel in screen space
varying vec3 p_r;                    // rx,ry,rz                        

uniform vec3 planet_r;               // rx^-2,ry^-2,rz^-2 - surface
uniform vec3 planet_R;               // Rx^-2,Ry^-2,Rz^-2 - atmosphere
uniform float planet_h;              // atmoshere height [m]
uniform float view_depth;            // max. optical path length [m] ... saturation

// lights are only for local stars-atmosphere ray colision to set start color to star color
const int _lights=3;
uniform int  lights;                 // actual number of lights
uniform vec3 light_dir[_lights];     // direction to local star in ellipsoid space
uniform vec3 light_col[_lights];     // local star color * visual intensity
uniform vec4 light_posr[_lights];    // local star position and radius^-2 in ellipsoid space
uniform vec4 B0;                     // atmosphere scattering color coefficients (r,g,b,ambient)

// compute length of ray(p0,dp) to intersection with ellipsoid((0,0,0),r) -> view_depth_l0,1
// where r.x is elipsoid rx^-2, r.y = ry^-2 and r.z=rz^-2
const double view_depth_max=100000000.0; // > max view depth
double view_depth_l0=-1.0, // view_depth_l0 first hit
       view_depth_l1=-1.0; // view_depth_l1 second hit
bool  _view_depth_l0=false;
bool  _view_depth_l1=false;
bool _view_depth(vec3 _p0,vec3 _dp,vec3 _r)
    {
    dvec3 p0,dp,r;
    double a,b,c,d,l0,l1;
    view_depth_l0=-1.0; _view_depth_l0=false;
    view_depth_l1=-1.0; _view_depth_l1=false;
    // conversion to double
    p0=dvec3(_p0);
    dp=dvec3(_dp);
    r =dvec3(_r );
    // quadratic equation a.l.l+b.l+c=0; l0,l1=?;
    a=(dp.x*dp.x*r.x)
     +(dp.y*dp.y*r.y)
     +(dp.z*dp.z*r.z);
    b=(p0.x*dp.x*r.x)
     +(p0.y*dp.y*r.y)
     +(p0.z*dp.z*r.z); b*=2.0;
    c=(p0.x*p0.x*r.x)
     +(p0.y*p0.y*r.y)
     +(p0.z*p0.z*r.z)-1.0;
    // discriminant d=sqrt(b.b-4.a.c)
    d=((b*b)-(4.0*a*c));
    if (d<0.0) return false;
    d=sqrt(d);
    // standard solution l0,l1=(-b +/- d)/2.a
    a*=2.0;
    l0=(-b+d)/a;
    l1=(-b-d)/a;
    // alternative solution q=-0.5*(b+sign(b).d) l0=q/a; l1=c/q; (should be more accurate sometimes)
//  if (b<0.0) d=-d; d=-0.5*(b+d);
//  l0=d/a;
//  l1=c/d;
    // sort l0,l1 asc
    if ((l0<0.0)||((l1<l0)&&(l1>=0.0))) { a=l0; l0=l1; l1=a; }
    // exit
    if (l1>=0.0) { view_depth_l1=l1; _view_depth_l1=true; }
    if (l0>=0.0) { view_depth_l0=l0; _view_depth_l0=true; return true; }
    return false;
    }

// determine if ray (p0,dp) hits a sphere ((0,0,0),r)
// where r is (sphere radius)^-2
bool _star_colide(vec3 _p0,vec3 _dp,float _r)
    {
    dvec3 p0,dp,r;
    double a,b,c,d,l0,l1;
    // conversion to double
    p0=dvec3(_p0);
    dp=dvec3(_dp);
    r =dvec3(_r );
    // quadratic equation a.l.l+b.l+c=0; l0,l1=?;
    a=(dp.x*dp.x*r)
     +(dp.y*dp.y*r)
     +(dp.z*dp.z*r);
    b=(p0.x*dp.x*r)
     +(p0.y*dp.y*r)
     +(p0.z*dp.z*r); b*=2.0;
    c=(p0.x*p0.x*r)
     +(p0.y*p0.y*r)
     +(p0.z*p0.z*r)-1.0;
    // discriminant d=sqrt(b.b-4.a.c)
    d=((b*b)-(4.0*a*c));
    if (d<0.0) return false;
    d=sqrt(d);
    // standard solution l0,l1=(-b +/- d)/2.a
    a*=2.0;
    l0=(-b+d)/a;
    l1=(-b-d)/a;
    // alternative solution q=-0.5*(b+sign(b).d) l0=q/a; l1=c/q; (should be more accurate sometimes)
//  if (b<0.0) d=-d; d=-0.5*(b+d);
//  l0=d/a;
//  l1=c/d;
    // sort l0,l1 asc
    if (abs(l0)>abs(l1)) { a=l0; l0=l1; l1=a; }
    if (l0<0.0)          { a=l0; l0=l1; l1=a; }
    if (l0<0.0) return false;
    return true;
    }

// compute atmosphere color between ellipsoids (planet_pos,planet_r) and (planet_pos,planet_R) for ray(pixel_pos,pixel_nor)
vec4 atmosphere()
    {
    const int n=8;
    const float _n=1.0/float(n);
    int i;
    bool b0,b1;
    vec3 p0,p1,dp,p,b;
    vec4 c;     // c - color of pixel from start to end

    float h,dl,ll;
    double l0,l1,l2;
    bool   e0,e1,e2;
    c=vec4(0.0,0.0,0.0,0.0);    // a=0.0 full background color, a=1.0 no background color (ignore star)
    b1=_view_depth(pixel_pos.xyz,pixel_nor,planet_R);
    if (!b1) return c;                          // completly outside atmosphere
    e1=_view_depth_l0; l1=view_depth_l0;        // first atmosphere hit
    e2=_view_depth_l1; l2=view_depth_l1;        // second atmosphere hit
    b0=_view_depth(pixel_pos.xyz,pixel_nor,planet_r);
    e0=_view_depth_l0; l0=view_depth_l0;        // first surface hit
    if ((b0)&&(view_depth_l1<0.0)) return c;    // under ground
    // set l0 to view depth and p0 to start point
    dp=pixel_nor;
    p0=pixel_pos.xyz;
    if (!b0)                                    // outside surface
        {
        if (!e2)                                // inside atmosphere to its boundary
            {
            l0=l1;
            }
        else{                                   // throu atmosphere from boundary to boundary
            p0=vec3(dvec3(p0)+(dvec3(dp)*l1));
            l0=l2-l1;
            }
        // if a light source is in visible path then start color is light source color
        for (i=0;i<lights;i++)
         if (_star_colide(p0.xyz-light_posr[i].xyz,dp.xyz,light_posr[i].a*0.75)) // 0.75 is enlargment to hide star texture corona
            {
            c.rgb+=light_col[i];
            c.a=1.0; // ignore already drawed local star color
            }
        }
    else{                                       // into surface
        if (l1<l0)                              // from atmosphere boundary to surface
            {
            p0=vec3(dvec3(p0)+(dvec3(dp)*l1));
            l0=l0-l1;
            }
        else{                                   // inside atmosphere to surface
            l0=l0;
            }
        }
    // set p1 to end of view depth, dp to intergral step
    p1=vec3(dvec3(p0)+(dvec3(dp)*l0)); dp=p1-p0;
    dp*=_n;

    dl=float(l0)*_n/view_depth;
    ll=B0.a; for (i=0;i<lights;i++)             // compute normal shaded combined light sources into ll
     ll+=dot(normalize(p1),light_dir[0]);
    for (p=p1,i=0;i<n;p-=dp,i++)                // p1->p0 path throu atmosphere from ground
        {
//      _view_depth(p,normalize(p),planet_R);   // too slow... view_depth_l0=depth above atmosphere top [m]
//      h=exp(view_depth_l0/planet_h)/2.78;

        b=normalize(p)*p_r;                     // much much faster
        h=length(p-b);
        h=exp(h/planet_h)/2.78;

        b=B0.rgb*h*dl;
        c.r*=1.0-b.r;
        c.g*=1.0-b.g;
        c.b*=1.0-b.b;
        c.rgb+=b*ll;
        }
    if (c.r<0.0) c.r=0.0;
    if (c.g<0.0) c.g=0.0;
    if (c.b<0.0) c.b=0.0;
    h=0.0;
    if (h<c.r) h=c.r;
    if (h<c.g) h=c.g;
    if (h<c.b) h=c.b;
    if (h>1.0)
        {
        h=1.0/h;
        c.r*=h;
        c.g*=h;
        c.b*=h;
        }
    return c;
    }

void main(void)
    {
    gl_FragColor.rgba=atmosphere();
    }
Run Code Online (Sandbox Code Playgroud)

[统一价值]

// Earth
re=6378141.2         // equatoreal radius r.x,r.y
rp=6356754.79506139 // polar radius r.z
planet_h=60000      // atmosphere thickness R(r.x+planet_h,r.y+planet_h,r.z+planet_h)
view_depth=250000   // max view distance before 100% scattering occur 
B0.r=0.1981         // 100% scattered atmosphere color
B0.g=0.4656
B0.b=0.8625
B0.a=0.75           // overglow (sky is lighter before Sun actually rise) it is added to light dot product

// Mars
re=3397000
rp=3374919.5
ha=30000
view_depth=300000
B0.r=0.4314
B0.g=0.3216
B0.b=0.196
B0.a=0.5
Run Code Online (Sandbox Code Playgroud)

有关更多信息(和更新的图像),请参阅相关:

Toj*_*oji 17

您在大气中究竟想要什么？它可以像在地球顶部渲染另一个略大的透明球体一样简单,也可能非常复杂,实际上折射进入它的光线.(几乎像皮肤渲染中使用的次表面散射).

我自己从未尝试过这样的效果,但是一些快速的谷歌搜索显示了一些有希望的结果.例如,我认为这种效果看起来相当不错,作者后来甚至用更详细的变体跟进了它.如果您对更多技术故障感兴趣,这种技术可以详细介绍许多理论背景.我相信还有更多,你只需要捅一下.(说实话,我不知道这是一个如此受欢迎的渲染主题!)

如果您在使用这些技术的某些方面遇到问题,特别适用于Three.js,请不要犹豫!

[UPDATE]

啊,对不起 是的,如果没有先前的着色器知识,那将会让你陷入困境.

第二个链接上的代码实际上是一个DirectX FX文件,核心代码是HLSL,因此它不是简单地插入WebGL的东西,而是两个着色器格式足够相似,通常不会在它们之间进行转换.如果你真的知道着色器,那就是.在尝试潜入这样复杂的效果之前,我建议您阅读着色器的工作原理.

我从一些简单的东西开始,比如本教程,它简单地讨论了如何使用Three.js运行基本着色器.一旦你知道如何让着色器使用Three.js和GLSL教程(就像这个)将为你提供着色器如何工作以及你可以用它做什么的基础知识.

我知道这看起来好像很多工作,但如果你想在WebGL中做高级视觉效果(这当然适合高级效果),你绝对必须理解着色器!

再说一次,如果你正在寻找一个快速解决方案,我总是会谈论透明球体选项.:)

归档时间：

查看次数：

11647 次

最近记录：

7 年，1 月 前
在GLSL中将浮点数转换为十进制数？ 11
是否有可能在尺寸和质量方面进行逼真的n体太阳系模拟？ 8
射线和椭球相交精度提高 6
更多相关链接
相关归档
jQuery/Javascript函数清除表单的所有字段 156
如何在HTML5中正确使用"section"标签？ 101
如何检查是否加载了Twitter引导程序？ 80
如何告诉Google翻译不翻译网站的某个部分？ 74
如何按类名获取所有元素？ 49
单击外部时隐藏Angular UI Bootstrap popover 46
为什么在ES6的箭头函数中没有定义参数？ 43
本地存储跨域 - Safari默认禁用它 14
基于网格(html5画布)将多边形拆分为多个多边形 5
Three.js网格调整大小 5
难疑归档
如何水平居中<div>？ 4116
如何删除远程标签？ 3121
为什么我的JavaScript在所请求的资源上出现"No'Access-Control-Allow-Origin'标头"错误,当Postman没有？ 2320
如果目录尚不存在,如何mkdir？ 1784
无法打开与身份验证代理的连接 1473
接口与抽象类(通用OO) 1372
没有指定分支的"git push"的默认行为 1339
如何在git中按名称命名和检索存储？ 1276
如何获取Android应用程序的构建版本号？ 1198
.gitignore for Visual Studio项目和解决方案 1115