Instanced Rendering with OBJ model

Questions
1

Hello,

I have loaded an object in.obj format. Everything works, but I’d like to create more of them using GPU instancing. I’ve seen some example where he is using .clone() function so he doesn’t have to load it twice, however I don’t think it is actually an instance. Is there some relatively easy way how to approach this? I want it to be the same object, only with different transformations.

I’ve read some example codes, but they are all using InstancedBufferGeometry, which is fine, but they are creating new geometries from scratch. I would like to see an example of instancing used on .obj formatted object.

Thank you

2

Use the following example as a starter template:

https://threejs.org/examples/#webgl_buffergeometry_instancing_dynamic

Instead of a BoxBufferGeometry, use the geometry object from your OBJ file. The general idea is to apply all attributes from a BufferGeomtry to an InstancedBufferGeometry and add some additional InstancedBufferAttributes which define the final transformation of the single objects.

1 Like
3

Ah, thanks. I spent a lot of time searching, why google did not find this.

4

If you don’t feel like writing shader code, or a lot of shader code, and are using npm, you might want to take a look at this.

https://www.npmjs.com/package/three-instanced-mesh

I don’t think that three.js has any examples currently that make instancing work with all the systems, like shadows for example.

This is as easy as

npm install three-instanced-mesh


import Instanced mesh from 'three-instanced-mesh'

var myMeshes = new InstancedMesh(myObj.geometry, myObj.material, 100))

The official way of doing this with the library (endorsed by WestLangley and mrdoob as the “right way” can be seen here):

I find it extremely verbose though (400 lines of code) and it works only on the lambert light, so i made this module, reduces the amount of code by a factor of 100x and just works with everything in three.js.

1 Like
5

@pailhead if you are recommending your own NPM library as the best way of doing things, it’s generally good practice to mention that you are the author as well.

1 Like
6

He actually did :slight_smile:

Thanks anyway :slight_smile:

1 Like
7

It’s all good. Three.js maintainers are possibly the busiest people on this planet, they have the bandwidth to read at most two sentences in a post, so it’s no wonder that was missed. I’ll put it in the first sentence next time :slight_smile:

Technically I wasn’t actually recommending it, i was giving it visibility. My philosophy is actually the complete opposite of three’s philosophy. If you read my entire post, you should notice that in addition to an official three.js example that mugen linked to, i linked to the other more recent, and equally official example. On top of that I’ve mentioned a 3rd party solution.

The point is, i have no opinions, but maybe a biased observation. There are N ways of doing something, this one way requires 3 lines of code, the other requires 3 hundred lines of code, you pick. Compare this to three.js where it’s mostly “you have to do it this way”.

No offense taken, just wanted to clarify this :heart:

8

He actually did

Oh, so he did. My humble apologies @pailhead :slightly_smiling_face:

1 Like
9

Hello @pailhead ,
In our current project, we do not use npm, is there a JS file for this that can be included in our project?

cheers!

10

Needs to be updated :frowning:

11

how to import three-instanced-mesh
i try import Instanced Mesh from ‘three-instanced-mesh’
but not working