After a couple of days searching i decide to come here to ask if someone knows how to display 3D images (CAD images) in a website using only javascript.
My goal is to display .stp or .igs formats and allow user to interact with.
So far I've found a couple of frameworks:
https://github.com/tbuser/thingiview.js
http://threejs.org/
https://github.com/humu2009/jsc3d
But they are outdated or they don't allow me to display the formats mentioned.
Does anyone had a similar problem to this that can share how to work with?
Another possibility I've thought is to extract jpg images from the above formats and display it with a 360 image view plugin such as:
http://reel360.org/reel
http://spritespin.ginie.eu/
(to mention a few)
Pros:
loads faster
easier to implement
Cons:
Need to convert to jpg
More difficult to implement
Outdated frameworks (except Three.js)
note: I don't need to have any interaction with the image such as go inside the image, make it transparent, explode... I just have to be able to display it like a 360 picture.
Do you have a nice way to achieve this?
Any comments would be helpful.
Thank in advance,
André
Step and IGES are cad formats and most 3d development in webgl is game development. This is on the other side of the art/games tech divide, the CAD format does not describe polygonal models*. So any program that could show these formats would need to have a geometric solver back end called a CAD kernel. No basic 3D framework will do for you. This is on the other side of simple 3D.
STEP is also a hideously complex format doing a importer is hard even with a CAD kernel. I would look for something like opencascade for the job of converting the cad data to polygons for display. Generally speaking there aren't many free B-Rep backends.
You could also use your existing cad app to do this. I doubt you will find a pure javascript version of a CAD kernel.
* think of it like this a normal 3d model is mostly polygonal. But a B-Rep model does not describe polygons but rather the interconnection of mathematical shapes. So before you can display a step of iges file you need to solve it. Start by reading this
Related
I want to scan a Spanish DNI ang get some information and print it in the screen. A DNI has this form: 1
And i want to take the fields DNI, Nombre and Apellidos (in the image, it would be 99999999R, CARMEN, ESPAÑOLA ESPAÑOLA).
I thought that the best way is using "cut tool" and use the OCR in the cut images. What do you think? I have to make the project in HTML/JS and I don't really know how to program this.
Thanks.
This is not an easy task and to do it, you need to do the following:
Make sure you "cut" the image precisely around the borders. This method needs to be robust to lightning conditions, low contrast situations, etc. Ideally, it should use advanced computer vision and ML techniques
Then you need to define where the individual fields are. This is also not an easy task, because the sizes and positions of the fields vary between different IDs.
In the final step, you need to have a very reliable OCR tool, one which would give you a low error rate, so that you actually have a benefit of doing this automatically, compared to just retyping all these fields manually. Although OCR seems like an easy problem today, it's still very hard, especially on ID documents which can be worn out and damaged and taken in weird lighting conditions.
My company Microblink has spent years working on ID scanning, not just for Spanish DNIs, but also for many other document types (there are more than 5000 different types in the world).
If you are interested in reading how we're doing it, here are some of the materials:
Goodbye Templates
BlinkID v5
From OCR to DeepOCR
As for the "cut tool" - we do have a feature that allows you to automatically capture the image of a document and crop it around the edges of the document. We call it "Document capture" and it's a part of our BlinkID SDK.
As for the HTML/JS - it's not clear what exactly you need, but we do have a React Native and Cordova plugins which allow you to build cross-platform mobile apps in JS, and we also have a Frontend SDK and Web API which allow you to scan documents in any browser.
First off, I have very little experience with 3d modeling, so this may be a poorly worded question. If that is the case, then I apologize.
Essentially, I have a large database of COLLADA format 3d models that need to be displayed in a gallery on a website. The number of models is on the order of thousands, so it would be preferable for any type of display format to be automated.
My initial thought was to display these files in 3d using WebGL. However, the lack of support from Internet Explorer is, unfortunately, a deal breaker.
Also, any other Javascript API for 3d model display would probably not be feasible as far as loading time goes, given that these do not involve any sort of hardware acceleration.
My next best option would be to have multiple 2d images of the models taken from various angles. However, with the number of models in this database, it would be nearly impossible to manually output 2d images of each model.
So, my question, then, is this: are there any tools that can be used to auto-generate images from a large set of 3d models? Or, even better yet, is there a way that these images can be rendered directly from the model to be displayed in the browser without an excessive amount of load time?
Thank you so much!
You could use meshtool to generate 2D screenshots from 3D models, either on the command line or from the Python API.
Here's an example from the command line of saving a single screenshot:
meshtool --load_collada file.dae --save_screenshots ss.png
There's also a command to take more than one screenshot, rotating around the model:
meshtool --load_collada file.dae --save_rotate_screenshots ss 10 800 600
This would save 10 screenshots of size 800x600 to files named ss.1.png, ss.2.png, etc. You can also use the Python API of meshtool to do any custom export you want. It uses Panda3D under the hood, which is very easy to use.
I have been learning a bit of jQuery and .Net in VB. I have created a product customize tool of sorts that basically layers up divs and add's text, images etc on top of a tshirt.
I'm stuck on an important stage!
I need to be able to convert the content of the div that wraps all these divs of text and images to one flat image taking into account any CSS that has been applied to it also.
I have heard of things that I could use to screen capture the content of a browser on the server which could be possible for low res thumbs etc, but it sounds a little troublesome! and it would really be nice to create an image of high res.
I have also heard to converting the html to html5 canvas then writing that out... but looks too complicated for me to fathom and browser support is an issue.
Is this possible in .NET?
Perhaps something with javascript could be done?
Any help or guidance in the correct direction would be appreciated!
EDIT:
I'm thinking perhaps I could do with two solutions for this. Ideally I would end up with a normal res jpg/png etc for displaying on the website, But also a print ready high res file would be very desirable as well.
PostScript Printer - I have heard of it but I'm struggling to find a good resource to understand it for a beginner (especially with wiki black out). Perhaps I could create a html page from my div content and send it to print to a EPS file. Anyone know any good tutorials for this?
We did this... about 10 years ago. Interestingly, the tech available really hasn't changed too much.
update - Best Answer
Spreadshirt licenses their product: http://blog.spreadshirt.net/uk/2007/11/27/everyones-a-designer-free-designers-for-premium-partners/
Just license it. Don't do this yourself, unless you have real graphics manipulating and print production experience. I'd say in today's world you're looking at somewhere around 4,000 to 5,000 hours of dev time to duplicate what they did... And that's if you have two top tier people working on it.
Short answer: you can't do it in html.
Slightly longer answer:
It doesn't work in part because you can't screen cap the client side and get the level of resolution needed for production type printing. Modern screen resolution is usually on the order of 100 ppi. For a decent print you really need something between 3 and 6 times that density. Otherwise you'll have lots of pixelation and it will generally look like crap when it comes out.
A different Answer:
Your best bet is to leverage something like SVG (scalable vector graphics) and provide a type of drawing surface to the browser. There are several ways of doing this using Flash (Spreadshirt.com uses this) or Silverlight (not recommended). We used flash and it was pretty good.
You might be able to get away with using HTML 5. Regardless, whatever path you pick is going to be complicated.
Once the user is happy with their drawing and wants to print it out, you create the final file and run a process to convert it to Postscript or whatever format your t-shirt provider needs. The converter (aka RIP software) is going to either take a long time to develop or cost a bunch of money... pick one. (helpful hint: buy it. Back then, we spent around $20k US and it was far cheaper than trying to develop).
Of course, this ignores issues such as color matching and calibration. This was actually our primary problem. Everyone's monitor is slightly different and what looks like red on one machine is pink on another.
And for a little background, we were doing customized wrapping paper. The user added text, selected images from our library or uploaded their own, and picked a pattern. Our prints came out on large-format HP Inkjet printers (36" and 60" wide). Ultimately we spent between $200k and $300k just on dev resources to make it happen... and it did, unfortunately, the price point we had to sell at was too high for the market.
If you can use some server-side tool, check phantomjs. This is a headless webkit browser (with no gui) which can take a page's screenshot, an uses a javascript api. It should do the trick.
Send the whole div with user generated content back to server using ajax call.
Generate an HTML Document on server using 'HtmlTextWriter' class.
Then you can convert that HTML file using external tools like
(1) http://www.officeconvert.com/products_website_to_image.htm#easyhtmlsnapshot
(2) http://html-to-image.acasystems.com/faq-html-to-picture.htm
which are not free tools, but you can use them by creating new Process on server.
The best option I came across is wkhtmltopdf. It comes with a tool called wkhtmltoimage. It uses QtWebKit (A Qt port of the WebKit rendering engine) to render a web page, and converts the result to PDF or image format of your choice, all done at server side.
Because it uses WebKit, it renders everything (images, css and even javascript) just like a modern browser does. In my use case, the results have been very satisfying and are almost identical to what browsers would render.
To start, you may want to look at how to run external tools in .NET:
Execute an external EXE with C#.NET
So I've been working on a project that requires offering the possibility to view the results of a simulation in 2D. Now the solution that was first considered was RGraph. However it seems that now the fact that RGraph's free license requires a link to their page is not in agreement with the client and we need to find some free alternatives.
Now I'm starting to look at JIT and Google Chart Tools but I'm not sure yet either if their license is better that the one of RGraph, or how difficult it would be to make the actual changes.
So basically I would like to know if you have any other javascript libraries that fit the needs (being capable of plotting a 2d array for example and having a free license) or if you have any reason why I should dismiss one of the two libraries I proposed to look at, that would also save me some time.
Thanks,
Bogdan
try flot
http://code.google.com/p/flot/
Ext JS 4 offers a variety of chart types.
I am looking to create a web based GPS skyplot.
Currently just in the planning stages. Was wondering if anyone knew any javascript libraries or such in which this would be best to start with or have a look at, of if you have done something similar before. I know Flot is decent for plotting but unsure if it would be easy in this scenario.
TLDR: Looking for javascript libraries or other alternatives to create a web based GPS Skyplot.
Further info.
I would like to be able to maintain it all generally in javascript / HTML but am open to other alternatives. I will have a server passing me the GPS details.
Skyplot Examples: For those who don't know.
http://www.gpsoftnav.com/skyplot.html
http://www.novariant.com/resources/technologies/skyplot.cfm#
I came accross:Geographic Information Systems (Stack Exchange) yesterday, would make a good site for these kind of questions.
So if anyone is interested in this please also go make a commit :). Otherwise I am still looking for any feedback on the question.
Is it the graphical issues you are concerned with, or are you intending to also calculate which satellites are visible, and their azimuths and elevations at the given location and time?
If it's just the graphical part you are concerned with, I would use jQuery and Keith Wood's SVG plugin - see http://keith-wood.name/svg.html . This gives you a Javascript handle to Scalable Vector Graphics, for drawing circles, lines and dots on a canvas in the web page. It's simple to use, and the page I've linked to has examples that should help.