I was reading through the documentation of the Lottie format and in the advanced section, tips for rendering, it says:
Rendering an ellipse using bezier curves is outside the scope of this document.
This makes me think that either Lottie uses rational bezier curves or when drawing ellipses it is just drawing a good approximation. I understand that Lottie is just the format and there might be different implementations of it, but maybe there is an agreement to use rational or non-rational bezier curves.
So my question is: Does Lottie use rational bezier curves or not?
Related
I have a line art texture applied to an object in 3D space. The default behavior is for the object and the texture to receive perspective scaling based on the perspective model view projection matrix. Is there any established technique to keep the positioning and scaling of the 3D object, while keeping the line width constant relative to the screen? The desired effect is as though a pen (fixed screen width) were used to trace a path on the 3D object.
Would something like SDF-based font rendering help?
Or maybe some kind of projective texture mapping?
Or render the object and texture to a buffer and expand the lines using edge detection?
Unfortunately, I'm using OGL ES 2, so I can't use a geom shader or anything like that.
The solution I came up with is inspired by procedural SDF generation, like #Felipe suggested, combined with Chris Green's Improved Alpha-Tested Magnification for Vector Textures and Special Effects.
Basically I hand draw shapes into textures using pure red, green, and blue. Then I render the scene using those textures, and generate an SDF on the fly in a second render pass. The SDF generation uses Green's algorithm with a small spread to improve performance. The SDF is then passed to a final render pass that thresholds and antialiases the SDF per Green's approach, using fwidth to maintain a constant line weight regardless of the distance of the object to the camera.
Since the original question was just for the approach/concept, I'm not posting an example at the moment. But I'll see if I can put together a shadertoy sometime soon.
You could create the texture procedurally in a fragment shader and use the size of a pixel for interpolations.
See:
FabriceNeyret's blog
Demo Image : http://i.picpar.com/bzH.png
I want to build a smart bezier curve like this. There are 100 targets (grid) in the map. I know the source point (Rocket), and the target point (Grid). How to calculate two control points to build a beautiful bezier curve which can not across the blue map?
Find curve bounding box and then check if it is contained in blue map rectangle. If it will be outside move control points respectively.
Assuming that you are using cubic Bezier curve (4 control points) for first try You might set some default coordinates of curve control points:
P1(p0.x-10,p0.y+10)
P2(p3.x-10,p3.y+10)
I do not know what language/libraries You are using but it might have Rectangle.Contains(Bezier.BoundingBox) function which might make things easier.
Are any tutorials for explaining how to draw a cylinder or sphere using the OpenGL Shading Language?
Are any tutorials for explaining how to draw a cylinder or sphere using the OpenGL Shading Language?
No, because that's not what GLSL does (well, actually using geometry shaders and tesselation shaders it could be done, but that's not what GLSL is for).
I am creating a heat map as an overlay for an image, the sections of the heat map are not rectangles and thus makes it a bit more difficult to overlay a color because when you overlay a color of the image it also hits the transparent pixels of the image. What is the best way to go about this?
The first image is what I am trying to overlay, and the second is the end result I am looking for...
Use Bézier paths, Bézier paths, Bézier paths, or Bézier paths.
See also the section of the Quartz 2D Programming Guide about Bézier paths.
I'd like to generate and draw some bezier paths based on an image in my app. The image will be really simple (black lines on a white background) such as the following:
Is there a method to process the image and create a bezier path based on the black lines? I'm completely lost here.
If you're wondering the reason for needing the image to be a bezier path, I'm going to be comparing the generated bezier path with another bezier path that the user draws (basically a picture-password that the user will have to draw).
If there's a better way to accomplish comparing an image to a bezier path, I'm all ears. Or, if bezier paths aren't the way to go, then let me know. Thanks!
Why not do it the other way around?
let the user draw the path
create an image from the drawn path using core graphics
compare both images with a framework like opencv
You cannot do this with bezier lines. Those are curves, while what you want is lines.
If you wanted to solve for control points though the solutions for this inverse problem
are infinite therfore you must set the number of control point that the bezier curve has.