チュートリアル 20 : ローカル編集

チュートリアル データ

チュートリアル データは、[Help] メニュー → [Download Tutorials and Examples…] を選択し、[CityEngine Tutorial] からダウンロードできます。

下準備

このチュートリアルを行うには、 CityEngine 2017.0 以上のバージョンが必要です。

概要

本チュートリアルでは、CityEngine でローカル編集を行う方法を解説します。チュートリアル 6 を完了したところからスタートし、ローカル編集を有効化するためのコードを追加することから始めます。
ローカル編集を使用すると、CGA コードで局所的なバリエーションを指定する必要なく、個々の窓のサイズを変更したり、地上階に変更したり、選択可能なバルコニーを追加することができます。

Part 1 :テレインの生成

以下の作業を行ってハンドルを作成します。

1. Simple_Building_LE_01.cej シーンを開きます。
2. Simple_Building_LE_01.cga ルール ファイルを開きます。 ローカル編集は、ハンドルを持つ属性に対して行うことができます。窓のサイズのローカル編集を有効にするには、窓の幅や高さの属性を作成し、これらの属性を使用するように Tile ルールを変更し、属性にハンドルを追加します。
3. Simple_Building_LE_01.cga のルール ファイルに、窓の幅と高さの属性を追加します。

attr window_width = 2
attr window_height = 1.5

4. Tile ルールを見つけて、窓のサイズの値をこれらの属性に置き換えます。 1 つのタイルには、壁で取り囲まれた窓が設置されており、4 つすべての壁面上にあります。Tile ルールは、タイルの中央に任意の幅と高さの窓を作成します。

Tile -->
	split(x){ ~1 : Wall 
			| window_width: split(y){ ~1: Wall | window_height: Window | ~1: Wall }
			| ~1 : Wall }

5. 属性にハンドルを追加します。

@Handle(shape=Window, axis=x)
attr window_width = 2

@Handle(shape=Window)
attr window_height = 1.5

6. CGA ファイルを保存し、メイン ツールバーの [Generate] をクリックするか Ctrl + G キーを押して建物を再生成します。

7. 窓のハンドルを引っ張ります。 この場合、すべての窓のサイズが同時に変更されます。

8. ツールバーの [Reset attributes] ツールをクリックしてすべての属性をリセットします 。
9. ツールバーの [Make local Edits] ツールをクリックして、ローカル編集モードを有効にします 。
10. 窓を選択します。
    [Viewport] 内のオレンジ色の強調表示は、現在の選択を示します。[Inspector] のオレンジ色で強調表示されている属性は、現在の選択に対してローカルに編集できる属性です。
    [window_width] および [window_height] 属性は、この窓だけにローカルに設定することができます。

11. 窓の幅と高さをハンドルで引っ張って、この窓のみのサイズを変更します。 [Inspector] の [window_width] および [window_height] 属性の横にある * 記号は、これらの属性が現在の選択に対してローカルに編集されたことを示します。

複数の選択を行うと、同じローカル編集を複数の窓に同時に適用することができます。

12. 複数のコンポーネントを選択するには、Shift キーを押しながらいくつかの窓を選択します。
13. 選択範囲内の窓のサイズを変更するには、ハンドルを引っ張るか、[Inspector] で値を入力します。

ドアの上にある窓は、階段がある場所にあるため、通常小さくなります。以前のすべての変更を取り消し、ローカル編集を使用してこれを作成することができます。

14. すべてのローカル編集を元に戻すには、ビューポートまたは [Inspector] を右クリックして [Reset all local edits] を選択します。
15. ドアの上の窓を選択します。
16. End キーを押して、ドアの上の列にあるすべての窓を選択します。 Home キーと End キーは、使用可能なパターンを後方または前方に繰り返します。パターンは、シェープ ツリーと、CGA コードがどのようにシェープ ツリーを作成するかに基づいて自動的に検出されます。
    この場合、使用可能なオプションは、地上階の上の窓の列の選択です。

17. ハンドルを引っ張ったり、[Inspector] に値を入力して窓を小さくしたりします。

Part 2 :地上階のみを変更する

地上階は建物の中間階とは異なる場合があります。例えば、地上階の窓は、通常、中間階の窓よりも大きくなっています。
このシンプルな建物ルールでは、同じ窓のタイル化コードを使用して、すべてのフロアで同じ窓のタイルを作成しますが、ローカル編集を使用することにより、建物の正面にある地上階の窓は、地上階のタイルのための別のルールを書くことなく、大きくすることができます。

1. Simple_Building_LE_02.cej シーンを開きます。
2. Simple_Building_LE_02.cga ルール ファイルを開きます。
3. Simple_Building_LE_02.cga ルール ファイルの [tile_width] 属性にハンドルを追加します。これにより、属性をローカル編集できるようになります。

@Handle(shape=Tile, axis=x)
@Range(min=1, max=10, restricted=false)
attr tile_width = rand(2.5,6)

4. CGA ファイルを保存して建物を再生成します。
5. ローカル編集モードでは、地上階の窓を選択し、タイルの幅、窓の幅、および窓の高さを変更します。

これにより、地上階の 1 つのタイルが変更されます。しかし、目標は地上階のすべてのタイルを変更することです。これは、より高いレベルでシェープを選択することによって可能です。

6. PageUp キーを押すと、ローカル編集レベルの 1 つ上のレベルに移動します。
   地上階のすべての窓が選択され、オレンジ色で強調表示されます。PageUp キーおよび PageDown キーを押すと、それぞれ上位レベルまたは下位レベルに移動します。
   ローカル編集はシェープ ツリーにリンクされており、シェープ ツリーのより上位レベルで編集を行うことで、フロア上のすべての窓などの複数のオブジェクトに適用できます。

7. 地上階の窓が大きくなるように窓の幅を広げます。

これにより、ステップ 5 で変更された最初の窓を除いて、地上階のすべての窓が変更されます。これは、ステップ 5 で最初の窓に加えられた編集がより低いレベルにあったためです。同じオブジェクトに対する複数の編集が存在する場合、最も低いレベルで行われた編集が優先されます。
Inspector では、[tile_width]、[window_width]、および [window_height] の各属性の横にある ↓ の矢印は、これらの属性が現在の選択レベルよりも低いレベルで編集されたことを示します。
[window_width] 属性の横にある * 記号は、現在の選択レベルでも編集されていることを示します。地上階のすべての窓が同じである必要があるため、不揃いとなった原因である低いレベルで窓に加えられた変更は、元に戻す必要があります。

8. PageDown キーを使用してレベルを下げ、下位レベルの不揃いな窓を選択します。
9. [Viewpor] か [Inspector] で強調表示されたローカル編集を右クリックして [Reset all local edits] を選択します。
10. PageUp キーを使用して地上階の窓を選択します。

11. タイルの幅、窓の幅、および窓の高さの値を増やして、地上階の窓を大きくします。 下位レベルのローカル編集がなくなったため、すべての窓のサイズが同じになりました。
    タイル幅が変更された後、オレンジ色のハイライトが失われた場合は、地上階の窓を再選択する必要があります。

Part 3 :バルコニーを追加する

建物にジオメトリまたは詳細をローカルに追加するオプションを提供することは可能ですが、ジオメトリが存在しない場合にユーザーがハンドルにアクセスする方法が必要です。たとえば、選択した窓にバルコニーを配置するためにローカル編集を使用できます。
これを行うには、バルコニーに並列するジオメトリが必要です。この並列ジオメトリにより、バルコニーが存在しない場合でもバルコニーのハンドルにアクセスできるようになります。

1. Simple_Building_LE_03.cej シーンを開きます。
2. Simple_Building_LE_03.cga ルール ファイルを開きます。
3. Simple_Building_LE_03.cga のルール ファイルに、バルコニーがあるか否かを判断する属性を追加します。

attr hasBalcony = false

4. バルコニーを作成するためのコードを追加します。
   Balcony ルールはバルコニーのジオメトリを生成するか、何も生成しない (NIL) ので、バルコニーがない場合にもハンドルにアクセスできるように、ジオメトリを持つ並列シェープにする必要があります。
   その並列シェープが Window です。BalconyMass ルールは、バルコニーが挿入されるボリュームを作成し、後に続くルールでバルコニーのジオメトリを作成します。

Tile -->
	split(x){ ~1 : Wall 
			| window_width: split(y){ ~1: Wall | window_height: Window BalconyMass | ~1: Wall }
			| ~1 : Wall }		 

BalconyMass -->
	s('1,0.9,0.9)
	t(0,0,'-0.5)
	Balcony
	
Balcony -->
	case hasBalcony:
		primitiveCylinder(32)
		color(0.8,0.8,0.8)
		split(z) { ~1: NIL
				 | ~1: comp(f) { top: NIL
				 			   | back: NIL
				 			   | bottom: extrude(0.05) Bottom.
				 			   | all= BalconyRailing } }
	else:
		NIL
		
BalconyRailing -->
	comp(f) { side: s(0.05,'1,'1) center(x) extrude(0.05) Bar. }
	s('1,0.05,'1)
	[ t(0,-0.05,0) extrude(vertex.normal, 0.05) Bottom. ]
	[ t(0,0.9,0) extrude(vertex.normal, 0.05) Railing. ]

5. ここで、ハンドルの上にマウスカーソルを合わせた時に、バルコニーがあるべき場所に陰影表示されたボリュームが現れるようにしたいと思います。
   これを行うには、バルコニー用のボリュームが作成された後に呼び出されるルールである Balcony にハンドルを付加する必要があります。ローカル編集を有効にするには、[hasBalcony] 属性にトグル ハンドルを設定します。

@Handle(shape=Balcony, type=toggle, occlusion=false)
attr hasBalcony = false

6. CGA ファイルを保存して建物を再生成します。
   通常、バルコニーは建物の上層階にのみあり、ドアの上の階段窓からは除外されます。
7. 上の階の窓を選択し、すべての上の階が選択されるまで PageUp キーを押します。

8. トグル ハンドルを使用して [hasBalcony] 属性を true に設定し、バルコニーを追加します。

9. PageDown キーを使用してドアの上の窓を選択します。

[Inspector] では、[hasBalcony] 属性の横に上向き矢印 ↑ があります。これは、この属性が上位レベルでローカルに編集されたことを意味します。
この変更は、下位レベルで実行された編集が優先されるため上書きできます。

10. End キーを押してドアの上にあるすべての窓を選択します。

11. [hasBalcony] 属性を false に設定して、ドアの上の窓のからバルコニーを削除します。

Part 4 :草地エリアを追加する

ローカル編集はシェープ ツリーにリンクされています。ローカル編集の1つの制限は、シェープ ツリー構造を変更すると、既に適用されているローカル編集が失われる可能性があることです。
つまり、ローカル編集を適用した後にコードを変更すると、予期しない結果につながる可能性があります。
ローカル編集はコードの作成終了後にのみ行う、あるいは将来のコードの変更を考慮したコードとしてプレース ホルダー ルールを作成する、といった対策によりコード変更によりシェープ ツリー構造を変更しないようにすることをお勧めします。

1. Simple_Building_LE_04.cej シーンを開きます。
2. Simple_Building_LE_04.cga ルール ファイルを開き、以下のスニペットを探します。

Lot --> 
	extrude(height) Building

3. 以下のようにスニペットを変更します。

Lot --> 
	offset(-1)
	comp(f) { inside: Footprint | border= Grass }
	
Footprint -->
	extrude(height) Building

Grass -->
	color("#4c7b1e")

offset オペレーションを使用して、芝生と建物の設置エリアを分けます。Footprint ルールは Building を作成します。

4. CGA ファイルを保存して建物を再生成します。

残念ながら、ローカル編集がシェープ ツリーに関連しているため、ローカル編集が失われてしまいます。
シェープ ツリーの構造が変更されると、予期しない結果が生じる可能性があります。
コードを元の状態に戻して、ローカル編集がまだ存在することを確認することができます。

ステップ 3 の前後のシェープ ツリーは、Footprint シェープが Lot シェープと Building シェープの間に挿入されていることを示しています。

5. Lot と Building の間に余分なルールを追加せずに Lot ルールを変更します。Footprint ルールは削除できます。

Lot --> 
	offset(-1)
	comp(f) { inside: extrude(height) 
           Building | border= Grass }

6. CGA ファイルを保存して建物を再生成します。
   今度は、シェープ ツリーが Lot から直接 Building に接続します。
   以下のように、ローカル編集が保存され、建物の周囲に草地エリアが生成されています。

Simple_Building_LE_05.cga のルール ファイルを使用した最終結果は、Simple_Building_LE_05.cej シーンに含まれています。