2
\$\begingroup\$

I'm trying to understand if it's possible to create a game where the player can switch between 2d (strategic/bird view) and 3d (actual gameplay) using only the 3d supported JS/HTML5 game engine, like three.js or babylon.js?

I'm aware that there are few 2d/3d game engines like Godot, Turbulenz and Blend4Web, but still curious if i can do it same good only with a 3d game engine.

Thanks in advance.

| improve this question | |
\$\endgroup\$
  • \$\begingroup\$ What would make it impossible? What specific barrier have you encountered so far that you're not sure how to overcome? In general, StackExchange is better at helping you solve real demonstrated problems, than it is at speculating on whether something might possibly pose a problem in the future. \$\endgroup\$ – DMGregory♦ Mar 6 '17 at 4:49
2
\$\begingroup\$

2d rendering is easily possible with 3d rendering engines, even when there is no explicit support for it.

How it would work: Just put your two-dimensional geometry parallel to the xy-plane (or any other plane) and set your camera's viewing direction orthogonal to this plane. I would suggest using a orthogonal projection matrix, which allows you to make use of different depth-levels easily (which may look odd if you're using a 3-dimensional perspective projection).

I you just want to show your normal scene from above you don't even need to set up manual 2d-geometry. Just Put your camera above your scene (usually in +y direction) and switch to orthogonal projection.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ Thanks for the descriptive answer! As you perhaps understood i'm not a game designer so pardon me for dumb questions, but, when the player would switch to orthogonal projection from up above, is it possible to actually design this view rather than showing 3d models from above? We designing football match, so 3d would look like [this] (lh5.ggpht.com/_sLN-4LHcbvM/SQqkqSaBhdI/AAAAAAAACG0/hUKLty5BgD8/…), and 2d would be something like [this] (grumpyscottishman.files.wordpress.com/2016/10/2d-graphics.jpg) \$\endgroup\$ – Ziya Mar 6 '17 at 13:07
  • \$\begingroup\$ @Ziya If you want to show other geometry (like the 2d-icons for players) the first approach would be the one to choose. Place your 2d-graphics on a plane and put your camera somewhere orthogonal to it. You could also try to just replace your 3d models with the 2d-icons and put your camera above, but creating a separate scene/view is probably more painless. \$\endgroup\$ – LukeG Mar 6 '17 at 13:12
  • \$\begingroup\$ can you share here how to do this with code sample?(preferably with babylon.js) \$\endgroup\$ – user3785971 Jun 6 '18 at 19:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.