can't get a Three.js InstancedBufferGeometry to appear in a scene - three.js

Question

I can't seem to get an InstancedBufferGeometry to appear in a scene anymore. I've tried the following technique:
let bg = BoxBufferGeometry(3,3,3),
ig : InstancedBufferGeometry = new InstancedBufferGeometry(),
mesh : Mesh;
ig.index = bg.index;
ig.attributes.position = bg.attributes.position;
ig.attributes.uv = bg.attributes.uv;
//ig.copy( bg ); <- also tried this
ig.instanceCount = Infinity; <- otherwise this populates as undefined
var offsets = [];
var orientations = [];
var vector = new Vector4();
var x, y, z, w;
for ( var i = 0; i < 1000; i ++ ) {
// offsets
x = Math.random() * 100 - 50;
y = Math.random() * 100 - 50;
z = Math.random() * 100 - 50;
vector.set( x, y, z, 0 ).normalize();
vector.multiplyScalar( 5 );
offsets.push( x + vector.x, y + vector.y, z + vector.z );
// orientations
x = Math.random() * 2 - 1;
y = Math.random() * 2 - 1;
z = Math.random() * 2 - 1;
w = Math.random() * 2 - 1;
vector.set( x, y, z, w ).normalize();
orientations.push( vector.x, vector.y, vector.z, vector.w );
}
var offsetAttribute = new InstancedBufferAttribute( new Float32Array( offsets ), 3 );
var orientationAttribute = new InstancedBufferAttribute( new Float32Array( orientations ), 4 ).setUsage( DynamicDrawUsage );
ig.setAttribute( 'offset', offsetAttribute );
ig.setAttribute( 'orientation', orientationAttribute );
let m = new MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: true } );
mesh = new Mesh( ig, m );
scene.add(mesh);
I don't get any errors and the mesh does appear in the scene when I inspect. I've tried all combinations of attributes in the IBG.
Will this approach no longer work? (It worked in r97... I know, ages ago. )

Answer 1

let m = new MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: true } );
When using InstancedBufferGeometry, you can't create a mesh with built-in materials like MeshPhongMaterial. Instead you have to create a custom shader that utilizes the instanced attributes. Example:
var camera, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 100;
scene = new THREE.Scene();
var geometry = new THREE.BoxBufferGeometry();
var ig = new THREE.InstancedBufferGeometry();
ig.index = geometry.index;
ig.attributes.position = geometry.attributes.position;
var offsets = [];
var orientations = [];
var vector = new THREE.Vector4();
var x, y, z, w;
for (var i = 0; i < 1000; i++) {
// offsets
x = Math.random() * 100 - 50;
y = Math.random() * 100 - 50;
z = Math.random() * 100 - 50;
vector.set(x, y, z, 0).normalize();
offsets.push(x + vector.x, y + vector.y, z + vector.z);
// orientations
x = Math.random() * 2 - 1;
y = Math.random() * 2 - 1;
z = Math.random() * 2 - 1;
w = Math.random() * 2 - 1;
vector.set(x, y, z, w).normalize();
orientations.push(vector.x, vector.y, vector.z, vector.w);
}
var offsetAttribute = new THREE.InstancedBufferAttribute(new Float32Array(offsets), 3);
var orientationAttribute = new THREE.InstancedBufferAttribute(new Float32Array(orientations), 4);
ig.setAttribute('offset', offsetAttribute);
ig.setAttribute('orientation', orientationAttribute);
var material = new THREE.RawShaderMaterial({
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent,
side: THREE.DoubleSide
});
mesh = new THREE.Mesh(ig, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
body {
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.124/build/three.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
precision highp float;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
attribute vec3 position;
attribute vec3 offset;
attribute vec4 orientation;
void main(){
vec3 pos = offset + position;
vec3 vcV = cross( orientation.xyz, pos );
pos = vcV * ( 2.0 * orientation.w ) + ( cross( orientation.xyz, vcV ) * 2.0 + pos );
gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
precision highp float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>
Consider to use InstancedMesh for a more straightforward usage of instanced rendering.