Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I am looking to build a 2d game using WebGL. I want the hardware acceleration that WebGL provides and I cannot get this from the 2D canvas context in the canvas tag.
With that said, is there a tutorial on creating 2D sprites using webGL? Or, better yet, is there a 2D sprite library for WebGL? Ideally, I'm looking for something like cocos2d ported to WebGL.
Not surprisingly, all of the demos, tutorials and libraries I have found for WebGL focus on 3D manipulation. Are there any WebGL libraries that support 2D sprites?
I may be mistaken, but I thought that the 2D canvas API was designed in such a way that browsers can make use of hardware acceleration, but they have chosen not to yet. I expect the implementations of canvas 2D to improve dramatically as WebGL progresses.
You can find the canvas 2D API in webGL here
I recently pushed to github a simple 2d library written on webgl with a naive (but functional) canvas fallback. It uses the same scene graph than cocos2d, you can check it on http://github.com/funkaster/ChesterGL - note that its not 100% functional, but you can use it as a starting point to write a simple 2d game
2D in 3D is extremely easy to do. You just have to place all your objects in a plane and scale your viewport to draw the desired portion of that plane.
In any case, there is approx 10 years 'till you can expect to find WebGL capability in most peoples browsers. With the right methods you can get a long way without using canvas, the trick of using prerendered rotations of your graphics is a must know to any JavaScript game developer, along with "sprite" animations.
The important question is, are you just playing with the tools, or are you making a game that people should be able to play and enjoy?
Keep in mind, that you can use the gl.POINTS draw mode and draw a texture ( sprite ) at each point instead of a point. You simply have to use a sampler. It is really powerful.
Pixi.js is currently the most stable and active:
https://github.com/GoodBoyDigital/pixi.js/
This might be a bit extemporaneous, but I think it's worth the effort in case anyone is trying to find a good WebGL wrapper for 2D object manipulation. I strongly recommend fabric.js, which provides interactive object model on top of canvas element. It also has SVG-to-canvas (and canvas-to-SVG) parsers. The demos section of the official web site clearly shows the potential of this javascript library.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
Is there a library or tool for recording and saving an SVG animation as an animated GIF?
The SVG geometries are animated with JavaScript and D3.js, and their colors and opacities are animated with CSS 3.
I found that simply using a screen capture program with gif recording feature satisfies all my needs, and it is reliable and clean. There are several such screen capture programs. I found LICEcap solid.
Here is (almost verbatim) my procedure from question mentioned above:
The solution uses a tool called LICEcap, a screen capture utility for Win and Mac. Steps are following:
Download LICEcap here and install it. Now, if you start this program, it will have a rather unusual shape, just a thin frame, and everything inside the frame will be transparent:
Go to the window with your d3.js animation and prepare everything so that you could start animation at some point. Lets say we want to record this example from d3js.org:
Now start LICEcap and position it over the area you want to have in your animated gif:
Make sure that you enter at least 20 fps in the bottom left edit box, otherwise the recording will be low quality. Press record. A dialog will first appear, and you choose here whether you want your gif to be in an infinite loop, or just repeated once, or any number of times. Also an interesting option is to add some visual clues for mouse clicks. Choose also filename, and press Save.
Now you do whatever you have to do to trigger animations. I pressed several times buttons Grouped and Stacked. After I decided its enough, I pressed Stop. Resulting file is:
That's it!
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I'm working on my web project and am looking for the way
all the big ones like twitter, facebook, etc. created their icon set.
Did you ever take a look at their sprite?
https://fbstatic-a.akamaihd.net/rsrc.php/v2/yI/x/4jB4tvIAAbU.png
How do they draw those tiny icons?
Is that technique called pixel art? And where can I hire someone to draw some for me?
I'm sorry if this is not the place to ask, had no idea where to post this.
You can create pixel art using a variety of programs, including Adobe Photoshop, Fireworks, etc, but there are also freeware and inexpensive offerings too.
Check out this one: http://code.google.com/p/grafx2/
If you are not familiar with graphic design, you can hire someone using a freelance service, such as Freelancer.com, Odesk.com, or a variety of others. Just Google it.
Yes, it is called pixel art, and it uses a limited palette of colors (usually 8 or 16 bit) -- where each pixel is represented by one 8-bit byte (maximum colors: 256). As opposed to modern graphics which use a technique of anti-aliasing which blurs the edge to create the illusion of a smooth edge.
I've got a project where I need to be able to display video on all six sides side of a cube that moves and rotates in three dimensions, using Qt. I know the question is vague, but I'm completely new to graphics, so a high-level description of which classes I should look and how they should link together would be a lot of help. Should I use GLRenderer or the ordinary one? Is Qt even the right tool for the job?
What you could do, is use QtOpenGL to render the cube. Then you use video texturing.
I would just love to ask a question about the possibly of creating a 2D RPG game in Qt QGraphicsView
A game similar to battle heart - http://www.youtube.com/watch?v=0VqlJ_AvFS8
Why am thinking of using Qt?
Qt is cross platform, and the support for mobile platforms like iOS and Android is increasing fast
I want to save the image on HD as SVG
I want to render the images on the fly ( For the example, when the game is loading ) into pixmap images for better performance after scaling them to the appropriate screen size ( So we cab have a ++, better performance, and infite support to any screen size )
What do you guys think about Qt? Do you have any other good options,
Qt make converting SVG to PNGs as easy as it could be, so that's the killing feature why am sticking to Qt
Bests
I've done this, and I can confirm that Qt is a perfectly good option, as long as you're not particularly concerned with download size (you're probably going to end up with a minimum of about 30 megs). You might consider looking into QML for handling your UI animations, as it's particularly well suited for that sort of thing.
I would strongly recommend using the OpenGL 2 backend, as it's fast, and it allows for GLSL shaders, which are good for special effects. It's also possible to use a QGLWidget as the background so you can do direct opengl drawing if needed.
Edit: Source is available at https://github.com/lendrick/Orange-Engine/wiki
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
For basic 3d web application i.e. a few cubes, rotation and translation in 3d space - which is better to choose?
CSS 3d seems the easiest, but is not supported on IE9 or on the roadmap for IE10, and offers less control than the other options.
Canvas & WebGL seems way more complicated, but I don't know if they are future proof.
Why are there so many different techniques for 3D? which is better? which is future proof?
The reason there are so many different options for 3D is because the whole thing is still in a state of flux -- 3D in the browser isn't a finished standard, and of the options you listed, the only one that works in all currently available browsers is Canvas.
IE in particular is unlikely to give you much joy -- as you say, 3D isn't even slated for IE10 at this point. Having said that, SVG was added to IE9 quite late in the day, so there's always hope. But the reason it's unlikely is that Microsoft have made a point of only supporting features which have been formally ratified as standards.
Of the technologies you listed, Canvas is by far the best supported, but Canvas isn't a 3D technology; it's a 2D canvas, and if you want to have 3D effects in it, you need to write them yourself, and they won't be hardware accelerated.
I guess the real answer to your question depends on how important the feature is for your site. If it's just eye candy, which users of unsupported browsers could live without, then by all means do it with some 3D CSS. But if you need to make it consistent in all current browsers, then do it with Canvas.
I'd tend to recommend not using WebGL for your case, because it sounds like it would be overkill for what you're doing.
3D CSS is probably the right answer, but use Canvas for now, until the rest of the browsers add support for 3D CSS.
I know this is 2 years old but I figure I'd post this here for future readers.
What to choose depends on what you need.
Do you need a simple 3d shape with no or little animations? Try if you can do it with CSS3, that's the easiest by far. For IE you can probably get a library that offers support.
Do you need some sweet 3d models with nice graphics and that can do all kinds of stuff? Go WebGL, you can't ask for more control AND performance for 3d in browsers.
Do you need 3d shapes that can do all kinds of stuff, but don't need textures and will work everywhere and won't require much performance? Go Canvas.
CSS3 is just for the eye-candy. You can make it rather easily, style it any way you want and is very easily maintainable. Once you want to do more than just eye-candy, put on your gloves because that is gonna reuire some work.
With 2d Canvas you can make 3d stuff. If you're new to it, it will be very annoying and complicated (to name one example; you need to know of matrices), You can pretty much do anything with 2d canvas that you can do with WebGL but some thing will be easier in WebGL (seriously, if going 2d Canvas, don't try to use textures, it's a nightmare). WebGL uses OpenGL which, in a nutshell, means it will always outperform 2d Canvas.
However, WebGL requires the user to have a compatible video card.
I really depends on what you are trying to do. How simple is simple?
3D CSS is far from usable. It's only just made it into firefox. It's buggy in both firefox and chrome. It's not working in FF9 beta on OSX. It's also got issues in Chrome up through at least 16. See http://greggman.com/downloads/examples/intersecting-elements-3d-css.html and compare Safari on OSX to pretty much any other browser.
three.js (https://github.com/mrdoob/three.js/) used to (and maybe still does) provide some simple 3d using canvas.
Otherwise if you want anything interesting go WebGL and pick a library (three.js, SceneJS, etc..)
You've got to make a choice. Use WebGL and give up IE, Use Flash 11, Use Unity3D, use Canvas and get very limited 3d, or don't do 3d.
WebGL is already being used by major sites. CNN is now using WebGL http://www.stinkdigital.com/en/work/ecosphere
Everyone is probably tired of hearing 'it depends', but...it depends!
There's a little "war" going on as to whether it's better to use Canvas or HTML/CSS3, and namely because Canvas is slower than DOM on older machines/devices. Yeap, DOM is way faster in some cases, while canvas is faster on most modern browsers/devices.
WebGL - Best option for both 2D and 3D, but since it is not well enough supported across browsers and devices, you'll have to offer fallback to canvas or DOM whenever necessary.
Canvas - Less suitable for 3D comparing to WebGL, but more suitable for compatibility, community, tools etc
DOM - Faster than most think, if used right, highest support around, but you cannot go too fancy animation/gaming-wise.
Hope this helps