I want to archive the similar distort quality as in Photoshop, maybe the trick is to put in more meshes and smooth out a whole bunch, is there a better way of doing it? something like this:
what is the best mesh setup for a front façade of a building
To achieve a high-quality mesh setup for a front façade of a building in Spine, similar to Photoshop's distort feature, follow these steps:
Create the Mesh:
- Select the image attachment of your building façade.
- Check the "mesh" option at the bottom of the tree.
- Click "Edit Mesh" to start creating and modifying the mesh.
Define Vertices and Edges:
- Use the "Set Points" tool to draw a new polygon around your image, ensuring you cover the edges and key structural points of the façade.
- Add vertices inside the image to allow for finer control over the deformation.
- Keep the vertex count as low as possible while ensuring enough detail for smooth deformation.
Optimize the Mesh:
- Avoid placing unnecessary vertices in blank areas of the image to prevent performance issues.
- Manually adjust the vertices to create a balanced mesh that can deform smoothly.
Deformation and Subdivision:
- Use the "Modify" tool to tweak the existing polygon and ensure it deforms correctly.
- For smoother results, consider using fewer vertices initially and then subdivide the mesh if needed. Spine plans to implement subdivision features like Catmull-Clark, which can help in achieving smoother deformations.
Manual Adjustments:
- Manually adjust the mesh vertices to ensure the façade deforms as desired. This might require some trial and error to get the perfect look.
- If the mesh needs to overlap, consider duplicating parts of the mesh and adjusting weights to avoid z-fighting issues.
Linked Meshes:
- If you have multiple similar façades, use linked meshes to reuse the same mesh structure across different images, ensuring they have the same dimensions and proportions.
For more detailed guidance, you can refer to the following resources:
By following these steps, you can achieve a high-quality mesh setup for your building façade that allows for smooth and realistic deformations.
Misaki
if you keep the mesh simple, you end up with something like this:
if I want it as smooth as Photoshop distort, I would have to subdivide it more, something like this
and smooth out all the vertices, the reason I asked this is I wonder if there's an optimal mesh set up for this particular case (a front façade of something and I think it's a very popular case for some fake 3d rotation animation), I reckon the smoothness of Photoshop distort archives is due to there is a very dense mesh behind the scene, so if you just have a minimal mesh it's not going to be smooth as such.
Hi! To achieve the effect of the first photoshop example, just set the triangles so that the middle line goes in the opposite direction as it currently is to avoid seeing only one triangle distort.
I recommend reading more about meshes structures here:
http://esotericsoftware.com/blog/A-taxonomy-of-meshes
http://esotericsoftware.com/blog/mesh-creation-tips-vertex-placement
As for how to achieve a fake 3D effect, there are plenty of ways, here's one that does a full rotation and can be applied to any geometric shape that doesn't have a curved surface:
http://esotericsoftware.com/blog/Rotating-diamond-tutorial
If after consulting these you still have questions, feel free to go into more detail about the precise use case you need help with!
I'm not entirely sure what you're asking, but if I'm understanding correctly you can achieve a smoothly distorted look by increasing the density of the mesh. If you're just doing this on a rectangular mesh you can continuously click Generate in Edit Mesh mode until you have a mesh you find dense enough. Then in the Mesh Tools view, enable Soft Selection and try moving vertices around on the mesh.