MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

3D games on the Web

この翻訳は不完全です。英語から この記事を翻訳 してください。

For rich gaming experiences on the Web the weapon of choice is WebGL, which by default is rendered on Canvas. The <canvas> element have 2D and 3D contexts, and we'll be working with the latter. WebGL is basically an OpenGL ES 2.0 for the Web - it's a JavaScript API providing tools to build rich interactive animations and of course also games. You can generate and render dynamic 3D graphics with JavaScript that are hardware accelerated.

Documentation and browser support

The WebGL project documentation and specification is maintained by the Khronos Group, and not W3C as most of the Web APIs. The browser support is very good, even on mobile, so you don't have to worry about that much. The main browsers are all supporting WebGL and all you need to focus on is optimizing the performance on the devices you use.

There's an ongoing effort on releasing WebGL 2.0 (based on OpenGL ES 3.0) in the near future which will bring many improvements and will help developers build games for the modern Web using current, powerful hardware.

Explaining basic 3D theory

When it comes to the most basic 3D theory it's all about shapes in a 3D space using the coordinate system to calculate it's position. See the Explaining basic 3D theory article for all the information you need to get the concepts behind three dimentions on the web.

Advanced concepts

These were just the basics, but you can do a lot more with WebGL. There are some advanced concepts which you can dive into and learn more like shaders, collision detection or the latest hot topic: virtual reality on the web.

Shaders

It's worth mentioning the shaders, which are a separate story on it's own. They are using GLSL which is a special OpenGL Shading Language with the syntax similar to C that is executed directly by the graphics pipeline. They can be split into Vertex Shader and Fragment Shader (or Pixel Shader) - the first one transforms positions of the shapes in space while the second one is computing the colors and other attributes. You should definitely check out ShaderToy for the list of impressive demos of shaders in action to be inspired for your next 3D game.

Collision Detection

It's hard to imagine a game without the collision detection - almost always something is hitting something else. You can check this handy article about 3D AABB collisions with Three.js to see how it was implemented and how you can use it in your own game.

WebVR

The concept of virtual reality is not new, though it's back thanks to the successful Oculus campaign and with other manufacturers working hard on delivering their own devices. I'm not sure if you know that, but we already have a JavaScript API for that called WebVR. We can play with the devices and code JavaScript demos and examples for virtual reality right in the browser - check out this cool article about WebVR for games.

The rise of libraries and frameworks

Coding raw WebGL is fairly complex, but you'll want to get to grips with it in the long run, as your projects get more advanced (see our WebGL documentation to get started.) For real world projects you'll probably also make use of a framework to speed up development and help you manage the project you're working on. The most popular JavaScript 3D library is Three.js, a multi-purpose tool that makes common 3D techniques simpler to implement.

There are some quite popular game development libraries and frameworks already, with PlayCanvas and Babylon.js being among the most recognizable ones with rich documentation, online editors and active community. Using a framework for 3D games also helps optimize the performance as a lot is taken care of by the tools you use, so you can focus on building the game itself.

Building up a basic demo with Three.js

Three.js, as any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot easier and faster. See the Building up a basic demo with Three.js subpage for the step-by-step process of creating the demo.

Building up a basic demo with PlayCanvas

PlayCanvas is a popular 3D WebGL game engine open sourced on GitHub, with an editor available online and good documentation. See the Building up a basic demo with PlayCanvas subpage for the step-by-step process of creating the demo.

Where to go next

It's just the beginning, with this article we just scratched the surface of what's possible with the current technology. Using raw WebGL makes almost no sense, but there are many tools built on top of that which can help you make a game quickly and effectively. You can build immersive, beautiful and fast 3D games on the web. See the PlayCanvas article if you'd like to use an online editor and don't want to code much, or check out the Babylon.js article if you're more into the coding part. Remember that both Unreal Engine and Unity exports to WebGL with the help from asm.js, so if that's your weapon of choice, then go for it and start creating the content for the web.

Read on

There are numerous tutorials you can use to learn more about the topic. Check out those sources:

ドキュメントのタグと貢献者

 このページの貢献者: chrisdavidmills
 最終更新者: chrisdavidmills,