Create an account


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Javascript: WebGL implementation

#1
Heeello Eclipse, quite recently I ported my WebGL implementation from Dart to JavaScript, and I figure the best way I can iron out all of the issues would be to share it!

Some things to note:
  • I am not a Javascript (or Dart for that matter) web developer, so there will almost certainly be a better way of doing things.
  • I despise the entity-based rendering model employed by the likes of Phaser, MelonJS, etcetc, so I loosely replicated a simplistic XNA-like model. It's highly likely that said entity-based rendering model is common for a reason.
  • I started with documenting and then...kinda fell off. If things are lengthy or unclear, just ask, I'll get back to documenting it at some point.
  • I built this for my use, ie, it will likely have a few quirks (or may even be just plain bad). Again, ask if anything is unclear.
You can use this for whatever you feel the need to render on. As far as licensing goes, do whatever you please with it, however I'd greatly appreciate anybody who could share their improvements or upgrades to it. I'd also appreciate any error reports provided.

I've tried this with rendering 1000 sprites and it maintained 60 FPS even on my phone, however, I've not done extensive testing beyond framerate checks.

Anyway

                                                  

Renderer class: http://pastebin.com/7FPpKfmB
SpriteBatch class: http://pastebin.com/As5CiaRZ
Texture class: http://pastebin.com/Jx5tyJCg

Sample Game Loop: http://pastebin.com/HarJJWku

How to use:
  • Create a HTML Document
  • Load all of the provided classes into said document with script tags
  • Add a canvas tag, give it an ID
  • Create a main.js file/script tag and stick your sample game loop AFTER loading the provided classes
  • Replace the canvas ID within var canvas = document.getElementById("{HERE}");
  • ???
  • Profit!
Load your textures as such
texTest = new Texture(renderer, "relative/filepath/here.png");


And draw them by putting them in between the spriteBatch.begin() and spriteBatch.end().
spriteBatch.draw(texTest,           
    { x: i, y: 50, width: 26, height: 32 },
    { x: 0, y: 0, width: 26, height: 32 });

The first argument is the Texture object, the second is a destination rectangle (pass it in as it is or things will go strange! I am lazy and didn't implement any way of checking this) and the second is a texture source rectangle.
Reply

#2
It seems odd to me that you would use only some new ES features, like classes, yet omit others, like let and const. You've also got a pretty high cyclometric complexity in some of your methods; I'd have broken those up into a few functions, personally.

All that being said, you did say that you're not a JS developer, so I'll give you the benefit of the doubt.
Reply

#3
I will go and address that right now (and take care of comments while I'm at it, too), thanks. Smile
Reply

#4
(06-16-2016, 12:38 PM)Chief Wrote: It seems odd to me that you would use only some new ES features, like classes, yet omit others, like let and const. You've also got a pretty high cyclometric complexity in some of your methods; I'd have broken those up into a few functions, personally.

All that being said, you did say that you're not a JS developer, so I'll give you the benefit of the doubt.

Eh, cyclo isn't JS specific though. I'll give him the benefit of the doubt with GLES though, mostly because I don't know GLES.
Reply

#5
Ah, I totally forgot to keep this updated

Here is an updated Renderer class, complete with commenting and refactoring and general tidy-up.
http://pastebin.com/Vr5rHXHh

To go with it, here is an optional Rectangle class. You can keep using JS objects as they are or use this, it doesn't really matter, however, the updated SpriteBatch class I post will be making use of the Rectangle class. I will likely add other typical methods (such as intersects, contains, inflate, constrict, union, a centre getter, etc) as part of it.
http://pastebin.com/4DA7QUgX


Do note that I use Browserify, so if you do want to use these without Browserify, remove the "module.exports = " bit at the start and use as you normally would.


Right now, I am refactoring and commenting SpriteBatch and will be extending .begin() to include clamping and alpha blending parameters much like XNA. Rectangle commenting will come with it too.
As with before, I've done no significant benchmarking, that isn't my focus yet.
Reply



Forum Jump:


Users browsing this thread:
1 Guest(s)

Forum software by © MyBB 1.8.4 Theme © iAndrew 2016