【问题标题】:Rotate instance in vertex shader在顶点着色器中旋转实例
【发布时间】:2020-05-16 14:53:30
【问题描述】:

我正在学习实例化缓冲区几何形状并尝试扩展 LambertMaterial 着色器以旋转每个实例。

  #define LAMBERT
  mat4 rotationX( in float angle ) {
    return mat4(    1.0,        0,          0,          0,
            0,  cos(angle), -sin(angle),        0,
            0,  sin(angle),  cos(angle),        0,
            0,          0,            0,        1);
  }

  mat4 rotationY( in float angle ) {
    return mat4(    cos(angle),     0,      sin(angle), 0,
                0,      1.0,             0, 0,
            -sin(angle),    0,      cos(angle), 0,
                0,      0,              0,  1);
  }

  mat4 rotationZ( in float angle ) {
    return mat4(    cos(angle),     -sin(angle),    0,  0,
            sin(angle),     cos(angle),     0,  0,
                0,              0,      1,  0,
                0,              0,      0,  1);
  }

        // instanced
        attribute vec3 instanceOffset;
        attribute vec3 instanceColor;
        attribute vec3 instanceRotation;
        varying vec3 vLightFront;
        varying vec3 vIndirectFront;
        #ifdef DOUBLE_SIDED
            varying vec3 vLightBack;
            varying vec3 vIndirectBack;
        #endif
        #include <common>
        #include <uv_pars_vertex>
        #include <uv2_pars_vertex>
        #include <envmap_pars_vertex>
        #include <bsdfs>
        #include <lights_pars_begin>
        #include <color_pars_vertex>
        #include <fog_pars_vertex>
        #include <morphtarget_pars_vertex>
        #include <skinning_pars_vertex>
        #include <shadowmap_pars_vertex>
        #include <logdepthbuf_pars_vertex>
        #include <clipping_planes_pars_vertex>
        void main() {
            #include <uv_vertex>
            #include <uv2_vertex>
            #include <color_vertex>
            // vertex colors instanced
            #include <beginnormal_vertex>
            #include <morphnormal_vertex>
            #include <skinbase_vertex>
            #include <skinnormal_vertex>
            #include <defaultnormal_vertex>
            #include <begin_vertex>
            // position instanced
            transformed += instanceOffset;
            #include <morphtarget_vertex>
            #include <skinning_vertex>
    #include <project_vertex>
    mvPosition =  rotationX(250.0) * rotationY(90.0) * rotationZ(25.0) * vec4(position, 1.0);
            #include <logdepthbuf_vertex>
            #include <clipping_planes_vertex>
            #include <worldpos_vertex>
            #include <envmap_vertex>
            #include <lights_lambert_vertex>
            #include <shadowmap_vertex>
    #include <fog_vertex>
        }
        `

通过谷歌挖掘后,我选择了类似的东西,但它根本不旋转它们。它们都是我输入的任何数字的相同位置。

不知道这是否是正确的转换。 我应该如何正确扩展着色器以添加旋转?

【问题讨论】:

  • 你读过这个github.com/mrdoob/three.js/blob/master/examples/…和其他例子吗?
  • 您没有使用 instanceRotation。它应该是 vec3 吗?您为每个实例发送相同的 rotationX、rotationY、rotationZ 值。
  • 是的,我读过这个和其他例子(实际上我是基于这个)。是的,我正在使用 instanceRotation,就在示例中,我将常规值手动检查是否正常

标签: three.js glsl vertex-shader


【解决方案1】:

使用THREE.InstancedMesh 时,您可以对所有内置材质使用实例化渲染,并独立转换每个实例。查看以下示例来演示此方法:

https://threejs.org/examples/webgl_instancing_dynamic

我们的想法是使用InstancedMesh.setMatrixAt() 为动画循环中的每个实例设置本地转换。

如果你出于某种原因还想使用InstancedBufferGeometry,可以使用下面的例子作为代码模板:

https://threejs.org/examples/webgl_buffergeometry_instancing_lambert

它展示了如何使用实例渲染增强 MeshLambertMaterial

three.js R113

【讨论】:

  • 我知道 - 只是想让它尽可能高效并尝试InstancedBufferGeometry
  • 为什么你认为使用InstancedBufferGeometryTHREE.InstancedMesh 更有效?
  • threejs.org/docs/#api/en/core/BufferGeometry BufferGeometry An efficient representation of mesh, line, or point geometry. ;)
  • InstancedMesh 内部使用BufferGeometry
猜你喜欢
  • 1970-01-01
  • 2020-06-19
  • 1970-01-01
  • 2020-03-10
  • 1970-01-01
  • 2022-11-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多