Dodecahedra [three.js + canvas-2d]

Hi community!

Video:

Demo: https://codepen.io/prisoner849/full/XWQqYYr

Ehm… To be honest, I don’t know what to say. The deeper I dive into the depths of conjunction of three.js and canvas’ 2d-context, the more clearly I feel how the darkness consumes me, and there is no way back :smiling_imp:
Joking, of couse :slight_smile: (maybe)

The core of this work is the using of .project() method of Vector3 object (line 161, in the draw() method of Mesh class), and depth sorting at the level of positions of objects in the scene.
The main differense from this scene is that I tried to use a material with simple lighting model (directional and ambient lights).

5 Likes

Interesting approach. There is a lot of things to dive into and to learn from. It looks as if you have extended/reimplemented a lot of Three.js classes.

Meanwhile, I’d be curious to see the Great Grand Polydodecahedron:

image

1 Like

True :slight_smile:
The idea is, no matter how many vertices a side/face contains, draw it all at once, without the need to triangulate it.

2 Likes

That’s like occlusion culling but on a face by face basis?!

@Lawrence3DPK
Well, yes :slight_smile:

Check the sign of a face/side area in screen coordinates, and if it’s less than 0, don’t draw the face/side (lines 182-188). For simplicity, I take first three vertices in count.
Pretty much like gl_FrontFacing works.

1 Like

Hi @prisoner849 ,
I liked Your work (and rich code) and Your words used to present it… :wink:

1 Like

“the darkness consumes me”
Are you sure it’s not you consuming the beer? :grinning:

1 Like

@phil_crowther
Perhaps :smile:

Demo: https://codepen.io/prisoner849/full/BaEOWRb

2 Likes