• Content Count

  • Joined

  • Last visited

  • Days Won


Felipe last won the day on March 3 2013

Felipe had the most liked content!

About Felipe

  • Rank
    Advanced Member
  • Birthday 10/06/1988

Contact Methods

  • Website URL
  • Twitter

Profile Information

  • Gender
  • Location
    Santiago, Chile

Recent Profile Visitors

1875 profile views
  1. Hi Rojoss, I believe most of Unity's WebGL games don't work well is because they use emscripten to compile C++ to asm.js and that might bring a lot of issues when dealing with cross browser support, specially if the browser is not optimized to handle it. For example Firefox runs asm.js programs pretty good but others don't. I feel so far the best solution to have a robust UI cross browser is to implement it yourself using what every graphics API you choose to use (canvas or webgl). DOM based UI could display different in each browser around. For rendering I would definitely recommend WebGL since it's widely supported and allows for faster rendering of polygons. Honestly I would recommend building the rendering backend yourself. It'll give better control of what you want it would be tailor made to your own needs, also WebGL is not that complicated to get you can easily build a canvas type of API that runs 20x faster than native canvas. For debuggers, if you work with Chrome there is the DevTools which are pretty good and easy to use. Includes CPU and memory profilers. The newer version also include GPU profilers. Firefox have very similar tools too. If you choose to go with WebGL for rendering I would highly recommend using a plugin called WebGL Inspector. It gives a nice look into what gl calls are being made, how your vertex buffers look like, the gl state, etc. Personally I try not to over complicate my self. Don't make simple task more difficult for yourself just because it uses the latest or the coolest library or design pattern. Keep it simple, clean and fast. Regards, Felipe
  2. Currently I don't think is a good idea doing GPGPU on WebGL game right now. It's true, calculating matrix transformations is super fast on the GPU and it's ideal for general purpose calculation, specially with compute shaders. The problem is that currently WebGL doesn't give any performance optimization when doing synchronization from device to host memory. It might be great for generating an immutable single block of data at initialization but not for executing GPU calculations every frame (updating meshes, calculating physics, etc). The main bottleneck you'll get is with glReadPixels. You can even try it with the gpu.rocks demo, try running that test while rendering a game. Maybe when the standard decides to add compute shaders and PBOs to webgl it could be possible.
  3. Hi, I feel the first two points I mentioned should be appended to the last one, once you do the last one do the first two. What I mean about memory overhead is that probably for your current hardware pushing 10k triangles is too much. Also you are currently using 2 buffers, one for vertex position and the other for vertex color. What I suggest is putting both in the same buffer this would make the composition of your buffer something like: [x0, y0, argb0, x1, y1, argb1, ...]. This is how you could use a single vbo to store your vertex data (position and color) var VBO, aWorldCoordsLocation, aColorLocation; // vertexSize represents the size in bytes of your // attribute data. (float + float + (char * 4)) var vertexSize = (4 * 2) + (4); VBO = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, VBO); aWorldCoordsLocation = gl.getAttribLocation(program, 'aWorldCoords'); aColorLocation = gl.getAttribLocation(program, 'aColor'); gl.enableVertexAttribArray(aWorldCoordsLocation); gl.enableVertexAttribArray(aColorLocation); // Offset is 0 gl.vertexAttribPointer(aWorldCoordsLocation, 2, gl.FLOAT, false, vertexSize, 0); // Offset is 8 because the size of a vec2 in bytes is 8. gl.vertexAttribPointer(aColorLocation, 4, gl.FLOAT, true, vertexSize, 8); Cheers
  4. GPU acceleration is great when you understand how to take advantage out of it. Things I think could help - Use and index buffer and put vertex attribute data in one single buffer. This way you can avoid switching between buffers. - If you are not updating buffers then use gl.STATIC_DRAW. - I think this is the most relevant for your test. Having a single draw call doesn't mean better performance. Split your triangles into reasonable batches and do multiple draw calls. Maybe limit the amount of triangles to 4000 or less. I feel the main issue with your example is memory overhead. You can look at the code of this tiny canvas implementation I did if you want some reference, it's not the fastest 2D renderer but it uses the stuff I mentioned: https://github.com/bitnenfer/tiny-canvas/blob/master/src/canvas.js Cheers.
  5. Really nice tutorial. Thanks for sharing it! I've been using ECS for a while now and I really enjoy using it for large projects as it's very modular. One thing that I added to my own engine is that you can pass components to the entity contructor. Currently what I have is something like this: var bindFunc = function (func, object) { if (typeof func.bind === 'function') { return func.bind(object); } else { return function () { return func.apply(object, arguments); } } }, Entity = function () { var components = Array.prototype.slice.call(arguments), init = function () { components.forEach(function (component) { if (typeof component === 'function') { component(entity); } }); }, entity = { /*Have what ever you want here*/ }; init(); return entity; }, Component = function (name, properties) { return function (entity) { entity[name] = entity[name] || {}; Object.keys(properties).forEach(function (key) { if (typeof properties[key] === 'function') { entity[name][key] = bindFunc(properties[key], entity); } else { entity[name][key] = properties[key]; } }); return entity; }; };var Render = Component('render', { draw: function (graphics) { // draw stuff! } }), Position = Component('position', { x: 0, y: 0 }), myEntity = Entity(Render, Position);myEntity.render.draw(myGraphics);
  6. The game is running on a different website and zibbo is using an iframe to run the game in their portal. What they are also doing is waiting for ad to be shown so they can load the needed sciprts asynchronously. If you look in the console you can find the softgames domain and see the scripts.
  7. You could use closure. (function (scope) { // your code goes here. // if you want to leave something at the global scope scope.MyGlobalVariable = 'hi';}(window));
  8. Felipe

    Canvas Query 1.0

    It wouldn't be a performance boost as PIXI. But I've used a language called monkey-x with a webgl patch that really improves performance of rendering. The mojo API is very similar to your canvasquery's one with functions like: DrawRect DrawCircle DrawImage DrawImageRect etc... Here you can see the webgl implementation: http://source.mungo.io/modules/mojo/blob/master/native/mojo.html5.webgl.js Mojo is property of Blitz Research and this implementation is a fork of Monkey-X called Mungo.
  9. Felipe

    Canvas Query 1.0

    Cool! I like this. I was working on something similar but your's look more complete than mine. I was thinking on doing something similar but also supporting WebGL. Thanks!
  10. Thanks a lot for the comments. I understand that the enemy bullets going through walls could be annoying but without that the game would have been really easy. I guess I would have made life easier with a rate of fire that wasn't so invasive. Cheers!
  11. EXTREME MINI MASSACRE http://js13kgames.com/entries/extreme-mini-massacre Hi everyone, I want to share with you this small game I created for the js13kgames compo. It's all about shooting like a crazy person. You can play using you keyboard + mouse or with an Xbox 360 controller. Cheers!
  12. Cool! I really like this competition We'll see how Jack Rugile kicks our asses again, hehe.
  13. Looks more legible than objective-c, so that's a good thing for me.
  14. Hello everyone! I am very excited on showing the first game we've release as internal HTML5 game dev team at Spil Games. This game was made for GirlsGoGames. About: As the owner of a Jungle Hospital you must take care of the animals that check in. Where to play: http://www.girlsgogames.com/game/cute_jungle_hospital.html Cheers!
  15. Hey guys, I want to share with you this small prototype i've been working on this past week. There is probably a lot of bugs but I plan on work on them during the weekend. The idea is basically matching 4 in a row. You play against an anonymous player. If you played connect 4 then you'll get it right away. Any feedbacks, comments and ideas on how could I improve it, are always welcomed. THE GAME LINK http://shin.cl/shonpon/online/ Cheers, Felipe.