Is there any way to use more than one material for Line geometry, in similar fasion it's used for Faces?
Basically what I need is a grid with dashed lines, and every 4-th line should be solid.
Related
I'm working on a three.js project that requires crisp, thick 2D lines.
Because of limitations in the ANGLE layer, the WebGL renderer on Windows doesn't allow thick lines with LineBasicMaterial.
To get around this, I'm expanding polylines in a vertex shader using three-line-2d. This works by pairing BufferGeometry with a simple ShaderMaterial.
Visually, I'm happy with the result.
Now, I'd like to detect mouse interactions with these lines. The usual Raycaster techniques don't work. I suspect that this is because my lines lack geometry that three.js understands (because I'm expanding in a shader).
My question: What are my options for picking these lines? Do I need to extrude outside of the shader, or are there other good options?
I'm trying NPR with three.js. I'm new with computer graphics. I want to extrude the lines segments and put textures on it. Is it possible to put texture after extruding the line segments using ExtrudeGeometry or should I first triangulate the lines, and then put texture on it?
Thanks in advance.
I just started to fiddle around with WebGL and three.js.
I would really like to create a thick line, which has rounded corners and endings. (see example picture)
Unfortunately I see that firstly the LineBasicMaterial's linecap property does not really work.
Three.js LineBasicMaterial
I started to think about using a tube, but then I think I will still not get a round cap...
Does someone have any ideas how I could create a line in the picture above? It does not necessarily have to made with three.js but WebGL would be a requirement. (I also want to animate this line further on...)
Thanks for any hints.
Cheers
There are a couple ways to draw 3d volumetric lines. The first is to do a vertex expansion in the shader. This is what the links in the comments do. Here is another one in case you need more material: http://codeflow.org/entries/2012/aug/05/webgl-rendering-of-solid-trails/.
Unfortunately it have visual artifacts when the line segment is viewed directly heads on. Check out the demo here: http://codeflow.org/webgl/trails/www/. Spin the scene around and you will notice some line segments facing directly towards the camera will spin rapidly. It looks a lot worse with a less noisy texture btw. If this is fine with you this is probably the preferred option.
The 2nd option is to just dynamically generate a capsule mesh for each line segment. Not much to say about it, beyond that this is a simple, abet somewhat inefficient method.
The 3rd option is to do a limited kind of ray tracing in the shader. Calculate the distance between the line segment and the fragment being shaded and we can use that to determine the appropriate color. Here is a link for that. Geometry shader is not currently supported in the webgl but there is nothing stopping you from generating the bounding line cuboid via javascript. Oh and if you need soft lines you probably need the blend_minmax extension. Probably the hardest method to setup but can be viewed at any angle and very customize-able compared to the other 2 methods.
I want to be able to show or hide the diagonal lines in the wireframe of my PlaneGeometry mesh, as well as being able to show or hide vertical or horizontal lines. Is there a way to do this and retain the triangles in my mesh? I already have 'wireframe: true' set on the material and can color it. I've been able to do this in the past with OpenGL, is it possible with Three.js?
You can use, or modify to your liking, src/extras/helpers/GridHelper.js.
There is also src/extras/helpers/WireframeHelper.js.
See http://threejs.org/examples/webgl_helpers.html
EDIT: THREE.EdgesHelper has been added to the library. It will not render the diagonal lines of flat faces.
three.js. r.65
For performance reasons, I would like to migrate to BufferGeometry instead of Geometry. It works great for Mesh and ParticleSystem objects, but when setting the geometry of a Line to a BufferGeometry, initLineBuffer() expects a geometry.vertices Vector3 array which a BufferGeometry does not have.
The call stack:
render --> initWebGLObjects --> addObject --> initLineBuffers
Is there a simple solution for this, or do I need to hack? ;)
BufferGeometry does support lines now. Look at webgl_buffergeometry_lines.html example.
It looks like right now BufferGeometry will only draw out to triangles, so you you cannot have it draw lines (unless you do something like make the two of the three triangle vertices the same, but that is pretty hacky). It supports meshes and particles, so maybe soon it will support lines. Here is the line in the source