I created a model in Blender of a block with a hole in it:
I export it as an .obj file, and import it in ThreeJS with the OBJLoader add-on.
When I use it in my app, it appears to draw a face over the sides of the hole:
Is there a setting I need to use in ThreeJS to avoid having it close over gaps like this? Or is the problem in how I'm creating the model? I'm totally lost here, any guidance appreciated.
EDIT: I discovered through trial-and-error that the problem is having irregularly-shaped faces, like the ones adjacent to the hole. I "solved" my problem by triangulating the model; while this changes its shape slightly, it ensures that every vertex in the hole is part of a triangle face, which seems to be the magic answer.
I'm still very curious about why this is, especially since the triangulation has made the corners of the box a bit weird.
EDIT 2: Sorry for the delay. Here's the blender file: https://gofile.io/?c=EoxH1r
The problem you are having is because of ngons (polygons with more than 4 sides).
Modelling for three.js is just like modelling for games, so it is best to avoid polygons with more than 4 sides because when the renderer (or video card, I dunno) tries to render the model, it has to apply triangulation and may do it in an unexpected way.
As you said, applying triangulation to the model fixed the issue, but automatically applying triangulation in your modelling app may also yield unexpected results. So your best bet is to alter the model so you get the results you expect.
Here is a youtube video I found that seems to explain a lot about ngons.
https://www.youtube.com/watch?v=BjnCV2PIkKA
(though I only watched the first minute or so)
Here is an example of how I would do it, red lines representing added edges. Remember to do it all the way around on both sides and apply your smoothing groups before exporting.
Related
I am displaying a number of different models simultaneously in three.
Some models have the same texture, and it can make it hard to tell where one starts and another ends.
As an example, first image is from my three viewer, second image is from Blender:
It is not obvious in three where the two objects intersect.
I've so far attempted to alter lighting and material settings but have been without success on that front.
I also tried an outline post processing effect but due to what I think is a disorderly output from Sketchup (where the models were made) the outline effect is chaotic:
I am trying to find a good way to clearly delineate between models.
Raycaster from mouse position. De-emphasize the other models' opacity or something. Or if you're serious, you could try the clipping stencil. There's some really good examples for mesh BVH that demonstrates this. https://gkjohnson.github.io/three-mesh-bvh/example/bundle/clippedEdges.html
I'm trying to render a fairly complex lamp using Three.js: https://sayduck.com/3d/xhcn
The product is split up in multiple meshes similar to this one:
The main issue is that I also need to use transparent PNG textures (in order to achieve the complex shape while keeping polygon counts low) like this:
As you can see from the live demo, this gives really weird results, especially when rotating the camera around the lamp - I believe due to z-ordering of the meshes.
I've been reading answers to similar questions on SO, like https://stackoverflow.com/a/15995475/5974754 or https://stackoverflow.com/a/37651610/5974754 to get an understanding of the underlying mechanism of how transparency is handled in Three.js and WebGL.
I think that in theory, what I need to do is, each frame, explicitly define a renderOrder for each mesh with a transparent texture (because the order based on distance to camera changes when moving around), so that Three.js knows which pixel is currently closest to the camera.
However, even ignoring for the moment that explicitly setting the order each frame seems far from trivial, I am not sure I understand how to set this order theoretically.
My meshes have fairly complex shapes and are quite intertwined, which means that from a given camera angle, some part of mesh A can be closer to the camera than some part of mesh B, while somewhere else, part of mesh B are closer.
In this situation, it seems impossible to define a closer mesh, and thus a proper renderOrder.
Have I understood correctly, and this is basically reaching the limits of what WebGL can handle?
Otherwise, if this is doable, is the approach with two render scenes (one for opaque meshes first, then one for transparent ones ordered back to front) the right one? How should I go about defining the back to front renderOrder the way that Three.js expects?
Thanks a lot for your help!
I've been trying to render silhouettes on CAD models with webgl. The closest i got to the desired result was with fwidth and a dot between the normal and the eye vector. I found it difficult to control the width though.
I saw another web based viewer and it's capable of doing something like this:
I started digging through the shaders, and the most i could figure out is that this is analytical - an actual line entity is drawn and that the width is achieved by rendering a quad instead of default webgl lines. There is a bunch of logic in the shader and my best guess is that the vertex positions are simply updated on every render.
This is a procedural model, so i guess that for cones and cylinders, two lines can always be allocated, silhouette points computed, and the lines updated.
If that is the case, would it be a good idea to try and do something like this in the shader (maybe it's already happening and i didn't understand it). I can see a cylinder being written to attributes or uniforms and the points computed.
Is there an approach like this already documented somewhere?
edit 8/15/17
I have not found any papers or documented techniques about this. But it got a couple of votes.
Given that i do have information about cylinders and cones, my idea is to sample the normal of that parametric surface from the vertex, push the surface out by some factor that would cover some amount of pixels in screen space, stencil it, and draw a thick line thus clipping it with the actual shape of the surface.
The traditional shader-based method is Gooch shading. The original paper is here:
http://artis.imag.fr/~Cyril.Soler/DEA/NonPhotoRealisticRendering/Papers/p447-gooch.pdf
The old fashing OpenGL technique from Jeff Lander
Using three.js am trying to create a floor that reflects the objects that sit upon it. Preferably the floor material should reflect not like a mirror but in a more 'matte' or diffused way.
To achieve this I looked to Jaume Sanchez Elias who has made a great example using a cube camera: Look for the "smooth material" example on this page:
http://www.clicktorelease.com/blog/making-of-cruciform
Here is my attempt using the same technique. But as you see the reflections are misplaced, they do not appear underneath the mountain objects as expected.
http://dev.udart.dk/stackoverflow_reflections/
I am looking to correct this or to use any other technique that will achieve a more correct diffused reflection.
There are three.js examples using the cube camera technique but they all create mirror-like effects not a soft reflection.
Vibber. Parallax-corrected cubemaps, the technique used in cru·ci·form, only works for closed volumes, like cubes. It works really well to simulate correct reflections inside a room, but not so much for outdoors or open/large scenes. They also can't reflect anything that it's inside the cubemap, you'd have to split the volume in many sub-volumes.
I can think of a couple of solutions for what you want to achieve:
SSR: Screen-space reflections, you can find more info in many places on the internet. It's not the most trivial of effects to implement, and you might have to change the way you render your scene.
Simpler post-processing approach: since you have a flat floor, render the mountains vertically flipped on a framebuffer object, blur it, and render the regular scene on top. For extra effect, render the depth of the flipped mountains, and use that value as the blur radius, to get diffuse reflections.
As always, there's a ton of ways to achieve the (un)expected result :)
I've been fighting with a three.js issue for a few 12 hour days trying to determine why some outward pointed object faces are missing. It only seems to happen if I've modified the mesh model, extruded a plane, or knife projected a hole into a mesh.
I've found a few solutions online that don't seem to be working for me: I've added in the double-sided hack for all materials and this does allow me to see into objects with holes so it is partially working. I've fiddled with different importers (JSONLoader, OBJLoader) which all seem to have the same issues as listed above, so it leads me to believe it is indeed the model itself.
The research I've seen online says that modifying a mesh can leave the normals screwed up so any faces I CAN'T see on my model viewer I just flip and do the UV Map again, but this doesn't fix it.
I'm hoping someone who knows Blender and three.js will know what the problem is. I know it's simple and I'm just missing a step because I'm new.
Here's a link to the demo site and code: http://guitar.dodgestat.com/objloader/
It seems that OBJMTLLoader can handle only triangles and quadrangles, but obj files can describe faces with any number of vertices, but the faces should be convex.
If you check your model with http://3dviewer.net, you can see that every face exists, but there are some issues with non-convex faces.
So I recommend you to triangulate your model before export.