I'm using threejs (R68) on the model online view project which converts some uploaded models to threejs files.
We found some models look incorrect as below.
Some models can be viewed at
http://www.threedbook.com/detail/23981
Especially when move the models(rotate or pan), the mesh color and shade look changing all the time.
Strange thing is that model will look normal if it's zoomed in enough size.
Would anyone point me which causes the rendering problem? or any issue when I convert the models to threejs file?
Thanks a lot!
The modelling of the object is incorrect. You have overlapping polygons over the same area and very close to each other. When rendering, that would cause the appearance to change (specially if you are zoomed out since you dont have enough rendering resolution); ie. many polygons are squashed on top of each other and the renderer doesn't know which one to render first. When you zoom in, everything is ok because now you have the resolution.
I find the similar issue at Flickering planes
I make the near to 1, it works for most models.
Related
I worked with a freelancer to create a few 3D models and I'm now trying to apply materials to them in Xcode, but some of the models are behaving weirdly. When I import the .dae file, instead of the default gray color models usually have, they are part green, part black, and part transparent. When I try to apply a material, the material only applies to the green parts, and any color seems to blend with the green.
The freelancer is at a loss because he says there shouldn't be anything different about the models that are working and the ones that aren't.
I've attached a screenshot of one of the broken models and one of the working ones, both with the same material applied.
Any help would be much appreciated!
I tried playing around with different material settings and searching for materials that were secretly applied to broken model, but to no avail.
I fixed this issue by removing a Colors item that was in Geometry Sources. I'm still not sure exactly what it is (I'm a SceneKit noob), but removing it did the trick.
This answer is just to illustrate the issue you might have with the texture coordinates. If you use one single color and not textures, you'll be good. But if you plan to add some texturing, you might want to unwrap your model in a different way. the following images should illustrate that.
This model shows texture coordinates that looks like a perspective projection and you loose a lot of space. It cannot be textured in a good manner. it should be unwrapped differently (illustration from Blender).
This model here is perfectly unwrapped with non overlapping textures and alomst every free space on the image texture is used for anything (illustration from Blender).
hope I could help in some manner.
I have been trying to instance some tree meshes in react-three-fiber and threejs,
this is what i have got so far: https://codesandbox.io/s/silly-sunset-74wmt?file=/src/App.js
The trees from one angle look see through, I am able to see the barks of ALL trees.
but the behavior is normal from the opposite angle.
To me it seems to be some issue with render order or meshes or the shader, not able to wrap my head around it.
I need the see-through thing to not happen and the set should look like how it looks like in the second picture from all angles
As suggested in the comments byDon McCurdy. I needed to use AlphaClip property on blender while exporting my mesh.
Found an answer here which was quite helpful in understanding the problems with threejs transparency at play
Updated with the solution: https://codesandbox.io/s/silly-sunset-74wmt?file=/src/App.js
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 learing three.js and I faced a z-fighting problem.
There are two plane object, one is blue and the other is pink.
And I set the positions using the flowing codes:
plane1.position.set(0,0,0.0001);
plane2.position.set(0,0,0);
Is there any solution in three.js to fix all the z-fighting problem in a big scene?
I ask this problem because I'm working on render a BIM(Building Information Model, which is .ifc format) on the web.
And the model itself have so much faces which are so closed to each other. And it cause so much z-fighting problems as you can see:
Is three.js provide this kind of method to solve this problem so that I can handle this z-fighting problem just using a couple of code?
Three.js has given a general solution like this:
var renderer = new THREE.WebGLRenderer({ logarithmicDepthBuffer: true });
The demo is provided also here:
https://threejs.org/examples/webgl_camera_logarithmicdepthbuffer.html
It changes the precision of depth buffer, Which generally could resolve the z-fighting problem in a distance.
At least for the planes on your screenshot, you can solve that problem without switching to the logarithmicDepthBuffer. Try to set depthWrite on the material to false for the planes. Sometimes you also have to override renderOrder for meshes.
There is an example
.depthWrite Whether rendering this material has any effect on the depth buffer. Default is true.
When drawing 2D overlays it can be useful to disable the depth writing in order to layer several things together without creating z-index artifacts.
.renderOrder This value allows the default rendering order of scene graph objects to be overridden although opaque and transparent objects remain sorted independently. When this property is set for an instance of Group, all descendants objects will be sorted and rendered together. Sorting is from lowest to highest renderOrder. Default value is 0.
What is your PerspectiveCamera's zNear and zFar set to. Try a smaller range. Like if you currently have 0.1, 100000 use 1, 1000 or something. See this answer
https://stackoverflow.com/a/21106656/128511
Or consider using a different type of depth buffer
I just stumbled across z-fighting using multiple curved planes with front and backside textures placed along the z-axis of the scene. Even though depthWrite would remove the artifacts, I kinda lost the correct visual placements of my objects in space. Flatshading did the trick for me. With enough segments, the light bouncing is perfectly fine and z-fighting is gone.
I am trying to render cylinders for a CAD-like project. As multiple of these will be nested in each other, I am looking to display them similar to this: http://mrwadeturner.pbworks.com/f/1305815353/FC_Cylinder_41702_lg.gif
i.e. I want the outline and the base and bottom circles traced out and the rest should be (semi-)transparent.
Note that this is different from using regular wireframe settings, because that will trace out every face of the sides of the cylinder. The other approach I found - rendering the object twice, once in color and slightly enlarged and once it "regular" version on top - unfortunately won't work either, since multiple cylinders will be nested.
I think this should be possible with custom vertex and fragment shaders, but I am not very proficient in using them. What would be the best way of achieving this effect?
Thanks a lot!
Sound like you just need to apply various textures to the same faces. Next you want to try to create custom texture that is going to be a simple transparent .png image with solid dashed border. Then you'll have to set side:THREE.FrontSide and side:THREE.BackSide to your textures and play around with depthTest.
Another approach is to use lines that you age going to create vertex-by-vertex. See this example for custom line implementation: Hilbert curve and Shapes generation
Hope that helps!