I am looking for a 3D Javascript library which is compatible with IE, Mozilla and Chrome. Libraries using Web GL works on Mozilla and Chrome but has little support from IE. We need to add plugin to make in work in IE.
Do we have any library which would support IE Browser?
I think you need three.js - check for canvas examples
I don't know what kind of expectations you have, being that you are using WebGL. You haven't stated anything specific about what kind of graphical effects you expect to use, but in general it is difficult (if not impossible) to accomplish some visual feats using the 2D Canvas context that you might find to be easier in WebGL. Some plugins (such as Unity, Shockwave, Java [if your users still feel safe enough browsing the Web with it], and even Flash [to some degree]) provide this sort of flashy 3D visual quality, though they suffer in terms of operating system compatibility. They all work with IE, anyhow.
With that said, I assume you are unfamiliar with Three.js's 2D Canvas fallback mode. It's basically the same old WebGL you're used to except without the WebGL part. The trouble is, aside from the graphics not looking quite as good, Three.js has never reliably supported Internet Explorer. You could try various versions of it, as I know that Microsoft used it at one point for a simplistic space demo, or you could mess with the code of a newer release and patch various points of incompatibility (such as fancy array types), but the bottom line is that it's "designed" to support IE10 (not IE9) and it's going to be kind of hard to use.
If you want to keep your code simple and you hold IE9 very close to your heart, the HTML5 GDK is for you. It's sort of like Three.js but with a simplified syntax and more emphasis on cross-browser support (meaning no WebGL). You could use it as a fallback to support your existing 3D content on non-WebGL browsers.
Another 3D library to keep an eye on is Phoria, although unlike the other two libraries, it doesn't yet support texture-mapped objects. However, I can confirm that it supports IE9 and all of the other Canvas-compatible browsers just like the HTML5 GDK. Kev is working hard on it, so it may support texture mapping within the next few months.
Related
I'm currently learning WebGL and I found out that there are actually 2 variants of this api -> webgl and webgl2. So I would say that webgl2 is a newer version of the api, therefore it would be better to start with it. But I'm a bit confused now since most of the tutorials and documentations I've seen still uses webgl.
According to what I found there is not so much difference between them and that webgl2 has less support among browsers.
So I would be glad if someone could briefly explain to me if there is any big difference between them and if it would be a problem to switch from one to the other.
Thanks in advance.
WebGL2 is backwards compatible with WebGL1, it builds upon it, most notably adding support for more texture formats and providing a bunch of functionality that was previously only available via extensions in WebGL1.
I want to replace a flash applet that displays a three dimensional matrix of dots (up to 200.000). I want the content to be displayed in the majority of web browsers, including mobile browers, by using standard web technology. I know that flash is very popular and almost multiplatform, but it is not a standard. Can this be achieved with standard web technology?
With web standards you have two possibilities: WebGL and CSS 3D Transforms
The browser support for WebGL isn't very good.
But with 3D transforms, you will miss a few browsers as well.
Which technology better suits your needs is hard to tell without knowing too much, from what I imagine WebGL would be more appropriate for you.
Either way, you probably will have to include the Flash Version as a Fallback for browsers who don't support WebGL/3D Transforms.
The best standard that I've found thus far is X3D. This standard does not have good browser support, but X3DOM is a javascript implementation of X3D that does (it uses other browser technologies to implement X3D). You can find browser support information for X3DOM here.
For your dot matrix, the X3D PointSet node appears to do what you want.
I want develop some web product with using javascript 3d library
like three.js
But I heared it would use WebGL tech,the problem is I want my product would also work fine on ipad or iphone,and some moblie device,I have try it,found the pad couldn't work the demo
So it has to use WebGL?Or I have some other javascript 3d library for substitute?
WebGL is not yet available on iOS Safari, though all signs point to it being enabled at some point in the near-ish future. It can currently be turned on with some private API hacks, and performance is actually quite good, but there are some serious bugs that need fixing before Apple will enable it for general use.
I wouldn't be surprised if it made it into iOS 6, but that's just pure speculation on my part.
I'm developing a web application for a new service, starting from Firefox 3.5.
The interface design is tableless, only using divs + CSS & performance-blessed practices.
Now, while being compatible with Safari has taken just a small amount of time, IE is a pain.
My question is: is there anything out there that could be used to speedup cross-browser checking? I already know many points of difference between FF and IE for instance, but a specific tool would maybe help some more.
Could you suggest one, if any?
Thanks,
Scarlet
Cross Browser Development
No tool can ever make up for bad behaviour, but they can sure make life easier on you.
That being said, you should really come up with a workflow that lets you optimize for cross-browser compatability in the least amount of work spent. If that means small iterative or large monolithical steps for you, well that is up to you to decide. But generally working against several browsers during development saves you if not time at least a major headache on d-day.
List of tools/resources I find useful
Selenium is a tool for frontend
testing
IETester lets you view
a page in different IE versions
Browsershots lets you view the
page on different platforms as well
Google lets you search for known and obscure IE perversions
IE 6 No More saves you a lot of headache not bothering about the preshistorical crap that goes by the name of IE 6
YUI Graded Browser Support - make sure you know which browsers to focus on
jQuery - cross browser javascript library
YUI 3: Reset CSS - reset your CSS (link contains useful information as well as the CSS)
9 Most Common IE Bugs and How to Fix Them - very useful tips on how to get the most bang for the buck by fixing the common problems first.
Cross browser development contains lots of useful tutorials regarding cross browser development.
References
Selenium alternatives / Cross Browser Testing / Litmus
This will not answer your question, but just an advice based on my personal experience.
When you are developing for many browsers, the best thing to do is to test simultaneously on all of them while you're coding.
This way you will just have to correct small bugs each time as opposed to overwhelming complicated layout problems.
I don't know of any software that actively check for problems, but Adobe has recently released BrowserLab, which really does speed up cross-browser testing.
I would also recommend using CSS reset. This way you get a lot of inconsistencies out of the way right from the start.
I do cross-browser development and I don't really use any of the prescribed patterns, like cross-browser testing. I instead use a decorative pattern. Sometimes it works wonderfully, sometimes it's a headache, but that can be said for any development pattern.
Most of my development takes place in which browser I consider the most standards-compliant. I prefer WebKit to Presto, but both are generally neck and neck for standards compliance. With these browsers, proper use of HTML and CSS almost always leads to desirable results. My WebKit browser of choice is Google Chrome. Safari works too, but keep in mind that on Mac OS X the font smoothing tends to make text bigger. To ensure compatibility with sites designed for Safari Mac, Safari Win emboldens fonts, so it's not always the most pixel-perfect representation of your site.
Blueprint CSS can be a huge help if you're trying to quickly prototype a cross-browser site design. I'm not convinced that such a framework is always necessary, and they can also influence the way you structure your XHTML markup, and contorting your markup to match a pre-existing CSS class hierarchy isn't always a great idea.
Once I have a design that I'm happy with in my standards compliant browser, I then decorate it with bug fixes in other, less standards-compliant browsers using conditional styles or stylesheets. Firefox, at least since version 3.0, is almost never a huge issue, but there are ways of targeting Firefox specifically, and even differentiating between Gecko 1.9 and 1.8, using only CSS. It's a hack, technically, so CSS purists might scoff at the code blasphemy, but it's a reliable, usable solution. For clarity and ease of maintenance, I usually maintain my Firefox/IE fixes in isolated stylesheets and compile them with some kind of server side script, which I consider preferable to conditional include statements and JavaScript hacks. If you make use of caching with PHP, this isn't a significant bottleneck or waste of CPU time.
IETester is an indispensible tool for checking a design in all of the different IE versions, and it even uses the proper JScript engine for each release, which previous, less reliable solutions like MultipleIEs lacked.
These days, the biggest problem with cross-browser development is JavaScript, and jQuery will basically save your life here. As someone who maintained a sizable JavaScript framework for a corporate website in the days before AJAX and JavaScript interfaces, so there's no limit to the amount of praise I can give for jQuery/Prototype/Dojo.
When you say only using divs and CSS, I hope you're not absolutely positioning everything. That's a sure-fire way to mess designs up in lots of browsers. (Generally the best practice is to use floats.)
You could also try IE7.js to fix a bunch of problems with IE 6-7.
In general I'd suggest developing in IE and one of the standards-compliant browsers side-by-side (Firefox/Chrome/Safari/Opera). And try and keep both the HTML and CSS as simple as possible.
A couple more tools include
Browsera - automatic detection of cross-browser layout problems
LitmusApp - screenshots with pass/fail tagging
SuperPreview - extension to Microsoft Expression Web (currently available standalone download) where you can view an overlay screenshot of a different browser
Browserlab - extension to Adobe Dreamweaver (currently available standalone online) where you can view an overlay screenshot of a different browser
I'd also strongly recommend using a CSS reset to start such as http://meyerweb.com/eric/tools/css/reset/
Why? Because many of the cross-browser inconsistencies stem from the fact that the default style in the browser differs. For instance, a default margin may make an element layout correctly in one browser, but not the others.
It may seem weird to always be overriding default behavior, because it seems like a waste, but its absolutely necessary in order to have a baseline with which to work.
I'd recommend looking at a CSS framework like BluePrint. It has a generic way to build pages using grids, and also has some default css for forms etc.
Frameworks will have dealt with many of these cross-browser quirks during their development, so it could save you a lot of time.
I want to make a basic, 2D fighting game (not fast paced nor does it have many cool effects.)
I could make it with jQuery, but I think that it would run slowly (to my knowledge).
Can anyone give me an alternative to flash for the development of this game?
You might want to check out Processing.js, if you prefer not using browser plug-ins.
Processing.js uses Javascript to draw shapes and manipulate images on the Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.
If you like get this game running on the most computers out there I would go for these technologies:
Flash (fast, and availabable and installed nearly everywhere, frameworks for gameprogramming are out there)
JavaScript (no browser-plugin required, but performance will realy suck, especially at older computers or browsers)
Silverlight (could be suitable, but still a just a very few people have it installed and I do not know if there any good working versions for Mac and Linux)
JavaApplets (lesser installations then Flash, could be fine, altough it seems quite unsexy to use JavaApplets in these days.)
I already saw most options listed, but I thought I'd chime in with another great option that is now free (unless your game makes more than $100K/year and then you must pay a one time $1,500 fee: Unity.
This game generation tool allows you to use a visual developement environment with either javascript, boo or C# to develop games that can be played in a browser, on windows or on a mac. Though it is best known for 3D game development, it certainly supports 2D development.
Here is an example of a browser based 2D game made using Unity.
Bubblemark provides a "performance test" of sorts of all of your available options. I'm biased, but I'd still say Flash.
Jquery is not designed whatsoever to do what you want, flash however is the obvious and ubiquitous solution as far as you're talking about a browser game. If you want something localized, look for graphics packages for whatever language you're comfortable with: pygame[python], gosu[ruby]
Saw this yesterday on reddit: http://www.renderengine.com/demos.php JavaScript game engine
You mentioned jQuery for games, and I recently came across the gameQuery library. Coupled with jQuery 1.4 (with recent performance improvements) and the fact that all major browser vendors are falling over themselves lately to improve JavaScript performance, building a game without Flash or Silverlight is now feasible and productive.
I have also investigated the Raphaël library (raphaeljs.com), a low-level graphics alternative to Processing.js and canvas mentioned earlier. SVG elements are indeed compatible with jQuery. Here's an example of a hex grid on Raphaël with jQuery for click events.
You should check out Effect Games.
It is a free to use, online hosted Javascript Game Engine that runs incredibly smooth and supports all major browsers. Don't believe me? Play this demo, or this one.
Those that say you must use Flash and Javascript is too slow, obviously haven't been paying attention, especially to the newer browser such as Chrome that utilise compiled javascript. Why use Flash, when you can have a cross platform, cross browser game developed using native browser functionality.
You should also check out Chrome Experiments to see just how much current Javascript (and sometimes HTML5) capabliities have improved.
Effect Games provides free, online
tools for building, sharing and
playing your own browser based games.
Your games may include sound effects,
music, and multiple layers of
parallax-scrolling tiles and sprites.
Users can play your games right in
their browsers, without needing any
new plugins or extensions. Publish
your games on your website or blog,
share on social networking sites, and
submit them to our featured games
section!
Build your games using JavaScript and
our custom browser game engine, level
editor, and suite of developer tools.
The Effect Engine supports Mac OS X,
Windows, Linux and all modern browsers
including IE, Firefox, Chrome, Opera
and Safari.
Microsoft Silverlight is similar to flash, but not flash.
Flash can be done in the traditional sense or in Flex if you want it more of a traditional programming experience. Silverlight is a great flash substitute if you would rather do your programming in .net. Javascript games are possible but difficult to do I think you would save a lot of your time if you did it in flash instead.
I believe a great option would be to use SilverSprite. It allows for creating XNA games for Microsoft SilverLight using the same knowledge base you find for Windows and XBOX 360 (only working for 2D games so far)
Panda3D is a full-blown game engine that can make browser-based executables. I have not tested this functionality myself, but it seems to work pretty well.
http://www.panda3d.org
check it out, it rocks.
http://gamejs.org
or any of https://github.com/bebraw/jswiki/wiki/Game-Engines