I mean not bounding box and bounding sphere, but exactly pixel perfect, I mean.
Maybe shader or special renderer? Give different colors to different meshes, and by rendered colors detect what objects were selected?
After three days of googling, I haven't found a single answer on the Internet. Help, please.
For example, this Box should not be selected:
How does Blender do it? If I select many objects, he clearly understands what I have selected. Do you have any ideas about their algorithm?
Maybe we can paint objects in the scene in different colors, and render the scene, and then use the pixel colors to understand what colors are visible? And so we exploit the parallel nature of the graphics card? Its like raycasting, but by every selection pixel.
There is now a feature request at GitHub: github.com/mrdoob/three.js/issues/20530
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 need to add this classic effect which consist in highlighting a 3D model by stroking the outlines, just like this for example (without the transparent gradiant, just a solid stroke) :
I found a way to do this here which seems pretty simple and easy to implement. The guy is playing with the stencil buffer to compute the model shape, then he's drawing the model using wireframes and the thickness of the lines is doing the job.
This is my problem, the wireframes. I'm using OpenGL ES 2.0, which means I can't use glPolygonMode to change the render mode to GL_LINE.
And I'm stuck here, I can't find any simple alternative way to do it, the most relevant solution i found for the moment is to implement the wireframe rendering myself, which is clearly not the easiest solution. To draw my objects I'm using glDrawElements with GL_TRIANGLES as primitive, I tried to use GL_TRIANGLE_STRIP as primitive but the result is definetely not the right one.
Any idea/trick to bypass the lack of glPolygonMode with OpenGL ES? Thanks in advance.
Drawing Outline or border for a Model in OpenGL ES 2 is not straight forward as the example you have mentioned.
Method 1:
The easiest way is to do it in multiple passes.
Step 1 (Shape Pass): Render only the object and draw it in black using the same camera settings. And draw all other pixels with different color.
Step 2 (Render Pass): This is the usual Render pass, where you actually draw the objects in real color. This every time you a fragment, you have to test the color at the same pixel on the ShapePass image to see if any of the nearby 8 pixels are different in color. If all nearby pixels are of same color, then the fragment does not represent a border, else add some color to draw the border.
Method 2: There are other techniques that can give you similar effects in a single pass. You can draw the same object twice, first time slightly scaled up with a single color, and then with real color.
Using THREE.Shape, I can create holes, but rather than holes, I wish to define a clip mask.
I ONLY want to render the shape within a mask, similar to html's canvas/context .clip()
Is there a way to do this using holes or other method?
EDIT:
So, more background, I was using canvas to render segments, and imported them into three as planes.
The mouth was 1 canvas, and I was able to clip mask the teeth and tongue onto the black part.
See the whole movie at http://zsenji.com (rendered using the old canvas method)
Anyway, now I'm updating everything to use threejs and no more canvases rendered as planes.
I'm going to try three csg , which can hopefully intersect two geometries. https://stemkoski.github.io/Three.js/CSG.html
Then all I would have to do would be extrude the black of the mouth, and intersect it with the teeth/tongue. I will update
It worked.
I used very simple intersect, similar to https://github.com/chandlerprall/ThreeCSG/blob/master/examples.html
It's a little slow and there are still some other problems relating to overlapping paths, but for this issue, this was the fix.
All the different fills you see are three shapes
I'm trying to highlight meshes (animated characters etc) in my game on a mouse-over event.
They have multiple textures and sometimes skin.
I thought I would wrap them into a ShaderMaterial and on hit-test change uniforms to brighten it up with a fragment shader.
To do this, can I somehow just manipulate the regular shading?
Can I mix multiple materials, making my shader take color values from the standard shader and just tweak them?
Or do I need whole separate render pass and blend it with composer?
Or maybe just something else entirely, like ambient light applied to just one object/shader?
Thanks for any suggestions.
repost, see comments for details/discussion:
"you could change the whole material/shader on mouse over, although i guess this is somewhat performance intensive, depending on the number of switches the user usually does and what the rest of your app is doing. What i used once is the emissive color of the regular phong material with material.emissive.setRGB() for example. This will give you some nice effects, too".
There are some examples of this that you can probably learn a lot from. Take a look at their source:
Mouse over meshes
Interactive cubes
In addition to what GuyGood said, if you do indeed decide to use .setRGB() on your material you need to use the values of Red Green Blue ranging from 0 to 1 as documented in the Three.js Documentation
Or if you prefer, like I do, the .setHex() function also exists.
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!