Experiment: Geometry Holes

Just a simple experiment I’ve wanted to make for w while.

I’ve created 2 meshes, holeMesh and mainMesh.

  • holeMesh have its side set to THREE.BackSide, and it is beeng masked based on its position, that only pixels inside the mainMesh are visible.

  • mainMesh is masked the other way around, so only pixels that are outside the holeMesh are visible

OldVersion

Update:

I was checking out thebookofshaders and found wood texture shader, i changed a bit of that code and ended up with a 3d wood texture.

Here’s the result:

3DWood

https://codepen.io/matheowis/pen/pqQZzv

9 Likes

This is cool! :beers:
Something related.

1 Like

that is cool thanks a lot for sharing, unfortunatley I am not cleaver enough to understand how it fully works. I am right to assume this would only work with basic sphere and cubes?

And also all the other things you can define/describe with formulas :slight_smile:
For example, have a look at these topics: topic 1, topic 2, topic 3.
In the third one, the heart is just a deformed sphere (reference), and the data for the three.js logo is taken from a texture :slight_smile:

It might work to perform some kind of screenspace csg for arbitary meshes by rendering subtracting meshes separatelly in buffers using flipped faces comparing fragment depth, but that’s just a theory. :thinking:

It would require at least 2 for the subtracting shapes, once regular and once flipped, as well as the original geometry being rendered double sided.

It’s not you it’s the onBeforeCompile that code just cannot not melt your mind :smiley:

But yes, it evaluates these two primitives, the cube geometry has the sphere in the shader, the sphere geometry the box. The surfaces are still rendered from triangles, but clipped with the implicit shapes. You could also just do it with one and raytrace the intersection.

I wonder if this could be achieved with arbitrary shapes using depth and stencil tests.

2 Likes

I’ve added 3d wood texture to the project :slight_smile:

3 Likes

Looks even better now! :+1: