Cube with holes


I’m creating and app for designing a house. What is the best way to create a cube (wall) and be able to randomly insert holes (windows). I did find something for OpenGL - … 02871.html - but what about WebGL?

How could I accomplish it?


Well, you could do as the person in that forum suggested and try to use the stencil buffer to implement “Constructive solid geometry” (CSG). Check out the Wikipedia article: … d_geometry

…however, that requires a really good stencil buffer and two-sided lighting - and it becomes unwieldy for anything but the simplest examples. You need enough unique stencil buffer values to handle the number of objects and holes you have - so if you have an 8 bit stencil buffer, the most you can deal with is 256 objects/holes…and since some systems don’t have stencil buffers, others have only 1 bit or 4 bit stencil…it’s a pain to deal with as a practical matter.

My experience with that technique is that it makes for great demos that turn out to be totally impractical and to have unfixable “corner cases” when you start to use them for real…sadly, by the time you discover this, you’ve already invested so much effort in going down that route that it’s hard to backtrack and do it right without tossing out an awful lot of code.

So my advice is to ignore the stencil buffer approach…it doesn’t work well enough for “real” applications.

But those approaches are very generalized - they let you make a penguin-shaped hole inside an elephant…which you definitely don’t need to do!

The reality is that you probably have to do it the hard way - actually recomputing the intersection of geometry in software and in realtime. It’s more work - but it’ll be much more reliable and portable.

In your case, where things are super-specialized - basically, doors and windows in walls, I’d do this by treating a staight wall section as a collection of cuboids that line up with the geometry of the doors and windows. You know that windows don’t intersect walls at 45 degrees - and so forth.

So - start with a single cuboid wall. When you want to add a window, chop it up into nine cuboids in a 3x3 grid where the edges of the center cuboid line up with the window - then delete the center one to make your window. When a second window has to be added somewhere further along the wall, you’ll now have to chop up three cuboids where the planes of the new window intersect them. If your new window has a different height than the first one, you’ll end up with a lot of cuboid pieces to handle…but it’s fairly easy.

Doing it this way boils the problem down to intersecting an axially-aligned cuboid hole with an axially aligned cuboid solid and getting a (possibly empty) collection of axially-aligned cuboids as a result.

You can do that by the chopping up the solid cuboid into along the planes of the hole cuboid (as I did with the window-cutting-a-wall example) and deleting the cuboids that you don’t need because they are inside the hole.

Now you represent a wall as a collection of cuboids - and cut a window in it by saying:

for each cuboid in the wall
chop it up against the hole
add the resulting pieces into the wall
delete the original cuboid

Your rendering software has to be super-efficient at drawing collections of cuboids…but that’s easy to manage.

If you need circular or arched windows, I would treat them as if they were cuboids - but make the actual window model contain some wall polygons so that you can treat it as a cuboid. So your model for a circular window would be a hand-made model (using a tool like Maya, 3Dstudio or blender) with window frames, glass, etc - set into a square brick block that you can cut into the wall using the approach given above.

The resulting software will fail miserably if you want to cut windows into sloping roofs or have windows that overlap each other and all sorts of other weird cases - but those don’t happen in the real world - so your GUI should prevent them from happening.

Basically, it is not the job of WebGL (or OpenGL) to manage your geometry. That’s your job…so don’t expect the graphics API to do anything much smarter than drawing a heck of a lot of triangles…because that’s basically all it does.