Over the past few months a few things have become extremely clear to me: web technologies are exploding and the capabilities for software on the web is soon to meet that of desktop software if innovation continues along this path.

The web technologies I’m talking about are webGL, websockets and node.js. WebGL enables web developers to utilize many of OpenGL’s features inside a web browser and bring 3D applications to the web. Websockets allow a client to communicate with a server with significantly less overhead than ajax, making real time applications on the web much more doable. Node.js allows the server to salably handle all these websocket connections. The real kicker is that they’re all coming to maturity at the same time and cater to each other in a huge way.

When you think of 3D on the web, you typically think of games first. Games in 3D are fun, but what if you could do multiplayer gaming inside a web browser, with a server that could scale? This is a reality that I think is now upon us and on a night before YCombinator starts announcing who gets into their summer program and developers are showing off their apps, I’d like to share with you a simple app I made to demonstrate what I mean. I made a simple chat application using the above technology stack (and others: socket.io, now.js, three.js). Keep in mind its mostly just a proof of concept, I wrote it in a few hours and is very primitive.

Demo: http://labs.travisglines.com

You can move around with the arrow keys and hit enter to send the text you have written. Its extremely simple and there are plenty of bugs/errors/vulnerabilities I’m sure, but it gets the point across.

I personally can’t wait for 3D to come to the web (hopefully its in the form of WebGL instead of Adobe’s Molehill) and think its just a matter of time until it happens. One of the things that people are instantly going to want to do is interact. In 3 dimensions that means sharing 3 position variables, chat and actions all in real time. Luckily enough node.js came along just in time to make the process nearly trivial and in 57 lines of server side code I can share 3 position variables and let users chat with each other. The individual pieces are themselves very cool, but with all of these technologies coming to maturity at roughly the same time the opportunities and possibilities are huge. Things like a web based MMO game, 3D shopping with friends in realtime (something I’d like to pursue here soon if we don’t get accepted to YC) and more are all possible at this point.

Whenever new technologies or server stacks come out, it seems there is always a company that succeeds and champions the tech. I look forward to what comes out of these technologies in the next few years and am excited for the company that gets it right.

Be Sociable, Share!

30 Responses to WebGL + Node.js + WebSockets = A Web Technology Perfect Storm

  1. Ferodynamics says:

    The web is not 3D because your eyes can only see two dimensions at a time. Adding a third dimension won’t help most people. We can see this with Second Life, the extra interface stuff is just a distraction from real work.

    If you need a 3rd dimension for your job, probably you already wear a motion capture suit or you have a 3D input device, etc.

    VRML did not catch on in 1994 because it’s pointless, not because it didn’t work back then. We had all kinds of VR in the 90s, been there done that. People literally got sick of it. If you want to see 3D, turn off the screen and go for a walk.

  2. JP Moresmau says:

    I thought that for now websockets are disabled by default in major browsers due to security concerns (<a href="http://en.wikipedia.org/wiki/WebSockets"http://en.wikipedia.org/wiki/WebSockets). Do you think that’s a just a temporary setback, and will not jeopardize the future of websockets based web apps?

  3. Over the past few months a few things have become extremely clear to me: web technologies are exploding and the capabilities for software on the web is soon to meet that of desktop software if innovation continues along this path.

    The technologies in question make this an interesting post, but it’s kind of pathetic to read this simple insight delivered as an astonishing revelation when it was established wisdom online as early as 1995. How in the fucking hell else do you explain the browser wars? Why else would Microsoft think the browser was something which could affect its business interests? Why else would Google have created Google Documents?

  4. @JP moresmau

    He’s using socket.io which uses a variety of transports according to the client’s browser capabilities, it can either use websockets or flash for example.

  5. rch says:

    @Ferodynamics While you’re right about immersive VR not having a validating productivity application (yet anyway), you’re going too far by dismissing WebGL altogether.

    That extra display dimension can be very helpful in interfaces designed to work efficiently with complex information.

  6. Wladimir says:

    Agreed, this will yield many exciting new possibilities. It’s disappointing how long it took before there was a way to make realtime multiplayer 3D web-games without any plugin. But now it can be done, finally!

  7. Axure says:

    The performance of 3D in a browser is just too poor to build an appealing game. You can have a very decent CPU and GPU and still not be able to do what a dirt-cheap Wii does. (And for many gamers Wii is rather lame too. People, who now waste their lives in WoW certainly won’t go for a primitive web experience.)

  8. David S says:

    @Ferodynamics There’s more to 3D than making dinky little chat rooms. Just because people do stupid stuff with 3D technology doesn’t mean that the technology is pointless. There are most certainly very important uses for 3D web technology. Think of “real work” like mechanical engineering design review for example.

    A VRML based blog interface would be pointless. that doesn’t make 3D pointless.

    This demo isn’t to show how cool it would be if 3D boxes could walk around and chat to each other. It’s meant to show that if you can do this, you can do a lot of other “real work” kinds of things too.

  9. Ming says:

    WebGL, let me think about in early of 90s
    Adobe Atmosphere, that is the 3D in Web.

  10. IronTom says:

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; InfoPath.3; .NET4.0C; .NET4.0E)
    Timestamp: Fri, 8 Apr 2011 13:23:53 UTC

    Message: Object doesn’t support this property or method
    Line: 263
    Char: 2
    Code: 0
    URI: http://labs.travisglines.com/js/DoomCamera.js

  11. Bob@Work says:

    XP Pro X64
    FireFox 3.6.16
    Warning: Unexpected token in attribute selector: ‘!’.
    Source File: http://labs.travisglines.com/
    Line: 0

    Error: console is not defined
    Source File: http://labs.travisglines.com/js/Three.js
    Line: 291

    Error: no element found
    Source File: http://labs.travisglines.com/socket.io/xhr-multipart/6063759964890778/send
    Line: 1

  12. Tomas says:

    WebGL work far from all browsers, as HTML5. Limited audience. The performance varying depending on hardware, so hard to choose level of quality. You can already do 3D in Flash, Shockwave3D, Unity etc. so why isn’t it a success already? Because its hard to do 3D. Majority of people aren’t impressed because its just 3D and some halfmade demo. And standard technologies going slow forward. If you haven’t understood this you seem to be living in a limited world.

  13. admin says:

    @Tomas I agree with you that browser capabilities will take a certain amount of time to propogate.

    Flash doesn’t currently handle 3D (wait until Adobe’s Molehill stuff gets standard). Shockwave 3D and Unity both have an even worse problem with limited audience than webgl has.

    Trust me when I say, I know its hard to do 3d. The reason I did the demo was to say that: its now not only possible, but is getting significantly easier. If I can make this in a few hours of hacking in a weekend, what could a team make in a year? I do indeed seem to be living in a limited world, where people assume that I think blocks on a screen is the next best thing. As David S points out its a proof of concept, that’s all.

  14. admin says:

    @Giles All it was is a simple insight, not some ground breaking stuff.

    I’m not saying simply that its possible and that’s what we are going towards (I agree with you that would be silly). What I meant to imply there was that its possible now or really soon. The key thing here is the time, not the possibility. WebGL/Websockets/Evented Frameworks are only recently getting really popular.

  15. Carter says:

    I don’t know what’s up with the hatred. I think this is pretty sweet! Well done.

  16. Corgalore says:

    Just build something in Unity and host it in web browser. You can play fully immersive 3D games, plus it runs on mobile too.

  17. PES says:

    Your demo on http://labs.travisglines.com does nothing in ie9 or ff4 (will not even let me enter characters). In CHROME it does let me enter chars, left and right arrows move 1 char at a time and up/down chars move to beginning or end of chars typed. Opera will also let me type text and the left/right arrows navigate as expected but up/down are non-responsive.

    It seems to me there are browser conflicts not taken into account when putting up the text site of http://labs.travisglines.com. In order to show all the proof of concept it would seem all browser users should be able to see it. I would think you would want to be aware of this, at the least.

  18. Raul Macias says:

    I’m very excited about these new frameworks. Thanks for sharing.

  19. niraj says:

    Error: now.ready is not a function
    Source File: http://labs.travisglines.com/
    Line: 12

  20. joey green says:

    After reading these comments, I have to add that some people just don’t get it. PLUGINS SUCK BALLS. If you don’t get that, then you won’t understand the importance of these technologies.

    Also, some of the people saying that you won’t be able to do heavy CPU/GPU taxing applications, go look at the majority of the most popular games on mobile and PC. Especially the indie scene. Gameplay/mechanics/story rule all. These technologies will allow people to create some really cool apps.

    I think it’s going to be really cool to see real-time web visualizations, which is an area I’m thinking of doing my masters CS project in.

  21. Cesare says:

    I wonder how the combination of these technologies works in production mode: reliability and scalability.

  22. Tomas says:

    Sorry if I sounded too negative.

    Question is what is new with 3D or multiplayer. Shockwave 3D games have been big. It had multiplayer. Flash has multiplayer. But because its complex to make (graphics, latency, server hosting etc), it often end up with just some kind of a 3D chatroom or games without deep. Google made a 3D chat that looked nice but they shut it down, because it was hard to do something more of it. Worlds like Second Life look like a pale old version of 3D games of today. Most of HTML5/WebGL things look half-made, a product should have quality in the end, so question is who is going to spend the time when the result vary in every browser or platform.

    I’m not against new technology and I think you should use the right tool for the job. Small expriments can be fun to play with. But its 2011 and it can be boring to make something that look like 90s. The demos of Molehill looks fresh, more complete. Or Flash in general.

    But anyway. Happy coding.

  23. Zach says:

    Hey, awesome article! It’s funny because I’ve just recently reached the same insight you shared in this article. I’ve been playing around with node.js and I really enjoy the JavaScript environment, and the V8 engine makes it reeeally snappy. And of course, the fact that it doesn’t open new threads for new connections (I may be mixing up terminology, as I’m still a huge n00b).

    I was also wondering, where did you find out how to merge WebSockets and node.js? Did you have a specific reference?


  24. Have you had any stability issues with node.js? We are playing with it, but it seems to crash a lot…

  25. Felix H. Cat says:

    Wow, a lot of negative attitudes in here… Suggest that 3D is interesting and cause a shitstorm of backlash. Think of webGL like this.. you know all those things we currently do in 3D? (Think gaming) now we can do that on the web with no plugins. Anyone who denies that the world of the desktop app and the world of the webapp are blurring, doesn’t get it. It might not be here NOW and perform well NOW, but that certainly is the trend.

  26. LA says:

    I was happy to read about the possibilities described in your article. It seems your Demo site (labs.travisglines.com seems to be down. Will it be back up anytime soon? Also, do you have any plans for posting some code on Github?


  27. dc443 says:

    I agree with the “plugins suck” sentiment. These technologies are *core* technologies and will enable *standard* functionality that is miles above what we have been limited to so far. I have been thinking about a web interface for a game, where you have the regular interface which runs native machine code of course, but you can also log on and interact with a slower but functionally capable client simply by opening a webpage on your browser! People just don’t seem to get that without stuff like websockets and webGL, something like that simply wouldn’t be practical.

  28. T1Brit says:

    Ferodynamics is talking out of his rear end.

    3D is incredibly useful for a wide range of collaborative web enterprises.

    Architects are already using second Life to great effect.

    Perhaps he ought to check on things that he hasn’t looked at for 5 years.

  29. I personally can’t wait for 3D to come to the web. In 3 dimensions that means sharing 3 position variables, chat and actions all in real time. I am thankful for sharing such kinda helpful information.

    Nursing Homes

  30. Abe Petrillo says:

    Demo doesn’t seem to be working anymore, do you have a github resource?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>