Is it possible in Three.js to interpolate two meshes like this? At the area where they intersect should have a nice smooth transition.
I think I've seen it somewhere, but I can't find it.
EDIT
The metaball/cube concept is much closer to what I'd like to achieve:
https://www.youtube.com/watch?v=f42zr__yW_Q
http://threejs.org/examples/webgl_marchingcubes.html
I found the way to do it. It's called raymarching distance fields.
Here's an example:
https://www.shadertoy.com/view/4dsGRl
Also a presentation:
http://www.iquilezles.org/www/material/nvscene2008/rwwtt.pdf
Related
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'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!
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 am trying to create a simple example with three.js. I have a bunch of triangles making up a volume. It seems triangles are incorrectly ordered -- or rendered in weird order. Here is the example you can see:
http://urlmin.com/qlp
just rotate the view around and see the view flickering.
The behavior is same with canvas or webgl renderer.
Please note that I am not using lights. Each triangle is colored slightly differently.
I must be missing something really simple. Let me know you think. Thanks!
JSFiddle here http://jsfiddle.net/aR8wr/
Your camera NEAR plane is very small and FAR plane very big. This results in less precision in rendering, floating point errors, and thus, flickering. Setting those variables to for example 0.01 and 1000 gets rid of the flickering.
It still looks weird from some angles. I'm not exactly sure what causes it, but it might help if you divide your model into smaller triangles. Alternatively, you can use WebGLRenderer, where it works perfectly as long as you set more sensible values to NEAR and FAR.
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!