three.js - 在顶点着色器中旋转实例
问题描述
我正在学习实例化缓冲区几何形状并尝试扩展 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>
}
`
在通过谷歌挖掘后,我选择了这样的东西,但它根本没有旋转它们。它们都是我输入的任何数字的相同位置。
不知道这是否是正确的转换。我应该如何正确扩展着色器以添加旋转?
解决方案
使用THREE.InstancedMesh时,您可以对所有内置材质使用实例化渲染并独立转换每个实例。查看以下演示此方法的示例:
https://threejs.org/examples/webgl_instancing_dynamic
这个想法是使用InstancedMesh.setMatrixAt()来为动画循环中的每个实例设置局部变换。
如果InstancedBufferGeometry
出于某种原因仍想使用,可以使用以下示例作为代码模板:
https://threejs.org/examples/webgl_buffergeometry_instancing_lambert
它展示了如何MeshLambertMaterial
使用实例化渲染进行增强。
three.js R113
推荐阅读
- excel - 使用 ADO VBA 将选择性列从一个工作表复制到另一个工作表
- python - 多个输入通道上的 2D 卷积使用多少个内核?
- r - 如何更改ggplot图例以使“填充”是正方形而“线型”是线?
- pike - 导入 DLL 和相关函数
- javascript - 可空返回类型的正确 JSDoc 语法?
- java - 使用 Webhooks 在 Java 和 Slack 之间集成的问题
- c# - JSON 没有反序列化
- azure - 子对象的 ARM 模板迭代
- r - 如何在组内将第一个值与每个后续值进行比较,直到满足条件
- google-apps-script - 我想从 getPlainBody 数据发送 POST 详细信息