ピクセルシェーダーUIコンポーネント：最初のシェーダーの作成

「ピクセルシェーダーボスおよびピクセルコマンダー」と呼ばれるのは誰ですか？ ReactとWebGLを使用したフォトリアリスティックWebゲームのEvolution Gamingで働くDenis Radin ：彼はPixels Commanderという名前で多くの人に知られています。



12月に開催されたHolyJS会議で、彼はGLSLを使用して「通常のJavaScript」と比較してUIコンポーネントの作業を改善する方法についてプレゼンテーションを行いました。 そして今、Habrのためにこのレポートのテキスト版を準備しました-ようこそkat！ 同時に、スピーチのビデオを添付します。







そもそも、視聴者への質問です。Webではいくつの言語がサポートされていますか？ （聴衆からの声：「単一ではない！」）

さて、ブラウザの言語は、そう言ってみましょう。 三？ HTML、CSS、JS、SVGの4つがあるとします。 SVGは宣言型言語と見なすこともできますが、これは別の種類ですが、HTMLではありません。



しかし、実際にはさらに多くあります。 VRMLがあり、彼は死にました、あなたはそれを数えることができません。 GLSL（「OpenGLシェーディング言語」）もあります。 また、GLSLはWeb用の非常に特殊な言語です。



残り（JS、CSS、HTML）はWeb上で発生し、Webページから他のプラットフォーム（モバイルなど）で勝利の行進が始まったためです。 そして、GLSLはコンピューターグラフィックスの世界、C ++で生まれ、そこからウェブに来ました。 そして、それの素晴らしいところ：OpenGLが動作する場所ならどこでも動作するので、学んだならどこでも（Unity、Swift、Javaなどで）使用できます。



GLSLは、コンピューターゲームのクレイジーな特殊効果の背後にあります。 そして、私はその助けを借りて、面白くて珍しいUIコンポーネントを開発することができます。それらについては後で説明します。 また、並列コンピューティングのテクノロジーでもあるため、GLSLを使用して暗号通貨をマイニングできます。 何に興味がありますか？

物語

GLSLの歴史から始めましょう。 いつ、なぜ彼は現れましたか？ 次の図は、OpenGLレンダリングパイプラインを示しています。







最初に、OpenGLの最初のバージョンでは、レンダリングパイプラインは次のようになりました：頂点が入力に供給され、プリミティブが頂点から収集され、プリミティブがラスタライズされ、フレームがトリミングされ、フレームバッファーが出力されます。



ここに問題があります：カスタマイズできません。 パイプラインが明確に定義されているため、そこにテクスチャをアップロードできますが、正確なリクエストに対して特別なことはできません。



最も単純な例を見てみましょう：霧を描きます。 シーンがあります。 それはすべて頂点で構成され、テクスチャが重ねられています。 OpenGLの最初のバージョンでは、次のようになりました。







霧はどのように作られますか？ フォグバリューの式では、これはカメラまでの距離にフォグの密度を掛けたもので、ピクセルの色は現在のピクセルの色にフォグの色とフォグの量を掛けたものに等しくなります。 画面上の各ピクセルに対してこの操作を実行すると、次の結果が得られます。







GLSLシェーダーは、2004年にOpenGL v2に​​登場し、これがOpenGLの歴史の中で最大のブレークスルーでした。 1991年に登場し、13年後の今、次のバージョンがリリースされました。



それ以降、パイプラインレンダリングは次のようになり始めました。







頂点が入力に供給され、頂点シェーダーが最初に実行され、オブジェクトのジオメトリを変更できるようになり、次にプリミティブが構築され、ラスタライズされ、フラグメントシェーダーが実行されます（「fragment」は「ピクセル」を意味します。トリミングして表示します。



さて、GLSLの機能のいくつかについてお話ししましょう。なぜなら、JS開発者にとっては、非常に多くの、異常で奇妙に聞こえる要素が非常に多いからです。



まず、Web開発者にとって私たちにとって重要なことは、GLSLはWebGL仕様の一部です。 GLSLへのゲートウェイは<canvas />です。



GLSLはGPUドライバーを使用してコンパイルされます。 これにより、特定のプラットフォームごとにコンパイルされるため、クロスプラットフォームであり、驚くほど高速です。 プラットフォーム用に特別にコンパイルされ、意図された特別なハードウェア上で実行されるため、JavaScriptよりも数千倍高速です。



同時に、カードなどの多くのプロセスで起動します。ハードウェアのニュースであるGTX 970カードに従うと、同時に1664シェーダープロセスを実行します。 あなたがどれだけ自分のことができるか想像してみてください？



一般的に、これがマイニングの実行方法であり、他のすべて、すべての並列コンピューティング-これらはCUDAプラットフォームであり、シェーダーを介して機能します。 それらは常にGLSLであるとは限りませんが、WebにはOpenGL仕様の一部であるGLSLシェーダーがあります。



データが一度だけ送信されるという事実に関連する特定の機能があります。 実行は、パッセージ全体、画面全体に対して並行であるため、データはシェーダーに一度ロードされ、これを考慮する必要があります。



GLSLは強く型付けされた言語です。 タイプはfloat、integer、boolean、2-3-4コンポーネントベクトル（実際には2-3-4-element配列です）、2-3-4次元の行列があります。



これは数学のために研ぎ澄まされた言語であり、想像できるすべての素晴らしい三角関数と数学関数を持っています：ラジアンから度、ラジアンから度、サイン、アークコサイン、タンジェント、行列乗算、ベクトル乗算、さまざまな微分など。

練習する

いいね 理論から、実践に移りましょう。 最も単純なピクセルシェーダーを検討してください。







最初に円の半径を設定します。これはfloat型の変数です。 その場合、中心は2成分のベクトルになります。 GLSLの原点は左上隅ではなく、左下隅にあることに注意してください。 座標を少し動かして、この円をどこかに移動できます。



次に主な機能があります。これはシェーダーへのエントリポイントです。 まず、組み込みの距離関数、現在のピクセルの座標、および中心の座標を使用して、中心までの距離を計算します。



次に、inCircle float変数が計算されます。ピクセルが円の内側にある場合は1に等しく、外側にある場合はゼロになります。



最後の操作は、画面に表示される色を決定する出力パラメーターgl_FragColorです。 前述のinCircleを割り当てます。 つまり、円の内側にいると、1つになります。



これは非常に興味深い略記です。1つのfloat変数から4コンポーネントのベクトルが作成され、ベクトルのすべてのコンポーネントにこの変数の値がすぐに割り当てられます。 RGBA表記を使用します。つまり、4つのコンポーネントはRGBとアルファチャネルです。



そして、次のように変更できます。







ここで何が起こっていますか？ 結果の値をすべてのチャンネルに一度に割り当てるのではなく、緑にの​​み割り当てます。



さて、ほとんど役に立たない最も単純な例から、実用的な問題を解決することに移りましょう。 アムステルダムの秋の悲しい朝、私はJIRAで仕事を得て、人生が少し楽しくなりました。



タスクはスピナーに関するものでした。 私たちはJSでオペレーティングシステムを記述しましたが、OSにはこのようなクールなスピナーがありました。 それは機能しましたが、1つの小さな問題がありました。ある種のバックグラウンドプロセスがあるとき、スピナーが時々ひきつりました。 私はそれを整理するように頼まれました。







掘り始めたところ、スピナーがスプライトシートを使用して実装されていることがわかりました。要素の背景の位置が変わり、これらすべてのフレームがスクロールします。







基本的には機能しましたが、おそらく、バックグラウンドの位置が変更された場合、何が起こるか知っていますか？ 塗り直します。 絶え間ないリッピングがあり、これによりプロセッサがロードされ、非常に高速に動作しませんでした。



これはどのように修正できますか？ CSSを介して可能です。 当然、私はすぐにGLSLのジャングルに入りませんでした。最初は、CSS、ハードウェアアクセラレーションプロパティを通じて、最も簡単な方法ですべてを行いました。 ハードウェアアクセラレーションのプロパティがあることを多くの人が知っています。これらのプロパティを使用すると、何らかのアニメーションを実行できます。 ここでは、これらすべてを不透明度に変更できます。つまり、背景の位置から不透明度に変更できます。



これを不透明度でどのように行うことができますか？ すべてのフレームをレイヤーに分解し、不透明度の助けを借りて徐々にフレームを非表示にして表示すると、一般に同じ効果が得られますが、再生は行われません。 Hooray、QA部門はパフォーマンスの向上を確認し、誰もが幸せです。



翌日、JIRAで別のタスクを受け取りました。 デニス、あなたはすでにスピナーの専門家であることを知っています。スピナーはまったく同じで、青と幅がわずかに異なります。



スピナーがたくさんいることは知っていましたが、小さな問題があることに気付きました。 まず、ビデオメモリの150フレームのこのスピナーは、8プラスメガバイトで展開されます。これらのテクスチャの解像度とビット数によって具体的に計算します（各フレームにテクスチャが作成されるためです。 100キロバイトをダウンロードします。一般に、各スピナーは解凍する必要があることを考慮すると、約20〜30メガバイトかかります。スピナーの場合、30メガバイトは、多くの場合です。



ブラウザには256メガバイトの制限がありました。それらに到達するとすぐに、システム全体が崩壊しました。 携帯電話では、スピナーごとに100メガバイトも許容できない贅沢だと思います。



わかりました、問題があります。 GLSLを使用して解決できます。 これがどれほど実用的かについては、後で説明します。

シェーダーを書く

これで、ピクセルシェーダーを一緒に作成できます。 スピナーは、アニメーションアーチの形で表すことができます。このアーチは、開いたり開いたりすることで開きます。開始と終了の角度を変更し、このアーチは一定の周期性、減衰、加速で回転します。 したがって、GLSLで数学を使用してアーチを描く方法を学ぶ必要があります。



まず、Chrome Refined GitHubの拡張機能をインストールします。コミットから差分をコピーする必要があります。 配置しない場合、差分テキストをコピーしようとすると、行番号がコピーされるため、手動で削除する必要があります。 したがって、洗練されたGithubは行番号を別のリストに入れてくれるので、とても役立ちます。



次に、 オンラインシェーダーエディターとPixelsCommander / pixel-shaders-workshop GitHubリポジトリを開きます。ここで手順を実行する必要があります。



どこから始めますか？GLSLエディターの最初のステップをコピーして貼り付けてください。







ここで何が起こっていますか？ 新しいブロックの最上部には、前の例にはありませんでしたが、ここには統一変数があります。 「均一」とは、JavaScriptから送信される変数を意味します。 JavaScriptのu_time、u_resolution、およびu_mouseが表示されます。 最も興味深いのはu_resolutionです。 彼女が言うことは、キャンバスの次元です。 JavaScriptはキャンバスディメンションを取得し、GLSLの2コンポーネントベクトルを送信しました。これで、GLSLのキャンバスサイズがわかりました。



PIでは、手で常に書かないようにpiを決定しました。 次に、u_resolutionに0.5を乗算しました。これは2コンポーネントベクトル（幅と高さがあります）で、ベクトルに0.5を掛けると、そのすべてのコンポーネントに一度に0.5が掛けられます。 そのため、ディメンションの半分が見つかりました。 その後、彼らは幅と高さの最小値として半径を取りました。



これでCircle関数ができました。先ほど、サークル内にいるかどうかをメインで定義し、現在のピクセル、中心、半径の座標を起動する別の関数に移動しました。



そして、主に、Circle関数を実行した結果としてisFilledを取得し、ユニットからisFilledを減算します。これは、背景を白にしないようにするためです。 つまり、彼らはこの富をすべて逆転させました。



次のステップ ：円のセクターを切り取ります。







扇形を描く関数と、角度が2つの与えられた角度の間にあるかどうかを示す関数を追加します。 さらに、isFilledはサークルとセクターの結果の積になりました。 どちらの場合も1つであれば、図の範囲内にいます。 円が考慮されない場合、セクターは無限になり、円に限定されません。 結果は次のようになります。







さて、 3番目のステップ 。 アーチを描きます。







新しいアーチ機能がここに追加されます。 次に、その厚さを知る必要があります。これのために、内部半径を計算し、何が見えるのでしょうか？



これでisFilledができました-これはarc関数を実行した結果で、開始角度、終了角度、内側半径と外側半径を渡します。 ここでは、それはすべて、私たちがすでに持っているセクターと、互いに反転する円の2つの関数に基づいて内部的に構築されます。 つまり、2つの円が切り取られ、一方が他方を非表示にします。



すべてが素晴らしく、すべてが素晴らしく、アーチがあり、ほぼ準備ができていますが、よく見るとあなたを助けようとすると、アーチがピクセル化されていることに気づくでしょう、スムージングなしの「クローブ」があります：







これは、スムージングがないためです。これは、円を描くときに、ここでステップ関数を使用し、ポイントが円内にあるかどうかを判断し、値が小さい場合、ステップ関数が離散的に0または1を強制的に遮断するためです与えられた場合、これは0であれば、1です。したがって、ピクセルは黒でも白でもかまいません。



これを取り除きましょう。これはステップ4になります。アンチエイリアスを追加します。







step関数をsmoothstepに置き換えています。 また、smoothstepは「0または1」のどちらかだけではなく、2つの値の間を補間します。 ここには「distanceToCenter-2ピクセル」があり、distanceToCenterだけがあります。つまり、2ピクセルのスミアリングによるアンチエイリアスがあります。 ここで用語について議論することができますが、実際にはシェーダーにアンチエイリアスを追加しました。







そして、アーチは滑らかで絹のようになりました。



それでは、最も困難なアニメーションに移りましょう。 一般に、アーチを描くことは5年生の三角法であり、複雑なことは何もありません。 アニメーションでは、最初に認識して分解する必要があるため、物事はもう少し複雑です。



スピナーアニメーションを分解すると、実際には2つのアニメーションがあることがわかります。 1つは折りたたみのブロック解除アニメーションで、2つ目は回転アニメーションです。 さらに、ループの開始時にアニメーションの速度が上がり、終わりに遅くなります。 これは、正弦関数の動作に非常に似ています。-pi / 2からpi / 2の区間では、最初に加速が始まり、急激に上昇し、その後減速します。







ステップ5 この関数をアーチの始点と終点の角に適用します。 しばらくの間は少し立派ですが（これは修正されます）、collapse-unblockのアニメーションを取得します。 ここで何が起こっていますか？ 時間は-pi / 2からpi / 2の期間で終了し、サイン関数がこれに適用され、0から1の値を取得するたびに、どれだけ折りたたまれるか、不幸です。 つまり、実際には、ここでイージング関数が使用されます。これは、双子のどこででも使用されるものです。CSSでは、ここでGLSLに実装されます。 次に、このイージング関数の結果に360を掛けて、開始角度、つまり終了角度を取得します。これは、前に作成したarch関数に渡します。



次のステップは、スピナー全体の回転です。







回転はすべて単純で、すでに理論的なベースを準備しています。サインが駆動し、startAngleとendAngleにサインから取得した値を追加していますが、2倍の周期があるので崩壊する、崩壊する、それはたった1つの革命であることが判明した。



このように、私たちはスピナーを手に入れました。これはすでに技術的なタスクにほぼ対応しています。 少しパラメーター化を追加します。







これを行うには、RGB関数が必要です。 使用する必要はありませんが、通常はPhotoshopから色を取得し、0〜255のチャネルバイト値を持っているため、0〜1のGLSLでそれを見ることができます。 255/255/255に馴染み、出力で1/1/1を取得します。



メインでこの関数を使用します。また、火災の場合に備えて、背景のカスタマイズも追加されています。







幅と色を変更できる素晴らしいベクタースピナーが判明しました。 コンポーネントは準備ができており、動作し、GPUでレンダリングされます。このすべてに70行のコードが必要です。 休息する場合は、おそらく最大5行まで絞ることができます。もちろん、これは、スプライトシートで送信した情報の量と比較することはできません-ちょうど天と地です。 写真だけで30メガバイトがある場合、さらにテクスチャなどに同じコンテキストを初期化する必要がある場合は、明らかな進歩があります。

私たちはそれについて何ができますか

WebアプリケーションでGLSLコンポーネントを使用する方法は？ 既に述べたように、これはWebGLコンテキストを介して行われます。







簡単な方法があります。 GLSLコンポーネントと呼ばれるWebコンポーネントがあり、それをページの適切な場所に配置します。このタグは、エディターで取得したGLSLコードを内部に配置します。 そして、あなたはこのブロックを持っているサイズで受け取ります、あなたはオンラインで動作するGLSLコンポーネントを受け取ります。



以前は、CSSがスプライトシートやその他のトリックを一気にストレッチすることで何ができるかを実装しましたが、常に高速ではありませんでした。 しかし、実際には、シェーダーははるかにクールです。すべてのピクセルを制御できます。



カーソルに応答するスピナーを示すgifは次のとおりです。







また、ビデオでは、 GLSLが不均衡に多くの機能を提供し、各ピクセルを制御できる方法のさらに印象的な例を見ることができます。 そこで、スピナーはすでに別のものに変わっています。



つまり、かなり単純な数学を使用して、ある種のコンポーネントを取得し、もう少し作業した後、新しい珍しいプロパティを追加できます。 ピクセルシェーダーの可能性は本質的に無限であり、数学の知識とシェーダーの作成スキルによってのみ制限されます。



そして、GLSLにとって他に良いことは、これらの無限の可能性に加えて、JavaScript開発者、フロントエンド開発者に新鮮な息吹を与えます。 あなたはJavaScriptを何年も書いており、あなたはそれが得意であり、何か新しいものが欲しいと理解していますが、バックエンドではそれを望んでいません。 この場合、GLSLはあなたの人生を変え、多様化する良い選択肢です。



どうもありがとう！

レポートが気に入った場合、 HolyJS 2018 Piterは来週既に開催され、デニスもそこで講演を行い、「ブラウザーでの暗号化のマイニング：GPU、WebAssembly、JavaScript、および試すべきすべての良いこと」をテーマにしています。 また、レポート後のディスカッションエリアでは、新しいレポートのトピックとシェーダーについて、彼に適切に質問することができます。 Denisに加えて、他にも数十人の講演者がいます 。詳細については、 HolyJS Webサイトをご覧ください 。