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.
Related
I've seen this answer to how to create a 3-dimensional button in AFrame, but I was wondering if there was a better way to accomplish this. If there isn't, could somebody please clarify how the rotation/position attributes for the text work (e.g. where the axis of rotation is, where the position is based around relative to the cube, etc.). Thanks!
Depends on which implementation of text you are using. WebGL has no inherent concept of layout like the 2D web. There are upcoming implementations of text which will make it easier to layout and size.
For now, if a text implementation doesn't have any concept of layout, I would use the A-Frame Inspector (<ctrl> + <alt> + i) to manually place your text.
If you want automatic layout in relations to a mesh, you could also try computing the bounding box of the mesh and the text, and automatically centering/aligning the text.
Is it possible to animate text/object with 'end' in after effects just like you do with strokes? How can I achieve this? See the video and you'll understand what I wan't to achieve.
YouTube - Guy showing the 'end' on a stroke
Cheers,
Tommie
I think I see what you are asking. You want the shapes of a text layer (the actual lines of each character) to actually build on, right? Can't be done like that. Even if you use text and convert to shapes, you are looking at a world of pain because of the way letters are built by most fonts (for one thing, the shapes are actually filled, not stroked -- strokes are outlines).
The only way I would do this is by using the Element 3D plugin in After Effects and Cheetah3D (or whatever 3D tool you want to use). In Cheetah, I'd create the text shapes as extruded 3D text. Then I'd use the "Build" modifier ("Linear" setting) to progressively build the text. Then I'd export that out as an OBJ sequence (script for this is available on cheetah forum site -- I wrote it) and bring that sequence into Element3D and work with it that way. That will work. And as far as I know, that's the only way with a decent amount of control. Wedding video? Just curious. :-)
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.
We are desperate to convert an image so that it can be used as an image map. Everything I have tried, really doesnt cut the mustard. I havent the experience to work at very high resolutions.. plus I dont know the terminology and neither have the skills or resources to invest in learning how to do this, knowing many others on here and the internet have far greater experience.
I have downloaded and played with Inkscape, but really am going round in circles...
So thought I would ask here.
What I am after is similar to Raphael Australia Map or David Lynchs, http://davidlynch.org/js/maphilight/docs/demo_usa.html
No frills, no effects, just change the state color of the map on hover and retain that event on click.
Here is what we have ...
What we have is a MAP like this.
We lost the original file, which was pure gray. I have this left :(
Anyway, we want it so that each state ( including the territory ACT ) not indicated on the above map, represented in pink #ec008c . On hover
Map needs to be FLAWLESS !! Also require that any imagery must be png and transparent bg.
Must remain exact size as above. Must be extremely accurate on svg coordinates, and optionally would like the STATE text to appear , like the QLD is shown on the image above, but not wholly necessary.
Can anyone point me in the right direction please.
Have you tried Path > Trace Bitmap in Inkscape? If you play with the settings you should be able to get a decent vectorised image.
Vectorised:
EPS:
http://dl.dropbox.com/u/13402937/Australia.eps
Adobe Illustrator:
http://dl.dropbox.com/u/13402937/Australia.ai
try to use this tool, its the potrace part to trace pixelpictures in inkscape with many features. potrace traces pictures from commandline
I have obtained extraordinary results with https://vectormagic.com/ , which can be tried online.
I'm creating a web app in ASP.NET like this one:
http://www.zazzle.com/cr/design/pt-mug
I know how to do everything except wrapping an image around an object.
It would be a simple task to do if I would only have to stack an image on
top of the other, if they were flat, but if it is a round object, as this mug
is, it's kinda tricky.
My first guess was to create some sort of algorithm for GDI+ that would
simulate "wrapping" image around an object (actualy it wouldn't be an 3d object,
it would just be a screenshot of it).
I figured it would be to raw approach and it would result in very bad quality,
if I could ever make it work.
So, my second guess was to implement somekind of 3d renderer to whom I would
give an image map for some object, it would render me that image onto an object
and in real time return me rendered image. Is that posible?
Is there any other way? Where do I start?
If you are willing to try a commercial product, my company makes a raster processing SDK for .NET called DotImage. If you try it, take a look at PolygonTransform. You supply a polygon as a list of points, and the class warps the image to fit inside the polygon. If you need sample code for it, let me know.
It might be some sort of OpenGL 3D rendering, but an image could easily be morphed in a purely 2D way for this effect. Horizontally, it would need to be squished where it goes off the side of the cup. Each column of pixels needs to be shifted vertically by varying amounts depending on which column - such that a horizontal line the image would become like a "U" shape. With the right parameters, such a morph could mimic the proper 3D shape. Lighting effects could be applied to, by brightening/darkening the image a bit in the right places.