Three JS Conversion

[Pryme8]

I am working on converting:
https://github.com/spacejack/poaceae/blob/master/ts/grass.ts

to a playground.

I have gotten to this part:

const geo = new THREE.InstancedBufferGeometry()
	// Make a giant bounding sphere so the mesh never goes out of view.
	// Also, because there are no position vertices, we must create our own bounding sphere.
	geo.boundingSphere = new THREE.Sphere(
		new THREE.Vector3(0,0,0), Math.sqrt(opts.radius * opts.radius * 2.0) * 10000.0
	)
	geo.addAttribute('vindex', new THREE.BufferAttribute(buffers.vindex, 1))
	geo.addAttribute('shape', new THREE.InstancedBufferAttribute(buffers.shape, 4))
	geo.addAttribute('offset', new THREE.InstancedBufferAttribute(buffers.offset, 4))
	geo.setIndex(new THREE.BufferAttribute(buffers.index, 1))

and am trying to figure out the BJS equivalent.
http://www.babylonjs-playground.com/#JPJVL4#1
Approx Line 49 is where this section would need to go.

[Pryme8]

https://doc.babylonjs.com/classes/3.1/instancingattributeinfo maybe?

[Guest]

I added comment inline: http://www.babylonjs-playground.com/#JPJVL4#2

[Pryme8]

http://www.babylonjs-playground.com/#JPJVL4#3

I get a error when I follow along with those instructions.
Line 19:4984 - t.getKind is not a function

[Guest]

Sorry I was unclear: http://www.babylonjs-playground.com/#JPJVL4#3

[Pryme8]

http://www.babylonjs-playground.com/#JPJVL4#6

So is this correct now?

I noticed that I prolly needed to change:

var vIndexBuffer = new BABYLON.Buffer(engine, new Float32Array(args.BLADE_VERTS * 2 * 1), false, 2);
var shapeBuffer = new BABYLON.Buffer(engine, new Float32Array(4 * args.numBlades), false, 4, false, true)

to:

var vIndexBuffer = new BABYLON.Buffer(engine, this.buffers.vID, false, 2);
var shapeBuffer = new BABYLON.Buffer(engine, this.buffers.shape, false, 4, false, true);

otherwise the data I built wont be included if I'm not mistaken?

Then what, is this on the mesh as a VBO?
 

[Guest]

If you called setVerticesBuffer, yes!