1. To chat with the GameOgre community, you need to have at least 100 posts. Once you have the 100 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:
    15,528.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
    shugo, Jul 21, 2014
    shugo, Jul 21, 2014
    #1
  2. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,528.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.
     
    shugo, Aug 2, 2014
    shugo, Aug 2, 2014
    #2
  3. cemex

    cemex Espion Ogre Veteran

    Messages:
    3,213
    Likes Received:
    111
    Trophy Points:
    63
    Credit:
    4,701.96
    looks nice :)
     
    cemex, Aug 2, 2014
    cemex, Aug 2, 2014
    #3
  4. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,528.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
    shugo, Aug 2, 2014
    shugo, Aug 2, 2014
    #4
  5. cemex

    cemex Espion Ogre Veteran

    Messages:
    3,213
    Likes Received:
    111
    Trophy Points:
    63
    Credit:
    4,701.96
    it works ok for me
     
    cemex, Aug 2, 2014
    cemex, Aug 2, 2014
    #5
  6. Aaddron

    Aaddron Moderator Staff Member GameOgre Moderator

    Messages:
    42,983
    Likes Received:
    3,053
    Trophy Points:
    113
    Credit:
    261,677.33
    Wow that does load up quick and smooth, really cool.
     
    Aaddron, Aug 2, 2014
    Aaddron, Aug 2, 2014
    #6
  7. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,528.42
    thanks all

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

    City
     
    shugo, Aug 4, 2014
    shugo, Aug 4, 2014
    #7
  8. Aaddron

    Aaddron Moderator Staff Member GameOgre Moderator

    Messages:
    42,983
    Likes Received:
    3,053
    Trophy Points:
    113
    Credit:
    261,677.33
    The gray and blue ones don't have the building texture on them.
     
    Aaddron, Aug 4, 2014
    Aaddron, Aug 4, 2014
    #8
  9. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,528.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.
     
    shugo, Aug 4, 2014
    shugo, Aug 4, 2014
    #9
  10. Aaddron

    Aaddron Moderator Staff Member GameOgre Moderator

    Messages:
    42,983
    Likes Received:
    3,053
    Trophy Points:
    113
    Credit:
    261,677.33
    Found a green one and a few brown ones way on the outside but no red yet.
     
    Aaddron, Aug 4, 2014
    Aaddron, Aug 4, 2014
    #10
  11. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,528.42
    there's only 2 of them ;)
    out of 3600 buildings you'll have a hard time looking for those 2 ;)
     
    shugo, Aug 4, 2014
    shugo, Aug 4, 2014
    #11
  12. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,528.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.
     
    shugo, Aug 4, 2014
    shugo, Aug 4, 2014
    #12
  13. Aaddron

    Aaddron Moderator Staff Member GameOgre Moderator

    Messages:
    42,983
    Likes Received:
    3,053
    Trophy Points:
    113
    Credit:
    261,677.33
    That would explain it. :)
     
    Aaddron, Aug 4, 2014
    Aaddron, Aug 4, 2014
    #13
  14. shugo

    shugo Elite Ogre Ogre Veteran

    Messages:
    2,093
    Likes Received:
    12
    Trophy Points:
    38
    Credit:
    15,528.42
    hehe ;) I guess it would
     
    shugo, Aug 4, 2014
    shugo, Aug 4, 2014
    #14
  15. Snowy

    Snowy Ogre Hall of Fame Royal Ogre
    1. [Video Game Spotlight of the Month] Path of Exile 2
    2. Gaming Community

    Messages:
    47,929
    Likes Received:
    2,704
    Trophy Points:
    113
    Credit:
    1,884,010.91
    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.
     
    Snowy, Aug 9, 2017
    Snowy, Aug 9, 2017
    #15

Share This Page