Noisy ribbons [instancing, shadows]

Resources
,
1

Hi community!

Video:

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

This sketch inspired by the awesome video from @akella : https://www.youtube.com/watch?v=HbM3u3Qu_Mc
I like the visual, so I made it my way:

  • the big white plane is a mesh of ShapeGeometry (a shape wish a hole) and modified MeshStandardMaterial
  • ribbons are a mesh of InstancedBufferGeometry and modified MeshStandardMaterial (I didn’t use THREE.extendMaterial from @Fyrestar like in the video, so, for correct shadows, I patched MeshDepthMaterial manually)
9 Likes
2

6usagmh

2 Likes
3

@PavelBoytchev
You’ve made my night :laughing:

1 Like
4

thats a nice approach too! =)
I kind of hate this duplication that we need to do with DepthMaterial, wonder if nodes approach solves this :thinking:

2 Likes
5

this looks awesome @prisoner849, i saw @akella’s video and this is probably one of my fav effects. though i don’t understand the math. is it just ootb throwing shadow on itself btw? i always thought that distorting vertex wouldn’t affect shadows for some reason.

6

That’s why we need to do the same stuff with vertices in MeshDepthMaterial/MeshDistanceMaterial.
And the part I don’t like most of all is computing of normals :slight_smile: