I want to draw some parallel lines. At first I used gl.LINES but the problem was that the rendered line was one pixel wide at any point on the screen, whether it was very close or very far from the camera.
So instead, I rendered thin rectangles:
As you can see, they now get thinner as they get farther from the camera, but now I get all these ugly aliasing artifacts. Is there a "correct" way to do this in OpenGL/WebGL?
There's a couple of ways to tackle this.
(1) As others have mentioned, just run with super or multisampling.
(2) Use a shader. If you are using Es2/WebGL you are doing that already. But instead of outputting a constant color, write a color plus an alpha that determines how close you are to the line. And then enable blending with that alpha.
One very easy way to do this is to just map a texture as an alpha channel on your rectangle.
Alternatively you can draw 2 quads instead of one and compute the distance in the shader. Then map the distance with a ramp function to alpha.
If you're using GLUT, you can try something like this-
glutInitDisplayMode(GLUT_MULTISAMPLE);// along with all the other flags
If you're not using GLUT, then you can find a very helpful topin on the subject here.
Every platform allows you to do multisampling after getting the OpenGL context.
Related
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
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.
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'm trying and failing to work out how to achieve a quad-tree of materials (images) on a single plane, much like a Google Maps-style zoomable tile that gets more accurate the closer you get.
In short, I want to be able to have a 1x1 image texture (covering a plane that is 256 units wide and tall) that can then be replaced with a 2x2 texture, that can then be replaced with a 4x4 texture, and so on.
Like the image example below…
Ideally, I want to avoid having to create a different plane for each zoom level / number of segments. A perfect solution would allow me to break a single plane into 8x8 segments (highest zoom) and update the number of textures on the fly. So it would start with a 1x1 texture across all 64 (8x8) segments, then change into a 2x2 texture with each texture covering 4x4 segments, and so on.
Unfortunately, I can't work out how to do this. I explored setting the materialIndex for each face but you aren't able to update those after the first render so that wouldn't work. I've tried looking into UV coordinates but I don't understand how it would work in this situation, nor how to actually implement that in Three.js – there is little in the way of documentation / examples for this specific case.
A vertex shader is another option that came up in research, but again I don't know enough to understand how to construct that.
I'd appreciate any and all help with this, it will be a technique that proves valuable for other Three.js users I'm sure.
Not 100% sure what you are trying to do, whether you are talking about texture atlasing (looking up and different textures based on current setting/zooms) but if you are looking for quad-tree based texturing that increases in detail as you zoom in then this is essentially what mipmaping is and does.
(It can be also be used to do all sorts of weird things because of that, but that's another adventure entirely)
Generally mipmapping is automatic based on the filtering you use - however it sounds like you need more control over it.
I created an example hidden away in the three.js source tree which may help:
http://mrdoob.github.com/three.js/examples/webgl_materials_texture_manualmipmap.html
Which shows you how to load each mipmap level in manually, rather than have it just be automatically generated.
HTH
I'm working on a simple drawing application. My line is constructed using polygons and things look good so far. I would like to add a transparency feature and I used glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); for that reason. However, because my polys sometimes overlap, I get the ugly result shown in the picture (multiple layers of transparency). What I would like to get is the figure in the left(no overlapping because there is no transparency), with an overall transparency.
I guess I could do this by keeping the polys from overlaping, but that would be a overkill for this task I think. There should be a way to control them at drawing time, but being a beginner with OpenGL doesn't help.
I'm sorry, but the way transparency works does not allow you to do what you want without manually keeping the polygons from overlapping. The way that transparency works is that it takes the colour of the surface below it, and uses the blending function you specify in order to calculate the final colour of the pixel.
In your program you are drawing multiple polygons with alpha on top of each other. That means that their colours add up, giving the result you see.
I've never actually written a drawing application, but you could perhaps take a look at triangle strips to draw your lines. They allow you to extend the line point by point, and make sure the geometry won't overlap with itself.