When I'm trying to make inner extrude of multiple polygons it extruded them unevenly. I can see that coordinates are slightly moving as well. Please help to understand how to solve this. See the image below.
Found the answer to my question. To solve this you need to set the Offset Variation to zero to prevent randomization. See the image attached.
Related
Turns out I’m working with the Autodesk Forge viewer and Three.js, trying to render 2D text that can be interacted with (specifically select, rotate, and move).
To do this I am working with meshes (using MeshBasicMaterial, Mesh and TextGeometry) but it turns out that the text does not look perfectly sharp, it presents aliasing and I found that according to the API reference, the antialiasing is not applicable to 2d.
Here are some examples of the problem, as you can see, the more I move away from the plane, the worse the text looks (and even up close it doesn't look perfect):
I have tried to make a test representing the text with a Sprite (despite the fact that it would mean having to change the entire implementation already made with meshes of other functionalities) but apart from the fact that I cannot see it, I have seen example images and they do not appear either well: aliasing is visible from a distance and it looks really blurry up close. Here some examples:
Is there a way to correct this problem or is this the most I can get in 2D? I've tried searching for information on this but can't find anything helpful. And what has puzzled me the most has been realizing that antialiasing was not applicable in the case of 2d, like making it clear that nothing can be done to fix it.
I would be very grateful if you could solve my doubts, thank you very much in advance for your help.
An easier alternative, is to just use a higher pixel ratio for the renderer...
window.devicePixelRatio=2;
viewer.resize();
For example, using the custom geometry text, from Joao's demo, you can see the same aliasing issue at DPR=0.5 and DPR=1.0 ...
https://joaomartins-forge.github.io/textgeometry-sample/
But when I set the DPR=2.0, the text looks clean. The trade off is rendering performance, but your 2D drawings may be simple enough that it won't matter. You can use a 'mouse up' camera settle trick, to switch between DPR of 1 and 2, if you want a better UX experience.
There are a few ways to solve this aliasing issue for 2D (and 3D text).
The way I would recommend for your use case, is to use DIV elements (THREE.CSS3DRenderer), instead of text converted into three.js tessellated triangle geometry, as shown in this blog post:
https://forge.autodesk.com/blog/how-do-you-add-labels-forge-viewer
You can find out more information about THREE.CSS3DRenderer here:
https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer
and an Example here: https://threejs.org/examples/#css3d_periodictable
Using CSS3DRenderer instead of CSS2DRenderer, means you will get the correct scaling (and rotation) of the div element as you zoom into your 2D drawing and the mathematics inside the calculation for the matrix transform has less edge-cases.
Once you are using DIV elements for your text, you will notice that the text is sharper and has no aliasing issues. That's because it is not being rasterized by the webGL pipeline, but by the SKIA library used by chrome/firefox/opera/etc for rasterizing text.
There is one final option, that uses signed-distance fields, but it's probably overkill for what you need.
Let me know if you want some example code.
I've an image like the one in the following link
https://www.freecodecamp.org/news/how-to-center-an-image-using-text-align/
I want to cut and move one half of the image close to the other (one building close to the other in the example image share above). In real case, I have a similar image with white space in between. To cut one part of an image I do Object-> Clip -> Set on the selection. This crops the selection alone. But I am not sure how to select and move the selection.
Could someone please help?
Duplicate the image, then clip both images to the two parts that you need. Then use snapping to move them both together exactly.
Or (better), use a raster graphics editing tool of your choice and do the same. While the above-described workflow works, Inkscape, being a vector graphics editor, is not the appropriate tool for this kind of thing.
I'm working on a floor design app that allows the user to pick preset floor images and view them within a preset room image.
My problem is I'm struggling to get the perspective of the floor image to match the room image properly. I have played around with setting the height of the viewpoint and the tilt but is there a way to calculate what these should be by using the real world measurements of the floor and room image? My knowledge in perspective drawing is very limited so I apologise if I'm using the wrong terminology.
Any help or advice would be appreciated.
Thanks
You should try to find the vanishing point of the structural lines of the room. There are many line-finding algorithms for this.
You have to find two vanishing points, for the two main directions of the floor. On your example, one vanishing point is at the convergence of all red lines, the other one is far on the left side, at the convergence of he blue lines.
Once you have this, you can build a regular tiling starting from these two points:
To map a texture on the floor, you just have to find the bounding rectangle following the tiling:
to stretch your texture inside it:
and to remove extra parts and apply shadows:
I want to make the whole webpage into a graph, like a blueprint (the colour scheming). And then i want to plot a graph in the same page. So should i use some code to make the grid or should i just make an image file and make it the background.
The grid should be preferably something like this : Graph, or with the proper coloring Blueprint Graph
If code is suggested, please give an overview of how to do so.
Thank You.
This sounds like something you could do with HTML5 Canvas, although maybe that's above and beyond what you're looking for. Here's a pretty good free course that has relevant examples.
Since you're going to be plotting points on the graph, your best bet is to create an element, such as a <div>, and give it a fixed width and height. Then apply a background image of the graph paper to that element. You'll need to use absolute positioning when plotting points, so it's key that the graph stays in place and doesn't get skewed based on differing viewports.
If you wanted the entire viewport to be a graph, you'll need to reference the upper-left corner when plotting points (start at 0,0) since users' browsers will have varying widths and heights.
I have a very complicated site built on CSS3 that has html elements 3d-transformed, rotated, flipped, flopped and just generally distorted.
I'm trying to figure out the on-screen location of one of these elements and don't see any way to do so. I was wondering if anyone has any ingenious ideas.
Alternatively, if anyone can explain the math behind -webkit-perspective, I can figure out the position as that's the only thing I'm not sure how to model.
Have you tried using getBoundingClientRect()?
I've used it successfully in the past to calculate the dimensions of elements that have been transformed with the transform property.
The problem is, that the CSS3 transformations doesn't actually change the position of the elements in anyway. Of course the browsers "know" that they are repositioned, because it renders them, but this information is not provided back to the DOM/API.
The only thing I can think of, is to calculate the positions based on the transformations yourself, since these are "simple" matrix transformations.
Unfortunately Algebra class has been too long ago, that I can't tell you anymore how to do it - only that it is possible.
Using getBoundingClientRect is a good idea but will only give you the coordinates of the rectangle that contains your shape, not the exact coordinates of the 4 topleft, bottomright, bottomleft, topright corners.
You'd only be able to do this by taking each of those non-transformed coordinates and applying the transform via javascript.