1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. To chat with the GameOgre community, you need to have at least 15 posts. Once you have the 15 posts, post at Become A New Ogre
    Dismiss Notice

WebGL with three.js is great

Discussion in 'Online Game Development' started by shugo, Jul 21, 2014.

  1. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    14,832.42
    I've been recently studying up on WebGL. I have to say it is great. A really good way to make online 3D games.

    I don't like the HTML5 CanvasRenderer as that is too slow, but the WebGL renderer is great, it's an incredibly fast client-side renderer. I've seen examples where it loads 3D models with about 2000 nodes within a matter of a few seconds. It is very good for 3D graphics in an online game. Forget about flash. Flash is history in my opinion, when you see what WebGL can do. It also means you don't have to learn another language like AS3, as WebGL is basically javascript.

    I also found a nice library. Try out three.js. three.js is in my opinion the best WebGL library. There are plenty of other libraries like copperlicht, but that library doesn't compare with three.js in my opinion. three.js is also open source, so it is completely free. There are also ways to load models into your script. So for instance you can just download a free obj file from some site and with some plugin script show it on a website.

    There is one downside to WebGL though. It doesn't run in Internet Explorer, but it does run smoothly in any of the newer versions of Firefox and Chrome.
     
    Last edited by a moderator: Aug 3, 2014
  2. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    14,832.42
    here is an example that I made:

    City

    it is based on the procedural city example of the three.js site.

    This example doesn't have collision detection.
     
  3. cemex

    cemex Espion Ogre Veteran

    Messages:
    3,213
    Likes Received:
    111
    Trophy Points:
    63
    Credit:
    3,985.96
  4. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    14,832.42
    thanks

    this example uses a lot of memory. I've noticed that if you keep Chrome memory on default it is not enough allocated memory for the working process on older machines.
     
    Last edited by a moderator: Aug 3, 2014
  5. cemex

    cemex Espion Ogre Veteran

    Messages:
    3,213
    Likes Received:
    111
    Trophy Points:
    63
    Credit:
    3,985.96
    it works ok for me
     
  6. Aaddron

    Aaddron Moderator Staff Member GameOgre Moderator

    Messages:
    39,957
    Likes Received:
    2,970
    Trophy Points:
    113
    Credit:
    24,633.96
    Wow that does load up quick and smooth, really cool.
     
  7. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    14,832.42
    thanks all

    I updated the example. There is now more variance in the buildings. In all it loads about 21 scenes now.

    City
     
  8. Aaddron

    Aaddron Moderator Staff Member GameOgre Moderator

    Messages:
    39,957
    Likes Received:
    2,970
    Trophy Points:
    113
    Credit:
    24,633.96
    The gray and blue ones don't have the building texture on them.
     
  9. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    14,832.42
    true, that is because I want to have different textures for those buildings and I haven't yet made the textures.

    btw there are also some green, red, and brown ones. Did you find these? ;)

    The entire city grid is about 60 by 60 = 3600 buildings. Now that's quite a big city.
     
  10. Aaddron

    Aaddron Moderator Staff Member GameOgre Moderator

    Messages:
    39,957
    Likes Received:
    2,970
    Trophy Points:
    113
    Credit:
    24,633.96
    Found a green one and a few brown ones way on the outside but no red yet.
     
  11. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    14,832.42
    there's only 2 of them ;)
    out of 3600 buildings you'll have a hard time looking for those 2 ;)
     
  12. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    14,832.42
    there's also about 10 brown ones scattered around the city, but these are not as high. About half the height of the buildings with the textures.
     
  13. Aaddron

    Aaddron Moderator Staff Member GameOgre Moderator

    Messages:
    39,957
    Likes Received:
    2,970
    Trophy Points:
    113
    Credit:
    24,633.96
    That would explain it. :)
     
  14. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    14,832.42
    hehe ;) I guess it would
     
  15. Snowy

    Snowy Ogre Hall of Fame Royal Ogre
    1. Minecraft Group

    Messages:
    18,533
    Likes Received:
    2,519
    Trophy Points:
    113
    Credit:
    841,830.34
    WebGL's pretty great; I think it'll become useful for new game developers to learn WebGL if they want to create browser games, especially since Flash games are phasing out not too far from now. I do agree that the pro of using WebGL is that you don't have to learn a new scripting language, like ActionScript 3, if you're already familiar with Javascript, which most web developers should be familiar with.
     

Share This Page