"Web SFML" using HTML5/Javascript/WebGL

[Ixrec]

I've been trying to learn a lot about web development lately, and in the back of mind there's always been the idea of "porting" SFML to "the internet" (whatever the correct terms for that are), especially once 2.2 comes out and we have an OpenGL ES implementation to refer to.

Not that I'd actually start working on this anytime soon, but I wanted to ask what people thought of the idea and make sure that some of the rather strong conclusions I'm coming to aren't misguided.  So please correct me if any of these are wrong:

1) If a web page is to contain a "real-time game" of any sort (eg, a platformer as opposed to sudoku), that game's code must run client-side.
2) There is simply no good cross-browser/platform/etc way to do client-side C++.  CGI and FastCGI allow for server-side C++, and the Wt toolkit is based on that sort of thing, but that doesn't help us.
3) The one and only cross-everything client-side web programming language is Javascript.
4) The C++ concept of a "game loop" doesn't cleanly translate to Javascript, so any direct cross-compilation would be a pain in the ass at best (basing this one on my brief tests of emscripten).

Assuming these impressions are correct, it seems like a "web SFML" simply could not be a C++ library, and the closest we could get would be one or more Javascript scripts/.js files with a bunch of convenience functions wrapping around WebGL as well as the event handling/image loading/audio playback/etc already built into HTML5/Javascript.  Perhaps SFMS--Simple and Fast Multimedia Script?  Does anyone here think a project like that would be worthwhile?  Quick googling implies the existing WebGL libraries are mostly 3D engines, not 2D like SFML.  Or would it be better to try and get SFML support into emscripten, like its existing SDL support?

Edit: Now that I've stumbled across Pixi.js, it looks remarkably similar to SFML in spirit, design and graphics functionality (it even calls itself a "fast lightweight 2D library that works across all devices").  I'm gonna spend some time on a detailed comparison of these two.  It might be that the best implementation of "SFMS" is a wrapper of Pixi.js plus whatever bits of SFML it doesn't have but still make sense in a web page (eg, audio).

[G.]

I heard that emscripten works pretty well with SDL, so I guess when SFML will be OpenGL ES compatible it could work too, nop?
I'd be glad if porting desktop SFML games to the web took the least amount of work possible.

I tried pixi.js and didn't love it. It's impossible to give sprites a tint, and there is no shader support (yet?). But it's fast and the canvas fallback is nice.

[Ixrec]

Yes, sf::Sprite::setColor() and sf::Shader are among the things SFML has that PIXI doesn't (for the record, sf::View and sf::BlendMode are also on the list).  If I were to actually create "SFMS" or whatever, I would probably modify pixi.js to add those features.  Did you have any other issues with it besides a couple missing features like that?

I do need to try harder to get emscripten to work well.  My experience so far has been rather painful, but maybe the tutorials are just bad or maybe it's several times better on Linux than on Windows.  But even with emscripten we'd still need an implementation of SFML in Javascript.  I'm pretty sure we can't just cross-compile SFML directly since libs like openal/stb_image/sndfile don't really have Javascript "ports," so using pixi.js as a starting point seems like the way to go.

[game_maker]

Hi! "Web SFML" is only possible if someone create a Javascript library similar to SFML coding. However, we have too many javascript libraries around us. Reinventing the wheel would be laborious. So, my suggestion is: modify a good library.

I like EnchantJS. Why do not you take a look at it? You'll like it.

[fstream]

Emscripten is a nice way of compiling C++ to Javascript. I started working on an Emscripten version of SFML a while ago -- the system and window modules were pretty straight forward, but IIRC the graphics module posed a few problems with some third party dependencies.

It's at least relatively easy to set up a window and do your own rendering with raw OpenGL.

[Nexus]

tntnet is also an interesting and mature project to use C++ for web applications, but it's rather designed for webservers.

[Edit] Just saw it's only for Unix/Linux...

[Ixrec]

Okay, I'll look at Enchant too.  Don't worry about reinventing wheels; I'm definitely going to use an existing JS library to handle most of the hard stuff.

After looking at Pixi for a while (which has webgl plus canvas fallback), it seems the biggest practical issue will be implementing some features in both renderers. For instance, sprite tinting (sf::Sprite::setColor() ) is easy with *GL since you can just set vertex colors, but in canvas not so much.

The good news is that sf::View (IMO the biggest feature "missing" from pixi for SFMS's purposes) can almost certainly be done in both, so it should be only relatively minor features that don't get canvas support.

There's also some odd semantic questions to consider with windows.  In particular, should multiple windows correspond to tabs, or canvases in one tab?  How do window styles translate? (I'm thinking jQuery's resizeable() will help there).