Rotate instance in vertex shader - three.js

Question

I'm learning about instanced buffer geometries and trying to extend LambertMaterial shader to rotate each instance.
#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>
}
`
After digging through google I went with something like this but it doesn't rotate them at all. They are all just the same position any number I input.
Don't know if this is the proper transformation.
How should i properly extend the shader to add rotation?

Answer 1

When using THREE.InstancedMesh, you can use instanced rendering for all build-in materials and transforming each instance independently. Check out the following example that demonstrates this approach:
https://threejs.org/examples/webgl_instancing_dynamic
The idea is to use InstancedMesh.setMatrixAt() in order to set a local transformation to each of your instances in your animation loop.
If you still want to use InstancedBufferGeometry for some reason, you can use the following example as a code template:
https://threejs.org/examples/webgl_buffergeometry_instancing_lambert
It shows how you enhance MeshLambertMaterial with instanced rendering.
three.js R113