diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..5171c540 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +npm-debug.log \ No newline at end of file diff --git a/Images/BioCrowds_vimeoLink.png b/Images/BioCrowds_vimeoLink.png new file mode 100644 index 00000000..7727f795 Binary files /dev/null and b/Images/BioCrowds_vimeoLink.png differ diff --git a/Images/MarkerInfluenceWeighting1.png b/Images/MarkerInfluenceWeighting1.png new file mode 100644 index 00000000..53ec6637 Binary files /dev/null and b/Images/MarkerInfluenceWeighting1.png differ diff --git a/Images/MarkerInfluenceWeighting2.png b/Images/MarkerInfluenceWeighting2.png new file mode 100644 index 00000000..a12a0352 Binary files /dev/null and b/Images/MarkerInfluenceWeighting2.png differ diff --git a/Images/eventualMovement.png b/Images/eventualMovement.png new file mode 100644 index 00000000..07f1aa11 Binary files /dev/null and b/Images/eventualMovement.png differ diff --git a/Images/velocityCalculation.png b/Images/velocityCalculation.png new file mode 100644 index 00000000..2cc534a0 Binary files /dev/null and b/Images/velocityCalculation.png differ diff --git a/README.md b/README.md index 40864757..42ab2876 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,43 @@ # BioCrowds -Biocrowds is a crowd simulation algorithm based on the formation of veination patterns on leaves. It prevents agents from colliding with each other on their way to their goal points using a notion of "personal space". Personal space is modelled with a space colonization algorithm. Markers (just points) are scattered throughout the simulation space, on the ground. At each simulation frame, each marker becomes "owned" by the agent closest to it (with some max distance representing an agent's perception). Agent velocity at the next frame is then computed using a sum of the displacement vectors to each of its markers. Because a marker can only be owned by one agent at a time, this technique prevents agents from colliding. - -## Agent Representation (15 pts) -Create an agent class to hold properties used for simulating and drawing the agent. Some properties you may want to consider include the following: -- Position -- Velocity -- Goal -- Orientation -- Size -- Markers - -## Grid/Marker Representation (25 pts) -Markers should be scattered randomly across a uniform grid. You should implement an efficient way of determining the nearest agent to a given marker. Based on an marker's location, you should be able to get the nearest four grid cells and loop through all the agents contained in them. - -## Setup (10 pts) -- Create a scene (standard, with camera controls) and scatter markers across the entire ground plane -- Spawn agents with specified goal points - -## Per Frame (35 pts) -- Assign markers to the nearest agent within a given radius. Be sure that a marker is only assigned to a single, unique agent. -- Compute velocity for each agent -- New velocity is determined by summing contributions from all the markers the agent "owns". Each marker contribution consists of the displacement vector between the agent and the marker multiplied by some (non-negative) weight. The weighting is based on - - Similarity between the displacement vector and the vector to agent's goal (the more similar, the higher the weight. A dot product works well) - - Distance from agent (the further away, the less contribution) -Each contribution is normalized by the total marker contributions (divide each contribution by sum total) - - Clamp velocity to some maximum (you probably want to choose a max speed such that you agent will never move further than its marker radius) -- Move agents by their newly computed velocity * time step -- Draw a ground plane and cylinders to represent the agents. -- For a more thorough explanation, see [HERE](http://www.inf.pucrs.br/~smusse/Animacao/2016/CrowdTalk.pdf) and [HERE](http://www.sciencedirect.com/science/article/pii/S0097849311001713) and [HERE](https://books.google.com/books?id=3Adh_2ZNGLAC&pg=PA146&lpg=PA146&dq=biocrowds%20algorithm&source=bl&ots=zsM86iYTot&sig=KQJU7_NagMK4rbpY0oYc3bwCh9o&hl=en&sa=X&ved=0ahUKEwik9JfPnubSAhXIxVQKHUybCxUQ6AEILzAE#v=onepage&q=biocrowds%20algorithm&f=false) and [HERE](https://cis700-procedural-graphics.github.io/files/biocrowds_3_21_17.pdf) - -## Two scenarios -- Create two different scenarios (initial agent placement, goals) to show off the collision avoidance. Try to pick something interesting! Classics include two opposing lines of agents with goals on opposite sides, or agents that spawn in a circle, which each agent's goal directly across. -- Provide some way to switch between scenarios - -## Deploy your code! (5 pts) -- Your demo should run on your gh-pages branch - -## Extra credit -- Add obstacles to your scene, such that agents avoid them \ No newline at end of file + +[![](Images/BioCrowds_vimeoLink.png)](https://vimeo.com/231603963) + +## Overview + +BioCrowds is a space colonization algorithm for crowd simulation. This algorithm is based on the formation of veination patterns on leaves. It prevents agents from colliding with each other on their way to their goal points using a notion of "personal space". + +## Algorithm overview +### Setup and defined behaviours + +- Markers (just points) are scattered throughout the simulation space, on the ground. +- Agents can travel only over pre-defined viable paths that are demarcated by being littered with markers. +- Agents move in the space by owning a collection of markers in a radius around them. The markers help determine a vector toward the goal while avoiding obstacles. +- At each simulation frame, each marker becomes "owned" by the agent closest to it (with some max distance representing an agent's perception). + +### Summary of steps + +1) Distribute markers in a uniform stratified manner. +2) Create a uniform grid acceleration structure and place markers in each cell of the grid. Ensure that the grid cell size is equal to the agent search distance (this makes it possible to only search 9 grid cells while looking for markers to influence the agent). +3) Place agents on the grid structure. +4) At every step of the simulation for every agent find the grid cell it is currently inside and search that cell and the surounding 8 grid cells for markers. +5) Accumulate a list of markers for each agent. +6) Use the agents to determine a direction vector towards the goal. +7) Update position and velocity for the agents. + +### Computing Velocities + +Agent velocity at the next frame is then computed using an averaged sum of the displacement vectors to each of its markers. Because a marker can only be owned by one agent at a time, this technique prevents agents from colliding (a cell will own all of the markers it is hovering over and so no other agent can be over those markers plus some buffer distance). + +![](Images/MarkerInfluenceWeighting1.png) +![](Images/MarkerInfluenceWeighting2.png) +![](Images/velocityCalculation.png) +![](Images/eventualMovement.png) + +_pictures obtained from Austin Eng's brilliant ppt on the same topic, linked in the references section_ + +### Uniform Grid Acceleration + +By placing markers in a uniform grid we can drastically reduce the number of markers the agent has to search through to find the markers that influence it. This spatial acceleration structure makes the demo run in real-time. This optimization also scales really well to larger and larger scenarios. + +## References: +- https://cis700-procedural-graphics.github.io/files/biocrowds_3_21_17.pdf \ No newline at end of file diff --git a/deploy.js b/deploy.js new file mode 100644 index 00000000..9defe7c3 --- /dev/null +++ b/deploy.js @@ -0,0 +1,38 @@ +var colors = require('colors'); +var path = require('path'); +var git = require('simple-git')(__dirname); +var deploy = require('gh-pages-deploy'); +var packageJSON = require('require-module')('./package.json'); + +var success = 1; +git.fetch('origin', 'master', function(err) { + if (err) throw err; + git.status(function(err, status) { + if (err) throw err; + if (!status.isClean()) { + success = 0; + console.error('Error: You have uncommitted changes! Please commit them first'.red); + } + + if (status.current !== 'master') { + success = 0; + console.warn('Warning: Please deploy from the master branch!'.yellow) + } + + git.diffSummary(['origin/master'], function(err, diff) { + if (err) throw err; + + if (diff.files.length || diff.insertions || diff.deletions) { + success = 0; + console.error('Error: Current branch is different from origin/master! Please push all changes first'.red) + } + + if (success) { + var cfg = packageJSON['gh-pages-deploy'] || {}; + var buildCmd = deploy.getFullCmd(cfg); + deploy.displayCmds(deploy.getFullCmd(cfg)); + deploy.execBuild(buildCmd, cfg); + } + }) + }) +}) \ No newline at end of file diff --git a/framework.js b/framework.js new file mode 100644 index 00000000..fb3fcebb --- /dev/null +++ b/framework.js @@ -0,0 +1,71 @@ +const THREE = require('three'); +const OrbitControls = require('three-orbit-controls')(THREE) +import Stats from 'stats-js' +import DAT from 'dat-gui' + +// when the scene is done initializing, the function passed as `callback` will be executed +// then, every frame, the function passed as `update` will be executed +function init(callback, update) { + var stats = new Stats(); + stats.setMode(1); + stats.domElement.style.position = 'absolute'; + stats.domElement.style.left = '0px'; + stats.domElement.style.top = '0px'; + document.body.appendChild(stats.domElement); + + var gui = new DAT.GUI(); + + var framework = { + gui: gui, + stats: stats + }; + + // run this function after the window loads + window.addEventListener('load', function() { + + var scene = new THREE.Scene(); + var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); + var renderer = new THREE.WebGLRenderer( { antialias: true } ); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setClearColor(0x020202, 0); + + var controls = new OrbitControls(camera, renderer.domElement); + controls.enableDamping = true; + controls.enableZoom = true; + controls.target.set(0, 0, 0); + controls.rotateSpeed = 0.3; + controls.zoomSpeed = 1.0; + controls.panSpeed = 2.0; + + document.body.appendChild(renderer.domElement); + + // resize the canvas when the window changes + window.addEventListener('resize', function() { + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + renderer.setSize(window.innerWidth, window.innerHeight); + }, false); + + // assign THREE.js objects to the object we will return + framework.scene = scene; + framework.camera = camera; + framework.renderer = renderer; + + // begin the animation loop + (function tick() { + stats.begin(); + update(framework); // perform any requested updates + renderer.render(scene, camera); // render the scene + stats.end(); + requestAnimationFrame(tick); // register to call this again when the browser renders a new frame + })(); + + // we will pass the scene, gui, renderer, camera, etc... to the callback function + return callback(framework); + }); +} + +export default { + init: init +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..34728b5f --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + BioCrowds + + + + + + diff --git a/package.json b/package.json new file mode 100644 index 00000000..e99188d9 --- /dev/null +++ b/package.json @@ -0,0 +1,32 @@ +{ + "scripts": { + "start": "webpack-dev-server --hot --inline", + "build": "webpack", + "deploy": "node deploy.js" + }, + "gh-pages-deploy": { + "prep": [ + "build" + ], + "noprompt": true + }, + "dependencies": { + "dat-gui": "^0.5.0", + "gl-matrix": "^2.3.2", + "stats-js": "^1.0.0-alpha1", + "three": "^0.82.1", + "three-obj-loader": "^1.0.2", + "three-orbit-controls": "^82.1.0" + }, + "devDependencies": { + "babel-core": "^6.18.2", + "babel-loader": "^6.2.8", + "babel-preset-es2015": "^6.18.0", + "colors": "^1.1.2", + "gh-pages-deploy": "^0.4.2", + "simple-git": "^1.65.0", + "webpack": "^1.13.3", + "webpack-dev-server": "^1.16.2", + "webpack-glsl-loader": "^1.0.1" + } +} diff --git a/src/agent.js b/src/agent.js new file mode 100644 index 00000000..71f68574 --- /dev/null +++ b/src/agent.js @@ -0,0 +1,115 @@ +const THREE = require('three') +var RAND = require('random-seed').create(Math.random()); + +var cylindergeo = new THREE.CylinderGeometry( 1, 2, 1 ); +var totalWeight = 0; +var distToMarker = 0; +var distToGoal = 0; +var distToGoal1 = 0; +var totalVelocity = new THREE.Vector3(0,0,0); +var distBtwOldNewPos = 0; + +export default class Agent +{ + constructor(pos, vel, _goal, mat, _color) //, _orientation) + { + this.position = pos; + this.velocity = vel; + this.color = _color; + this.mesh = new THREE.Mesh( cylindergeo, mat ); + this.goal = _goal; + this.markers = []; + this.oldposition = new THREE.Vector3(pos.x,pos.y,pos.z); + this.active = true; + this.drawn = false; + } + + drawagent(scene) + { + this.mesh.scale.set( 0.15, 0.15, 0.15 ); + this.mesh.position.set( this.position.x, this.position.y + 0.1, this.position.z ); + scene.add(this.mesh); + this.drawn = true; + } + + stopDrawingAgent(scene) + { + this.mesh.scale.set( 0.00001, 0.00001, 0.00001 ); + this.drawn = false; + } + + updateAgent(markernum) + { + var displacements = []; + var markerweights = []; + totalWeight = 0.0; + + var temp_vector_to_goal = (new THREE.Vector3(0, 0, 0)).subVectors(this.goal, this.position); + temp_vector_to_goal.y = 0.0; + distToGoal = temp_vector_to_goal.length(); + temp_vector_to_goal = temp_vector_to_goal.normalize(); + + if (distToGoal < 0.15) + { + this.active = false; + return; + } + + // sum and record all weights + for(var i=0; i use that formula when making things dynamic + gridCellDensity: 69, + maxmarkercount: 250, + unoccupiedMarkerColor: [ 0, 0.4784, 0.349 ], //0,122,89 + simulation: 1, + obstacles: 3, + visualdebug: false, + pause: false +} + +var grid = new Array(guiParameters.gridsize*guiParameters.gridsize);//each grid contains a list of markers + //its a 1D array with samrt indexing, ie every xth row + //is x*gridsize_z*gridCellDensity from the start +//its a 1D array with samrt indexing, ie every xth row +//is x*gridsize_z*gridCellDensity from the start +var agentList = []; +var obstacleList = []; + +var markerindex; +var colors; + +var particles_mesh = new THREE.Points( new THREE.BufferGeometry(), new THREE.PointsMaterial( { sizeAttenuation : false, size: 2.0, vertexColors: THREE.VertexColors } ) ); +particles_mesh.geometry.dynamic = true; + +//------------------------------------------------------------------------------ +function changeGUI(gui, camera, scene) +{ + gui.add(guiParameters, 'simulation', { circle: 1, opposingLines: 2, quad: 3, cornered: 4 } ).onChange(function(newVal){ + onreset(scene); + }); + gui.add(guiParameters, 'obstacles', 2, 10).name("Number of Obstacles").step(1).onChange(function(newVal) { + onreset(scene); + }); + gui.add(guiParameters, 'gridCellDensity', 5, guiParameters.maxmarkercount).name("Marker Density").onChange(function(newVal) { + onreset(scene); + }); + gui.add(guiParameters, 'numagents', 2, 50).name("Number of Agents").step(1).onChange(function(newVal) { + onreset(scene); + }); + gui.add(guiParameters, 'visualdebug').name("Visual Debug").onChange(function(newVal) {}); + gui.add(guiParameters, 'pause').name("Pause").onChange(function(newVal) {}); +} + +//------------------------------------------------------------------------------ + +function setupLightsandSkybox(scene, camera, renderer) +{ + // Set light + var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 ); + directionalLight.color.setHSL(0.1, 1, 0.95); + directionalLight.position.set(1, 3, 2); + directionalLight.position.multiplyScalar(10); + scene.add(directionalLight); + + renderer.setClearColor( 0x000 ); + + //set plane + var geometry = new THREE.PlaneGeometry( guiParameters.gridsize, guiParameters.gridsize, 1 ); + var material = new THREE.MeshBasicMaterial( {color: 0x070707, side: THREE.DoubleSide} ); + var plane = new THREE.Mesh( geometry, material ); + plane.rotateX(90 * 3.14/180); + plane.position.set(10,-0.02,10); + scene.add( plane ); + + if(guiParameters.visualdebug) + { + var gridHelper = new THREE.GridHelper( guiParameters.gridsize*0.5, guiParameters.gridsize ); + gridHelper.position.set(10,0,10); + scene.add( gridHelper ); + } + + // set camera position + camera.position.set(10, 13, 10); + camera.lookAt(new THREE.Vector3(10,0,10)); +} + +function onreset(scene) +{ + cleanscene(scene); + addPlaneAndMarkers(scene); + resetMarkers(); + generateObstacles(scene) + respawnAgents(scene); +} + +function addPlaneAndMarkers(scene) +{ + //set plane + var geometry = new THREE.PlaneGeometry( guiParameters.gridsize, guiParameters.gridsize, 1 ); + var material = new THREE.MeshBasicMaterial( {color: 0x000, side: THREE.DoubleSide} ); + var plane = new THREE.Mesh( geometry, material ); + plane.rotateX(90 * 3.14/180); + plane.position.set(10,-0.02,10); + scene.add( plane ); + + if(guiParameters.visualdebug) + { + var gridHelper = new THREE.GridHelper( guiParameters.gridsize*0.5, guiParameters.gridsize ); + gridHelper.position.set(10,0,10); + scene.add( gridHelper ); + } + + particles_mesh.geometry.setDrawRange( 0, guiParameters.gridsize * guiParameters.gridsize * guiParameters.gridCellDensity ); + scene.add(particles_mesh); +} + +function cleanscene(scene) +{ + //remove all objects from the scene + for( var i = scene.children.length - 1; i >= 0; i--) + { + var obj = scene.children[i]; + scene.remove(obj); + } +} + +function resetMarkers() +{ + for( var k = 0; k this helps us quickly find the + //markers near an agent based on the grid cell its in and those surrounding it + var x,z; + var randpos; + var index; + + var num_particles = guiParameters.gridsize * guiParameters.gridsize * guiParameters.maxmarkercount; //100 is the max gridcell density + var positions = new Float32Array( num_particles * 3 ); + colors = new Float32Array( num_particles * 3 ); + + for( var k = 0; k 2 ) + { + for (var i = 0; i < agentList.length; i++) + { + if(agentList[i] && agentList[i].active == false && agentList[i].drawn == true) + { + agentList[i].stopDrawingAgent(scene); + + for(var j=0; j=guiParameters.gridsize) + { + i=guiParameters.gridsize-1; + } + if(j<0) + { + j=0; + } + else if(j>=guiParameters.gridsize) + { + j=guiParameters.gridsize-1; + } + + index = k*guiParameters.gridsize*guiParameters.gridsize + i*guiParameters.gridsize + j; + + var marker = grid[index]; + + var mpos = marker.position; + var dist_r = agentPos.distanceTo(mpos); + + if(dist_r < guiParameters.searchRadius) + { + var dist = agentPos.distanceTo(mpos); + + if(dist