Cheap round-edged box (vertex shader)

Resources
,
1

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
2

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
3

This is awesome! :+1:

1 Like
4

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

1 Like
5

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

1 Like
6

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

2 Likes
7

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

3 Likes
8

Oh, nice. :metal:

9

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.

10

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
11

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
12

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?

13

@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
14

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
16

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

3 Likes
17

The more the merrier! :+1:

1 Like
18

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
19

@mrdoob
I played around with several options for geometries.

1 Like
20

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

21

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.