I have created an OOP environment for WebGL so I can easily create all the objects I need for future game projects i might get. Most of the work is already done, but I'm getting painfully frustrated now with the displaying of .png files, I tested multiple object instances with a certain png file, and it was working smoothly (even the transparancy was), but now that I try other png files it doesn't render those properly. just the untextured plane (black square).
I have tried multiple orders of calling them in, and some other png files it does load in, but i cant find any apparent difference in the png files, all have the same right access for the browser. Also I can't find any alike problems with this online..
Anyone experience with WebGL / OpenGL who knows what might be happening here?
EDIT:
I still haven't figured out why it can only read certain PNG files, but i do know the right settings needed to make it readable.
RGB Color, 8 Bit
Color profile: sRGB IEC61966-2.1
Are your textures powers of 2?
WebGL is designed for embedded systems so it's non-power of 2 support is limited.
Related
Context
I'm creating some animated graphics using Canvas. I would like to save images sequence of them. If I do it through a Web Browser, for some obvious reasons of security, it will ask me to save manually each files. I need to work around this.
I also need to render the images lossless with an alpha channel, that's why I'm using PNG images sequence and nothing else. Images sequences can be huge in matter of size (e.g. a full HD sequence of 2 minutes at 30 frames/s will easily exceed 1 Go)
Question
What could be the workarounds ? I think that using Node.js could be useful because being server-side should allows me to saves the images sequence without awaiting confirmations. Unfortunately, I don't know it very well, that's one of the reason, I'm asking.
I'm also seeking for a "comfortable" solution. Below, someone seems able to do it using Python and MIME, it seems really ponderous to do and slow.
Googling
Exporting HTML canvas as an image sequence but it doesn't talk about the Node.js solution
Saving a sequence of images in a web canvas to disk But not the same context, he is providing a Web service for some clients.
https://forum.processing.org/two/discussion/19218/how-to-render-p5-js-sketch-as-a-movie doesn't bring any solution, but confirm what I've explained.
https://github.com/spite/ccapture.js/#limitations this but it doesn't allows me to export PNG images, only video, this isn't what I searching for.
http://jeremybouny.fr/en/articles/server_side_canvas_node/
Disclaimer
I'm not a native English speaker, I tried to do my best, please, feel free to edit it if something is badly written
I have custom pdf viewer html page for rendering the pdf. i am using pdfjs library for render the pdf. It's working fine for me.
When i open the small pdf file then it downloads and renders the file quickly,
when i open the large pdf then it downloads the pdf file quickly but it takes too much time to render the pdf file.
I can see the large pdf file content but when i scroll down then it hang the whole browser.
Any suggestion?
In summary on your OP - since you did not respond to questions or provide example of the PDF you were having trouble with then no-one can give a conclusive answer. This is a shame because it would have been easy to set up a snippet to probe the issue.
At a guess, I would say it is likely that there is a mismatch between the contents of your PDF file and the capability of pdfjs. If we had your example file we might be able to raise a bug on the developers git, which seems to be active and well supported.
What follows is a high-level description of the issues involved with creation of a PDF rendering engine, provided to illuminate why you may want to stick with the mainstream built-in rendering engines provided within popular browsers.
Rendering a PDF is a complicated task. If you break it down to component operations it is feasible, but there are several levels of PDF standard that introduced a large array of options. It is likely that either your PDF contains something with a faulty rendering implementation in pdfjs, or something that pdfjs is choking on when it tries to render it.
Some background: The PDF format is both brilliant and fiendish at the same time. Brilliant because of its portability, but fiendish because of the internal structure and storage mechanisms. There is no friendly 'DOM' like with HTML. If we were starting out afresh to develop a portable document format it would not be PDF that we would choose. But PDF currently has too much momentum to be thrown away, period.
To 'render' the contents of a PDF file to a display device or printer, your code would need to unpack the PDF and render the components (images, formatted text, pages) to the display device. It sounds straightforwad to anyone with experience of HTML DOM manipulation but there is no direct comparison.
PDF is a vector-based graphics definition language. The most likely equivalent most people would have experienced is SVG.
Anything that is not an embedded image in a PDF file is a vector-based output, except text which is zip-compressed and laid out by x/y co-ordinates rather than continuous strings.
Drawing and layout instructions live in sections (digests) that are linked via pointers like a tree - no simple top-to-bottom read & render process. A PDF can have redundant sections, replaced by some later edit but still present. And while on the subject, unless the PDF file is configured for fast web viewing, the rendering engine has to wait for the entire file to be delivered before it can understand how to display it. Fast web view puts the 'index' and page 1 sections at the top of the file stream to allow the rendering engine to get something out to the screen as fast as possible.
To support PDF adequately you have to be able to render anything the PDF contains and to do this perfectly in line with the PDF standards, otherwise you may find your PDF viewer crashes or is unable to render the entire PDF. You would have to cater for the various Acrobat standard levels, and the shortcuts and bloats that the editing package (Word, Illustrator, InDesign) vendors chuck into the PDF file; layers, thumbnails, etc.
In PDF, text could be stored as vector drawing instructions 'or' references to characters in a font file (like HTML text).
Regarding colors, have a read of the PDF spec and you will see that there are an array of colorspace options that the original PDF producer can decide to use. Some of these are for print devices that use alien color mechanisms. You would have to interpret these to a reasonable device color on the screen.
And then fonts. Fonts might be embedded subsets, or not. You will have to take decisions over what alternative fonts to use if a font mentioned in the PDF is not present when the rendering engine runs. To keep fidelity with the PDF you will need to realised the glyphs as vector graphics on your drawing surface at the scale defined in the PDF.
Given the layering, scaling and rotating features in PDF, you would likely be looking at an html canvas as the drawing surface. Anyone who knows will tell you that in the world of canvas you are pretty much on your own for rendering functions - both the strength and weakness of canvas, though for rendering PDF you will probably want absolute control so most libraries are not going to be of use to you. Meaning you are working with drawing primitives which takes time and can be susceptible to bugs.
Probably your biggest challenge is understanding the full range and scope of what you have to do. This is not impossible, but hard.
In summary on this lecture about challenges of writing a PDF rendering engine - rendering PDF files perfectly is a very complicated undertaking. It will not be surprising if during early release phases such products are felt to be very buggy in terms of not supporting chunks of the PDF specifications. Do not be too hard on the developers - the target they are aiming for is hard. If the developers have the backing and therefore the time to stay with the project then the full set of features in the PDF spec may be covered in their product at some point in time. Ideally they would publish a list of unsupported PDF features so that users could recognise potential issues, though you would never really know there was an issue until a PDF file looked strange when rendered or the engine crashed.
This seems like that you are using older version of PDF.js, Try with newer version
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
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