three.js - 如何在 THREE.js 中为可旋转的毛茸茸的球制作动画？

标签 three.js glsl shader gpgpu

想法来自

Instagram @sennepldn

Fluffy ball demo (from Instagram)

Fluffy ball demo (If you can't access Instagram Link)

preview

三天前看到这个例子的时候，非常惊讶，于是想挑战一下自己，试着做出这个效果。

三天后，我尝试了很多方法，比如使用顶点着色器或GPUComputationRenderer，但仍然没有做出正确的模拟。所以我终于决定上来问问大家。

我的解决方案

第一步

首先用下面两个看起来有硬刺的球来模拟Demo中的Fluffy Ball。

从第一帧到第二帧，小球顺时针旋转了大约30度(我随机假设了一个角度)

Sketch - Frame1 & Frame2

第二步

将上球简化成下图。

图中的黑线代表上图中最长的尖峰。

A1,a2,b1,b2(Vector3)表示不同时刻a点和b点的位置。

Sketch - Simplified Frame1 & Frame2 image

但是最终模拟出来的是软毛而不是硬刺，所以Frame2 b点的位置应该是b3。

Sketch - Proper Frame2 point b position

第三步

所以我打算用下面的方法来模拟

伪代码(在顶点着色器中)(b1、b2、b3 表示 vec3 中的位置)

b3 = mix(b1, b2, 0.9);

为了读取上一帧的b点(b1)的位置，我把上一帧的modelMatrix保存下来，作为uniform传递给下一帧。

在下一帧中，我们可以通过modelMatrix * vec4(position, 1.0)得到b1的世界位置，但是这种方法是不正确的。

比如第3帧，如果我们要读取最后一帧的b点位置。这种方法会得到b2而不是b3，但是实际模拟需要b3。

有什么方法可以正确获取最后一帧b点的位置吗？

我也试过用GPUComputationRenderer保存上一帧的位置，放到一个Texture中。

不过可能是我对GPGPU的理解还不透彻，不知道怎么把上一帧的世界坐标放到贴图里让下一帧读取，所以这个方法没有成功。

总结我的问题

  1. 如何在 THREE.js GPGpu 中读取最后一帧的世界位置？什么步骤？

  2. 有没有更好的方法来进行此模拟？即使这与我的想法无关。例如，模拟真实世界的力量。

最佳答案

我的想法是像这样有几个等距点的同心球层:

其中每一层都有自己的变换矩阵。一开始所有层都有相同的 Transformation matrix并且在每一帧(或模拟计时器滴答)之后传递矩阵(如循环环形缓冲区)，因此最低半径层具有实际矩阵，下一个具有来自前一帧的矩阵，依此类推。它基本上是运动模糊的几何版本...

但是我尝试基于这些在片段着色器(作为合并的粒子)中进行光线追踪:

在准确性和其他数学边界情况和舍入问题上碰壁，导致丑陋的工件，调试(如果可能的话)将永远花费时间，移植到 64 位将只解决部分问题......

所以我决定尝试在每帧的基础上为此创建几何数据，这在几何着色器中可能是可行的(稍后)。所以首先我尝试在 CPU 端执行此操作(C++ 和旧的 GL api 现在只是为了简单和作为概念证明)

所以我得到了单位球面上的等距点列表(静态点)，我用它来渲染图层。所以每个点都被转化为线带，其中点只是按图层半径缩放并按其所属图层的矩阵进行变换。这里的 C++ 代码:

//---------------------------------------------------------------------------
// just some vector and matrix math needed for this
void  vectorf_mul(float *c,float *a,float  b) { for(int i=0;i<3;i++) c[i]=a[i]*b; } // c[3] = a[3]*b
void  matrixf_mul_vector(float *c,float *a,float *b)    // c[3] = a[16]*b[3]
    {
    float q[3];
    q[0]=(a[ 0]*b[0])+(a[ 4]*b[1])+(a[ 8]*b[2])+(a[12]);
    q[1]=(a[ 1]*b[0])+(a[ 5]*b[1])+(a[ 9]*b[2])+(a[13]);
    q[2]=(a[ 2]*b[0])+(a[ 6]*b[1])+(a[10]*b[2])+(a[14]);
    for(int i=0;i<3;i++) c[i]=q[i];
    }
//---------------------------------------------------------------------------
// equidistant sphere points
const int sphere_na=20;                     // number of slices (latitude)
float sphere_pnt[sphere_na*sphere_na*6];    // equidistant sphere points
int sphere_n=0;                             // 3 * number of points
// create list of equidistant sphere points r=1 center=(0,0,0)
void sphere_init()
    {
    int ia,ib,na=sphere_na,nb;
    float x,y,z,r;
    float a,b,da,db;
    da=M_PI/float(na-1);                    // latitude angle step
    sphere_n=0;
    for (a=-0.5*M_PI,ia=0;ia<na;ia++,a+=da) // slice sphere to circles in xy planes
        {
        r=cos(a);                       // radius of actual circle in xy plane
        z=sin(a);                       // height of actual circle in xy plane
        nb=ceil(2.0*M_PI*r/da);
        if ((ia==0)||(ia==na-1)) { nb=1; db=0.0; }  // handle edge cases
        db=2.0*M_PI/float(nb);             // longitude angle step
        for (b=0.0,ib=0;ib<nb;ib++,b+=db)   // cut circle to vertexes
            {
            x=r*cos(b);                     // compute x,y of vertex
            y=r*sin(b);
            sphere_pnt[sphere_n]=x; sphere_n++;
            sphere_pnt[sphere_n]=y; sphere_n++;
            sphere_pnt[sphere_n]=z; sphere_n++;
            }
        }
    }
// render sphere as lines from center to surface
void sphere_draw()
    {
    int i;
    glBegin(GL_LINES);
    for (i=0;i<sphere_n;i+=3)
        {
        glColor3f(0.0,0.0,0.0); glVertex3f(0.0,0.0,0.0);
        glColor3f(0.5,0.6,0.7); glVertex3fv(sphere_pnt+i);
        }
    glEnd();
    }
//---------------------------------------------------------------------------
// puff ball
const int puff_n=8;                     // number of layers
float *puff_m[puff_n]={NULL};           // transform matrix for each layer
float puff_matrices[puff_n*16];         // transform matrix for each layer
float puff_col[puff_n][3];              // color for each layer
// render sphere as spicules dived to layers
void puff_draw(float r0,float r1)
    {
    int i,j;
    float p[3],*p0,r,dr=(r1-r0)/float(puff_n);
    glColor3f(0.5,0.6,0.7);
    for (i=0;i<sphere_n;i+=3)
        {
        p0=sphere_pnt+i;
        glBegin(GL_LINE_STRIP);
        for (r=r0,j=0;j<puff_n;j++,r+=dr)
            {
            vectorf_mul(p,p0,r);
            matrixf_mul_vector(p,puff_m[j],p);
            glColor3fv(puff_col[j]);
            glVertex3fv(p);
            }
        glEnd();
        }
    }
// update matrices
void puff_update()
    {
    int i;
    float *p,t;
    if (puff_m[0]==NULL)                    // in first pass all the matrices are actual
        {
        for (i=0;i<puff_n;i++)
            {
            puff_m[i]=puff_matrices+(i<<4);
            glGetFloatv(GL_MODELVIEW_MATRIX,puff_m[i]);
            t=1.0-(float(i)/float(puff_n-1));
            puff_col[i][0]=0.1+0.3*t;
            puff_col[i][1]=0.2+0.5*t;
            puff_col[i][2]=0.2+0.6*t;
            }
        return;
        }
    p=puff_m[puff_n-1];                     // insert actual matrix to ring FIFO buffer
    for (i=puff_n-1;i>0;i--) puff_m[i]=puff_m[i-1];
    puff_m[0]=p;
    glGetFloatv(GL_MODELVIEW_MATRIX,puff_m[0]);
    }
//---------------------------------------------------------------------------

和用法:

// init
sphere_init();

// render
glEnable(GL_DEPTH_TEST);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslatef(0.0,0.0,-5.0);  // this is just putting ball before my perspective camera
glRotatef(animt,0.0,0.3,0.5); // animt is just changing angle updated in timer
puff_update();  // this will update the matrices in layers (must be called before first draw)
glMatrixMode(GL_MODELVIEW); // however render itself is using unit matrix !!!
glLoadIdentity();
puff_draw(0.5,1.0); // render the hairs with radiuses from 0.5 up to 1.0

此处预览(对于足够少的头发以实际看到几何体):

preview

如您所见，毛发在正确的方向上弯曲(它们也受速度的影响，这也应该受到平移的影响，而不仅仅是旋转作为奖励)所以作为概念证明，这种方法是有效的。如果您希望它们弯曲得更多，只需降低 r0,r1 半径之间的差异即可。

如您所见，这应该可以轻松移植到 GLSL 几何着色器。 CPU 只传递一次单位球体点，几何体将以相同的方式为每个点发出一条线带。您只需要将矩阵作为制服。

这里是另一个改变旋转和降低 r0,r1 差异的预览:

better preview

除了调整点数 sphere_na 和层数 puff_n 之外，还可以添加这些来改进:

  • 在 r0,r1 之间非线性分布层以实现不同的外观/行为
  • 添加球体表面(r0 所以你看不到它后面的毛发)
  • 纹理
  • 运动模糊
  • 可变的头发宽度(所以在底部更宽)
  • 光模型(可能只针对表面而不是毛发本身)

我认为这可能用于改进(曲率和可变宽度):

[Edit1] 一些调整和几何着色器

我成功地将其移植到着色器并添加了一些东西，例如颜色、线宽和内球表面。这里是完整的 VCL/C++/OpenGL/GLSL 代码:

VCL 应用程序窗口(忽略 VCL 内容)

//---------------------------------------------------------------------------
#include <vcl.h>
#include <math.h>
#pragma hdrstop
#include "Unit1.h"
#include "gl_simple.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
float animx=0.0;
float animy=0.0;
bool _glsl=true;
//---------------------------------------------------------------------------
// just some vector and matrix math needed for this
void  vectorf_mul(float *c,float *a,float  b) { for(int i=0;i<3;i++) c[i]=a[i]*b; } // c[3] = a[3]*b
void  matrixf_mul_vector(float *c,float *a,float *b)    // c[3] = a[16]*b[3]
    {
    float q[3];
    q[0]=(a[ 0]*b[0])+(a[ 4]*b[1])+(a[ 8]*b[2])+(a[12]);
    q[1]=(a[ 1]*b[0])+(a[ 5]*b[1])+(a[ 9]*b[2])+(a[13]);
    q[2]=(a[ 2]*b[0])+(a[ 6]*b[1])+(a[10]*b[2])+(a[14]);
    for(int i=0;i<3;i++) c[i]=q[i];
    }
//---------------------------------------------------------------------------
// equidistant sphere points
const int sphere_na=30;                     // number of slices (latitude)
float sphere_pnt[sphere_na*sphere_na*4];    // equidistant sphere points (approx size <= regular grid size / 1.5)
int sphere_n=0;                             // 3 * number of points
int sphere_slc[sphere_na+1];                // start index of each slice
// create list of equidistant sphere points r=1 center=(0,0,0)
void sphere_init()
    {
    int ia,ib,na=sphere_na,nb;
    float x,y,z,r;
    float a,b,da,db;
    da=M_PI/float(na-1);                    // latitude angle step
    sphere_n=0;
    for (a=-0.5*M_PI,ia=0;ia<na;ia++,a+=da) // slice sphere to circles in xy planes
        {
        sphere_slc[ia]=sphere_n;
        r=cos(a);                       // radius of actual circle in xy plane
        z=sin(a);                       // height of actual circle in xy plane
        nb=ceil(2.0*M_PI*r/da);
        if ((ia==0)||(ia==na-1)) { nb=1; db=0.0; }  // handle edge cases
        db=2.0*M_PI/float(nb);             // longitude angle step
        for (b=0.0,ib=0;ib<nb;ib++,b+=db)   // cut circle to vertexes
            {
            x=r*cos(b);                     // compute x,y of vertex
            y=r*sin(b);
            sphere_pnt[sphere_n]=x; sphere_n++;
            sphere_pnt[sphere_n]=y; sphere_n++;
            sphere_pnt[sphere_n]=z; sphere_n++;
            }
        }
    sphere_slc[na]=sphere_n;
    }
void sphere_gl_draw(float r)
    {
    int i,i0,i1,i2,n,n0,n1,j,k;
    glMatrixMode(GL_MODELVIEW);
    glPushMatrix();
    glScalef(r,r,r);
    glBegin(GL_TRIANGLE_STRIP);
    for (k=1;k<sphere_na;k++)
        {
        i0=sphere_slc[k-1];
        i1=sphere_slc[k+0];
        i2=sphere_slc[k+1];
        n0=(i1-i0)/3;
        n1=(i2-i1)/3;
        n=n0; if (n<n1) n=n1;
        for (i=0;i<n;i++)
            {
            j=i0+(3*((i*n0)/n));
            glNormal3fv(sphere_pnt+j);
            glVertex3fv(sphere_pnt+j);
            j=i1+(3*((i*n1)/n));
            glNormal3fv(sphere_pnt+j);
            glVertex3fv(sphere_pnt+j);
            }
        }
    glEnd();
    glPopMatrix();
    }
//---------------------------------------------------------------------------
// puff ball
float r0=0.80,r1=1.0;                   // hair radiuses
const int puff_n=16;                        // number of layers (the more the more its bendy like)
float *puff_m[puff_n]={NULL};           // transform matrix for each layer
float puff_matrices[puff_n*16];         // transform matrix for each layer
float puff_col[puff_n*3];               // color for each layer
// render sphere as spicules dived to layers
void puff_gl_draw(float r0,float r1)
    {
    int i,j;
    float p[3],*p0,r,dr=r1-r0;
    float t,dt=1.0/float(puff_n);
    glColor3f(0.5,0.6,0.7);
    for (i=0;i<sphere_n;i+=3)
        {
        p0=sphere_pnt+i;
        glBegin(GL_LINE_STRIP);
        for (t=0.0,j=0;j<puff_n;j++,t+=dt)
            {
            r=r0+t*dr;
            vectorf_mul(p,p0,r);
            matrixf_mul_vector(p,puff_m[j],p);
            glColor3fv(puff_col+j+j+j);
            glVertex3fv(p);
            }
        glEnd();
        }
    }
void puff_glsl_draw(float r0,float r1)
    {
    int i;
    glBegin(GL_POINTS);
    for (i=0;i<sphere_n;i+=3)
        {
        glVertex3fv(sphere_pnt+i);
        }
    glEnd();
    }
// update matrices
void puff_update()
    {
    int i;
    float *p,t;
    if (puff_m[0]==NULL)                    // in first pass all the matrices are actual
        {
        for (i=0;i<puff_n;i++)
            {
            puff_m[i]=puff_matrices+(i<<4);
            glGetFloatv(GL_MODELVIEW_MATRIX,puff_m[i]);
            t=float(i)/float(puff_n-1);
            puff_col[i+i+i+0]=0.1+0.1*t;
            puff_col[i+i+i+1]=0.1+0.2*t;
            puff_col[i+i+i+2]=0.1+0.4*t;
            }
        return;
        }
    p=puff_m[puff_n-1];                     // insert actual matrix to ring FIFO buffer
    for (i=puff_n-1;i>0;i--) puff_m[i]=puff_m[i-1];
    puff_m[0]=p;
    glGetFloatv(GL_MODELVIEW_MATRIX,puff_m[0]);
    }
//---------------------------------------------------------------------------
void gl_draw()
    {
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glEnable(GL_DEPTH_TEST);

    // animate matrix
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
    glTranslatef(0.0,0.0,-10.0*r1);
    glRotatef(animx,1.0,0.0,0.0);
    glRotatef(animy,0.0,1.0,0.0);
    puff_update();

    glEnable(GL_LIGHTING);
    glEnable(GL_LIGHT0);
    glEnable(GL_COLOR_MATERIAL);
    glColor3f(0.4,0.2,0.1);
    sphere_gl_draw(r0);
    glDisable(GL_LIGHTING);
    glDisable(GL_COLOR_MATERIAL);

    glLineWidth(3.0);
    if (_glsl)
        {
        GLint id;
        glUseProgram(prog_id);
        id=glGetUniformLocation(prog_id,"r0"); glUniform1f(id,r0);
        id=glGetUniformLocation(prog_id,"r1"); glUniform1f(id,r1);
        id=glGetUniformLocation(prog_id,"n" ); glUniform1i(id,puff_n);
        // pass ring FIFO of matrices in their order
        // can be improved by passing start index instead of reordering
        int i,j,k;
        float m[16*puff_n];
        for (k=0,i=0;i<puff_n;i++)
         for (j=0;j<16;j++,k++)
          m[k]=puff_m[i][j];
        id=glGetUniformLocation(prog_id,"mv"); glUniformMatrix4fv(id,puff_n,false,m);
        glGetFloatv(GL_PROJECTION_MATRIX,m);
        id=glGetUniformLocation(prog_id,"mp"); glUniformMatrix4fv(id,1,false,m);
        id=glGetUniformLocation(prog_id,"c" );  glUniform3fv(id,puff_n,puff_col);

        puff_glsl_draw(r0,r1);
        glUseProgram(0);
        }
    else{
        glMatrixMode(GL_MODELVIEW);
        glLoadIdentity();
        puff_gl_draw(r0,r1);
        }
    glLineWidth(1.0);

    glFlush();
    SwapBuffers(hdc);
    }
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner):TForm(Owner)
    {
    gl_init(Handle);

    int hnd,siz; char vertex[4096],geom[4096],fragment[4096];
    hnd=FileOpen("puff.glsl_vert",fmOpenRead); siz=FileSeek(hnd,0,2); FileSeek(hnd,0,0); FileRead(hnd,vertex  ,siz); vertex  [siz]=0; FileClose(hnd);
    hnd=FileOpen("puff.glsl_geom",fmOpenRead); siz=FileSeek(hnd,0,2); FileSeek(hnd,0,0); FileRead(hnd,geom    ,siz); geom    [siz]=0; FileClose(hnd);
    hnd=FileOpen("puff.glsl_frag",fmOpenRead); siz=FileSeek(hnd,0,2); FileSeek(hnd,0,0); FileRead(hnd,fragment,siz); fragment[siz]=0; FileClose(hnd);
    glsl_init(vertex,geom,fragment);
//  hnd=FileCreate("GLSL.txt"); FileWrite(hnd,glsl_log,glsl_logs); FileClose(hnd);

    int i0,i;
    mm_log->Lines->Clear();
    for (i=i0=0;i<glsl_logs;i++)
     if ((glsl_log[i]==13)||(glsl_log[i]==10))
        {
        glsl_log[i]=0;
        mm_log->Lines->Add(glsl_log+i0);
        glsl_log[i]=13;
        for (;((glsl_log[i]==13)||(glsl_log[i]==10))&&(i<glsl_logs);i++);
        i0=i;
        }
    if (i0<glsl_logs) mm_log->Lines->Add(glsl_log+i0);

    sphere_init();
    }
//---------------------------------------------------------------------------
void __fastcall TForm1::FormDestroy(TObject *Sender)
    {
    gl_exit();
    glsl_exit();
    }
//---------------------------------------------------------------------------
void __fastcall TForm1::FormResize(TObject *Sender)
    {
    gl_resize(ClientWidth,ClientHeight-mm_log->Height);
    }
//---------------------------------------------------------------------------
void __fastcall TForm1::FormPaint(TObject *Sender)
    {
    gl_draw();
    }
//---------------------------------------------------------------------------
void __fastcall TForm1::Timer1Timer(TObject *Sender)
    {
    gl_draw();
    animx+=1.5; if (animx>=360.0) animx=-360.0;
    animy+=2.5; if (animy>=360.0) animy=-360.0;
    }
//---------------------------------------------------------------------------
void __fastcall TForm1::FormMouseDown(TObject *Sender, TMouseButton Button, TShiftState Shift, int X, int Y)
    {
    _glsl=!_glsl;
    }
//---------------------------------------------------------------------------

gl_simple.h 可以在这里找到:

但是那里发布的版本是旧的(我使用的版本添加了几何着色器支持......)这里的着色器:

// Vertex
#version 400 core
in  vec3 pos;
void main()
    {
    gl_Position=vec4(pos,1.0);
    }

// Geometry
#version 400 core
layout(points) in;
layout(line_strip, max_vertices = 32) out;

uniform int n;          // hair layers
uniform float r0;       // min radius for hairs
uniform float r1;       // max radius for hairs
uniform mat4 mp;        // global projection
uniform mat4 mv[32];    // hair modelview per layer
uniform vec3 c[32];     // color per layer

out vec3 col;
void main()
    {
    int i;
    vec3 p;
    float r,dr=(r1-r0)/float(n-1);
    // input just single point
    p=gl_in[0].gl_Position.xyz;
    // emit line strip
    for (r=r0,i=0;i<n;i++,r+=dr)
        {
        col=c[i];
        gl_Position=mp*mv[i]*vec4(p.xyz*r,1.0);
        EmitVertex();
        }
    EndPrimitive();
    }

// Fragment
#version 400 core
in vec3 col;
out vec4 fcol;
void main()
    {
    fcol=vec4(col,1.0);
    }

VCL 应用程序只是一个简单的窗口，带有一个 40 毫秒更新计时器和 GLSL 日志备忘录，因此请忽略和/或模仿您环境中的 VCL 事件。 _glsl 仅确定是否使用着色器。这远未优化，有很多东西需要改进，比如使用 VAO 代替 glBegin/glEnd，重新编码矩阵环形缓冲区，这样它就不需要重新排序，等等......

最后是新预览:

new preview

关于three.js - 如何在 THREE.js 中为可旋转的毛茸茸的球制作动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66003330/

上一篇：ruby - 如何在 Ruby 中获取证书颁发者名称

下一篇：java - 关于使用 mock stripe 进行端到端测试

相关文章：

javascript - 如何使用 Three.js 使用鼠标旋转 3D 对象而不将其旋转到屏幕外？

opengl - GLSL 直通几何着色器

javascript - webgl 中的内部计数器？

opengl - 使用单个绘制调用在 OpenGL 中渲染多个模型

three.js - 在经过 CSG.js 过程后将纹理添加到 three.js 形状

three.js - 可以反向播放皮肤动画吗？ [三.js]

glsl - Vulkan GLSL 中 block 名称有什么用？

c++ - GLSL 着色器纹理 alpha splatting

c++ - OpenglES 2.0 顶点着色器属性

webgl - 在 Three.js 中渲染具有大量对象的多个场景的最佳方式

©2024 IT工具网  联系我们