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

文書とブラウザ

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

collision detection 無しにはゲームを描くには難しいです。— 何か他のことが起こった際に私達は解決するのにいつも必要になります。さらに学ぶために可能な情報があります。:

セクションへリンクWebVR

バーチャルの概念は新しくはありません。Webにおける強力なOculus Rift、VRハードウエアから情報がキャプチャするためのWebVR API(現在実験されている)、JavaScriptアプリケーションが使われることによって可能になって作られるもののようなハードウエアの発達のおかげによるものが大きいです。   より多くは以下を読んで下さい。 WebVR — Virtual Reality for the Web.

ここにどのように簡単に3D環境が仮想空間がA-Frameフレームワークで使って作られるかというのを見せるBuilding up a basic demo with A-Frameの記事もあります。

セクションへリンクライブラリーへフレームワークへ高められる

生のWebGLのコーディングは極めて複雑です。しかしあなたのプロジェクトより進んだものになる(我々のWebGL documentationを見て下さい)につれて、それをより長く走らせることにでより深く理解したくなるでしょう。現実世界のプロジェクトでプロジェクトを働かせ管理するのを助けてより発展させてスピードアップするためにたぶんフレームワークを使うことになるでしょう。3Dゲームで使われるフレームワークは使うツールによってたくさんケアされることによってパフォーマンスの最適化を助けることにもなるだろう。なので、ゲームを作り上げることに集中することができます。

最も有名なJavaScriptの3DライブラリはThree.jsです。3Dの共通のテクニックが作られる多目的ツールはそのテクニック同様に実行できます。他のゲームの開発された有名なライブラリーやフレームワークがあって、チェックする価値があります。A-FramePlayCanvas , Babylon.jsはそれぞれはっきりとしたもので豊富なドキュメントがあって、オンラインの編集者がいて、活動的なコミュニティがあります。

セクションへリンクA-Frameの基本的なデモを作り上げる

A-Frameは3DやVR経験を構築するためのwebフレームワークです。中身はthree.jsフレームワークで宣言型のエンティティコンポーネントパターンを持っています。ちょうどHTMLのsceneを構築できるようなものを意味しています。Building up a basic demo with A-Frameのサブページを見てステップバイステップでデモを作り上げていって下さい。

セクションへリンクBabylon.jsの基本的なデモを作り上げる

Babylon.jsは開発者にとって最も有名な3Dゲームエンジンの一つです。他の3Dライブラリーでは普通の3D機能をより早く実行するのを助けるビルトインされた機能をたくさん提供します。Building up a basic demo with Babylon.jsのサブページでBabylon.jsを使ってみて、基礎を見てみてください。このページは開発環境の構築や必要なHTML構文やJavascriptのコードを書くことを含みます。

セクションへリンクPlayCanvasの基本的なデモを作り上げる

PlayCanvasはGitHub上のオープンソースの有名な3D WebGLのエンジンです。編集者はオンラインで良いドキュメントを作成しています。Building up a basic demo with PlayCanvasサブページでは高いレベルでの詳細、そしてさらにはPlayCanvasのライブラリー、オンラインの編集者によるどのようにデモを創るかという記事があります。

セクションへリンクThree.jsの基本的なデモを作り上げる

Three.jsは他のライブラリーとして、巨大なアドバンテージがあります。:より早く簡単に興味があること作り上げるのに助けになる機能でWebGLで何百行とコードを書くことの代わりになります。Building up a basic demo with Three.jsサブページを見て、ステップバイステップでデモを創り上げるのを見て下さい。

セクションへリンク他のツール

UnityUnrealはどちらもasm.jsと一緒にWebGLにエクスポートすることができます。web上にエクスポートするつもりでゲームを作るツールや技術として使うのは自由です。

 

セクションへリンク次はどこへ行くか

この記事では現在可能な技術で何ができるか表面的なことをただ書きました。あなたはweb上でWebGLを使って、そして何よりもライブラリーやフレームワークを使って美しく早い3Dゲームを作るのに没頭することができます。

セクションへリンクソースコード

あなたはこのシリーズのデモコードをdemos on GitHubですべて見ることができます。

セクションへリンクAPIs

セクションへリンクFrameworks

セクションへリンクTutorials

  •  

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

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