Web上での豊富なゲームの経験のために武器になる選択がWebGLです。そしてそれはCanvas上にレンダーされます。<canvas>要素は2Dや3Dの文脈を持ちます。そして我々は後で働かせるでしょう。webGLは基本的にWebのためのOpenGL ES 2.0 です。それはゲームはもちろん豊富な相互的なアニメーション構築するために提供しているJavaScript APIです。ハードウエアを加速させるJavaScriptでダイナミックな3Dグラフィックをレンダーしたり生み出したりすることができます。

 

celerated.

文書とブラウザ

WebGL のプロジェクトのドキュメントや定義は Khronos Group によってメンテナンスされています。Web API群のほとんどはW3Cのようなものではありません。モダンブラウザへのサポートはモバイルであっても大変良いものであまり悪く思うようなことはないでしょう。主なブラウザはすべてWebGLをサポートしていて、自分の使うデバイスの最適化に注力する必要があります。

近い将来のWebGL 2.0 のリリースに努力が払われていて(それはOpenGL ES 3.0をベースにされている)、そしてそれは多くの改善をもたらし、現在、強力なハードウエア上のモダンWebでのゲームの構築を助けます。

セクションへリンク基本的な3D理論の説明

3D理論の基礎の中心をなすものは3D空間に形を表現するものでそれらの位置を計算するのに使う座標システムです。すべての情報が必要でしたら Explaining basic 3D theory を参照して下さい。

セクションへリンクより進んだ概念

もっとたくさんのことをWebGLでは行うことができます。あなたがより飛び込んで学ぶためのより進んだ概念をいくつか示します。--shaderのようなもの、collision detectionや最もホットな話題--Web上での仮想現実

セクションへリンクShaders

Shaderの価値のある言及があります。それは自身が分裂した物語です。ShaderはGLSLが使われていて、特にopenGLの言語にはあグラフィックパイプラインよって直接実行されるC言語に似た構文の言語が使われています。それらはVertex ShadersとFragment Shaders (もしくは Pixel Shaders)に分けることができます。前者は形の位置を実際の3Dに書く座標の位置に変換ができて、一方で後者は色や他の属性をレンダリングすることができます。もっとそれらを勉強するために GLSL Shaders の記事をもっとよく読むべきです。

セクションへリンクCollision Detection

It's hard to imagine a game without the collision detection — we always need to work out when something is hitting something else. We have information available for your to learn from:

セクションへリンクWebVR

The concept of virtual reality is not new, but it's storming onto the web thanks to hardware advancements such as the Oculus Rift, and the (currently experimental) WebVR API for capturing information form VR hardware and making it available for use in JavaScript applications. For more, read WebVR — Virtual Reality for the Web.

There's also the Building up a basic demo with A-Framearticle showing you how easy it is to build 3D environments for virtual reality using the A-Frame framework.

セクションへリンク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. 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.

The most popular JavaScript 3D library is Three.js, a multi-purpose tool that makes common 3D techniques simpler to implement. There are other popular game development libraries and frameworks worth checking too; A-FramePlayCanvas and Babylon.js are among the most recognizable ones with rich documentation, online editors and active communities.

セクションへリンクBuilding up a basic demo with A-Frame

A-Frame is a web framework for building 3D and VR experiences. Under the hood, it is a three.js framework with a declarative entity-component pattern, meaning we can build scenes with just HTML. See the Building up a basic demo with A-Frame subpage for the step-by-step process of creating the demo.

セクションへリンクBuilding up a basic demo with Babylon.js

Babylon.js is one of the most popular 3D game engines used by developers. As with any other 3D library it provides built-in functions to help you implement common 3D functionality more quickly. See the Building up a basic demo with Babylon.js subpage for the basics of using Babylon.js, including setting up a development environment, structuring the necessary HTML, and writing the JavaScript code.

セクションへリンク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 high level details, and further articles showing how to create demos using the PlayCanvas library, and the online editor.

セクションへリンク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.

セクションへリンクOther tools

Both Unity and Unreal can export your game to WebGL with asm.js, so you're free to use their tools and techniques to build games that will be exported to the web.

セクションへリンクWhere to go next

With this article we just scratched the surface of what's possible with currently available technologies. You can build immersive, beautiful and fast 3D games on the Web using WebGL, and the libraries and frameworks build on top of it.

セクションへリンクSource code

You can find all the source code for this series demos on GitHub.

セクションへリンクAPIs

セクションへリンクFrameworks

セクションへリンクTutorials

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

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