1

Commonly, techniques such as supersampling or multisampling are used to produce high fidelity images.

I've been messing around on mobile devices with CSS3 3D lately and this trick does a fantastic job of obtaining high quality non-aliased edges on quads.

The way the trick works is that the texture for the quad gains two extra pixels in each dimension forming a transparent one-pixel-wide outline outside the border. Due to texture sampling interpolation, so long as the transformation does not put the camera too close to an edge the effect is not unlike a pre-filtered antialiased rendering approach.

What are the conceptual and technical limitations of taking this sort of approach to render a 3D model, for example?

I think I already have one point that precludes using this kind of trick in the general case. Whenever geometry is not rectangular it does nothing to reduce aliasing: The fact that the result with a transparent 1px outline border is smooth for HTML5 with CSS3 depends on those elements being rectangular so that they rasterize neatly into a pixel grid.

Community
  • 1
  • 1
Steven Lu
  • 41,389
  • 58
  • 210
  • 364
  • 1
    What if there are many such quads (or really, triangles) forming a mesh? *Any* gaps are terribly distracting. –  Jan 23 '13 at 21:24
  • I don't see how there would **necessarily** be any gaps. It would likely require tweaking parameters or rendering the texture in ways that are unreasonably complicated, but if a particular pixel ends up with the right interpolated alpha-value from the texture (matching up with its geometric coverage), it'd be correct (with, say, additive blending)... It does appear though that having any kind of perspective would mess it up. – Steven Lu Jan 23 '13 at 21:30
  • Well, then, that's a very good reason not to use it. (Initially to me, it seems like to avoid the gaps the alpha has to be rendered *outside* the polygon/triangle clip; otherwise the alpha texture could only be applied inside the clip.) –  Jan 23 '13 at 21:32
  • yeah it would need vertex offsets... honestly, this is probably the worst idea ever. – Steven Lu Jan 23 '13 at 21:55
  • Edge-based AA has been used before. PS2, for example, supported it in hardware. In reality it was largely unusable, as for one thing it requires a perfect back->front sort of your polygons, as it depends on alpha-blending. – JasonD Jan 24 '13 at 11:04

1 Answers1

1

The trick you linked to doesn't seem to have to do with texture interpolation. The CSS added a border that is drawn as a line. The rasterizer in the browser is drawing polygons without antialiasing and is drawing lines with antialiasing.

To answer your question of why you wouldn't want to blend into transparency over a 1 pixel border is that transparency is very difficult to draw correctly and could lead to artifacts when polygons are not drawn from back to front. You either need to presort your polygons based on distance or have opaque polygons that you check occlusion of using a depth buffer and multisampling.

Joe
  • 2,008
  • 1
  • 17
  • 25
  • Do you have any evidence that the outline is drawn as a line primitive? – Steven Lu Jan 29 '13 at 08:38
  • Yes, if you look at the definition of the outline (http://www.w3.org/wiki/CSS/Properties/outline), you will notice that there is a style that can be solid, dashed, dotted, etc. This means that the outline is considered to be a stroked shape, as opposed to a filled shape like a quad or triangle. Stroked primitives are often drawn differently from filled primitives, and it appears that in this instance they are drawn with antialiasing, whereas the solid primitives are not. This is probably because it is easier (and arguably more important) to draw antialiased lines than antialiased solids. – Joe Jan 29 '13 at 19:18
  • I still believe that the elements get drawn onto a texture render target, and these (as single textured quads) are what get manipulated by the `transform` styles. Are you suggesting that the lines are stroked using the transformed vertices? This is what I strongly disagree is the case because many/most modern GPUs do not seem to support proper (fast and/or variable width) line drawing. Pure horizontal/vertical lines, of course, require/benefit from no antialiasing. – Steven Lu Jan 30 '13 at 00:52
  • I'm not sure why you think that texturing is involved. Can you point to evidence supporting that claim? The discussion you linked said nothing about textures. It isn't clear to me how you think texturing is used either. Rendering to a texture will be identical to rendering on screen. As for hardware support of line drawing, my experience is that GPUs are reasonably fast at drawing antialiased lines, which is enabled with the OpengGL API via `glEnable(GL_LINE_SMOOTH);`. You can set line width with `glLineWidth(float)`. This gives at least thousands of lines at 60fps. – Joe Jan 31 '13 at 04:15