I found Famo.us and it seemed pretty exciting but their docs are closed. I am very curios about WebGL so I started looking for alternatives. I found Three.js and Clara.io.
How do they differ from famo.us? What is the main objective of each framework?
Thanks.
Edit: Rephrased.
Three.js is a lightweight javascript library to create 3D visualisations (using WebGL, SVG, Canvas or another renderer).
Clara.io is an online 3D modelling tool using WebGL.
Famo.us is a javascript rendering engine to create web-apps with 3D user interfaces that promises to run smooth (60FPS) on mobile devices.
Famo.us claims to solve the HTML5 performance issue by avoiding DOM-layout and repaints, which are very expensive computations. Instead, Famo.us keeps a flat DOM and uses CSS3 transforms for all layout and positioning. Unlike the others you mentioned, Famo.us does not render using WebGL (yet), as Safari does not have this enabled by default.
Famo.us includes a physics engine to provide realistic and complex user interaction (e.g. bounce on a scrollview, 3D coverflow, that sorts of stuff). In Famous, you construct a scene-graph and add animations, events and physics to make everything come alive.
http://Clara.io is an online 3D modeling, rendering and publishing platform that can import and export in standard formats. It uses ThreeJS/WebGL and it imports and exports in the ThreeJS format as well.
Although Clara.io is not intended for creating applicatipns, you can also easily make interactive experiences Clara.io such as this demo by Klaas:
https://exocortex.github.io/klaas
Related
Is there any known implementation of a 2D canvas fallback for the awesome playcanvas game engine?
The idea is that the system should test rendering performance during the loading process in WebGL vs Canvas 2D, and fall back to Canvas 2D in case it finds better performance there o in cas WebGL is not supporte in the browser.
Other frameworks three.js or pixijs have this feature and it would be great for playcanvas, but as long as I have seen they do not have this feature and no solution have been implemented by the community.
No, there is no Canvas 2D fallback for PlayCanvas.
First of all, Canvas 2D will never be faster than WebGL for rendering 3D scenes. This is because you would have to shift complex GPU tasks onto the CPU. PlayCanvas implements a very sophisticated physical rendering pipeline and reimplementing it CPU-side will never give acceptable performance. It makes more sense for Pixi because Pixi is largely concerned with 2D sprite primitives which can be rendered quite cheaply by Canvas 2D.
At the time of writing, WebGL has a penetration of 91.1% and the trend is still upwards. Therefore, you have a relatively small minority of people who can't experience WebGL right now.
In the situation where the user can't run WebGL (for whatever reason, such as running IE9 and below), the recommendation would be to simply display a message asking to upgrade to a WebGL-capable browser.
This fallback to canvas if no webgl is a very fringe feature and perhaps that is why there is little desire to implement it. Perhaps it was useful before when webgl support is extremely limited but I dont see much need for it atm. Heres why:
If canvas api met all your requirements, then there is little point in writing a webgl app to do the same thing as the canvas api.
If webgl features are desired/required, such as 3D, or simply need to draw many sprites with different scale/rotations, then canvas performance is likely not up to par. Furthermore, browsers (last time I checked) have very inconsistent canvas performance. It was what motivated me to write a webgl renderer in the first place.
So I'm just getting into SVG and learning how it works. At the moment I am creating a project that involves rotating several SVG <circle>s at different speeds, thus learning how animateTransform works.
However, I found out that one can use CSS3 animations (which I am much more familiar with) on SVG objects. I realize that animateTransform can do more complex animations, but I'm talking in terms of a simple animation that both options have the capability of completing.
What are the drawbacks (if any) of CSS3 animations used on SVG objects when compared to animateTransform? Does animateTransform perform better?
No IE support for <animate… you have to use a polyfill library like fakeSMIL - which is not the end of the world. Also css3 transforms are GPU accelerated on iOS mobile and chrome for mobile (for the most part) so they tend to be smoother.
I'm planning on writing a game, which will use a lot of sprites and images. At first I tried EaselJS but playing some other canvas-based games I realized it's not that fast. And when I saw BananaBread by Mozilla I thought "if WebGL can do 3D so fast, then it can do 2D even faster". So I moved to three.js (using planes and transparent textures, texture offset for sprites).
The question is: is it better? Faster? Most of the WebGL games are 3D so should I use canvas 2D context for 2D and WebGL for 3D? I've also noticed that there are no libraries for WebGL in 2D (except WebGL-2d, but it's quite low level).
Please note that compatibility is not my greatest concern as I'm not planning on releasing anything anytime soon :) .
The short answer is yes. WebGL can be quite a bit more efficient if you use it well. A naive implementation will either yield no benefit or perform worse, so if you're not already familiar with the OpenGL API you may want to stick to canvas for the time being.
A few more detailed notes: WebGL can draw textured quads (sprites) very very fast, but if you need more advanced 2D drawing features such as path tracing you'll want to stick to a 2D canvas as implementing those types of algorithms in WebGL is non-trivial. The nature of your game also makes a difference in your choice. If you only have a few moving items on screen at a time Canvas will be fairly fast and reasonably simple. If you're redrawing the entire scene every frame, however, WebGL is better suited to that type of render loop.
My recommendation? If you're just learning both, start with Canvas2D and make your game work with that. Abstract your drawing in a simple manner, such as having a DrawPlayer function rather than ctx.drawImage(playerSprite, ....), and when you reach a point where the game is either functioning and you want it to run faster or the game design dictates that you MUST use a faster drawing method, create an alterate rendering backend for all those abstract functions with WebGL. This gives you the advantages of not getting hung up on rendering tech earlier on (which is ALWAYS a mistake!), let's you focus on gameplay, and if you end up implementing both methods you have a great fallback for non-WebGL browsers like Internet Explorer. Chances are you won't really need the increased speed for a while anyway.
WebGL can be much faster than canvas 2D. See http://blog.tojicode.com/2012/07/sprite-tile-maps-on-gpu.html as one example.
That said, I think you're mostly on your own right now. I don't know of any 2d libraries for WebGL except for maybe PlayN http://code.google.com/p/playn/ though that's in Java and uses the Google Web Toolkit to get converted to JavaScript. I'm also pretty sure it doesn't use the techniques mentioned in that blog post above, although if your game does not use tiles maybe that technique is not useful for you.
three.js is arguably not the library you want if you're planning on 2d.
I need to know, what renderer has been used in the Sintel project. I think it wasn't default Blender Render because default Blender Render renders in horrible quality (If it isn't correct please correct me) . And I need to run it on 64-bit operating system (W7 HP) in blender 2.60. What I was searching, the best was Sunflow yet. What you think about / do you have any better suggestions?
I'm pretty sure they did use the blender internal renderer. Using proper lighting and materials you can get an excellent quality out of the blender renderer. If you are using one of the most recent blender versions you also might want to try the cycles renderer. It ships with blender but is still in beta. But without decent materials and lighting, no renderer will give you satisfying results.
Sintel used blender internal renderer. A branch was made which had some specific features used in sintel, now most of these features are merged into trunk *(as of 2.64).
Blender now comes with cycles rendering engine if you are after a raytracer which is reasonably competitive with other modern raytracers, though less mature of course.
The last commit to Sunflow was in 2008, seems its no longer in development.
Update: as of Blender 2.70 Cycles is almost feature complete, compared to Blender Internal renderer.
Is there a JavaScript implementation of the OpenVG standard based on WebGL?
I'm pretty aware that we can render vector graphics in the browser, I'm just curious as to whether or not anyone has actually managed to render SVG with WebGL, with or without basing this on the OpenVG standard. If it doesn't exist, would it be useful to start a project?
Here's some C code for parsing and rendering SVG in OpenGL 1.x: https://github.com/tnovelli/vsprite. It might not be quite what you're looking for. We used a Stencil Buffer trick to draw 2D polygons. For 3D, I guess you'd have to render into an off-screen buffer and texture-map it onto a 3D object. (Why not pre-render SVG into raster images? Because our objects are breakable and deformable.)
I'm thinking about porting this to Javascript+WebGL. The browser's XML/SVG/CSS parsing features should eliminate a lot of the work, but the stencil trick could pose a challenge. This is a back burner project for me, so if anyone else wants to try something, don't hold your breath, just do it! :)
Well none of these answers answer the question explicitly. #tom shows that yes, we can render vector graphics on the webgl canvas using a neat stencil trick. This isn't however a full implementation of the OpenVG specification and I am curious as to how much of the OpenVG spec could be implemented this way. So to conclude:
There are no implementations currently, but there doesn't appear to be a particular demand for it.
As WebGL mixes just fine with any other HTML(5) technique, you can mix it up already. The only thing is that you won't be able to mix SVG with WebGL using its depth buffer - for example a logotype (SVG) placed in a 3D-world (WebGL). But maybe that's just what you like to do?