Three.js Object3D custom vertex shader - three.js

Question

I have a bunch of Object3d in the scene comprised of different meshes, e.g:
const object3d = new Object3D();
const bodyMaterial = new MeshLambertMaterial();
const bezelMaterial = new MeshBasicMaterial({ color: "0xffffff" });
const mesh = new Mesh(MeshFactory.mesh1, [ bodyMaterial, bezelMaterial ]);
const textLabel = TextFactory.createText("mesh1");
object3d.add(mesh, textLabel);
I'd like to move the position of the object3d on each frame,
currently doing that on the CPU:
render() {
object3D.position = calcPosition(); // new Vector3
}
This is slow since I have hundreds of Object3d objects and each one should move separately.
So I'd like to write a vertex shader that moves the xyz on each frame but,
how do I write a shader for Object3D? (change position for all of it's meshes)?

Answer 1

Sounds like you might be going about things the wrong way...
But..
Here is a basic example of vertex displacement in a shader in three.js.
Rotation is done in the render loop, but offset values are sent to the vertex shader.
var camera, scene, renderer, mesh, material;
init();
animate();
function init() {
// Renderer.
renderer = new THREE.WebGLRenderer();
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// Add renderer to page
document.body.appendChild(renderer.domElement);
// Create camera.
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;
// Create scene.
scene = new THREE.Scene();
// Create material
var uniforms = {
xOffset: { type: "f", value: 0.0 },
yOffset: { type: "f", value: 0.0 },
zOffset: { type: "f", value: 0.0 }
};
var vertexShader = document.getElementById('vertexShader').text;
var fragmentShader = document.getElementById('fragmentShader').text;
material = new THREE.ShaderMaterial(
{
uniforms : uniforms,
vertexShader : vertexShader,
fragmentShader : fragmentShader
});
// Create cube and add to scene.
var geometry = new THREE.BoxGeometry(200, 200, 200);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
// Create directional light and add to scene.
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
// Add listener for window resize.
window.addEventListener('resize', onWindowResize, false);
// set up gui.
var gui = new dat.GUI();
gui.add(uniforms.xOffset, 'value', -500, 500).name('X Offset');
gui.add(uniforms.yOffset, 'value', -500, 500).name('Y Offset');;
gui.add(uniforms.zOffset, 'value', -500, 500).name('Z Offset');;
}
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
body {
padding: 0;
margin: 0;
}
canvas {
display: block;
}
<script src="https://rawgit.com/mrdoob/three.js/r89/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/dataarts/dat.gui/v0.6.2/build/dat.gui.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
uniform float xOffset;
uniform float yOffset;
uniform float zOffset;
void main( void ) {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position + vec3(xOffset, yOffset, zOffset),1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>