THREE.JS入門チュートリアル(5)知っておきたい10のこと_基礎知識

Three.js は、WebGL で JavaScript が GPU を操作し、ブラウザ側で真の 3D を実現できる優れたオープンソース WebGL ライブラリです。ただし、このテクノロジーはまだ開発段階にあり、情報が非常に少ないため、愛好家は基本的にデモのソース コードや Three.js 自体のソース コードを通じて学ぶ必要があります。
0. はじめに
こんにちは、これは良いコードの書き方に関する最初の記事です。多くの開発者と同様に、私も実践しながら学びましたが、他のより経験豊富な開発者からも学びました。私はここ数か月間、canvas タグに多くの時間を費やしてきました。この間に WebGL と JavaScript について学んだちょっとしたコツをすべて書き留めておこうと思いました。非常に具体的なものもあれば、非常に一般的なものもあるので、気に入っていただければ幸いです。
1. できるだけ早くプロトタイプを作成します
簡単に始めましょう。素晴らしいアイデアを思いついたので、すぐにプログラムの最も複雑な部分のプロトタイプを作成して、テクノロジーがアイデアを実装できるかどうかを確認する必要があります。 WebGL はグラフィックス カードの GPU を直接操作できるため非常に強力ですが、JavaScript を介してグラフィックス カードにアクセスする必要があるため、グラフィックス カードの内部コンピューティングよりも効率が大幅に低いことを忘れないでください。実際、あなたの天才的なアイデアは、これと同じくらい単純なことで打ち負かされる可能性があります。
2. 3D 処理には THREE.JS を使用します
友人の Hakim と同様に、私も使用しているテクノロジーの低レベルの詳細を十分に理解しています。表面の下にあるものを理解することは重要ですが、three.js を使用すると、多くの手間が省けます。 Canvas、WebGL、SVG で使用でき、ニーズに合った方法が見つかるはずです。
3. SetInterval を避ける
これは、JavaScript を使用してアニメーションを作成する人にとって重要な点です。なぜ？関数を 20 ミリ秒ごとに実行するように設定し、この関数の実行に 20 ミリ秒以上かかるとします。20 ミリ秒が経過すると、ブラウザーは気にせず、次の実行を直接開始します。少なくとも、SetTimeout を使用して、関数の実行後にその関数を再度実行するように設定できます。

実際には、requestAnimationFrame と呼ばれる、より最新ではあるがまだ中途半端な関数があり、これは素晴らしいものです。これは setTimeOut 関数とよく似ていますが、2 つの点が異なります。1 つはタブがフォーカスを失うと実行されなくなる点で、この関数はまだブラウザーに依存しており、標準は将来変更される可能性があります。さらに詳しい情報が必要な場合は、Paul Irish のブログを参照してください。
4. 逆順ループを使用する
これはループを高速化するための素晴らしいトリックです。逆の順序を使用し、while ループを使用します。たとえば、次のループ:

コードをコピー コードは次のとおりです。

for(var a = 0; a < arr.length a ) {
// 何かを実行します
}

次のループほど効率的ではありません:

コードをコピー コードは次のとおりです:

// 配列 arr が存在すると仮定します

var aLength = arr。 length;
while(aLength --) {
// 何かを実行します
}


実行の効率は主に実行内容に依存するため、これではあまりオーバーヘッドが節約されない可能性があります。ループ本体で実行します。ただし、プログラムの不必要なオーバーヘッドを最後のバイトまで削減したい場合は、後者のループが確実に優先されます。

正直に言うと、プログラムの実行効率に影響を与える主な要因は配列キャッシュの長さです。 JSPerf をチェックして、これや JavaScript のパフォーマンスに影響を与えるその他の要因について学ぶことができます (実際、そうすべきです)。

5. テクスチャを使用する
WebGL でオブジェクトのあらゆる詳細を描画することは誘惑に駆られるかもしれませんが、可能であれば、テクスチャを使用できるかどうかに注意を払う必要があります。パフォーマンス。シャドウやブラー効果など、特定の場合にはテクスチャを使用する必要がある場合もありますが、それ以外の場合には、テクスチャを使用できるかどうかに常に注意を払う必要があります。
6. キャッシュを使用する
私自身の実験でこれを何度も試しましたが、フレーム ループでは変数、オブジェクトなどを参照しないようにする必要があります。このため、アニメーションをレンダリングするときにすぐにアクセスできるように、すべてのモデルと頂点をキャッシュすることは価値があります。
7. チェックを無効にする
私はこの小さなコードが気に入っており、Canvas または WebGL を含むすべてのページに入れています。

コードをコピー コードは次のとおりです:

// DOM 要素のマウス選択を無効にします

ドキュメント。 onselectstart = function() {
return false>};
Canvas コントロール内でのみ選択を無効にすることもできます。これは、キャンバスが画面全体を占めるプロジェクトで使用するコードです。
8. JavaScript での CSS の定義を避ける
現在、特に JQuery を使用する場合、CSS を JavaScript で定義するのが非常に便利です

コードをコピー コードは次のとおりです:

// これは行わないようにしてください
$("#someid").css({
位置: '相対'、
高さ: '30px'、
幅: '300px'、
背景色: '#A020F0'
});問題は、これを実行すると、すぐに JavaScript コードにさまざまなタイプの CSS 定義が埋め込まれることになり、CSS の定義にも *.css ファイルを使用するため、潜在的な問題の検出が困難になることです。より良いアプローチは、クラスを使用して CSS をモジュール化し、JavaScript で予測不可能な CSS クラスのみを定義することです。

9. オブジェクトでコールバック関数を定義します。

これは決して私が思いついたものではありませんが、とてもすっきりしていて美しいです。使用するコールバック関数が多数ある場合は、次のように使用できます:

コードをコピーします コードは次のとおりです。 : $("#someid").click(function() {

// コールバック関数

// JQuery で false を返すと、メッセージの配信とリリースが妨げられます。デフォルトの動作
return false;
});


または、次のように、コード内の別の場所で定義された緩い関数をコールバックします。 🎜>
コードをコピーします

コードは次のとおりです。

$("#someid").click(mySuperFunction); (event) { // ここで多くのことを実行します return false;

これを行うにはいくつかの問題があります。最初のコードでは、匿名関数をイベントにバインドしましたが、イベントから関数のバインドを解除するのは困難です。もちろん、イベントのすべての関数をアンロードすることもできますが、複数の関数がバインドされていて、1 つだけをアンロードしたい場合もあります。 2 番目のケースでは、関数名がグローバル変数スペースを汚染し、コードの保守性が低下します。

コードをコピーします

コードは次のとおりです:

$( "#someid" ).click(callbacks.mySuperFunction); // すべてのコールバック関数はコールバック オブジェクト内にあります var callbacks = { mySuperFunction:function(event) { // その他の作業return false; }

}

// 関数のバインドを解除します
$("#someid").unbind('click', callbacks.mySuperFunction);
これはすっきりしていて、上記の 2 つの問題を回避します。

10. 連鎖三項演算子

これはすべて Paul Irish の「JQuery, 11 Things You Should Know」から学びました。これはとても便利なので、あなたも気に入っていただけるはずです。私たちはよくこれを行います:




コードをコピー

コードは次のとおりです:
// によるとa の値、numberBasedOnA 割り当て
// a が 5 より大きい場合は 200 を割り当て、それ以外の場合は 38 を割り当てます

でも、これをやりたい場合、例えば、ある値だったらどうするか、ある値より大きい場合はどうするか、さらに大きい値だったらどうするか、ということになりますね。この場合、連鎖三項演算子は非常に便利です: コードをコピー

コードは次のとおりです:


varnumberBasedOnA =

a a // これを行うより効率的です

// >=15 の場合