# Material of InstancedMesh geometry does not show when created with custom BufferGeometry

**URL:** <https://discourse.threejs.org/t/material-of-instancedmesh-geometry-does-not-show-when-created-with-custom-buffergeometry/61795>\
**Category:** Questions\
**Tags:** materials, geometry\
**Created:** [February 22, 2024, 9:28am UTC](https://discourse.threejs.org/t/material-of-instancedmesh-geometry-does-not-show-when-created-with-custom-buffergeometry/61795 "2024-02-22T09:28:43Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![nwl](https://avatars.discourse-cdn.com/v4/letter/n/45deac/32.png) [@nwl](https://discourse.threejs.org/u/nwl)\
**Post date:** [February 22, 2024, 9:28am UTC](https://discourse.threejs.org/t/material-of-instancedmesh-geometry-does-not-show-when-created-with-custom-buffergeometry/61795/1 "2024-02-22T09:28:43Z")

</div>

Hi all,

This is probably a simple question, but here goes.

There are 2 example codes shown below. In the first example, the material successfully renders on my viewport if I use THREE.BoxGeometry. However, in the second example, the material does not render at all if I use THREE.BufferGeometry. Why is this so, and how should I resolve this?

_Example Code 1:_

```javascript
let geom = new THREE.BoxGeometry(1, 1, 1);

let im = new THREE.InstancedMesh(
        geom,
        new THREE.MeshLambertMaterial(),
       length
)

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/6/f6df15eb0e23c703a81d389e684375e2435b5aa9.png)

_Example Code 2:_

```javascript
let geom = new THREE.BufferGeometry();

let vertices = new Float32Array( [
        -0.5, -0.5, -0.5, 
        0.5, -0.5, -0.5, 
        0.5, 0.5, -0.5, 
        -0.5, 0.5, -0.5,
        -0.5, -0.5, 0.5, 
        0.5, -0.5, 0.5, 
        0.5, 0.5, 0.5, 
         -0.5, 0.5, 0.5, 
 ] );;

let indices = [0, 1, 2, 2, 3, 0, 4, 5, 6, 6, 7, 4, 0, 4, 3, 3, 4, 7, 3, 7, 2, 2, 7, 6, 2, 1, 6, 6, 1, 5, 0, 1, 5, 0, 5, 4]

geom.setIndex( indices );
geom.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );

let im = new THREE.InstancedMesh(
        geom,
        new THREE.MeshLambertMaterial(),
        length
)

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/a/da7234a79f6ff1a8233fc8e6cc820626282a3e74.png)

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [February 22, 2024, 9:31am UTC](https://discourse.threejs.org/t/material-of-instancedmesh-geometry-does-not-show-when-created-with-custom-buffergeometry/61795/2 "2024-02-22T09:31:19Z")

</div>

Is the geometry working ok when using just Three.Mesh instead of Three.InstancedMesh? You’re not assigning any normals, so I’d assume MeshLambertMaterial wouldn’t work in either case 🤔

---

<div class="post-metadata">

**Author:** ![nwl](https://avatars.discourse-cdn.com/v4/letter/n/45deac/32.png) [@nwl](https://discourse.threejs.org/u/nwl)\
**Post date:** [February 22, 2024, 9:38am UTC](https://discourse.threejs.org/t/material-of-instancedmesh-geometry-does-not-show-when-created-with-custom-buffergeometry/61795/3 "2024-02-22T09:38:41Z")

</div>

> [@mjurczyk](#):
>
> using just Three.Mesh instead of Three.InstancedMesh? You’re not assigning any normals, so I’d assume MeshLambertMaterial would

The same thing happens when using THREE.Mesh. THREE.BoxGeometry renders the material successfully unlike THREE.BufferGeometry.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [February 22, 2024, 9:39am UTC](https://discourse.threejs.org/t/material-of-instancedmesh-geometry-does-not-show-when-created-with-custom-buffergeometry/61795/4 "2024-02-22T09:39:58Z")

</div>

Yes, as above - you’re defining only `position` in the geometry. To make light work, you’ll need to either define `normal` buffer attribute, to specify direction of each vertex, or use [BufferGeometry.computeVertexNormals](https://threejs.org/docs/index.html?q=buffer#api/en/core/BufferGeometry.computeVertexNormals) to do it automatically (otherwise three doesn’t know the direction of faces in the mesh, making it impossible to calculate light properly.)

---

<div class="post-metadata">

**Author:** ![nwl](https://avatars.discourse-cdn.com/v4/letter/n/45deac/32.png) [@nwl](https://discourse.threejs.org/u/nwl)\
**Post date:** [February 22, 2024, 10:44am UTC](https://discourse.threejs.org/t/material-of-instancedmesh-geometry-does-not-show-when-created-with-custom-buffergeometry/61795/5 "2024-02-22T10:44:24Z")

</div>

After using computeVertexNormals, this is the result.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/0/607c44b40255ad7641014c44e5b491f28503866e.png)

Therefore, I tried specifying vertex normals.

From the website:

### .[computeVertexNormals](https://threejs.org/docs/index.html#api/en/core/BufferGeometry.computeVertexNormals) () : undefined

Computes vertex normals for the given vertex data. For indexed geometries, the method sets each vertex normal to be the average of the face normals of the faces that share that vertex. For non-indexed geometries, vertices are not shared, and the method sets each vertex normal to be the same as the face normal.

In this case, assuming the point (-0.5, -0.5, -0.5), shouldn’t the face normals of each face related to the point be (-1, 0 ,0), (0, -1,0) and (0, 0, -1), and the average of the face normals be (-1, -1, -1)?

However, the code below does not work.

> Let normals = new FloatArray32([  
> -1,-1,-1,  
> 1,-1,-1,  
> 1,1,-1,  
> -1,1,-1,  
> -1,-1,1,  
> 1,-1,1,  
> 1,1,1,  
> -1,1,1  
> ])
> 
> geom.setAttribute( ‘normal’, new THREE.BufferAttribute( normals, 3 ) );

The vertex normals above is arranged accordingly according to the order of the points specified above. Am I doing something wrongly? How should I go about specifying vertex normals?

Thanks

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [February 22, 2024, 2:26pm UTC](https://discourse.threejs.org/t/material-of-instancedmesh-geometry-does-not-show-when-created-with-custom-buffergeometry/61795/6 "2024-02-22T14:26:00Z")

</div>

.computeVertexNormals() allocates the normals if they aren’t there… and recomputes them. You shouldn’t have to do any manual stuff.

Also perhaps unrelated, but a warning… if you use a geometry on an InstancedMesh, I’ve seen problems if the same geometry is then also used by a regular mesh somewhere else. The geometry seems to only be able to work with one type of mesh or the other.

---

<div class="post-metadata">

**Author:** ![nwl](https://avatars.discourse-cdn.com/v4/letter/n/45deac/32.png) [@nwl](https://discourse.threejs.org/u/nwl)\
**Post date:** [February 23, 2024, 1:31am UTC](https://discourse.threejs.org/t/material-of-instancedmesh-geometry-does-not-show-when-created-with-custom-buffergeometry/61795/7 "2024-02-23T01:31:02Z")

</div>

Hi,

the below happens when using computeVertexNormals(). This object in a viewport should be a cube, but has the material rendered on the wrong side for a few faces due to flipped normals. How should I resolve this issue?

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/0/607c44b40255ad7641014c44e5b491f28503866e.png)

No worries, am only the geometry on a singular instanced mesh.

The reason I am using custom THREE.BufferGeometry and not THREE.BoxGeometry is because I would like to ultimately output the data from the geometry into JSON, and using a custom indexed THREE.BufferGeometry, would be able to reduce the size of the final JSON output data.

Thanks.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [February 23, 2024, 4:25am UTC](https://discourse.threejs.org/t/material-of-instancedmesh-geometry-does-not-show-when-created-with-custom-buffergeometry/61795/8 "2024-02-23T04:25:51Z")

</div>

Flip the normals for the bad triangles by reversing the indices of their vertices, or… use material.side = THREE.DoubleSide

---

<div class="post-metadata">

**Author:** ![nwl](https://avatars.discourse-cdn.com/v4/letter/n/45deac/32.png) [@nwl](https://discourse.threejs.org/u/nwl)\
**Post date:** [February 23, 2024, 7:25am UTC](https://discourse.threejs.org/t/material-of-instancedmesh-geometry-does-not-show-when-created-with-custom-buffergeometry/61795/9 "2024-02-23T07:25:36Z")

</div>

Hi,

after reversing the indices, this shading is different from that of THREE.BoxGeometry.

1. Using THREE.BufferGeometry:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/2/a225ab0eb2a5dc237b435f49263149b6de341bed.png)

1. Using THREE.BoxGeometry

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/9/c99b70eda3764cd9134cc427e884536177a64fd0.png)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 23, 2024, 9:02am UTC](https://discourse.threejs.org/t/material-of-instancedmesh-geometry-does-not-show-when-created-with-custom-buffergeometry/61795/10 "2024-02-23T09:02:32Z")

</div>

I would use [`VertexNormalHelper`](https://threejs.org/docs/index.html?q=helper#examples/en/helpers/VertexNormalsHelper) on both geometries to see what happens with normals. That might be surprising.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [February 23, 2024, 11:25am UTC](https://discourse.threejs.org/t/material-of-instancedmesh-geometry-does-not-show-when-created-with-custom-buffergeometry/61795/11 "2024-02-23T11:25:29Z")

</div>

If you’re sharing the 8 points of a cube, you won’t have a unique normal for each cube face sharing that point…

To make them flat shaded, each quad face needs to have 4 unique vertices + normals + uvs.

As prisoner849 said, check out the helper on both objects and it will make more sense. 🙂