• 
• 
• 
• 
• 
• 
• 
• 0

Juli 2009

3D-Landschaften: Papervision3D, Flash 10 & O3D

Fortsetzung, Teil 2

(Link zum Artikel: http://www.createordie.de/cod/artikel/2436)

Die Papervision3D-Variante

Wie schon erwähnt, hält Papervision als bereits gut ausgebaute 3D-Engine eine Vielzahl an Methoden und Funktionen bereit, die uns den Landschaftsbau vereinfachen. Die weitere Vorgehensweise ist nun wie folgt (Listing 2), (Abb. 1):

• Eine Grundfläche/ein Polygonnetz definieren
• Farbwerte der bereits ausgewählten Textur einlesen
• Höhenkarte via perlinNoise erzeugen
• Höhenkarte via paletteMap einfärben
• Höhenkarte sowie Textur animieren
• Vertex-Positionen innerhalb der Grundfläche anhand der Höhenkarte verschieben

1. package {
2. ///////////////////////////////////
3. // import used classes
4. ///////////////////////////////////
5. import flash.display.*;
6. import flash.events.*;
7. import org.papervision3d.materials.BitmapMaterial;
8. import org.papervision3d.scenes.Scene3D;
9. import org.papervision3d.cameras.FreeCamera3D;
10. import org.papervision3d.objects.Plane;
11. import org.papervision3d.core.geom.Mesh3D;
12. import flash.geom.*;
13. import mx.core.BitmapAsset;
14. ///////////////////////////////////
15. // class
16. ///////////////////////////////////
17. public class Pv3dTectonicMesh extends Sprite {
18. private var rootNode:DisplayObjectContainer;
19. private var animNode:Sprite;
20. private var heightNode:Sprite;
21. private var container:Sprite;
22. private var textureMap:BitmapData;
23. private var canvasMap1:BitmapData;
24. private var canvasMap2:BitmapData;
25. private var displayMap:BitmapData;
26. private var heightMap:BitmapData;
27. private var heightTmp:BitmapData;
28. private var groundMap:Bitmap;
29. private var bmp1:Bitmap;
30. private var bmp2:Bitmap;
31. private var bmp3:Bitmap;
32. private var bmp4:Bitmap;
33. private var scene:Scene3D;
34. private var camera:FreeCamera3D;
35. private var tectonicMesh:Plane;
36. private var shiftList0 :Array;
37. private var shiftList1 :Array;
38. private var baseX:Number;
39. private var baseY:Number;
40. private var octaves:Number;
41. private var seed:Number;
42. private var fNoise:Boolean;
43. private var vertices:Array;
44. private var gridX:Number;
45. private var gridY:Number;
46. private var vertexIndex:Number;
47. private var iW:Number;
48. private var iH:Number;
49. private var colorPool:Array = new Array();
50. ///////////////////////////////////
51. // class constructor
52. ///////////////////////////////////
53. public function Pv3dTectonicMesh(
54. rootNode:DisplayObjectContainer, colorMap:Bitmap) {
55. this.rootNode = rootNode;
56. this.animNode = new Sprite();
57. this.heightNode = new Sprite();
58. this.groundMap = colorMap;
59. setup();
60. }
61. ///////////////////////////////////
62. // setup
63. ///////////////////////////////////
64. private function setup():void {
65. this.container = new Sprite();
66. this.container.x = 400;
67. this.container.y = 300;
68. this.scene = new Scene3D( this.container );
69. this.camera = new FreeCamera3D();
70. this.camera.x = 0;
71. this.camera.z = -600;
72. this.camera.y = 525;
73. this.camera.zoom = 15;
74. this.camera.focus = 100;
75. var heightMapWidth:Number = 1024;
76. this.heightMap = new BitmapData( heightMapWidth, heightMapWidth, false, 0 );
77. this.textureMap = new BitmapData( heightMapWidth, heightMapWidth, false, 0 );
78. this.canvasMap1 = new BitmapData( heightMapWidth, heightMapWidth, false, 0 );
79. this.canvasMap2 = new BitmapData( heightMapWidth, heightMapWidth, false, 0 );
80. this.heightTmp = new BitmapData( heightMapWidth, heightMapWidth, false, 0 );
81. this.displayMap = new BitmapData( heightMapWidth, heightMapWidth, false, 0 );
82. var grad:BitmapAsset = BitmapAsset(groundMap);
83. for ( var ra:uint = 0; ra < 256; ra++) {
84. this.colorPool[ra] = grad.bitmapData.getPixel(10, 256 - ra);
85. }
86. this.bmp1 = new Bitmap( this.canvasMap1 );
87. this.bmp2 = new Bitmap( this.canvasMap2 );
88. this.bmp3 = new Bitmap( this.heightMap );
89. this.bmp4 = new Bitmap( this.heightMap );
90. var material:BitmapMaterial = new BitmapMaterial( this.displayMap );
91. material.doubleSided = false;
92. this.tectonicMesh = new Plane( material, 680, 680, 16, 16 );
93. this.tectonicMesh.rotationX = -90;
94. calculate();
95. paint();
96. this.scene.addChild( this.tectonicMesh, "TectonicPlate" );
97. this.animNode.addChild( this.bmp1 );
98. this.bmp2.x = this.bmp1.x + this.bmp1.width;
99. this.bmp4.scaleX = -1.0;
100. this.bmp4.x = (this.bmp3.x + this.bmp3.width)*2;
101. this.animNode.addChild( this.bmp2 );
102. this.heightNode.addChild( this.bmp3 );
103. this.heightNode.addChild( this.bmp4 );
104. this.rootNode.addChild( this.container );
105. this.rootNode.addChild( this.panel );
106. this.camera.lookAt( this.tectonicMesh );
107. this.scene.renderCamera( this.camera );
108. init();
109. }
110. ///////////////////////////////////
111. // initialize
112. ///////////////////////////////////
113. private function init():void {
114. this.container.addEventListener( Event.ENTER_FRAME, onUpdateFrame );
115. this.container.stage.addEventListener( MouseEvent.MOUSE_DOWN, calculate );
116. }
117. ///////////////////////////////////
118. // calculate terrain
119. ///////////////////////////////////
120. private function calculate( event:Event = null ):void {
121. this.baseX = heightMap.width / ( 3 + Math.random() * 5 );
122. this.baseY = heightMap.width / ( 3 + Math.random() * 5 );
123. this.octaves = 2 + Math.round( Math.random() * 2 );
124. this.seed = Math.random() * 8;
125. if ( Math.random() > 0.5 ) {
126. this.fNoise = true;
127. } else {
128. this.fNoise = false;
129. }
130. heightMap.perlinNoise( this.baseX, this.baseY, this.octaves, this.seed, false, this.fNoise, 4, false );
131. textureMap.paletteMap( heightMap,heightMap.rect,new Point(), this.colorPool, this.colorPool, this.colorPool );
132. this.vertices = tectonicMesh.geometry.vertices;
133. this.gridX = tectonicMesh.segmentsW;
134. this.gridY = tectonicMesh.segmentsH;
135. this.vertexIndex = 0;
136. this.iW = heightMap.width / gridX;
137. this.iH = heightMap.height / gridY;
138. for ( var ix:int = 0; ix < gridX + 1; ix++ ) {
139. for( var iy:int = 0; iy < gridY + 1; iy++ ) {
140. vertices[vertexIndex].z = -Math.min( 255,Math.max(1,heightMap.getPixel(ix*iW,heightMap.height-iy*iH)))/1;
141. vertexIndex++;
142. }
143. }
144. }
145. ///////////////////////////////////
146. // paint terrain
147. ///////////////////////////////////
148. private function paint( event:Event = null ):void {
149. textureMap.paletteMap( heightMap, heightMap.rect, new Point(), this.colorPool, this.colorPool, this.colorPool );
150. this.canvasMap1.draw( this.textureMap );
151. this.canvasMap2.draw( this.textureMap, new Matrix( -1, 0, 0, 1, 1024, 0 ) );
152. bmp1.x -= 3;
153. bmp2.x -= 3;
154. bmp3.x -= 3;
155. bmp4.x -= 3;
156. if ( this.bmp1.x + bmp1.width < 0 ) {
157. this.bmp1.x = bmp2.x + bmp2.width;
158. }
159. if ( this.bmp2.x + bmp2.width < 0 ) {
160. this.bmp2.x = bmp1.x + bmp1.width;
161. }
162. if ( this.bmp3.x + bmp3.width < 0 ) {
163. this.bmp3.x = (bmp4.x + bmp4.width)-1024;
164. }
165. if ( this.bmp4.x + bmp4.width < 1024 ) {
166. this.bmp4.x = (this.bmp3.x + this.bmp3.width)*2;}
167. this.heightTmp.draw( this.heightNode );
168. this.displayMap.draw( this.animNode );
169. vertexIndex = 0;
170. for ( var ix:int = 0; ix < gridX + 1; ix++ ) {
171. for( var iy:int = 0; iy < gridY + 1; iy++ ) {
172. vertices[vertexIndex].z = -Math.min( 255,Math.max(1,this.heightTmp.getPixel(ix*iW,this.heightTmp.height-iy*iH)))/1;
173. vertexIndex++;
174. }
175. }
176. }
178. ///////////////////////////////////
179. // onUpdateFrame
180. ///////////////////////////////////
181. private function onUpdateFrame(e:Event):void {
182. paint();
183. var axeAngle:Number = scene.container.mouseX/160;
184. camera.x += (600*Math.cos(axeAngle)-camera.x)/20;
185. camera.z += ( -600 * Math.sin(axeAngle) - camera.z) / 20;
186. camera.lookAt( this.tectonicMesh);
187. scene.renderCamera( camera );
188. }
189. }

• 1
• 2
• 3

 

• Sourcecode (ZIP) der Beispiele

• Gute Kommentare werden belohnt.
•   (optional)
•   (Kommentar abonnieren/Gravatar - wird nicht veröffentlicht)
•    Benachrichtige mich bei nachfolgenden Kommentaren per E-Mail
• Dein Kommentar (HTML- und sonstige Codeelemente werden nicht angezeigt)
• -+
• 

• 3d,
• flash,
• google 03d,
• papervision3d