Do you draw the entire object? - javascript

Hi I'm working on learning 3d game development and I'm starting with JavaScript and the html5 canvas and I was wondering if I were to have a 3d model do I draw the entire model(front, back, etc) and let the web browser decide what to render or should I try to just draw the sides that are in view of the camera? I ask this because I can see how it would be faster to do the latter of the 2 but that can get very complex and I'll need to do quite a bit more research to find how to do that.
Thanks!!

It's up to you, but it depends at least in part whether it's more expensive to spend the time clipping the model or just to render the entire thing dumbly.
Modern GPUs are pretty fast at drawing tons of geometry, so you often won't optimize the geometry sent to the card. However, it sounds like you're using the 2D canvas and writing your own rasterizer, so it may well be faster for you to do some quick optimization. Profiling and experimenting will turn up the right answer for your particular project.
If you're just learning I wouldn't worry overly about performance at this point but instead making sure you get the fundamental ideas and math down.

Related

HTML5 Game, canvas or div?

I am planning on creating a real-time multiplayer platformer game in HTML5 using javascript. After searching about 4 hours on the webs, i couldn't find an up-to-date answer on the eternal question: rendering my game with DOM will be faster than rendering it inside a canvas? The game will be the whole document. 2/4 players will be jumping on the map and will shoot at each other, bombs will explode. So? What will it be. I remember I made 2 years ago a draw application with DOM and it worked kinda smoothly, but i guess canvas speed is better nowadays? Thank you guys.
P.S. I think of using Dart too.
I use canvas, and would say to do the same since it's a direct drawing mode. However, you should absolutely make sure it is forced into hardware acceleration wherever possible. You do this by setting the style of the <canvas> element into transform:translateZ(0); (or different browser interpretations of that, e.g. -webkit-transform:translateZ(0);). Manipulating the DOM can be slow now that canvas is closer and closer to native code, especially with simple methods to get the most performance out of it.
My games seem to do pretty well on different platforms with this - not universally well on every single platform (older Android OSes lag, but their JS & browser rendering engines weren't that fast to begin with), but quite well on many platforms.
Canvas is the best choice for the type of game you are describing, but some DOM elements are still very useful even using canvas, for example, asking the player's name, or creating a menú or profile section inside the game. You can render a div with absolute position on top of your canvas when you need to display DOM elements, and do all the "game stuff" like drawing and animate sprites in the canvas element.
The reason why Canvas is the best choice is simple. I'm pretty sure that you can't or it would be really hard to do things like this without the canvas element:
http://galloman.github.io/ss2d/samples/skeletons2.html
More at: http://ss2d.wordpress.com/support/

HTML5/JS - A good game engine which doesn't rely on Canvas?

I'm looking to build an RTS game built mainly in HTML/CSS. There would be a map, but I am unsure if to build it in Canvas or some other way.
The map needs to stretch out for different window sizes, so I was thinking maybe SVG.
I've literally found a ton of game engines, but they seem to mainly rely on canvas.
I guess my main priorities are:
sound
frame limiting
time traversal
AI
I'm looking for a game engine library to use in Javascript that lets me render DOM elements and not just canvas elements.
Try Crafty game engine. It lets you choose between canvas and DOM rendering. And it got lots of other good stuff.
BabylonJS is the best gaming engine right now. It supports geometry instancing which provides good performance to render large amounts of units on screen. Plus it comes with its own physics engine, supports WebGL, imports Blender models and ton of other great features.
http://www.babylonjs.com/

HTML5 - How to just draw the finished canvas/image

I'm making a little game with HTML5 and MooTools and I have performance problems on firefox. I have implemented a counter to determine how often my update method gets called and it returns 64 times per second. The result seems much much slower (like 30 FPS). I think my problem is actually described on this article http://blog.sethladd.com/2011/03/measuring-html5-browser-fps-or-youre.html. I couldn't find out a way to solve this directly, but I think I can optimize the perforance.
I think one big problem in my logic is that I draw every single object on the canvas directly. I have done some games in Java before and I had great performance improvements with manipulating an image (drawing in the memory) and drawing just the final image. This way the browser would have much less requests to draw something and perhaps draw faster.
Is there a way to do this? I have found some libraries for image manipulation in JavaScript, but I would like to do it myself.
I can't show you the full code, because the project is for school and because it is way too big (~1500 lines of code).
http://www.html5rocks.com/en/tutorials/canvas/performance/
Maybe this will help. It shows you how to improve performance by using an offscreen canvas to render your scene.

How to make 3D animation with Canvas

I have background on Canvas 2D context, but i want to perform a 3D animation like this one, is Three.js library the best choice to do such animation? Can you point me to some useful tutorial or documentation that may help. Thanx in advance.
That's one of the most common choices.
As WebGL enables OpenGL without the need for libraries, you might also do it with just Vanilla JS but that would be harder as WebGL doens't offer much more refinement over the raw and crude OpenGL.
Apart three.js, you could also try GLGE or PhiloGL but as Three.js is the most popular I would recommend to go for it if you have no specific requirement.
Looks like the demo you linked to is using a canvas library called Clay.js. Not one that I've personally heard about until now. For 3d in canvas the most popular one I know of it Three.js as you already mentioned. It has the benefit of supporting webGL as well (browser based openGL variant).
Three.js has limited documentation and some examples but outside of some books you may buy there isn't a lot of hand holding. You basically need to dive in and start coding. Here are some online resources that may help you get started (not necessarily all focused on THREE.js):
http://aerotwist.com/tutorials/getting-started-with-three-js/
http://learningthreejs.com/
http://learningwebgl.com/blog/
To make it easier to work with THREE.js Jérôme Etienne created a project called tQuery which you can think of kinda like jQuery. A wrapper to make it easier to get your hands dirty. Here's a video where he shows how to create a webGL game in 10 minutes.

2D interactive animation engine in HTML5

I'm looking for a simple JavaScript library or framework to create interactive 2D animations in the browser. (Excuse the buzzword in the title, but I'm not set on any particular rendering technology like Canvas or SVG.)
This should make it simple to draw and animate arbitrary (though not very sophisticated) shapes on a canvas screen and allow users to select and move these shapes as objects (kind of like a very basic RTS game engine).
Ideally, the following features should be supported (directly or indirectly; I'd implement it myself if necessary):
panning
zooming
fisheye partial zooming
box selection (selecting multiple objects by drawing a box around them)
Not being familiar with such things yet, I find it tricky to research what's out there (e.g. regarding search terms). Also, I have no illusions about some magical package that doesn't require any effort on my part - indeed, I'd prefer simple and readable libraries so I can learn about the basics by reading the source.
If you like simple libraries, perhaps take a look at GameJS. It claims to be "a thin library on top of the HTML5 canvas element." It's a port of PyGame to JavaScript, which in my experience is a fairly nice abstraction layer that at the same time doesn't overdo it.
If that doesn't cut it, have a look at this list of JS game (and animation) engines.
You probably did make a search and found dozens of js game engines. I will just narrow it down for you. It is impossible to just spit out one single js game engine. Also, you might find some to be more appropriate than others based on the type of game you want to make. So here they are
LimeJS
Impact
Crafty

Categories