Smooth shading and vertex colors with ExtrudeBufferGeometry

Questions
, ,
1

I am working on a visualization comprised of thin slices of irregular shapes with a different color for each (short) face.

I have tried lots of things including creating the whole thing manually but using THREE.ExtrudeBufferGeometry(..) with a THREE.Shape(..) created from the source data seems like the best bet.

I have two issues though:

1/ Despite using a material with flat shading off, the object is flat shaded. A THREE.CylinerBufferGeometry with the same number of divisions and material looks perfectly smooth.

2/ Is there an easy way to assign a color to each face? I’ve tried doing it manually with varying levels of success and hoping I’m missing a useful built-in function that will help me

Example here: https://jsfiddle.net/callum/o64v1cwx/

2

Unfortunately, this is a current limitation of ExtrudeBufferGeometry. More information right here: webgl_geometry_text.html needs to be revisited · Issue #14549 · mrdoob/three.js · GitHub

There is already a possible solution for this. Please have a look at the following PR: add computeAngleVertexNormals: calculation of normals taking into account an angle to neighboring polygons by Ni55aN · Pull Request #14859 · mrdoob/three.js · GitHub

You can user vertex colors for this. I’ve create an additional color attribute in the following fiddle and added it to the geometry.

Demo: BufferGeometry from Path vertex colors - JSFiddle - Code Playground

3

Thank you @Mugen87 - sounds like there will be something official in an upcoming release. In the meantime, I’ll use your suggestions.

You can user vertex colors for this. I’ve create an additional color attribute in the following fiddle and added it to the geometry.

Experimenting with this a bit in a later rev of the fiddle: BufferGeometry from Path vertex colors - JSFiddle - Code Playground and I wasn’t able to figure out the logic for setting each quad (vs triangle) to the same color but I expect I can work it that out by looking at the source or inspecting the object.

I increased the number of divisions to simulate my eventual use case where I will have a couple of hundred “slices” and noticed a big slowdown in performance via the Stats() meter I added. That is to be expected I imagine so might rule out using that approach for me.

4

Please have a look at the latest version of my demo: BufferGeometry from Path vertex colors - JSFiddle - Code Playground

I’ve briefly added an obsolete link to the previous post. If you use vertex colors, there should be no such performance drop.

5

Got it - using vertex colors worked perfectly.

The colors I will eventually use are along a spectrum so I think I can avoid having to work out how to color each triangle for now since adjacent ones will be very similar - a bit like this https://jsfiddle.net/callum/o64v1cwx/65/

Thanks so much for your help.

1 Like
6

The jsfiddle examples broke. Here they are, fixed with versioned URLs (and using codepen because jsfiddle is not mobile-friendly at all):