Cheap round-edged box (vertex shader)

Hi community!

Here is a pic:
Screenshot_2019-06-12%20Cheap%20round-edged%20box%20(vertex%20shader)

And here is a working demo:

I would say it’s not the ultimate solution, but a concept. If you have any ideas of how to improve the code of the shader, feel free to post it here or PM me :slight_smile:

UPD An example based on @Fyrestar’s code: https://codepen.io/prisoner849/pen/qzZaye?editors=0010

17 Likes

This saves you the polygons for the corners, also by using a uniform cube you can use the boxSize property for sizing it.
https://codepen.io/Fyrestar/pen/pXJoda?editors=1010

8 Likes

This is awesome! :+1:

1 Like

I edited a little again, basically this line is all you need.
transformed = signs * subBox + normalize(position) * radius;

1 Like

Needs a parameter to adjust the quality of the round edge :innocent:

1 Like

Added :yum: also to prevent self-intersection if the size isn’t large enough for the rounding-radius.

2 Likes

@Fyrestar
(storm of applause) :clap:
Power of community! :metal:

3 Likes

Oh, nice. :metal:

image image

envMap projection breaks on faces not aligned with camera directional axis, much like what happens on my texture projection question.

edit: Oh, I know why.
The same thing happens on every envMap. You just can’t notice on @prisoner849’s example because the number of segments on each face of the box is a lot higher, so the effect is less noticeable. But if you test the same thing on a regular boxGeometry with just 2 faces on each side, you get the same distortion.

The way to fix that is by calculating the texture UV projection inside the fragmentShader using interpolated worldcoordinates, but that should add a really big overhead, not sure if it’s worth.

Yea you generally have that issue with low tesselation, using some for the inner faces would improve it again, maybe there is a generally better fix though.

Actually environemnt maps don’t use UVs, they use the normal, i just noticed prisoner used a MeshLambertMaterial which only calculates the reflection normal per vertex, a Standard/MeshPhongMaterial fixes this.

2 Likes

Actually environemnt maps don’t use UVs, they use the normal, i just noticed prisoner used a MeshLambertMaterial which only calculates the reflection normal per vertex, a Standard/MeshPhongMaterial fixes this.

Oh, I see. Good catch!

You’ve updated the code to use correct normals and it’s working fine :slight_smile:

3 Likes

Hey guys, i’m a bit late to the party, but I’ve been wondering since the start of this topic: “what’s the usecase for this?”. :thinking:

Can you share what you use/plan to use this for?

@Usnul
You can dynamically create a box with rounded edges, then transform it to a capsule, then to a sphere, without re-building of its geometry :slight_smile:

I’ve started that theme long ago :smiley: Round-edged box, Round-edged box 2, Round-edged box 3 These are at the level of a geometry, the current one is at the level of shaders.

5 Likes

Actually there is much pratical use for it, i used this technique before for a dynamic scene to add a little bevel/rounding to the boxes. On GPU it saves you geometry buffers and processing cost otherwise done with JS, for a lot boxes with varying or dynamically changing sizes it is quite more efficient.

3 Likes

@Usnul, @Fyrestar
Works perfectly nice with instancing (updated the main post with an example).

3 Likes

The more the merrier! :+1:

1 Like

Would it be possible to do this in JS?

We could have a THREE.RoundedBoxGeometry that extends THREE.BoxGeometry and “post-processes” the vertices in the constructor.

1 Like

@mrdoob
I played around with several options for geometries.

1 Like

A BevelModifier would also be nice! And probably the more generic solution. :innocent:

I agree! A BevelModifier sounds like the the best solution.

However, in order to work on a cube it’ll need connected faces pointing the same direction. Like the recent EdgeSplit.