見出し画像

無限に続く地形を作る

TocuhDesignerの3D機能の中でも非常に強力なDisplace Verticesを使って無限に続く地形(LandScapeとも言います)を作ります。サンプルはこちら

地面を作る

まずは地面となる3Dデータを作ります。Grid SOPを設置し、Geometry COMPを繋げます。Grid SOPはOrientationをZX Planeにして、地面方向に広がるようにしましょう。

TouchDesigner 2021.15240_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2021_10_24 14_21_04

レンダリングの設定をする

次に描画のための準備をします。今回はPhong MATを使ったレンダリングを行うため、Phong MAT、Light COMP、Camera COMP、Render TOPを設置します。Phong MATはGeometry COMPのMaterialに設定し、Light COMPはCamera COMPと同じ位置になるよう、Translateの値を全て削除し、Camera COMPと繋いでCamera COMPの子にします。Camera COMPは視線を上げるため、TranslateのYに1を入力します。

TouchDesigner 2021.15240_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2021_10_24 14_23_43

地面を広げる

今の状態だとGrid SOPはサイズ的にタイルぐらいの大きさなので、Sizeをそれぞれ12と20に、RowsとColumnsをそれぞれ200と120に設定します。

TouchDesigner 2021.15240_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2021_10_24 14_31_05

テクスチャを作る

Displace VerticesのためにはNormalMap用のTOPとHeightMap用のTOPが必要です。地形はNoise TOPから作ります。

Noise TOPを直接つないだHeightMap用のNull TOPと、NormalMap TOPを経由させてNormalMap用のデータを入れるNull TOPの2つを準備します。この際、Noise TOPの解像度をGrid SOPのRowsとColumnsに揃えましょう。RowsがY方向で200、ColumnsがX方向で120になります。Copy ParameterとPaste Referenceを使ってリンクさせてもかまいません。最後にNoise TOPのTranslateのYに-absTime.secondsと入力しましょう。Noise TOPの画像が上から下に流れていくようになります(‐がないと逆方向に流れます)。また、PixelFormatも32-bit float(RGBA)に変更しておきましょう。

TouchDesigner 2021.15240_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2021_10_24 14_41_10

Displace Verticesを設定する

できあがったらPhong MATに繋ぎます。NormalMapにはNormalMap経由になっているNull TOP(null1)をリンクさせます。その後、Enable Height MapをONにしてHeightMapにNoise TOPから直接きているNull TOP(null2)をリンクさせます。その後、Displace VerticesをONにします。Displace Scaleは初期値の1だと凹凸が低く見えるので2に変更します。

また、この際エラーが表示されるのでGrid SOPとGeometry COMPの間にAttribute Create SOPを入れて、Compute TangentsをONにします。

これで無限に迫って来る地形の基本形ができました。

TouchDesigner 2021.15240_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2021_10_24 14_54_03

絵の微調整1. 目の前に道を作る

少しクォリティを上げるために調整を2つします。1つ目は道。今の状態だと目の前に高い山ができてしまうとカメラが山の中に入ってしまい、山の裏側えお見てしまう瞬間が時々あります。そこでカメラの前には高い山ができないようにします。

具体的にはRamp TOPとComposite TOPを使います。Ramp TOPで真ん中が黒く、周辺部は真っ白なグラデーションを作り、それをComposite TOPのMultiplyでNoise Topと掛け算することで真ん中は低く、周辺部はしっかりとした高い山ができる状態のTOPが出来上がります。この際、Ramp TOPもPixel Formatと解像度をNoise TOPと同様に120x200の32-bit float(RGBA)にしておきます。

TouchDesigner 2021.15240_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2021_10_24 14_58_29

絵の微調整2. 背景に溶け込ませる

2つ目は背景です。現在の背景とカメラの設定だと山が作られる瞬間までカメラに収まっているため、地形を進んでいる感じが少し削がれています。

まずは背景を設定します。黒で問題ないのでRGB Key TOPを入れます。これで透明背景の時よりかは少し目立たなくなりましたが、それでもまだまだ目立ちますね。

TouchDesigner 2021.15240_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2021_10_24 15_04_42

そこでカメラで遠くの山に霧をかけて背景の黒に溶け込ませます。

Camera COMPのSettingsタブにFogという項目があるのでそこをLinearに設定し、Fog Colorを黒に変更します。こうすることで黒い霧がかかり、まるで遠くにはライトの光が届いてないかのようになります。

これだけだと全体的に暗くなりすぎるのでRGB Key TOPのあとにLevel TOPを入れてGammaを1.4にすると手前が若干明るくなりつつ、奥の生成される新しい山がしっかり見えてしまうことはありません。

TouchDesigner 2021.15240_ C__Users_02oz_OneDrive_デスクトップ_NewProject.1.toe_ 2021_10_24 15_10_55


この記事が気に入ったらサポートをしてみませんか?