Vibe coded a step viewer with depth peeling

I tried to do something by purely vibecoding, i didn’t look at any code while doing this, just prompting and writing some spects and tests. I’m pretty much doing this anyway, this is something i started from scratch.

While it didn’t just implement depth peeling solely from the prompts, it got pretty far. I tried to make a skill for claude by pointing it to some old code and some papers. I ended up with two implementations, the more recent one and my old one.

It somehow was able to share the stencil buffer (i’ve no idea how, i need to dig in) which i wasn’t able to do without modifying three.

https://step.dusanbosnjak.com/

6 Likes

ThEy’Re JuST StoCHasTic PaRrOts!lmao

1 Like

lol yeah just statistics

Did you find a good STEP loader for three? Last time I dug into it, I only found weird closed wasm binaries that could do it…

1 Like

heh, i made my own weird closed wasm binary lol

I found one but it couldn’t do what i wanted - to sample the normals from the nurbs. So even if something was a cylinder, if it has 2 patches there would be a hard edge. I compiled my own OCC loader with what i needed, shaved some stuff off (can’t load colors atm).

2 Likes

Awesome. :smiley: very cool stuff.

I assumed that open company (formerly ifc.js) had an open source STEP loader, as IFC files are a specialised sub format of STEP but it looks like it’s limited to ISO 10303-21 clear text encoding rather than using the full set of AP203, AP214, or AP242 protocols.

The conversion from STEP to IFC is pretty straight forward, most CAD softwares support IFC output encoding and there are server side conversion tools available such as ifcOpenShell

2 Likes

Haha good tip, thanks for the reminder!! I now recall someone else asked me about STEP a couple years ago, and ThatOpenCompany came up in the convo! Hopefully next time I need to find info, I find your reply. :smiley:

1 Like

So what could the community find useful out of all of this? A step loader but without the wasm?

that would be amazing if it’s possible and manageable to create a STEP parser and exporter in pure js!! I think existing wasm builds are kept proprietary as from what I understand it’s quite an undertaking to align to the STEP schema and professionals who use the format don’t mind paying for tools of convenience (auto desk products going up to 3.5k per year as it is). open sourcing a solid STEP library would be a game changer, I’m pretty sure that’s what ifc.js (now “that open company”) are aiming at also.

The recent advances you’ve made on the depth peeling look amazing too, how does it compare to Garrets implementation in terms of performance and visual aesthetic?

Re:step

So this is open cascade which is open source, but it being cpp wasm seems to be the natural way to go about using it. I’m curious though how would Claude handle translating it. Maybe it is feasible, but I wonder for what gain, would some compressed JavaScript be an order of magnitude smaller? It would probably be slower.

Re:depth peel

I couldn’t get my stencil optimization to work with @gkjohnson s approach. I did come to a lot of conclusions which I forgot by now lol. I’ll try to remember:

My old approach draws everything twice each pass, and reads from two textures. The depth is packed and unpacked. However, it is sharing the stencil buffer between these targets. The stencil buffer is super awkward to use, I couldn’t figure it out with the increment op, so I use replace WITH a mask. This allows me to test against layer 3 but write layer 4. The result of all this is that it can be significantly faster on some average frame, every peel at most draws in what the previous covered.
The only additional optimization that I can think of is drawing the color and depth in one pass with multi targets. The limit is only 8 layers, each is represented by a bit. Maybe there is a smarter way to manage this.

The DepthTexture approach draws into depth by default, so only one pass is needed. It doesn’t require packing and I think this alone makes it faster. But it doesn’t seem to work with the shared stencil. This is a depth + stencil buffer, and you need two depth buffers, hence you can’t share the stencil buffer.

This is how far I got in understanding this. Stencil can reduce the amount of reads and writes dramatically, but you need to manage the depth yourself, like writing the value from the shader into a regular target. It can also interfere with other things that use stencil. DepthTexture makes everything a lot simpler, doesn’t interfere with anything, but as far as I can tell it is reading and writing more.

1 Like