Heightmap in vertex buffer

dimroc · Oct 18, 2012 · 07cc165 · 07cc165
1 parent 799fa26
commit 07cc165
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -1025,15 +1025,9 @@ <h3>Render to texture</h3>
 
         <section>
           <section>
-          <h3>Vertex Textures</h3>
-          <canvas data-sample="height_map_image"></canvas>
-          <canvas data-sample="particle_height_map_vertex_texture"></canvas>
-          </section>
-
-          <section>
-          <h3>Height Map in Vertex Buffer</h3>
-          <canvas data-sample="height_map_image"></canvas>
-          <canvas data-sample="particle_height_map"></canvas>
+            <h3>Height Map in Vertex Buffer</h3>
+            <canvas data-sample="height_map_image"></canvas>
+            <canvas data-sample="particle_height_map"></canvas>
           </section>
         </section>
 

diff --git a/js/samples.js b/js/samples.js
@@ -1,5 +1,10 @@
 (function() {
+  var eventEmitter = new EventEmitter();
+
   window.sample_defaults = {
+    addListener: function(event, listener) {
+      eventEmitter.addListener(event, listener);
+    },
     width: 320,
     height: 240,
     paused: false,
@@ -48,6 +53,8 @@
         if(instance) instance.active = true;
       });
     });
+
+    eventEmitter.emitEvent("initialized");
   }
 
   head.js(

diff --git a/js/samples/height_map_image.js b/js/samples/height_map_image.js
@@ -10,9 +10,11 @@
     };
 
     this.imageData = null;
+    this.canvas = null;
 
     this.initialize = function(canvas) {
-      context = canvas.getContext('2d');
+      that.canvas = canvas;
+      var context = canvas.getContext('2d');
 
       image.onload = function() {
         canvas.width = image.width;

diff --git a/js/samples/particle_height_map_vertex_texture.js b/js/samples/particle_height_map_vertex_texture.js
@@ -27,48 +27,53 @@
 
       var instance = { active: false };
 
-      var heightMapImageSample = $("canvas[data-sample=height_map_image]").data("instance");
-      heightMapImageSample.addListener("onload", function() {
+      sample_defaults.addListener("initialized", function() {
+        var heightMapImageSample = $("canvas[data-sample=height_map_image]").data("instance");
+        heightMapImageSample.addListener("onload", function() {
 
-        geometry = new THREE.Geometry();
+          geometry = new THREE.Geometry();
 
-        for ( i = 0; i < 128; i ++ ) {
-          for ( j = 0; j < 128; j ++ ) {
+          for ( i = 0; i < 128; i ++ ) {
+            for ( j = 0; j < 128; j ++ ) {
 
-            var vertex = new THREE.Vector3();
-            vertex.x = i;
-            vertex.z = j;
+              var vertex = new THREE.Vector3();
+              vertex.x = i;
+              vertex.z = j;
 
-            var dataPosition = i * 128 * 4 + j * 4;
-            vertex.y = heightMapImageSample.imageData.data[dataPosition] / 255.0 * 64;
+              var dataPosition = i * 128 * 4 + j * 4;
+              vertex.y = heightMapImageSample.imageData.data[dataPosition] / 255.0 * 64;
 
-            geometry.vertices.push( vertex );
+              geometry.vertices.push( vertex );
+            }
           }
-        }
 
-        var color = [0.4, 1.0, 0];
-        var size = 2;
+          var texture = new THREE.Texture( heightMapImageSample.canvas );
+          texture.needsUpdate = true;
 
-        material = new THREE.ParticleBasicMaterial( { size: size } );
-        material.color.setHSV( color[0], color[1], color[2] );
+          var color = [0.4, 1.0, 0];
+          var size = 2;
 
-        particles = new THREE.ParticleSystem( geometry, material );
+          material = new THREE.ParticleBasicMaterial( { size: size, map: texture } );
+          // material.color.setHSV( color[0], color[1], color[2] );
 
-        scene.add( particles );
+          particles = new THREE.ParticleSystem( geometry, material );
 
-        var axisHelper = new THREE.AxisHelper();
-        scene.add( axisHelper );
+          scene.add( particles );
 
-        renderer = new THREE.WebGLRenderer({canvas: canvas});
-        renderer.setSize( width, height );
+          var axisHelper = new THREE.AxisHelper();
+          scene.add( axisHelper );
 
-        function animate() {
-          requestAnimationFrame( animate );
-          if(!instance.active || sample_defaults.paused) return;
-          renderer.render( scene, camera );
-        }
+          renderer = new THREE.WebGLRenderer({canvas: canvas});
+          renderer.setSize( width, height );
 
-        animate();
+          function animate() {
+            requestAnimationFrame( animate );
+            if(!instance.active || sample_defaults.paused) return;
+            renderer.render( scene, camera );
+          }
+
+          animate();
+        });
       });
 
       return instance;