Is it possible to stroke an SVG polyline with an horizontal linear gradient where the gradient's angle changes at every polyline vertex? it would look something like this:
Have a look at tubefy by Israel Eisenberg. There's not currently anything in svg that will give you exactly what you're asking for declaratively. However, tubefy makes use of svg for rendering, and can produce advanced gradients such as the one you're looking for.
Related
I want to draw Hermite Splines in an SVG document.
When looking at the specification of SVG, it turns out that SVG will only support Bézier curves.
One solution is: When generating my SVG document, I could do the interpolation myself, in code, and then write out a whole bunch of linear segments.
However, this will make the SVG output incredibly bloated, as all the sample points along the curve will end up in the document.
Can I have somehow a custom coded curve generation in SVG, which the document viewer will then execute? Does SVG allow procedural content, like PostScript does?
I'm using three.js to render a few geometries on a plane with some basic lighting but why does my donut shape look so low res? It does not look very smooth?
It seems like the mesh of your donut doesn't have a lot of polygons, hence the pointy silhouette. The reason why it's looking normal on the surface, is because of smooth shading. I assume you constructed your donut as a Torus, in which case you can increase the number tubularSegments and radialSegments to get a smoother outline.
I remember in Java2D I could create a stroke which is flow of images or complex shape.
I want to know is this also possible in JavaFX. if yes, How?
How can I create a stroke like the image?
Set the stroke of your shape to an ImagePattern and you will have uniformally patterned strokes.
Looking at the picture in your question, the pattern appears to be distorted (squeezed on the inner curve and stretched on the outer curve).
A DisplacementMap in conjunction with the above patterning technique may perhaps be used to produce similar distortion.
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.
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.
When using an feDisplacementMap svg filter, my smooth svg lines are getting all jagged. I could probably render it large and then shrink it down, but isn't SVG supposed to be able to anti-alias?
Okay, so I figured out the answer to my own question: the filterRes attribute: http://www.w3.org/TR/SVG/filters.html#FilterElementFilterResAttribute
In my testing, on Chrome, increasing the filterRes slows things down pretty dramatically.
SVG filters process inputs at the pixel level, not the vector level. As far as an SVG filter is concerned, it's been handed a big rectangle of RGBA pixels to work with. Results from a displacement map can look pixelated because a filter has no idea where the edges that have been displaced are - it's all just pixels as far as it is concerned. (The old semi-transparent pixels that used to be the anti-aliasing have been displaced as well.) However, sometimes you can add another filter or two to solve any problem that this creates. Creative ways to solve this problem:
Take the post-displacement graphic, blur it with a radius of a few pixels then blend the blur back into the original graphic.
Take the post-displacement graphic, do a luminance to alpha conversion, then use that alpha map with a diffuse lighting effect to add a fake anti-alias lighting effect.
Use a convolvematrix with edge detection values to extract edges from the graphic, blur that result and blend it back into the source graphic.
Depending on your graphic, you might be able to use an erode or dilate filter, but that tends to produce boxy highlights and might not work. And of course, you can always tweak your input in SVG (using stroke effects) to "pre-antialias" your source graphic so the result doesn't look so odd.