Clipping Planes Problem - Radial reveal only half way

I would create a custom shader that clips the wedge you want based on uniforms rather than using built in clip planes. This is similar to @prisoner849’s UV approach but it would not require that that UVs be set up radially which can be difficult with some models.

If you really want to use the three.js clip planes you can draw the model twice if you want to display > 180 degrees of the model. Once to draw the first 180 degrees and again to draw the remainder greater than 180. You might wind up with a seam at the joined edge but you can probably fix this by ensuring the two draws overlap a little bit.

Both approaches should still work with the stencil approach for the caps.

1 Like

I tried the 180 double approach earlier.
Serious artifacts with the caps disappearing and reappearing over the opposite side model.

I’m interested in the wedge shader idea, however I’m not a shader pro.
Don’t understand it, have only gotten shader things to work by cobbling together copy pasta.

Probably need to do some render order fixing.

Btw the result of the sides joining was seamless re the 180 idea

For me, it was easier to bend a cylinder with shaders :sweat_smile:

Example: https://jsfiddle.net/prisoner849/t2rm8awk/

1 Like

The torus is a common element in my work though used as an example here however the shapes in the final work would be dependent on dynamic 2d shapes extruded

Would your technique be able to sync with what I described my process as?
Ie: radial shape be derived from dynamic source?
(My original objects are all dynamically generated via svg loader to lathe geometry)
Not to be pushy.
I sincerely appreciate the efforts

If you could provide an example with different shape for lathegeometry, then we’ll see if my method works as a common solution :thinking:

An outward facing crescent moon shape?
Inner and outer would the be the same
Thanks!

Any reference or explanatory picture?

crescent_lathe_profile_on_axis
(half a crescent actually) like this.

If you provide an svg of such moon, I could try to make an example.

crescent_test-01
here you go.
the half circle on the left is meant to make a center sphere in the 3D world as an anchor for the center vertical axis.
(Should be just a quarter as the x axis cuts through the middle of it but that’s not of immediate concern)

in a post in Feb where i had an issue of one band of missing polys on each object that was lathe extruded from SVGs.

In that instance, in the prior “bent cylinder” attempt, I found using a cylindrical extrusion caused serious artifacts with getting all the points at the central axis to merge.
Thus the use of lathe geometry, which produced a solid sphere… However I had issues with normals being corrected etc… seams.

ideally the resulting object(s) (individual separate shapes in the overall svg file) would be able to receive their own materials from different sources, as well as have the option to have unique materials for the ‘cut’ surfaces (end caps)

so say for example the sphere would be a silver material
the crescent gold,
and as the reveal occurs, the flat cut area material could be another unique material.

as always i sincerely appreciate the help.
I’ve been trying so many methods so solve this, hopefully one will fit the best for what’s needed.

I’ve made an example, based on Shape (SVGLoader uses them) and ExtrudeGeometry, with different materials for sides and lids.

Example: https://jsfiddle.net/prisoner849/L5qj920a/

Picture:

2 Likes

Awesome, man!
That’s a fantastic setup.
Thanks so much for helping out.
I spent yesterday getting a solution worked out using Manthrax’s fork of EwanW’s csg library.

However, the method takes a good 15 seconds to cache “frames” as individual objects of the reveal. see demo here… (js hangs browser, you just have to wait) What we made using that technique will be useful for different things though.

Pursuing different solutions is great in that i learn a lot from different people.

I’m going to go ahead and make an implementation of your version and we’ll see how it ends up.
Thanks!!

1 Like

Got my svg loaded, extracted the shape, plugged it in and bingo.
Works like a charm!
Muchas Gracias!

You’re welcome :beers:

1 Like

Looks like everythings been figured out but here’s an example of a shader that lets you specify angles to clip outside of starting from the demo that @prisoner849 provided above. Maybe it’ll be useful for someone else!

https://jsfiddle.net/s47wfj3m/

1 Like

Hi
I’ve sized my camera clipping levels very wide, yet in still getting some sensitive clipping on only the shader-generated objects.
Any way to change this?
Thanks

@GlifTek any chance to provide an example, that demonstrates the issue?

Hmmm… It seems to come and go.
Really odd.
Doesn’t seem to be doing it now.
Except on mobile a little bit.
If it returns through different versions I’ll bring it up again with an rippl example.

Also, was thinking…
I had the clipping planes method working with the quad wireframe shader on my radial objects.
I’m foggy with shaders.
But slowly understanding.

I know the radial shader here is a vertex shader, and the quad wireframe one is a fragment shader.

Any way of combining the two?
Or toggling between quad / Metal and a combination?
Thanks

That’s an awesome additional option there, Garrett.
Nice