0

I am currently creating a web configuration tool to create very simple buildings. I already have managed to create a layout editor with which you can arrange the 4 walls of the bulding via drag and drop and then see the result in 3D. The layout editor is a simple 2D canvas and the 3D stuff is done with WebGL. I create the 3D mesh from the previously created 2D layout and a default height.

Now I want to go a step further and offer a function to add windows and doors. Therefore, I also want to use a 2D canvas on which you can add and move them (per wall) via drag an drop. Then I again would like to show the result on the 3D model. I do not need the doors and windows to be actual parts of the mesh. It'd be enough if they are just textures placed correclty on the model.

The basic model already has a plaster texture. I would now like to place the images of doors and windows on top of that "base" texture (see images). What would be the best way to achieve that in WebGL? I actually have no Idea how to start, because the usual texturing concepts do not apply in this case.

This is the current state of the 3D model: enter image description here

This is what I want it to look after adding a window (with an actual window texture of course): enter image description here

Thanks in advance!

Nicol Bolas
  • 449,505
  • 63
  • 781
  • 982
coolaturon
  • 127
  • 2
  • 8

1 Answers1

1

There is no truly "easy" way. There are just various methods and their tradeoffs.

One is using projected textures.

The disadvantage of this method is a new shader is needed for each extra image. In other words you need a shader for no projected texture, a different shader for 1, yet a different shader for 2, and eventually you run out of uniforms and hit the limit.

Another is to use decals. Decals are similar to projected textures except instead you generate a new model via the projection that consists of only those triangles the image would touch. You then apply the image to that model. This has the advantage that each image becomes a separate thing to be drawn so no extra shaders needed. There's a working decal example here. It's a three.js example but you can dig through the source to figure out how it works for your own WebGL stuff.

Another would be update the texture on the cube itself with the window drawn in the correct place. This easier said than done since to apply the new image to the texture you'd need to project it via the UV coordinates. This would also require no part of the model to reuse any part of the texture otherwise when you apply the image unrelated parts would be affected. This example shows computing the UV coordinates from a cast ray. Again it's three.js but you can dig through the source to figure out the math to apply to your own WebGL

Of course if you just want an image on the side of a box you can just make a plane for the image and let the user drag it around.

gman
  • 100,619
  • 31
  • 269
  • 393