WebGL は、Web ページでの 3D レンダリングの新時代を開き、プラグインを使用せずに 3D コンテンツをキャンバスに直接レンダリングできるようになります。 WebGL はキャンバス 2D API と同じであり、スクリプトを通じてオブジェクトを操作するため、作業コンテキストの準備、データの準備、キャンバスへのオブジェクトの描画、レンダリングという手順は基本的に似ています。 2D との違いは、3D にはワールド、ライト、テクスチャ、カメラ、マトリックス、その他の専門知識など、より多くの知識が必要となることです。 WebGL には優れた中国語チュートリアルがあり、これは以下の使用方法のリファレンスの最初のリンクにあるため、ここでは何もしません。以下の内容は学習内容の簡単な概要にすぎません。
ブラウザのサポート
Microsoft は独自のグラフィックス開発計画を持っており、WebGL をサポートしていないため、IE は現在、プラグインをインストールする以外に WebGL を実行できません。 Chrome、FireFox、Safari、Opera などの他の主流ブラウザの場合は、最新バージョンをインストールするだけです。最新のブラウザをインストールすることに加えて、グラフィック カード ドライバーも最新であることを確認する必要があります。
これらをインストールした後、ブラウザを開いて次の URL を入力して、ブラウザの WebGL サポートを確認できます: http://webglreport.sourceforge.net/。
上記のブラウザを正常にインストールした後も WebGL を実行できない場合は、WebGL サポートを強制的にオンにしてみてください。開く方法は次のとおりです:
Chrome ブラウザ
次の具体的な手順では、Windows オペレーティング システムを例に挙げます。 Chrome のショートカットを見つけます。ブラウザでショートカット メソッドを右クリックし、ターゲット ボックスでプロパティを選択し、chrome.exe の後ろの引用符の後に次の内容を追加します。
--enable-webgl--ignore-gpu-blacklist--allow-file-access-from-files
いくつかのパラメータの意味は次のとおりです:
--enable-webgl は WebGL サポートを有効にすることを意味します。
--ignore-gpu-blacklist は GPU ブラックリストを無視することを意味します。これは、グラフィックスが存在することを意味します。カードと GPU が古すぎるなどの理由から、WebGL を実行することはお勧めできません。このパラメータを使用すると、ブラウザはこのブラックリストを無視して、WebGL を強制的に実行できます。リソースをローカルにロードできるようにするため、WebGL 開発者ではなく、WebGL の開発やデバッグを行う必要はないが、WebGL デモを見てみたいだけの場合は、このパラメータを追加する必要はありません。
Firefox ユーザーは、ブラウザのアドレス バーに「about:config」と入力し、Enter キーを押して、フィルター (フィルター) で「webgl」を検索し、webgl を置き換えてください。 .force-enabled を true に設定し、webgl.disabled を false に設定します。フィルターで「security.fileuri.strict_origin_policy」を検索し、security.fileuri.strict_origin_policy を false に設定します。その後、現在開いている Firefox ウィンドウをすべて閉じ、Firefox を再起動します。
最初の 2 つの設定は WebGL サポートを強制的にオンにするもので、最後の security.fileuri.strict_origin_policy 設定はローカル ソースからのリソースのロードを許可するものです。WebGL 開発者でない場合は、その必要はありません。 WebGL の開発やデバッグを行うが、WebGL のデモを確認したいだけの場合は、この項目を設定する必要はありません。
メニューで「プロパティ」→「詳細設定」を見つけ、「開発メニューを表示」を選択し、「開発」メニューに移動して「WebGL を有効にする」を選択します。
次のコードは、関連する概念を簡単に要約したもので、リファレンスの中国語チュートリアルからのものであり、より多くの 3D 知識が必要です。興味のある学生は、実践リファレンスの中国語チュートリアルに直接ジャンプできます。ここで説明する内容よりもはるかに詳細で正確です。この楽しみに参加した生徒は、コードの各行の意味を深く掘り下げることなく、ただ見るだけで済みます。
準備
言うまでもなく、これはレンダリングコンテナとしてページに Canvas 要素を追加するためです。例:
ステップ 2: シェーダーの初期化 - initShaders
シェーダーの概念は、率直に言って、グラフィックス カードの操作命令です。 3D シーンを構築するには、色や位置などの情報を大量に計算する必要があり、これらの計算をソフトウェアで実行すると、速度が非常に遅くなります。したがって、グラフィックス カードにこれらの操作を計算させると、これらの計算の実行方法がシェーダーによって指定され、非常に高速になります。シェーダ コードは GLSL と呼ばれるシェーダ言語で記述されますが、ここでは説明しません。
シェーダーは HTML で定義し、コードで使用できます。もちろん、プログラム内で文字列を使用してシェーダーを定義する場合にも同じことが当てはまります。
最初に定義部分を見てみましょう:
どうですか?ネイティブ WebGL を使用して開発するのはどのような感じですか? 3D に関する深い知識が必要なだけでなく、さまざまな実装の詳細についても知る必要があります。 WebGL は、さまざまなアプリケーション シナリオに柔軟に適応するためにこれを実行しますが、私のようなほとんどの非専門家にとって、多くの詳細を知る必要はありません。これにより、このセクションで使用される Oak3D ライブラリなど、開発を支援するさまざまなクラス ライブラリが誕生しました (WebGL 開発を示すために、この例では行列補助メソッドのみが使用されています)。次のセクションでは、一般的に使用される Three.js グラフィックス ライブラリを紹介します。
実用的なリファレンス:
中国語チュートリアル: http://www.hiwebgl.com/?p=42