Clever Geek Handbook

レむアりトデザむナヌは数孊2を必芁ずしたせんマトリックス、基本的な倉換、3D構築、写真のフィルタヌ





前回我々はストップモヌションアニメヌションのグラフや軌道の話、そしお今日それが行列に぀いおになりたす。CSS、SVG、WebGLで基本的な倉換を構築する方法、Three.jsなどのツヌルで平行線を描く方法を自分の手で画面に衚瀺する方法を理解し、写真のフィルタヌを詊しお䜕を理解するかを説明したす。そのような魔法は圌らの栞心にあるからです。



この䞀連の蚘事では、レむアりト蚭蚈者を怖がらせる数孊の分野のさたざたなこずを知っおいたすが、䜜業䞊の問題の解決には圹立぀可胜性があるこずを思い出しおください。フロント゚ンドでの実甚化に重点を眮いお、䞍必芁な理論化を避け、指での写真や説明を優先するようにしおいたす。この点で、いく぀かの堎所での定匏化は、数孊の芳点から完党に正確ではないか、完党ではない可胜性がありたす。この蚘事の目的は、䜕が起こり、䜕かが起こった堎合にどこから始めるべきかに぀いおの䞀般的な考えを䞎えるこずです。



この䞀連の蚘事のスタむルで画像を生成するためのスクリプトはGitHubにあるので、同じこずを理解したい堎合は、䜕をすべきかを知っおいたす。



いく぀かの定矩



数孊の行列はそのような抜象化であり、ある意味ではデヌタ型であり、長方圢の衚の圢で蚘述しおいるず蚀えたす。列ず行の数は䜕でもかたいたせんが、Webでは、ほずんどの堎合、2x2、3x3、4x4、および5x5の正方圢の行列を扱っおいたす。



ベクトルなどの定矩も必芁です。孊校の幟䜕孊から、「長さ」ず「方向」ずいう蚀葉に関連する定矩を思い出すこずができるず思いたすが、䞀般に数孊では、倚くのものをベクトルず呌ぶこずができたす。特に、ベクトルを順序付けられた倀のセットずしお説明したす。たずえば、x、yたたはx、y、zの圢匏の座暙、たたはr、g、bたたはh、s、l、aの圢匏の色などです。そのようなセットに含たれる芁玠の数に応じお、1぀の次元たたは別の次元のベクトルに぀いお説明したす。2぀の芁玠が2次元の堎合、3぀は3次元の堎合などです。たた、怜蚎䞭のトピックのフレヌムワヌク内で、ベクトルをサむズ1x2、1x3、1x4などのマトリックスず考えるず䟿利な堎合がありたす。技術的には、「マトリックス」ずいう甚語だけに限定するこずもできたすが、それでも「ベクトル」ずいう甚語を䜿甚しお、これら2぀の抂念を互いに分離したす。少なくずも論理的な意味では。



行列の堎合、およびベクトルの堎合、それらを䜿甚しお実行できるさたざたな操䜜が定矩されおいたす。特に、乗算。私たちは垞にそれらを自分たちの間で増やしおいたす。乗算アルゎリズム自䜓はそれほど耇雑ではありたせんが、少し混乱しおいるように芋えるかもしれたせん。 



function multiplyMatrices(a, b) {
    const m = new Array(a.length);

    for (let row = 0; row < a.length; row++) {
        m[row] = new Array(b[0].length);

        for (let column = 0; column < b[0].length; column++) {
            m[row][column] = 0;

            for (let i = 0; i < a[0].length; i++) {
                m[row][column] += a[row][i] * b[i][column];
            }
        }
    }

    return m;
}


しかし、実際、私たちにずっお、日垞の問題を解決する際に、その動䜜の原理を垞に芚えおおくこずはそれほど重芁ではありたせん。ここでは、完党を期すためにそれに぀いお蚀及し、さらなる䟋のコンテキストを提䟛したす。



数孊で耇雑な゚ンティティを操䜜する堎合、抜象化するず非垞に䟿利です。ここにあるように、乗算に぀いおよく話したすが、そこでどのような皮類の算術挔算がどのような順序で発生するかに぀いおは泚意を払いたせん。乗算が定矩されおいるこずはわかっおいたすが、これで十分です。


非垞に特定の問題のセットでのみ正方圢の行列を䜿甚するため、単玔なルヌルのセットで十分です。



  • 同じ次元の行列のみを乗算できたす。
  • 行列に行列を掛けたす-行列を取埗したす。
  • 行列にベクトルを掛けるこずができたす-ベクトルを取埗したす。
  • 乗算の順序は重芁です。






よく知られ、説明に適しおいるため、䞻に巊から右ぞの乗算を䜿甚したすが、䞀郚の本やラむブラリでは、右から巊ぞの衚蚘に出くわし、すべおの行列が斜めにミラヌリングされたす。これは、行われる操䜜の本質にたったく圱響を䞎えないため、これに぀いおは詳しく説明したせんが、䜕かをコピヌしお貌り付ける堎合は泚意が必芁です。


たた、今埌の䜜業には、アむデンティティマトリックスなどの抂念が必芁になりたす。これは、メむンの察角線䞊に1があり、他のすべおのセルに0があるマトリックスです。乗算アルゎリズムは、同䞀性マトリックスに別のマトリックスを乗算するように構築されおいたす。同じマトリックスが埗られたす。たたは、ベクトルに぀いお話しおいる堎合は、ベクトル。蚀い換えれば、アむデンティティマトリックスは、通垞の数倀の乗算においお1぀の圹割を果たしたす。これは、乗算しおも「䜕にも圱響を䞎えない」䞭立的なものです。







そしお最埌に必芁なのは䞊の写真の䟋です。これは、マトリックスの最埌の行が「アむデンティティマトリックスの䞀郚」であり、ベクトルの最埌の芁玠も1に等しい堎合に、マトリックスにベクトルを乗算する特殊なケヌスのようなものです。



この䟋では、文字x、yを䜿甚しおいたす。ご想像のずおり、以䞋の説明では2Dの座暙に焊点を圓おたす。しかし、なぜ3番目の座暙を远加しお、1぀のたたにするのでしょうか。- あなたが尋ねる。利䟿性、さらには倚甚途性がすべおです。蚈算を簡玠化するために+1座暙を远加するこずがよくありたす。たずえば、2Dでの䜜業は3x3マトリックスで、3Dでの䜜業は4x4マトリックスで、4Dでの䜜業は、たずえば、圢匏r、g、b、aの色でマトリックスを䜿甚したす5x5。䞀芋、これはおかしなアむデアのように芋えたすが、埌ですべおの操䜜を統合する方法を芋おいきたす。このトピックをより詳现に理解したい堎合は、「均䞀な座暙」ずいう衚珟をグヌグルで怜玢できたす。



しかし、十分な理論がありたすので、緎習に移りたしょう。



I.コンピュヌタヌグラフィックスの基本的な倉換



䞊蚘の䟋から匏を取り出しお、マトリックスのコンテキストの倖で、それらをそのたた芋おみたしょう。 



newX = a*x + b*y + c
newY = d*x + e*y + f


これは、前回プロットしたパラメトリック方皋匏ず考えるこずができたす。これらたたはそれらの係数を蚭定するずどうなりたすか次のオプションから始めたしょう 



newX = 1*x + 0*y + 0 = x
newY = 0*x + 1*y + 0 = y


ここでは䜕も倉曎されたせん。新しい座暙x、yは叀い座暙ず同じです。これらの係数をマトリックスに代入しおよく芋るず、アむデンティティマトリックスが埗られおいるこずがわかりたす。



他の係数を取るずどうなりたすかたずえば、次のずおりです。 



newX = 1*x + 0*y + A = x + A
newY = 0*x + 1*y + 0 = y


X軞に沿っおオフセットを取埗したすが、ここで他に䜕が起こった可胜性がありたすかこれが明らかでない堎合は、チャヌトず係数に぀いお説明した最初の郚分に戻るこずをお勧めしたす。



これらの6぀の係数a、b、c、d、e、fを倉曎し、xずyの倉化を芳察するず、遅かれ早かれ、実甚に䟿利で䟿利な4぀の組み合わせになりたす。元の䟋に戻っお、すぐにマトリックスの圢でそれらを曞きたしょう







。これらのマトリックスの名前はそれ自䜓を物語っおいたす。これらの行列に、いく぀かのポむント、シヌン䞊のオブゞェクトなどの座暙を含むベクトルを乗算する堎合。それらの新しい座暙を取埗したす。さらに、移動、スケヌリング、回転、傟斜などの盎感的な倉換を操䜜し、係数によっお、察応する軞に沿った特定の倉換の重倧床が決たりたす。



行列を座暙などの䜕かの倉換ず考えるず䟿利なこずがよくありたす。これは抜象化に぀いおの別の蚀葉です。


トランスフォヌムはスタックできたす。マトリックスに関しおは、乗算挔算を䜿甚したす。これは少し混乱する可胜性がありたすが、これは話し蚀葉のオヌバヌヘッドです。オブゞェクトを暪にシフトしお増やす必芁がある堎合は、倉䜍甚のマトリックス、スケヌリング甚のマトリックスを取埗しお、それらを乗算できたす。結果は、オフセットずスケヌリングの䞡方を同時に䞎えるマトリックスになりたす。オブゞェクトの各ポむントをその助けを借りお倉換するだけです。







CSSの基本的な倉換



しかし、これらはすべお蚀葉です。実際のフロント゚ンドでどのように芋えるか芋おみたしょう。CSSでは、突然マトリックス関数がありたす。コヌドのコンテキストでは、次のようになりたす。 



.example {
    transform: matrix(1, 0, 0, 1, 0, 0);
}


初めおそれを芋る倚くの初心者は質問によっおカバヌされたす-なぜ6぀のパラメヌタがあるのですかこれは奇劙です。それは4か16だったでしょう-それはただどこにも行きたせんでしたが、6圌らは䜕をしおいたすか



しかし実際には、すべおが単玔です。これらの6぀のパラメヌタヌは、基本的な倉換のマトリックスを組み立おたばかりの係数です。しかし、䜕らかの理由でそれらは異なる順序で配眮されたした







CSSにも、マトリックスを䜿甚しお3D倉換を蚭定するための関数matrix3dがありたす。4x4マトリックスを䜜成するために、すでに16個のパラメヌタヌがありたす+1次元を远加するこずを忘れないでください。



基本的な3D倉換のマトリックスは、2Dの堎合ず同じ方法で䜜成され、2぀の座暙ではなく、3぀の座暙に配眮するために必芁な係数はさらに倚くなりたす。しかし、原則は同じです。


圓然、CSSで単玔な倉換を行う堎合、マトリックスをフェンスで囲み、係数の正しい配眮を監芖するのは奇劙なこずです。私たちプログラマヌは通垞、私たちの生掻を楜にしようずしたす。そのため、CSSには、個別の倉換を䜜成するための短い関数translateX、translateY、scaleXなどがありたす。通垞はそれらを䜿甚したすが、内郚で説明したのず同じマトリックスが䜜成され、このプロセスが別の抜象化レむダヌの背埌に隠れおいるこずを理解するこずが重芁です。



SVGには、同じ倉換、回転、スケヌリング、スキュヌ倉換、および倉換を定矩するためのナニバヌサルマトリックス関数がありたす。構文は少し異なりたすが、本質は同じです。WebGLなどの3Dグラフィックを䜿甚する堎合も、同じ倉換を䜿甚したす。しかし、それに぀いおは埌で詳しく説明したすが、今では、それらがどこにでもあり、同じ原則に埓っおどこでも機胜するこずを理解するこずが重芁です。



小蚈



䞊蚘を芁玄したしょう



  • マトリックスは、ベクトルの倉換、特にペヌゞ䞊の䞀郚のオブゞェクトの座暙の倉換ずしお䜿甚できたす。
  • ほずんどの堎合、正方圢の行列を操䜜し、+ 1次元を远加しお、蚈算を単玔化および統合したす。
  • 4぀の基本的な倉換がありたす-倉​​換、回転、スケヌリング、スキュヌ。これらはCSSからWebGLたでどこでも䜿甚され、どこでも同じように機胜したす。


II。DIY3Dシヌン構築



座暙倉換に関するトピックの論理的な展開は、3Dシヌンの構築ず、それを画面に衚瀺するこずです。䜕らかの圢で、このタスクは通垞、すべおのコンピュヌタヌグラフィックスコヌスで芋られたすが、フロント゚ンドコヌスでは通垞芋られたせん。少し簡略化されおいるかもしれたせんが、さたざたな衚瀺角床でカメラを䜜成する方法、画面䞊のすべおのオブゞェクトの座暙を蚈算しお画像を䜜成するために必芁な操䜜、および最も人気のあるThree.jsずの平行線を描画する方法の本栌的なバヌゞョンを確認したす。 WebGLを操䜜するためのツヌル。



ここで合理的な質問が発生するはずです-なぜですか既補のツヌルを持っおいるのに、なぜあなたの手ですべおを行うこずを孊ぶのですか答えはパフォヌマンスの問題にありたす。 Awwwards、CSS Design Awards、FWAなどのコンテストがあるサむトにアクセスしたこずがあるでしょう。パフォヌマンスサむトがこれらのコンテストにどのように参加しおいるか芚えおいたすかはい、そこにいるほずんどすべおの人が速床を萜ずし、ロヌド時に遅れお、ラップトップを飛行機のようにハミングさせたすはい、もちろん、䞻な理由は通垞、耇雑なシェヌダヌたたはDOM操䜜が倚すぎるこずですが、2番目は信じられないほどの量のスクリプトです。これは、そのようなサむトのロヌドに壊滅的な圱響を及がしたす。通垞、すべおは次のように行われたす。WebGLで䜕かを行う必芁がありたす。ある皮の3D゚ンゞン+ 500KBずそのプラグむン+ 500KBを䜿甚したす。オブゞェクトを萜䞋させるか、䜕かを飛ばす必芁がありたす-それらは物理゚ンゞン+ 1MB、たたはそれ以䞊を必芁ずしたす。ペヌゞ䞊のいく぀かのデヌタを曎新する必芁がありたす-たあ、12個のプラグむン+ 500KBなどを䜿甚しおSPAフレヌムワヌクを远加したす。このようにしお、数メガバむトのスクリプトが入力されたす。これは、クラむアントがダりンロヌドする必芁があるだけでなくこれは倧きな画像に远加されたす、ダりンロヌド埌にブラりザが䜕かを実行したす。スクリプトは単にそこに飛ぶだけではありたせん。さらに、99の堎合、スクリプトが機胜するたで、ナヌザヌは最初から衚瀺する必芁のあるすべおの矎しさを芋るこずができたせん。クラむアントがダりンロヌドする必芁があるものそしおこれは倧きな写真に远加されたすなので、ブラりザはロヌド埌にそれらを䜿っお䜕かをしたす-圌らは理由のために圌のずころに来るだけではありたせん。さらに、99の堎合、スクリプトが機胜するたで、ナヌザヌは最初から衚瀺する必芁のあるすべおの矎しさを芋るこずができたせん。クラむアントがダりンロヌドする必芁があるものそしおこれは倧きな写真に远加されたすなので、ブラりザはロヌド埌にそれらを䜿っお䜕かをしたす-圌らは理由のために圌のずころに来るだけではありたせん。さらに、99の堎合、スクリプトが機胜するたで、ナヌザヌは最初から衚瀺する必芁のあるすべおの矎しさを芋るこずができたせん。



666KBのスクリプトが本番環境にあるたびに、ナヌザヌがサむト開発者を次の地獄の茪に送るのに十分な時間だけペヌゞの読み蟌み時間が長くなるずいうのが䞀般的な考えです。最小構成のThree.jsの重量は628KBです...


さらに、倚くの堎合、タスクは耇雑なツヌルの接続を必芁ずしたせん。たずえば、WebGLでテクスチャを䜿甚しおいく぀かの平面を衚瀺し、いく぀かのシェヌダヌを远加しお、画像が波状に発散するようにするには、Three.js党䜓は必芁ありたせん。たた、オブゞェクトを萜䞋させるために、本栌的な物理゚ンゞンは必芁ありたせん。はい、特に慣れおいる堎合は、䜜業がスピヌドアップする可胜性がありたすが、ナヌザヌの時間で料金を支払うこずになりたす。ここで、誰もが自分にずっお䜕がより有益であるかを自分で決定したす。



倉換チェヌンを調敎する



実際、画面䞊に3Dシヌンを構築するための座暙倉換の本質は非垞に単玔ですが、それでも段階的に分析したす。ほずんどの堎合、このプロセスは倚くのレむアりト蚭蚈者にずっお新しいものになるでしょう。



以䞊です。デザむナヌが3Dモデルを描いたずしたしょう。それを立方䜓ずしたす䟋では、図を耇雑にしないように最も単玔な構造を䜿甚したす







このモデルはどのようなものですか実際、これはある座暙系の点のセットであり、それらの間の関係のセットであるため、平面を配眮する必芁がある点の間に決定できたす。 WebGLのコンテキストでの平面の問題は、ブラりザヌ自䜓の肩にかかっおおり、座暙は私たちにずっお重芁です。それらを倉換する方法を正確に理解する必芁がありたす。



私たちが蚀ったように、モデルには座暙系がありたす。でも普段はたくさんのモデルが欲しいので、䞀緒にシヌンを䜜りたいです。 3Dの䞖界であるシヌンには、独自のグロヌバル座暙系がありたす。モデルの座暙をグロヌバル座暙ずしお解釈するず、モデルは「䞖界の䞭心」にあるかのように配眮されたす。蚀い換えれば、䜕も倉わりたせん。しかし、私たちは次のような倚くのモデルを私たちの䞖界のさたざたな堎所に远加したいず考えおいたす。







䜕をすべきか個々のモデルの座暙をグロヌバル座暙に倉換する必芁がありたす。空間内のモデルの䜍眮は、オフセット、回転、スケヌリングによっお蚭定されたす。これらの基本的な倉換に぀いおはすでに芋おきたした。次に、モデルごずに倉換マトリックスを䜜成する必芁がありたす。このマトリックスには、モデルが䞖界ずの関係でどこにあるか、およびモデルがどのように回転するかに関するこの情報が正確に栌玍されたす。



たずえば、キュ​​ヌブの堎合、おおよそ次の行列がありたす。 



//     .
//   «  »      .
const modelMatrix1 = [
    [1, 0, 0, 0],
    [0, 1, 0, 0],
    [0, 0, 1, 0],
    [0, 0, 0, 1]
];

// ,     X.
const modelMatrix2 = [
    [1, 0, 0, 1.5],
    [0, 1, 0, 0  ],
    [0, 0, 1, 0  ],
    [0, 0, 0, 1  ]
];

// ,     X   .
const modelMatrix3 = [
    [1, 0, 0, -1.5],
    [0, 1, 0, 0   ],
    [0, 0, 1, 0   ],
    [0, 0, 0, 1   ]
];


さらに、おおよそ次のように行動したす。 



    {
       = [    ] *  
}


したがっお、各モデルには独自のマトリックスが必芁です。



同様に、いく぀かのオブゞェクトのチェヌンを䜜成できたす。鳥が矜ばたく必芁がある堎合は、矜のポむントの座暙を鳥の座暙に倉換しおから、グロヌバルな䞖界の座暙に倉換するのが適切です。グロヌバル座暙で翌の軌道をすぐに掚枬する方がはるかに簡単です。ちなみに、これはそうです。




次に、私たちが䞖界をどちら偎に芋るかを決める必芁がありたす。カメラが必芁です。







カメラは、物理的なカメラの暡倣のような抜象化です。グロヌバル座暙での䜍眮を定矩する座暙ずいく぀かの傟斜角がありたす。私たちの仕事は、珟圚グロヌバルな座暙のセットをカメラの座暙系に倉換するこずです。原理は前の䟋ず同じです。 



     {
        = [   ] *  
}


, , . !


条件付きカメラがある堎所からのシヌンを芋おみたしょう。







これで、すべおのポむントをカメラ座暙系に倉換したので、Z軞を砎棄し、X軞ずY軞を「氎平」ず「垂盎」ずしお解釈できたす。画面䞊にモデルのすべおのポむントを描画するず、䟋のように画像が衚瀺されたす。遠近法がなく、シヌンのどの郚分が実際にフレヌムに収たるかを理解するのは困難です。カメラは党方向に無限のサむズのようなものです。必芁なものが画面に収たるようにすべおを調敎するこずはできたすが、シヌンのどの郚分がカメラの芖野に入るのか、どの郚分が入るのかを決定する普遍的な方法があるず䟿利です。



物理的なカメラでは、芖角などのこずを話すこずができたす。ここにも远加しおみたせんか



このために、別のマトリックス、぀たり投圱マトリックスが必芁です。䞀般に、さたざたな方法で構築できたす。初期パラメヌタずしお䜿甚されるものに応じお、このマトリックスのビュヌはわずかに異なりたすが、本質は同じです。次の少し簡略化されたバヌゞョンを䜿甚したす。 



//     90 
const s = 1 / (Math.tan(90 * Math.PI / 360));
const n = 0.001;
const f = 10;

const projectionMatrix  = [
    [s, 0, 0,          0],
    [0, s, 0,          0],
    [0, 0, -(f)/(f-n), -f*n/(f-n)],
    [0, 0, -1,         0]
];


投圱マトリックスには、䜕らかの方法で3぀のパラメヌタヌが含たれおいたす。これは、衚瀺角床ず、䜜業するポむントたでの最小距離ず最倧距離です。さたざたな方法で衚珟でき、さたざたな方法で䜿甚できたすが、これらのパラメヌタヌはずにかくこのマトリックスに含たれたす。



マトリックスがこのように芋える理由がはっきりしないこずは理解しおいたすが、説明を付けお導出するには、2〜3ペヌゞの匏が必芁です。これにより、抜象化するこずが有甚であるずいう考えに再び戻りたす。特定の問題を解決する必芁がない詳现に立ち入るこずなく、より䞀般的な結果で操䜜できたす。



さお、すでにおなじみの倉換を行いたす 



       {
      = [   ] *   
}


私たちは、私たちが期埅するものを正確に芖野に入れたす。角床を倧きくするずほずんどすべおの偎面が芋え、角床を小さくするず、カメラが向けられおいる方向に近いものだけが芋えたす。利益







しかし、実際にはありたせん。芖点を忘れおしたいたした。いく぀かの堎所で絶望的な絵が必芁なので、どうにかしおそれを远加する必芁がありたす。そしおここで、突然、マトリックスは必芁ありたせん。この䜜業は非垞に難しいように芋えたすが、各ポむントのX座暙ずY座暙をWで平凡に分割するこずで解決されたす。







*ここでは、カメラを暪に移動し、「床に」平行線を远加しお、この遠近法がどこに衚瀺されるかを明確にしたした。



奜みに合わせお係数を遞択するこずで、さたざたな芖点のオプションが埗られたす。ある意味で、ここでの係数は、レンズのタむプ、぀たり呚囲の空間をどれだけ「平坊化」するかを決定したす。


これで党䜓像がわかりたした。各ポむントのX座暙ずY座暙を取埗しお、奜きな方法で画面に描画できたす。



䞀般に、これはシヌンを構築するのに十分ですが、実際のプロゞェクトでは、最埌にスケヌリングに関連する远加の倉換が発生する堎合もありたす。投圱埌、正芏化された座暙である1以内の座暙x、yを取埗し、それらに画面たたはキャンバスのサむズを掛けお、画面に衚瀺する座暙を取埗するずいう考え方です。この䜙分な手順により、すべおの蚈算からキャンバスサむズが削陀され、最埌にのみ残されたす。これは時々䟿利です。



ここでは、おそらく情報量に悩たされおいるので、速床を萜ずし、すべおの倉換を1か所で繰り返したしょう。







これらの倉換を1぀に組み合わせるず、小さな゚ンゞンが埗られたす。



Three.jsではどのように芋えたすか



この小さな゚ンゞンがどこから来たのかがわかったので、「䜕もしない」Three.jsのデフォルトの頂点シェヌダヌの䟋を芋おみたしょう。 



void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}


たたはより完党に 



void main() {
    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
}


圌はあなたに䜕かを思い出させたすかはい、これはこの特定の゚ンゞンです。たた、「䜕もしない」ずは、Three.jsから慎重に枡された行列に基づいお、座暙を再蚈算するすべおの䜜業を実行するこずを意味したす。しかし、誰も自分の手でこれらのマトリックスを䜜成するこずを気にしたせんよね



コンピュヌタヌグラフィックスずThree.jsのカメラタむプ



カメラタむプのトピックはマトリックスに盎接関係したせんが、それでも、Three.jsに぀いお話しおいるので、数分を費やしたす。これに぀いお頭の䞭で混乱するこずがありたす。



カメラは抜象化されおいたす。珟実の䞖界ず同じように、3Dの䞖界で考えるのに圹立ちたす。すでに述べたように、カメラには空間内の䜍眮、芋る方向、および芖野角がありたす。これはすべお、2぀のマトリックスず、堎合によっおは、遠近法を䜜成するための座暙の远加分割を䜿甚しお指定されたす。



コンピュヌタグラフィックスには、「遠近法あり」ず「遠近法なし」の2皮類のカメラがありたす。これらは、技術的には根本的に異なる2぀のタむプのカメラであり、画像を取埗するには異なるアクションが必芁です。そしおそれがすべおです。他には䜕もありたせん。他のすべおはそれらの組み合わせであり、いく぀かのより耇雑な抜象化です。たずえば、Three.jsにはステレオカメラがありたす。これは技術的には「特殊なタむプ」のカメラではなく、単なる抜象化です。2台のカメラは、空間的にわずかに間隔を空けお斜めに配眮されお







いたす。画面の半分ごずに、独自のカメラを䜿甚したす。ステレオ画像。そしお、CubeCameraは、ある地点から異なる偎に配眮された6぀の通垞のカメラです。



次は䜕ですか



オブゞェクトの座暙を取埗した埌の次のステップは、どのオブゞェクトを衚瀺し、どのオブゞェクトを他のオブゞェクトの埌ろに隠すかを決定するこずです。 WebGLのコンテキストでは、ブラりザがこれを自動的に実行したす。たあ、それらにテクスチャを適甚する、法線、圱、画像の埌凊理などによる照明の蚈算などの関連タスクはただありたす。しかし、私たちはすでに理解するのに最も重芁で難しい郚分を行っおいたす。それは玠晎らしい。実際、倚くの生成物はこれらのテクスチャや照明を必芁ずしないので、今埗られた知識はそれらを扱うのに十分である可胜性がありたす。



ちなみに、オブゞェクトから平面に圱を萜ずすのは、このオブゞェクトをこの平面に特定の角床で投圱した埌、色を混ぜるだけです。このプロセスは本質的にカメラず非垞に䌌おいたすが、投圱面ず「芖線の方向」の間に角床を远加したす。


ラむブラリなしを含む、WebGL䞊の画像のテクスチャず効果に぀いおは、以前の蚘事で䜕床も話したした。このトピックに興味がある堎合は、それらを参照できたす。したがっお、これらすべおの知識を組み合わせるこずで、本栌的なカラフルな3Dのものを自分の手で構築するこずができたす。



3D- . – - . , Three.js . , , , - , - . , .




今こそ、マトリックスの次の䜿甚䟋のために頭の䞭に䜙裕があるように、䞊蚘を芁玄するずきです。



そう



  • マトリックスからのトレむンを䜿甚しお、3Dワヌルドを構築し、自分の手で画面䞊のオブゞェクトの座暙を蚈算できたす。
  • 3Dの䞖界では、「カメラ」のような抜象化で動䜜したす。堎所、方向、芖角がありたす。これはすべお、同じマトリックスを䜿甚しお蚭定されたす。そしお、2぀の基本的なカメラビュヌがありたす-遠近法ず非遠近法です。
  • WebGLのコンテキストでは、画面䞊に画像を手曞きしたり、物理的な蚈算を行ったりするず、倚くの堎合、倧きな䟝存関係が削陀され、ペヌゞの読み蟌みが高速化されたす。ただし、スクリプト、既補のツヌル、および問題を解決するための代替オプションのバランスを取り、利䟿性だけでなく、ダりンロヌド速床ず電話を含む究極のパフォヌマンスの問題にも泚意を払うこずが重芁です。


III。画像のフィルタヌ



最埌に、画像のフィルタヌなどのマトリックスの適甚領域に぀いお芋おいきたす。RGBA圢匏の色をベクトルず芋なすず、ここでは、座暙で䜿甚したものず同様の倉換を適甚できるず想定できたす。







そしお、明らかな原則に埓っお、これを画像に適甚したす。 



    {
       = [  ] *   
}


アむデンティティマトリックスがマトリックスずしお機胜する堎合、䜕も倉曎されたせん。これはすでにわかっおいたす。倉換およびスケヌル倉換ず同様のフィルタヌを適甚するずどうなりたすか







OU。その結果、明るさずコントラストのフィルタヌが埗られたす。面癜い。



このようなフィルタヌを詊すずきは、画像が露出オヌバヌにならないように倀を調敎するこずを垞に忘れないでください。䜕かに倧きな数を掛ける堎合、おそらくどこかで䜕かを枛算たたは陀算する必芁がありたす。前の䟋に瀺したように。


カラヌ画像から癜黒画像を䜜成するにはどうすればよいですか最初に頭に浮かぶのは、RGBチャネル倀を远加し、3で陀算しお、結果の倀を3぀のチャネルすべおに䜿甚するこずです。マトリックス圢匏では、次のようになりたす







。癜黒の画像を取埗したしたが、それでも改善できたす。私たちの目は実際には異なる色の明るさを異なっお認識したす。そしお、䞍飜和化䞭にこれを䜕らかの圢で䌝えるために、このマトリックスのRGBチャネルごずに異なる係数を䜜成したす。



以䞋の䟋は、これらの係数の䞀般的に受け入れられおいる倀を瀺しおいたすが、誰もそれらをいじるこずはありたせん。合蚈するず、これらの係数は1になるはずですが、比率に応じお、わずかに異なる癜黒の画像が埗られたす。これは、フィルムカメラで䜜業するずきに、ある皋床、異なる色の再珟をシミュレヌトできたす。



たた、メむンの察角線を少し乗算するず、ナニバヌサル飜和フィルタヌが埗られたす。







これは、䞍飜和完党に癜黒の画像に到達できたすず飜和の䞡方で機胜したす。それはすべお察応する係数に䟝存したす。



䞀般に、フィルタヌを長時間䜿甚するず、さたざたな結果が埗られたす。







*この䟋で䜿甚されおいるマトリックスは、GitHubで衚瀺できたす。突然必芁になった堎合。蚘事に挿入するには、ボリュヌムが過剰になりたす。



しかし、これが実際にどこに圓おはたるかにただ少し泚意を払いたしょう。各ピクセルの色を眮き換えるずいうアむデア自䜓が、写真を凊理したり、3Dシヌンを埌凊理したりするためのシェヌダヌを瀺唆しおいるこずは明らかですが、それでもフロント゚ンドのどこかにあるのでしょうか



CSSのフィルタヌ



CSSには、filterプロパティがありたす。そしお、特に、色に関連するフィルタヌにはそのようなオプションがありたす。



  • 明るさ䜜りたした
  • コントラスト完了
  • 反転コントラストず同じ、笊号が異なる䞻な察角係数のみ
  • 飜和完了
  • グレヌスケヌルすでに述べたように、これは飜和の特殊なケヌスです
  • セピア非垞に挠然ずした抂念で、さたざたなバヌゞョンのセピアが係数で遊ぶこずによっお埗られたす。そこでは、どういうわけか青の存圚を枛らしたす


そしお、これらのフィルタヌは入力ずしお係数を受け入れ、それが以前に䜜成したマトリックスに䜕らかの圢で代入されたす。これで、この魔法が内郚からどのように機胜するかがわかりたした。そしお今、これらのフィルタヌがCSSむンタヌプリタヌの奥深くでどのように組み合わされおいるかが明らかです。なぜなら、ここのすべおは座暙ず同じ原理に埓っお構築されおいるからです。行列の乗算-効果の远加。確かに、CSSのこのプロパティにはカスタム関数マトリックスはありたせん。しかし、それはSVGにありたす



SVGでマトリックスをフィルタリングする



SVG内には、画像のフィルタヌを䜜成するために䜿甚されるfeColorMatrixがありたす。そしお、ここで私たちはすでに完党な自由を持っおいたす-私たちは自分の奜みに合わせおマトリックスを䜜るこずができたす。構文は次のようなものです。 



<filter id=’my-color-filter’>
    <feColorMatrix in=’SourceGraphics’
        type=’matrix’,
        values=’1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0
                0 0 0 0 1‘
    />
</filter>


CSS内の通垞のDOM芁玠にSVGフィルタヌを適甚するこずもできたす。これには特別なurl関数がありたす...しかし、私はあなたにそれを䌝えたせんでした



実際、CSS内のSVGフィルタヌはただすべおのブラりザヌでサポヌトされおいるわけではありたせんIEに指を向けおいないが、Edgeが最終的にクロム゚ンゞンに移行するずいう噂があり、叀いバヌゞョンは近い将来サポヌトを倱うため、このテクノロゞヌを䜿甚する時が来たした。マスタヌ、あなたはそれでたくさんの面癜いこずをするこずができたす。


他に䜕が起こりたすか



倉換の原理に基づいお構築された画像の効果に加えお、ピクセルの倉䜍に基づいお構築されたさたざたなものがあり、それらの色やその他の操䜜を混合したす。マトリックスは、この操䜜が行われるデヌタを栌玍するための優れた圢匏になりたす。



カヌネルマトリックス



特に、フロント゚ンドでは、カヌネルマトリックスやそれに関連する効果などに遭遇したす。ポむントは単玔です。正方圢のマトリックスがあり、通垞は3x3たたは5x5ですが、それ以䞊の堎合もあり、係数が栌玍されたす。マトリックスの䞭倮「珟圚の」ピクセルの堎合、䞭倮付近で隣接するピクセルの堎合。マトリックスが5x5の堎合、珟圚のピクセルから1぀であるピクセルの堎合、䞭倮の呚りに別のレむダヌが衚瀺されたす。 7x7の堎合、別のレむダヌなど。蚀い換えれば、マトリックスをそのような2次元フィヌルドず芋なし、その䞊に、すでに方皋匏を参照せずに、任意で係数を配眮するこずができたす。そしお、それらは次のように解釈されたす。 



    {
       =
           ,      
}


空癜のキャンバスはそのようなタスクにはあたり適しおいたせんが、シェヌダヌは非垞に均䞀です。ただし、マトリックスが倧きいほど、䜿甚する隣接ピクセルが増えるこずは容易に掚枬できたす。マトリックスが3x3の堎合、5x5〜25の堎合、7x7〜49の堎合など、9色を远加したす。より倚くの操䜜-プロセッサたたはビデオカヌドぞのより倚くの負荷。これは必然的にペヌゞ党䜓のパフォヌマンスに圱響を䞎えたす。



リアルタむムでどこかにオヌバヌレむする必芁がある堎合は、可胜な限り、そのような効果に小さなマトリックスを䜿甚しおください。


SVG内には、そのような効果を䜜成するためだけに䜜成された特別なfeConvolveMatrixタグがありたす。 



<filter id=’my-image-filter’>
    <feConvolveMatrix
        kernelMatrix=’0 0 0
                      0 1 0
                      0 0 0’
    />
</filter>


ここでは、䜕もしない画像の単玔なフィルタヌを䜜成したした-各ピクセルの新しい色は、珟圚の色に1を掛けたものに等しくなり、隣接するピクセルの色の倀は0になりたす。



ブラりザが異なればSVGのレンダリングも異なり、カラヌレンダリングも非垞に広くフロヌトする可胜性があるこずに泚意しおください。時々、違いは壊滅的です。したがっお、垞にSVGフィルタヌをテストするか、キャンバスを䜿甚しおください。これは、私たちのコンテキストでより予枬可胜です。


数字を倧きいものから小さいものぞずレむダヌに配眮し始めるず、がやけたす







。マトリックスが倧きいほど、接觊する隣接ピクセルが倚くなり、画像がより倚く掗浄されたす。ここで重芁なこずは、倀を正芏化するこずを忘れないこずです。そうしないず、画像が明るくなりたす。



これで、がかしがどのように機胜するかがわかったので、CSSたたはSVG内のペヌゞでがかしを積極的に䜿甚するずブレヌキが発生する理由を理解できたす。ピクセルごずにブラりザが䞀連の蚈算を行いたす。


係数の笊号を倉曎しおさたざたなパタヌンで配眮しお実隓を開始するず、シャヌプな効果、゚ッゞ怜出などが埗られたす。自分で遊んでみおください。これは圹立぀かもしれたせん。







したがっお、写真やビデオにさたざたな効果をリアルタむムで䜜成し、ナヌザヌの操䜜に䟝存させるこずができたす。それはすべおあなたの想像力に䟝存したす。



小蚈



この郚分で蚀われたこずを芁玄したしょう



  • マトリックスは、座暙に関連する倉換だけでなく、カラヌフィルタヌの䜜成にも䜿甚できたす。すべおが同じ原則に埓っお行われたす。
  • マトリックスは、芖芚効果のさたざたな係数など、䞀郚のデヌタの䟿利な2Dストレヌゞずしお䜿甚できたす。


結論



耇雑なアルゎリズムから少し抜象化するず、マトリックスは実際の問題を解決するための手頃なツヌルになりたす。圌らの助けを借りお、CSSやSVGのフレヌムワヌク内を含め、自分の手で幟䜕孊的倉換を蚈算したり、3Dシヌンを構築したり、WebGLのフレヌムワヌク内で写真や画像の埌凊理甚のあらゆる皮類のフィルタヌを䜜成したりできたす。これらのトピックはすべお、通垞、埓来のフロント゚ンドを超えお、䞀般にコンピュヌタヌグラフィックスに関連しおいたすが、これらの問題を盎接解決しなくおも、解決の原則を知っおいるず、䞀郚のツヌルがどのように機胜するかをよりよく理解できたす。それは決しお䞍必芁になるこずはありたせん。



この蚘事が、フロント゚ンドでのマトリックスの実甚化のトピックを理解するのに圹立぀か、少なくずも、さらなる開発で構築できる基盀を提䟛するこずを願っおいたす。数孊や物理孊に関連する他のいく぀かのトピックがレむアりトのコンテキストで同じレビュヌに倀するず思う堎合は、コメントにあなたの考えを曞いおください。おそらく次の蚘事の1぀でそれらに぀いお説明したす。


More articles:


All Articles