Permalink
Browse files

Merge branch 'heightfield'

  • Loading branch information...
2 parents c484210 + ce355b7 commit f7b5b0b0072bdc61c94bbfd4fa828615f6018093 @chandlerprall committed Aug 3, 2012
Showing with 436 additions and 3 deletions.
  1. +202 −0 examples/heightfield.html
  2. BIN examples/images/grass.png
  3. +184 −0 examples/js/simplex-noise.js
  4. +25 −2 physi.js
  5. +25 −1 physijs_worker.js
View
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+ <title>Heightfield - Physijs</title>
+
+ <link rel="stylesheet" type="text/css" href="css/styles.css" />
+
+ <script type="text/javascript" src="js/Three.js"></script>
+ <script type="text/javascript" src="js/stats.js"></script>
+ <script type="text/javascript" src="js/tween.js"></script>
+ <script type="text/javascript" src="js/simplex-noise.js"></script>
+ <script type="text/javascript" src="../physi.js"></script>
+
+ <script type="text/javascript">
+
+ 'use strict';
+
+ Physijs.scripts.worker = '../physijs_worker.js';
+ Physijs.scripts.ammo = 'examples/js/ammo.js';
+
+ var initScene, render, createShape, NoiseGen,
+ renderer, stats, scene, light, ground, ground_geometry, ground_material, camera;
+
+ initScene = function() {
+ TWEEN.start();
+
+ renderer = new THREE.WebGLRenderer({ antialias: true });
+ renderer.setSize( window.innerWidth, window.innerHeight );
+ renderer.shadowMapEnabled = true;
+ renderer.shadowMapSoft = true;
+ document.getElementById( 'viewport' ).appendChild( renderer.domElement );
+
+ stats = new Stats();
+ stats.domElement.style.position = 'absolute';
+ stats.domElement.style.top = '0px';
+ stats.domElement.style.zIndex = 100;
+ document.getElementById( 'viewport' ).appendChild( stats.domElement );
+
+ scene = new Physijs.Scene;
+ scene.setGravity({ x: 0, y: -10, z: 0 });
+
+ camera = new THREE.PerspectiveCamera(
+ 35,
+ window.innerWidth / window.innerHeight,
+ 1,
+ 1000
+ );
+ camera.position.set( 60, 50, 60 );
+ camera.lookAt( scene.position );
+ scene.add( camera );
+
+ // Light
+ light = new THREE.DirectionalLight( 0xFFFFFF );
+ light.position.set( 20, 40, -15 );
+ light.target.position.copy( scene.position );
+ light.castShadow = true;
+ light.shadowCameraLeft = -60;
+ light.shadowCameraTop = -60;
+ light.shadowCameraRight = 60;
+ light.shadowCameraBottom = 60;
+ light.shadowCameraNear = 20;
+ light.shadowCameraFar = 200;
+ light.shadowBias = -.0001
+ light.shadowMapWidth = light.shadowMapHeight = 2048;
+ light.shadowDarkness = .7;
+ scene.add( light );
+
+ // Materials
+ ground_material = Physijs.createMaterial(
+ new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture( 'images/grass.png' ) }),
+ .8, // high friction
+ .4 // low restitution
+ );
+ ground_material.map.wrapS = ground_material.map.wrapT = THREE.RepeatWrapping;
+ ground_material.map.repeat.set( 2.5, 2.5 );
+
+ // Ground
+ NoiseGen = new SimplexNoise;
+
+ ground_geometry = new THREE.PlaneGeometry( 75, 75, 50, 50 );
+ for ( var i = 0; i < ground_geometry.vertices.length; i++ ) {
+ var vertex = ground_geometry.vertices[i];
+ vertex.y = NoiseGen.noise( vertex.x / 10, vertex.z / 10 ) * 2;
+ }
+ ground_geometry.computeFaceNormals();
+ ground_geometry.computeVertexNormals();
+
+ // If your plane is not square as far as face count then the HeightfieldMesh
+ // takes two more arguments at the end: # of x faces and # of z faces that were passed to THREE.PlaneMaterial
+ ground = new Physijs.HeightfieldMesh(
+ ground_geometry,
+ ground_material,
+ 0 // mass
+ );
+ ground.receiveShadow = true;
+ scene.add( ground );
+
+ requestAnimationFrame( render );
+
+ createShape();
+ };
+
+ render = function() {
+ scene.simulate(undefined, 2);
+ renderer.render( scene, camera );
+ stats.update();
+ requestAnimationFrame( render );
+ };
+
+ createShape = (function() {
+ var addshapes = true,
+ shapes = 0,
+ box_geometry = new THREE.CubeGeometry( 3, 3, 3 ),
+ sphere_geometry = new THREE.SphereGeometry( 1.5, 32, 32 ),
+ cylinder_geometry = new THREE.CylinderGeometry( 2, 2, 1, 32 ),
+ cone_geometry = new THREE.CylinderGeometry( 0, 2, 4, 32 ),
+ octahedron_geometry = new THREE.OctahedronGeometry( 1.7, 1 ),
+ torus_geometry = new THREE.TorusKnotGeometry ( 1.7, .2, 32, 4 ),
+ doCreateShape;
+
+ setTimeout(
+ function addListener() {
+ var button = document.getElementById( 'stop' );
+ if ( button ) {
+ button.addEventListener( 'click', function() { addshapes = false; } );
+ } else {
+ setTimeout( addListener );
+ }
+ }
+ );
+
+ doCreateShape = function() {
+ var shape, material = new THREE.MeshLambertMaterial({ opacity: 0, transparent: true });
+
+ switch ( Math.floor(Math.random() * 2) ) {
+ case 0:
+ shape = new Physijs.BoxMesh(
+ box_geometry,
+ material
+ );
+ break;
+
+ case 1:
+ shape = new Physijs.SphereMesh(
+ sphere_geometry,
+ material,
+ undefined,
+ { restitution: Math.random() * 1.5 }
+ );
+ break;
+ }
+
+ shape.material.color.setRGB( Math.random() * 100 / 100, Math.random() * 100 / 100, Math.random() * 100 / 100 );
+ shape.castShadow = true;
+ shape.receiveShadow = true;
+
+ shape.position.set(
+ Math.random() * 30 - 15,
+ 20,
+ Math.random() * 30 - 15
+ );
+
+ shape.rotation.set(
+ Math.random() * Math.PI,
+ Math.random() * Math.PI,
+ Math.random() * Math.PI
+ );
+
+ if ( addshapes ) {
+ shape.addEventListener( 'ready', createShape );
+ }
+ scene.add( shape );
+
+ new TWEEN.Tween(shape.material).to({opacity: 1}, 500).start();
+
+ document.getElementById('shapecount').textContent = (++shapes) + ' shapes created';
+ };
+
+ return function() {
+ setTimeout( doCreateShape, 250 );
+ };
+ })();
+
+ window.onload = initScene;
+
+ </script>
+</head>
+
+<body>
+ <div id="heading">
+ <h1>Heightfield in Physijs</h1>
+ <p>
+ Heightmapped Terrain -
+ <span id="shapecount"></span> <button id="stop">Stop adding shapes</button><br />
+ </p>
+ </div>
+ <div id="viewport"></div>
+</body>
+
+</html>
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,184 @@
+'use strict';
+// Ported from Stefan Gustavson's java implementation
+// http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf
+// Read Stefan's excellent paper for details on how this code works.
+//
+// Sean McCullough banksean@gmail.com
+
+/**
+ * You can pass in a random number generator object if you like.
+ * It is assumed to have a random() method.
+ */
+var SimplexNoise = (function() {
+ var SimplexNoise = function(r) {
+ if (r == undefined) r = Math;
+ this.grad3 = [[1,1,0],[-1,1,0],[1,-1,0],[-1,-1,0],
+ [1,0,1],[-1,0,1],[1,0,-1],[-1,0,-1],
+ [0,1,1],[0,-1,1],[0,1,-1],[0,-1,-1]];
+ this.p = [];
+ for (var i=0; i<256; i++) {
+ this.p[i] = Math.floor(r.random()*256);
+ }
+ // To remove the need for index wrapping, double the permutation table length
+ this.perm = [];
+ for(var i=0; i<512; i++) {
+ this.perm[i]=this.p[i & 255];
+ }
+
+ // A lookup table to traverse the simplex around a given point in 4D.
+ // Details can be found where this table is used, in the 4D noise method.
+ this.simplex = [
+ [0,1,2,3],[0,1,3,2],[0,0,0,0],[0,2,3,1],[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,2,3,0],
+ [0,2,1,3],[0,0,0,0],[0,3,1,2],[0,3,2,1],[0,0,0,0],[0,0,0,0],[0,0,0,0],[1,3,2,0],
+ [0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],
+ [1,2,0,3],[0,0,0,0],[1,3,0,2],[0,0,0,0],[0,0,0,0],[0,0,0,0],[2,3,0,1],[2,3,1,0],
+ [1,0,2,3],[1,0,3,2],[0,0,0,0],[0,0,0,0],[0,0,0,0],[2,0,3,1],[0,0,0,0],[2,1,3,0],
+ [0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],
+ [2,0,1,3],[0,0,0,0],[0,0,0,0],[0,0,0,0],[3,0,1,2],[3,0,2,1],[0,0,0,0],[3,1,2,0],
+ [2,1,0,3],[0,0,0,0],[0,0,0,0],[0,0,0,0],[3,1,0,2],[0,0,0,0],[3,2,0,1],[3,2,1,0]];
+ };
+
+ SimplexNoise.prototype.dot = function(g, x, y) {
+ return g[0]*x + g[1]*y;
+ };
+
+ SimplexNoise.prototype.noise = function(xin, yin) {
+ var n0, n1, n2; // Noise contributions from the three corners
+ // Skew the input space to determine which simplex cell we're in
+ var F2 = 0.5*(Math.sqrt(3.0)-1.0);
+ var s = (xin+yin)*F2; // Hairy factor for 2D
+ var i = Math.floor(xin+s);
+ var j = Math.floor(yin+s);
+ var G2 = (3.0-Math.sqrt(3.0))/6.0;
+ var t = (i+j)*G2;
+ var X0 = i-t; // Unskew the cell origin back to (x,y) space
+ var Y0 = j-t;
+ var x0 = xin-X0; // The x,y distances from the cell origin
+ var y0 = yin-Y0;
+ // For the 2D case, the simplex shape is an equilateral triangle.
+ // Determine which simplex we are in.
+ var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
+ if(x0>y0) {i1=1; j1=0;} // lower triangle, XY order: (0,0)->(1,0)->(1,1)
+ else {i1=0; j1=1;} // upper triangle, YX order: (0,0)->(0,1)->(1,1)
+ // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
+ // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
+ // c = (3-sqrt(3))/6
+ var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
+ var y1 = y0 - j1 + G2;
+ var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
+ var y2 = y0 - 1.0 + 2.0 * G2;
+ // Work out the hashed gradient indices of the three simplex corners
+ var ii = i & 255;
+ var jj = j & 255;
+ var gi0 = this.perm[ii+this.perm[jj]] % 12;
+ var gi1 = this.perm[ii+i1+this.perm[jj+j1]] % 12;
+ var gi2 = this.perm[ii+1+this.perm[jj+1]] % 12;
+ // Calculate the contribution from the three corners
+ var t0 = 0.5 - x0*x0-y0*y0;
+ if(t0<0) n0 = 0.0;
+ else {
+ t0 *= t0;
+ n0 = t0 * t0 * this.dot(this.grad3[gi0], x0, y0); // (x,y) of grad3 used for 2D gradient
+ }
+ var t1 = 0.5 - x1*x1-y1*y1;
+ if(t1<0) n1 = 0.0;
+ else {
+ t1 *= t1;
+ n1 = t1 * t1 * this.dot(this.grad3[gi1], x1, y1);
+ }
+ var t2 = 0.5 - x2*x2-y2*y2;
+ if(t2<0) n2 = 0.0;
+ else {
+ t2 *= t2;
+ n2 = t2 * t2 * this.dot(this.grad3[gi2], x2, y2);
+ }
+ // Add contributions from each corner to get the final noise value.
+ // The result is scaled to return values in the interval [-1,1].
+ return 70.0 * (n0 + n1 + n2);
+ };
+
+ // 3D simplex noise
+ SimplexNoise.prototype.noise3d = function(xin, yin, zin) {
+ var n0, n1, n2, n3; // Noise contributions from the four corners
+ // Skew the input space to determine which simplex cell we're in
+ var F3 = 1.0/3.0;
+ var s = (xin+yin+zin)*F3; // Very nice and simple skew factor for 3D
+ var i = Math.floor(xin+s);
+ var j = Math.floor(yin+s);
+ var k = Math.floor(zin+s);
+ var G3 = 1.0/6.0; // Very nice and simple unskew factor, too
+ var t = (i+j+k)*G3;
+ var X0 = i-t; // Unskew the cell origin back to (x,y,z) space
+ var Y0 = j-t;
+ var Z0 = k-t;
+ var x0 = xin-X0; // The x,y,z distances from the cell origin
+ var y0 = yin-Y0;
+ var z0 = zin-Z0;
+ // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
+ // Determine which simplex we are in.
+ var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
+ var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
+ if(x0>=y0) {
+ if(y0>=z0)
+ { i1=1; j1=0; k1=0; i2=1; j2=1; k2=0; } // X Y Z order
+ else if(x0>=z0) { i1=1; j1=0; k1=0; i2=1; j2=0; k2=1; } // X Z Y order
+ else { i1=0; j1=0; k1=1; i2=1; j2=0; k2=1; } // Z X Y order
+ }
+ else { // x0<y0
+ if(y0<z0) { i1=0; j1=0; k1=1; i2=0; j2=1; k2=1; } // Z Y X order
+ else if(x0<z0) { i1=0; j1=1; k1=0; i2=0; j2=1; k2=1; } // Y Z X order
+ else { i1=0; j1=1; k1=0; i2=1; j2=1; k2=0; } // Y X Z order
+ }
+ // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
+ // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
+ // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
+ // c = 1/6.
+ var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords
+ var y1 = y0 - j1 + G3;
+ var z1 = z0 - k1 + G3;
+ var x2 = x0 - i2 + 2.0*G3; // Offsets for third corner in (x,y,z) coords
+ var y2 = y0 - j2 + 2.0*G3;
+ var z2 = z0 - k2 + 2.0*G3;
+ var x3 = x0 - 1.0 + 3.0*G3; // Offsets for last corner in (x,y,z) coords
+ var y3 = y0 - 1.0 + 3.0*G3;
+ var z3 = z0 - 1.0 + 3.0*G3;
+ // Work out the hashed gradient indices of the four simplex corners
+ var ii = i & 255;
+ var jj = j & 255;
+ var kk = k & 255;
+ var gi0 = this.perm[ii+this.perm[jj+this.perm[kk]]] % 12;
+ var gi1 = this.perm[ii+i1+this.perm[jj+j1+this.perm[kk+k1]]] % 12;
+ var gi2 = this.perm[ii+i2+this.perm[jj+j2+this.perm[kk+k2]]] % 12;
+ var gi3 = this.perm[ii+1+this.perm[jj+1+this.perm[kk+1]]] % 12;
+ // Calculate the contribution from the four corners
+ var t0 = 0.6 - x0*x0 - y0*y0 - z0*z0;
+ if(t0<0) n0 = 0.0;
+ else {
+ t0 *= t0;
+ n0 = t0 * t0 * this.dot(this.grad3[gi0], x0, y0, z0);
+ }
+ var t1 = 0.6 - x1*x1 - y1*y1 - z1*z1;
+ if(t1<0) n1 = 0.0;
+ else {
+ t1 *= t1;
+ n1 = t1 * t1 * this.dot(this.grad3[gi1], x1, y1, z1);
+ }
+ var t2 = 0.6 - x2*x2 - y2*y2 - z2*z2;
+ if(t2<0) n2 = 0.0;
+ else {
+ t2 *= t2;
+ n2 = t2 * t2 * this.dot(this.grad3[gi2], x2, y2, z2);
+ }
+ var t3 = 0.6 - x3*x3 - y3*y3 - z3*z3;
+ if(t3<0) n3 = 0.0;
+ else {
+ t3 *= t3;
+ n3 = t3 * t3 * this.dot(this.grad3[gi3], x3, y3, z3);
+ }
+ // Add contributions from each corner to get the final noise value.
+ // The result is scaled to stay just inside [-1,1]
+ return 32.0*(n0 + n1 + n2 + n3);
+ };
+
+ return SimplexNoise;
+})();
Oops, something went wrong.

0 comments on commit f7b5b0b

Please sign in to comment.