週末のプロジェクトの結果を皆さんと共有したいと思います。 これは純粋にjavascript / htmlクライアントアプリケーションであり、JavascriptソースコードエディターとGLSLシェーダー、ミニリンカー、Three.JS / WebGLを備えたウィンドウ、および小さなランタイムインターフェイスで構成されています。 これらはすべてjqueryに接着されており、ビデオギャラリーが上にねじ込まれています。 ギャラリーにはいくつかのデモがあります。 お気に入りのデモを選択してコードを操作したり、JSONを介して複数のファイルからプロジェクト全体をエクスポートおよびインポートしたりできます。
各デモのコードは、複数のファイルに配置できます。 これらのファイルはajaxによってロードされ、すぐにローカルストレージに保存され、そこで編集、新しいファイルの追加、削除ができます。 繰り返しますが、アプリケーションは純粋にクライアントです。 ローカルストレージにファイルを追加するには、ファイルapiを使用します。 追加できるのはテキストファイルのみです。ローカルストレージのボリュームでは、バイナリファイルのbase64表現を保存するときに移動できないためです。
私は通常のホスティングを行っていないため、動作中のアプリケーションへのリンクは提供しません。 あとは、ソースをダウンロードしてWebサーバーに配置するだけです。 最近、WebGLはローカルファイルシステムからテクスチャをダウンロードすることを禁止されているため、Webサーバーが必要です。
すべてのソースは、MercurialシステムのBitbucketで入手できます： https : //bitbucket.org/Bangybug/treejsplayground、Zipアーカイブもダウンロードできます。
興味のある小さなビデオがまだあります：
興味があり、ソースをダウンロードすることに決めた場合、Chrome（21.0.1180.60があります）でのみ正常に動作することを警告する義務があると思います。 Firefox（14.0.1を使用）では、WebGLは無効になりました。有効にするには、アドレスバーにconfigを入力し、webglにフィルターを設定し、 force-enabled = trueおよびdisabled = falseを設定する必要があります 。 しかし、Firefoxの悲しみはこれで終わりではありません。ギャラリーについては以下をお読みください。
どのようにすべてが始まり、何に変わったのか
最初はシェーダーを書く必要がありました。 私はこの問題についてあまり経験がないので、計画は私の仮想の友人に助言を求めることでした。 また、プロトタイプをすぐに見せることで、何かをインストールする必要はなく、飛行して変更を加えて結果を観察できる可能性があるため、彼らの作業を少し簡単にしたかったのです。
構想-完了、選択はすぐにWebGLに落ちました。 Three.JSライブラリが正常に起動したため、WebGL関数の呼び出しから自転車を構築したくありませんでした。 それから、textareaの代わりにバックライト付きエディターを選択するのがいいだろうという考えがちらつきました。 選択はACEに落ちました。 それは私にとって非常に高品質のようで、大きなファイルで動作し、 コードの折りたたみをサポートし、コードを分析し、エラーがどこにあるか、またはそれを改善する方法を伝えることができます。
次に、ファイルのリストを含め、クライアントの裁量でファイルを削除および追加できるプロジェクトマネージャーの外観を作りたいと思いました。 私は基本的にサーバーコードに連絡したくありませんでした。Html5のイノベーションであるFile APIとLocal Storageだけで解決策しかありませんでした。
ファイルのリストを含むプロジェクトマネージャーの準備が整うと、ソースファイル用のリンカーの必要性は自動的に成熟しました。 eval関数の助けを借りて、すべてのファイルを反復処理する基本リンカーが作成されました。 ソースコードの1つで、リンカーがまだ到達していない別のソースの機能が必要な場合、特別なリンカー関数APP.requireを呼び出すだけで十分です 。 この場合、リンカは以前に接続されたファイルを通過しません。
だから、問題に遭遇することなく、レッスンを続けることにしました。 CSSおよび視覚効果における他のHtml5の革新に関心が移りました。 各ビデオが何らかのCSS効果で表示されるビデオギャラリーを作りたかったのです。 すでに困難があります。 それらについてはさらに書かれています。
最後のステップは、シェーダーコードを別のタイプのソースに分離することでした。 シェーダーを編集するとき、エディターはC文法に切り替わりました。 そうでなければ、シェーダーコードをJavascriptまたはHtml内に保存する必要があるため、便利であることが判明しました。
プロジェクトファイルと最小限のランタイムインターフェイスのコンパイル
既に述べたように、基本的なリンカーがあります。 app / linker.jsファイルにあります 。 これにはrequire関数があり、ソースからAPP.requireとして入手できます。 コンパイルされたソースの正しい接続順序を確保するために、この関数を呼び出す必要があります。 使用例は、武器デモの兄弟です （ギャラリーを参照）。
次のオブジェクトで構成される最小限のランタイムインターフェイスもあります。
- APP.page.webgl.renderer-すぐに使用できるThree.JSの Rendererオブジェクト。
- APP.page.webgl.viewport - widthおよびheightプロパティを持つオブジェクト。WebGLウィンドウの初期化時に自動的に設定され、値はwebgl.cssから取得されます 。
- APP.page.webgl.viewportMouse-ポインターがWebGLウィンドウの上にあるときに最後の座標を返すgetX（）およびgetY （）関数を持つオブジェクト。
- APP.shader（vertexShaderFileName、fragmentShaderFileName、uniforms） -指定されたルーチンとuniforms定数から組み立てられた新しいTHREE.ShaderMaterialオブジェクトを返します。 将来的には、 ユニフォームオブジェクトのプロパティの値を変更できます。シェーダーは、レンダリング前にそれらを自動的に取得します。
これは、クライアントソースに提供される最小ランタイムです。 次に、 メイン関数と終了関数をクライアントソースで定義する必要があります。 これらの関数は、デモンストレーションの開始と停止を担当します。 exit内のリソースをクリアすることをお勧めします。
ビデオギャラリーの実験
ここで苦労しました。 まず、Chromeのborder-radiusはvideo要素には適用されません。 より正確には、ポスターとして使用される画像にのみ適用されます。 ビデオの再生が開始されるとすぐに、フィレットが消えます。 box-reflectionスタイルはwebkitでのみ機能します。
Firefoxはレイアウトの問題を思い付きましたが、悲しいことに、ビデオギャラリーというアイデアを思いつきました。 ホバーすると1つしか再生されない場合でも、4〜5つの動画要素だけを取得して貼り付けることはできません。 Firefoxは多くのリクエストを送信します。このページは最終的にローカルのApache httpdにさえなります。 ブラウザを閉じなければなりません。
Chromeでは、メモリ消費を確認する際に瞑想するものがまだありますが、サスペンションに問題はありません。
最後に、ファイルapp / gallery.js / initialize-useImagesにパラメーターを追加しました。 trueに設定すると、ビデオの代わりに画像が表示されます。
シェーダー編集
シェーダーをコンパイルするために、上記のAPP.shader関数を追加しました。 Three.JSのコードがここで使用されていることを明確にします。 このコードは、頂点シェーダーに「位置」という属性を自動的に設定します。 これを覚えておいてください、この属性に別の名前でシェーダーを書こうとしないでください。 別の方法があります-関数app / webgl.js / shaderを書き換えますが、同時にThree.JSのドロワーを使用する機能が失われます。
純粋なWebGLサンプルコードとの比較
Three.JSのコードがはるかに少なくなることは言うまでもありません。 そして、あなたが私の遊び場を使用する場合、コードはまだ減少します。 唯一の障害は、特定のWebGL関数がThree.JSライブラリでどのようにラップされるかを理解する必要があることです。 たとえば、Three.JSのTRIANGLE_STRIP頂点データ送信モードは、 THREE.Ribbonオブジェクトに対応しています。
比較のために、同一プロジェクトのディレクトリを開きます： / defaults / sources / waterおよび/ defaults / sources / water_webgl そのため、純粋なWebGLとThree.JSを使用した場合の違いを理解できます。
新しいデモを準備してプロジェクトに挿入する
すべてのデモはapp / gallery.js / projectsで説明されています 。 典型的な説明は次のようになります。
'spheres' : { files : [{type:'source', path:'defaults/sources/spheres/main.js', content:null}], category : 'Basic', title : 'Many ballz', image : 'defaults/sources/spheres/img.png', video : 'defaults/sources/spheres/video.ogv', description: 'Basic demo from Three.JS package, creates 50k spheres with different materials. Demonstrates on-the-fly texture generation.' }
ビデオを録画するために、無料のCamstudioプログラムを使用しました。 それから、320x200のサイズのビデオを取得する必要があります。 これを行うには、 webgl.cssでウィンドウサイズを320x200に事前設定し、Camstudio自体でこの領域からのビデオキャプチャを設定します。 ホットキーも役立ち、ビデオを編集する必要がなくなります。 ビデオファイルを追加するディレクトリをすぐに選択することをお勧めします。 できればルートではありません。
ビデオをビデオ要素に埋め込むには、OGG Theoraに変換する必要があります。 私はFFMpeg2Theoraを使用しました 。
Urlでパラメーターを使用する
便宜上、urlでパラメーターを使用できます。 たとえば、ギャラリーを表示するには、アドレスに次を追加するだけで十分です：？Gallery = category 、categoryはデモのカテゴリです（デモの説明を参照）。
？Project = project_idを追加することにより、目的のプロジェクトにすぐにリダイレクトできます。ここで、project_idはapp / gallery.js / projectsのキーで、たとえばspheresです。