Related to this question : Z-buffer issue with BufferGeometry in ParticleSystem
The given solution does not work for me, I made my own shader for rendering as I added custom attributes for size and UV. Everythinf works fine with the buffer geometry except the particle ordering for transparency.
If Activated > squared texture are partly hiding the other particles.
If Deactivated (depthTest : false) > particles looks fine but are not ordered.
Thanks for your answer, the subject has been raised several times but nothing worked for me yet.
Using Three.js 61
particleMaterial = new THREE.ShaderMaterial({
fragmentShader : document.getElementById("sectorPointFragment").textContent,
vertexShader : document.getElementById("sectorPointVertex").textContent,
uniforms : uniforms,
attributes : attributes,
transparent : true,
alphaTest : 0.5
});
_this.particles = new THREE.ParticleSystem(geometry, particleMaterial);
_this.particles.sortParticles = true;
So here is the solution I took, creating a new array with value each time. Seems to work, tested with 1000 particles not more
this.updateShaders = function() {
if(clock.getElapsedTime() - _lastZOrdering <= 0.2) {
return;
}
// z-ordering
var distances = [],
attributes = this.particles.geometry.attributes,
nbParticle = attributes.position.numItems / 3,
tmpPos = new THREE.Vector3(0, 0, 0);
for (var i = 0; i < nbParticle; ++i) {
tmpPos.set(
attributes.position.array[i * 3],
attributes.position.array[i * 3 + 1],
attributes.position.array[i * 3 + 2]
);
distances[i] = [this.controls.object.position.distanceTo(tmpPos), i];
}
distances.sort(function(a, b){
return b[0] - a[0];
});
var index, indexSrc, indexDst, tmpTab;
for (var val in attributes) {
tmpTab = new Float32Array(attributes[val].itemSize * nbParticle);
for(i = 0; i < nbParticle; ++i){
index = distances[i][1];
for(j = 0; j < attributes[val].itemSize; ++j){
indexSrc = index * attributes[val].itemSize + j;
indexDst = i * attributes[val].itemSize + j;
tmpTab[indexDst] = attributes[val].array[indexSrc];
}
}
attributes[val].array = tmpTab;
attributes[val].needsUpdate = true;
}
_lastZOrdering = clock.getElapsedTime();
}
Related
I'm trying to adapt this example or this discussion, but when I use new library, there is no more face and vertices in geometry properties.
The structures is differenet, so I confuse to use the Index->array and Attrirube->Position to change this code:
`
obj.geometry.faces.forEach(function(face, idx) {
obj.localToWorld(a.copy(obj.geometry.vertices[face.a]));
obj.localToWorld(b.copy(obj.geometry.vertices[face.b]));
obj.localToWorld(c.copy(obj.geometry.vertices[face.c]));
lineAB = new THREE.Line3(a, b);
lineBC = new THREE.Line3(b, c);
lineCA = new THREE.Line3(c, a);
console.log("lineAB", lineAB);
console.log("lineBC", lineBC);
console.log("lineCA", lineCA);
setPointOfIntersection(lineAB, mathPlane, idx);
setPointOfIntersection(lineBC, mathPlane, idx);
setPointOfIntersection(lineCA, mathPlane, idx);
});
`
Any idea how to do it? Please help.. Thanks in advance~
Since r125, there is no Geometry class anymore. All geometries are BufferGeometry now. Thus, vertices are stored in geometry.attributes.position.
BufferGeometry can be indexed or non-indexed:
Indexed means that faces defined with triplets of incides of
vertices.
Non-indexed means that faces defined with triplets of
vertices.
So, this part of code:
var a = new THREE.Vector3(),
b = new THREE.Vector3(),
c = new THREE.Vector3();
obj.geometry.faces.forEach(function(face) {
obj.localToWorld(a.copy(obj.geometry.vertices[face.a]));
obj.localToWorld(b.copy(obj.geometry.vertices[face.b]));
obj.localToWorld(c.copy(obj.geometry.vertices[face.c]));
lineAB = new THREE.Line3(a, b);
lineBC = new THREE.Line3(b, c);
lineCA = new THREE.Line3(c, a);
setPointOfIntersection(lineAB, mathPlane);
setPointOfIntersection(lineBC, mathPlane);
setPointOfIntersection(lineCA, mathPlane);
});
needs some changes.
var a = new THREE.Vector3(),
b = new THREE.Vector3(),
c = new THREE.Vector3();
var isIndexed = obj.geometry.index != null; // if geometry is indexed or non-indexed
var pos = obj.geometry.attributes.position; // attribute with positions
var idx = obj.geometry.index; // index
var faceCount = (isIndexed ? idx.count : pos.count) / 3; // amount of faces
for(let i = 0; i < faceCount; i++) {
let baseIdx = i * 3;
let idxA = baseIdx + 0;
a.fromBufferAttribute(pos, isIndexed ? idx.getX(idxA) : idxA);
// .fromBufferAttribute is a method of Vector3
// .getX is a method of BufferAttribute
let idxB = baseIdx + 1;
b.fromBufferAttribute(pos, isIndexed ? idx.getX(idxB) : idxB);
let idxC = baseIdx + 2;
c.fromBufferAttribute(pos, isIndexed ? idx.getX(idxC) : idxC);
obj.localToWorld(a);
obj.localToWorld(b);
obj.localToWorld(c);
lineAB = new THREE.Line3(a, b);
lineBC = new THREE.Line3(b, c);
lineCA = new THREE.Line3(c, a);
setPointOfIntersection(lineAB, mathPlane);
setPointOfIntersection(lineBC, mathPlane);
setPointOfIntersection(lineCA, mathPlane);
});
PS Haven't tested this snippet, changes from scratch. Possible typos.
I am using Three.js. Found a really good Decal library written by Benpurdy. It's very easily modifiable and also used the techniques described here
However, the technique uses Geometry. The project I am on, uses BufferGeometry. I traced the code which does the geometry intersects and can't figure out the conversion from faces and vertices to attributes.
this.createGeometry = function(matrix, mesh) {
var geom = mesh.geometry;
var decalGeometry = new THREE.Geometry();
var projectorInverse = matrix.clone().getInverse(matrix);
var meshInverse = mesh.matrixWorld.clone().getInverse(mesh.matrixWorld);
var faces = [];
for(var i = 0; i < geom.faces.length; i++){
var verts = [geom.faces[i].a, geom.faces[i].b, geom.faces[i].c];
var pts = [];
var valid = false;
for(var v = 0; v < 3; v++) {
var vec = geom.vertices[verts[v]].clone();
vec.applyMatrix4(mesh.matrixWorld);
vec.applyMatrix4(matrix);
if((vec.z > 1) || (vec.z < -1) || (vec.x > 1) || (vec.x < -1) || (vec.y > 1) || (vec.y < -1)) {
} else {
valid = true;
}
pts.push(vec);
}
if(valid) {
var uv = [];
for(var n = 0; n < 3; n++){
uv.push(new THREE.Vector2( (pts[n].x + 1) / 2, (pts[n].y + 1) / 2));
pts[n].applyMatrix4(projectorInverse);
pts[n].applyMatrix4(meshInverse);
decalGeometry.vertices.push( pts[n] );
}
// update UV's
decalGeometry.faceVertexUvs[0].push(uv);
var newFace = geom.faces[i].clone();
newFace.a = decalGeometry.vertices.length - 3;
newFace.b = decalGeometry.vertices.length - 2;
newFace.c = decalGeometry.vertices.length - 1;
decalGeometry.faces.push(newFace);
}
}
return decalGeometry;
}
Appreciate if anyone could shed some light on how to go about pursuing this? Thanks.
I ended up solving the problem by writing another function to compute intersections with buffergeometry. Took me a while trying to understand the original buffer geometry code.
this.createGeometryFromBufferGeometry = function(matrix, mesh) {
var geom = mesh.geometry;
var decalGeometry = new THREE.Geometry();
var projectorInverse = matrix.clone().getInverse(matrix);
var meshInverse = mesh.matrixWorld.clone().getInverse(mesh.matrixWorld);
var faces = [];
for(var i = 0; i < geom.attributes.position.array.length; i+=9){
var pts = [];
var valid = false;
for(var v = 0; v < 9; v+=3) {
var vec = new THREE.Vector3(geom.attributes.position.array[i+v],geom.attributes.position.array[i+v+1],geom.attributes.position.array[i+v+2]);
console.log((i+v) + " " + (i+v+1) + " " + (i+v+2) );
console.log(vec);
vec.applyMatrix4(mesh.matrixWorld);
vec.applyMatrix4(matrix);
if((vec.z > 1) || (vec.z < -1) || (vec.x > 1) || (vec.x < -1) || (vec.y > 1) || (vec.y < -1)) {
} else {
valid = true;
}
pts.push(vec);
}
if(valid) {
var uv = [];
for(var n = 0; n < 3; n++){
uv.push(new THREE.Vector2( (pts[n].x + 1) / 2, (pts[n].y + 1) / 2));
pts[n].applyMatrix4(projectorInverse);
pts[n].applyMatrix4(meshInverse);
decalGeometry.vertices.push( pts[n] );
}
decalGeometry.faceVertexUvs[0].push(uv);
var newFace = new THREE.Face3()
newFace.a = decalGeometry.vertices.length - 3;
newFace.b = decalGeometry.vertices.length - 2;
newFace.c = decalGeometry.vertices.length - 1;
decalGeometry.faces.push(newFace);
}
}
return decalGeometry;
}
BufferGeometry() has a method .fromGeometry(). Populates this BufferGeometry with data from a Geometry object.
var geom = new THREE.BoxGeometry(1,1,1);
var bufGeom = new THREE.BufferGeometry().fromGeometry(geom);
UPD. You can use the other way round.
var bufGeom = new THREE.BoxBufferGeometry(1,1,1);
var geom = new THREE.Geometry().fromBufferGeometry(bufGeom);
Quick and dirty solution is to create geometry from bufferGeometry and after calculating dispose created geometry
this.compute = function()
{
this.geometry = mesh.geometry
if(this.geometry.attributes)
{
this.geometry = new THREE.Geometry().fromBufferGeometry(this.geometry);
this.computeDecal();
this.geometry.dispose();
}
else
{
this.computeDecal();
}
}
Basically I want to make my sprite follow a motion path and depending on its direction it is going, it will play a particular animation. i.e. moving up will display its back, moving left will display the left side of the sprite and so on.
I've tried for hours but to no avail in trying to make this work. I had some luck using prototype but the final game will be using the structure below. ANY help will be appreciated.
/*
* initalise Phaser framework with width:960px, height:540px
*/
var game = new Phaser.Game(960, 540, Phaser.AUTO, 'gameContainer', { preload: preload, create: create, update: update, });
/*
* Preload runs before the game starts. Assets such as images and sounds such be preloaded here.
* A webserver is required to load assets.
*
* Also in this function we set game scale so it full browser width.
*/
function preload() {
// set to scale to full browser width
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.parentIsWindow = true;
//set the background color so can confirm the game renders in the browser
this.stage.backgroundColor = '#4488cc';
this.game.renderer.renderSession.roundPixels = true;
//preload images & sounds
//game.load.image('key', 'folder/filename.png');
//this.load.image('nazi', 'image/nazi.png');
game.load.spritesheet('nazi', 'images/nazi.png', 128, 128, 6);
this.bmd = null;
this.alien = null;
this.mode = 0;
//Use this website to set enemy movements http://phaser.io/waveforms. Export save data from the console log.
this.points = {
"type":0,"closed":true,"x":[120,120,260,260,200,180,120],"y":[368,108,108,308,308,368,368]
};
this.pi = 0;
this.path = [];
}
/*
* Add game variables here
*/
var nazi;
/*
* Create runs once only when Phaser first loads
* create the game scene by adding objects to the stage
*/
function create() {
bmd = this.add.bitmapData(this.game.width, this.game.height);
bmd.addToWorld();
/*
For testing
this.alien = this.add.sprite(0, 0, 'alien');
this.alien.anchor.set(0.5);
*/
this.nazi = this.add.sprite(0, 0, 'nazi');
this.nazi.anchor.set(0.5);
var py = this.points.y;
/*Original Code
//define the animation
nazi.animations.add('walk');
//start the animation at 30fps
nazi.animations.play('walk', 3, true);
*/
//define the animation
this.nazi.animations.add('walkDown', [2, 3]);
//start the animation at 30fps
this.nazi.animations.play('walkDown', 3, true);
//define the animation
this.nazi.animations.add('walkLR', [4, 5]);
//start the animation at 30fps
this.nazi.animations.play('walkLR', 3, true);
//define the animation
this.nazi.animations.add('walkUp', [0, 1]);
//start the animation at 30fps
this.nazi.animations.play('walkUp', 3, true);
}
function plot() {
this.bmd.clear();
this.path = [];
/*ROTATION CODE*/
var ix = 0;
/**/
//Sets the speed of the sprite
var x = 0.5 / game.width;
//looping through plotting points from x and y array
for (var i = 0; i <= 1; i += x) {
var px = this.math.linearInterpolation(this.points.x, i);
var py = this.math.linearInterpolation(this.points.y, i);
/* ROTATION CODE to follow direction of path*/
var node = { x: px, y: py, angle: 0 };
if (ix > 0)
{
node.angle = this.math.angleBetweenPoints(this.path[ix - 1], node);
}
this.path.push(node);
ix++;
/**/
//this.path.push( { x: px, y: py });
this.bmd.rect(px, py, 1, 1, 'rgba(255, 255, 255, 1)');
}
for (var p = 0; p < this.points.x.length; p++) {
this.bmd.rect(this.points.x[p]-3, this.points.y[p]-3, 6, 6, 'rgba(255, 0, 0, 1)');
}
}
/*
* Update runs continuously. Its the game loop function.
* Add collision detections and control events here
*/
function update() {
plot();
// Reset the players velocity (movement)
//this.nazi = 'nazi';
/* For Testing
this.alien.x = this.path[this.pi].x;
this.alien.y = this.path[this.pi].y;
//ROTATION CODE:
this.alien.rotation = this.path[this.pi].angle;
*/
this.nazi.x = this.path[this.pi].x;
this.nazi.y = this.path[this.pi].y;
//this.nazi.rotation = this.path[this.pi].angle;
this.pi++;
if (this.pi >= this.path.length)
{
this.pi = 0;
}
/*
// Flipping the player image based on the velocity
if(nazi.body.velocity.x > 0){
//player is moving right
nazi.scale.x = -1;
nazi.animations.play('walkLR');
}
else if(nazi.body.velocity.x < 0){
//player is moving left
nazi.scale.x = 1; //flip the image
nazi.animations.play('walkLR');
}
else if (nazi.body.velocity.y < 0){
nazi.animations.play('walkUp');
}
else if(nazi.body.velocity.y > 0){
//player is not moving
nazi.animations.play('walkDown');
}
*/
}
I have created a simple test using Away3D 4.1 (2500 cubes) but performance is a lot lower than i expected - only 10 FPS.
I assume i am making a noob mistake (being a noob and all) so here are relevant pieces of code:
Lighting:
var light1:DirectionalLight = new DirectionalLight();
light1.position = new Vector3D(400, 300, -200);
light1.lookAt(new Vector3D());
light1.color = 0xFFFFFF;
light1.ambient = 0.25;
lightPicker = new StaticLightPicker([light1]);
Creating cubes:
var material:ColorMaterial = new ColorMaterial(0x999999);
material.lightPicker = lightPicker;
material.specular = 0;
var mesh:Mesh = new Mesh(new CubeGeometry(50, 50, 50), material);
for (var i:uint = 0; i < 50; i++)
{
for (var j:uint = 0; j < 50; j++)
{
var cube:Mesh = Mesh(mesh.clone());
cube.x = 100*(i-25);
cube.y = 25;
cube.z = 100*(j-25);
scene.addChild(cube);
}
}
And the camera:
camera = new Camera3D();
camera.position = new Vector3D(0, 1000, -5000);
camera.lookAt(new Vector3D(0, 0, 0));
camera.lens.far = 10000;
Stage3D output in Scout shows that there are many calls between each drawTriangles call and my basic understanding tells me that drawTriangle calls should be 'batched'.
I know that some other frameworks have batch methods but i havent been able to find anything related to Away3D.
Thanks in advance for any help.
It looks like Merge (thanks to Varnius for spotting that) is the recommended way to do it with previous versions, but it doesn't work in 4.1 (see away3d forum thread).
However, user kurono posted a solution in the forum that works (at least for my scenario) so i reproduce it here in case anyone else has the same problem:
var material:ColorMaterial = new ColorMaterial(0x999999);
material.lightPicker = lightPicker;
material.specular = 0;
var mesh:Mesh = new Mesh(new CubeGeometry(50, 50, 50));
var meshes:Vector.<Mesh> = new Vector.<Mesh>();
for (var i:uint = 0; i < 50; i++)
{
for (var j:uint = 0; j < 50; j++)
{
var cube:Mesh = Mesh(mesh.clone());
cube.x = 100*(i-25);
cube.y = 25;
cube.z = 100*(j-25);
meshes.push(cube);
}
}
var bigMesh:Mesh = doMerge(meshes, material);
scene.add(bigMesh);
The magic is in the doMerge() method:
function doMerge(meshes:Vector.<Mesh>, material:MaterialBase):Mesh
{
var isub:ISubGeometry;
var rawVertsAll:Vector.<Number> = new Vector.<Number>();
var rawIndicesAll:Vector.<uint> = new Vector.<uint>();
var rawUVsAll:Vector.<Number> = new Vector.<Number>();
var rawNormalsAll:Vector.<Number> = new Vector.<Number>();
var rawTangentsAll:Vector.<Number> = new Vector.<Number>();
var offset:uint = 0;
var verts:Vector.<Number>;
var normals:Vector.<Number>;
var tangents:Vector.<Number>;
var uvs:Vector.<Number>;
var indices:Vector.<uint>;
var i:uint;
var j:uint;
var k:uint;
for (k = 0; k < meshes.length; k++)
{
var m:Mesh = meshes[k];
isub = m.geometry.subGeometries[0].cloneWithSeperateBuffers();
isub.applyTransformation(m.transform.clone());
verts = new Vector.<Number>();
normals = new Vector.<Number>();
tangents = new Vector.<Number>();
uvs = new Vector.<Number>();
indices = isub.indexData;
for (i = 0; i < isub.numVertices; i++)
{
verts.push(isub.vertexData[i * isub.vertexStride + isub.vertexOffset]);
verts.push(isub.vertexData[i * isub.vertexStride + isub.vertexOffset + 1]);
verts.push(isub.vertexData[i * isub.vertexStride + isub.vertexOffset + 2]);
normals.push(isub.vertexNormalData[i * isub.vertexNormalStride + isub.vertexNormalOffset]);
normals.push(isub.vertexNormalData[i * isub.vertexNormalStride + isub.vertexNormalOffset + 1]);
normals.push(isub.vertexNormalData[i * isub.vertexNormalStride + isub.vertexNormalOffset + 2]);
tangents.push(isub.vertexTangentData[i * isub.vertexTangentStride + isub.vertexTangentOffset]);
tangents.push(isub.vertexTangentData[i * isub.vertexTangentStride + isub.vertexTangentOffset + 1]);
tangents.push(isub.vertexTangentData[i * isub.vertexTangentStride + isub.vertexTangentOffset + 2]);
uvs.push(isub.UVData[i * isub.UVStride + isub.UVOffset]);
uvs.push(isub.UVData[i * isub.UVStride + isub.UVOffset + 1]);
}
for (j = 0; j < indices.length; j++)
{
indices[j] += offset;
}
offset += isub.numVertices;
rawVertsAll = rawVertsAll.concat(verts);
rawNormalsAll = rawNormalsAll.concat(normals);
rawTangentsAll = rawTangentsAll.concat(tangents);
rawUVsAll = rawUVsAll.concat(uvs);
rawIndicesAll = rawIndicesAll.concat(indices);
}
var geometry:Geometry = new Geometry();
var subGeometry:SubGeometry = new SubGeometry();
subGeometry.updateVertexData(rawVertsAll);
subGeometry.updateIndexData(rawIndicesAll);
subGeometry.updateUVData(rawUVsAll);
subGeometry.updateVertexNormalData(rawNormalsAll);
subGeometry.updateVertexTangentData(rawTangentsAll);
geometry.subGeometries.push(subGeometry);
return new Mesh(geometry, material);
}
And voila! 10fps becomes 60fps
Yeah, you should batch your draw calls. I don't have much experience with Away3D but after a quick look through their API reference it seems that away3d.tools.commands.Merge should help you to merge all those cubes into one large batched mesh.
Are you getting 10 fps in the debug player or the release version?
I ran your code and get 20 fps in the debug player but 50+ fps in the release version.
I tried merging and didn't see any improvements. Plus, if you want to access the individual cubes, merging will make that quite complicated :)
I wrote a quick experiment with a genetic algorithm. It simply takes a grid of squares and tries to mutate their color to make them all yellow. It fails miserably and I can't seem to figure out why. I've included a link to JSFiddle that demonstrates working code, as well as a copy of the code in its entirety.
http://jsfiddle.net/mankyd/X6x9L/
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>The randomly flashing squares <i>should</i> be turning yellow</h1>
<div class="row">
<canvas id="input_canvas" width="100" height="100"></canvas>
<canvas id="output_canvas" width="100" height="100"></canvas>
</div>
<div class="row">
<span id="generation"></span>
<span id="best_fitness"></span>
<span id="avg_fitness"></span>
</div>
</div>
</body>
</html>
Note that the below javascript relies on jquery in a few places.
// A bit of code that draws several squares in a canvas
// and then attempts to use a genetic algorithm to slowly
// make those squares all yellow.
// Knobs that can be tweaked
var mutation_rate = 0.1; // how often should we mutate something
var crossover_rate = 0.6; // how often should we crossover two parents
var fitness_influence = 1; // affects the fitness's influence over mutation
var elitism = 1; // how many of the parent's generation to carry over
var num_offspring = 20; // how many spawn's per generation
var use_rank_selection = true; // false == roulette_selection
// Global variables for easy tracking
var children = []; // current generation
var best_spawn = null; // keeps track of our best so far
var best_fitness = null; // keeps track of our best so far
var generation = 0; // global generation counter
var clear_color = 'rgb(0,0,0)';
// used for output
var $gen_span = $('#generation');
var $best_fit = $('#best_fitness');
var $avg_fit = $('#avg_fitness');
var $input_canvas = $('#input_canvas');
var input_ctx = $input_canvas[0].getContext('2d');
var $output_canvas = $('#output_canvas');
var output_ctx = $output_canvas[0].getContext('2d');
// A spawn represents a genome - a collection of colored
// squares.
var Spawn = function(nodes) {
var _fitness = null; // a cache of our fitness
this.nodes = nodes; // the squares that make up our image
this.fitness = function() {
// fitness is simply a function of how close to yellow we are.
// This is defined through euclidian distance. Smaller fitnesses
// are better.
if (_fitness === null) {
_fitness = 0;
for (var i = 0; i < nodes.length; i++) {
_fitness += Math.pow(-nodes[i].color[0], 2) +
Math.pow(255 - nodes[i].color[1], 2) +
Math.pow(255 - nodes[i].color[2], 2);
}
_fitness /= 255*255*3*nodes.length; // divide by the worst possible distance
}
return _fitness;
};
this.mutate = function() {
// reset our cached fitness to unknown
_fitness = null;
var health = this.fitness() * fitness_influence;
var width = $output_canvas[0].width;
var height = $output_canvas[0].height;
for (var i = 0; i < nodes.length; i++) {
// Sometimes (most times) we don't mutate
if (Math.random() > mutation_rate) {
continue;
}
// Mutate the colors.
for (var j = 0; j < 3; j++) {
// colors can move by up to 32 in either direction
nodes[i].color[j] += 64 * (.5 - Math.random()) * health;
// make sure that our colors stay between 0 and 255
nodes[i].color[j] = Math.max(0, Math.min(255, nodes[i].color[j]));
}
}
};
this.draw = function(ctx) {
// This draw function is a little overly generic in that it supports
// arbitrary polygons.
ctx.save();
ctx.fillStyle = clear_color;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
for (var i = 0; i < nodes.length; i++) {
ctx.fillStyle = 'rgba(' + Math.floor(nodes[i].color[0]) + ',' + Math.floor(nodes[i].color[1]) + ',' + Math.floor(nodes[i].color[2]) + ',' + nodes[i].color[3] + ')';
ctx.beginPath();
ctx.moveTo(nodes[i].points[0][0], nodes[i].points[0][1]);
for (var j = 1; j < nodes[i].points.length; j++) {
ctx.lineTo(nodes[i].points[j][0], nodes[i].points[j][1]);
}
ctx.fill();
ctx.closePath();
}
ctx.restore();
};
};
Spawn.from_parents = function(parents) {
// Given two parents, mix them together to get another spawn
var nodes = [];
for (var i = 0; i < parents[0].nodes.length; i++) {
if (Math.random() > 0.5) {
nodes.push($.extend({}, parents[0].nodes[i]));
}
else {
nodes.push($.extend({}, parents[1].nodes[i]));
}
}
var s = new Spawn(nodes);
s.mutate();
return s;
};
Spawn.random = function(width, height) {
// Return a complete random spawn.
var nodes = [];
for (var i = 0; i < width * height; i += 10) {
var n = {
color: [Math.random() * 256, Math.random() * 256, Math.random() * 256, 1],
points: [
[i % width, Math.floor(i / width) * 10],
[(i % width) + 10, Math.floor(i / width) * 10],
[(i % width) + 10, Math.floor(i / width + 1) * 10],
[i % width, Math.floor(i / width + 1) * 10],
]
};
nodes.push(n);
}
return new Spawn(nodes);
};
var select_parents = function(gene_pool) {
if (use_rank_selection) {
return rank_selection(gene_pool);
}
return roulette_selection(gene_pool);
};
var roulette_selection = function(gene_pool) {
var mother = null;
var father = null;
gene_pool = gene_pool.slice(0);
var sum_fitness = 0;
var i = 0;
for (i = 0; i < gene_pool.length; i++) {
sum_fitness += gene_pool[i].fitness();
}
var choose = Math.floor(Math.random() * sum_fitness);
for (i = 0; i < gene_pool.length; i++) {
if (choose <= gene_pool[i].fitness()) {
mother = gene_pool[i];
break;
}
choose -= gene_pool[i].fitness();
}
// now remove the mother and repeat for the father
sum_fitness -= mother.fitness();
gene_pool.splice(i, 1);
choose = Math.floor(Math.random() * sum_fitness);
for (i = 0; i < gene_pool.length; i++) {
if (choose <= gene_pool[i].fitness()) {
father = gene_pool[i];
break;
}
choose -= gene_pool[i].fitness();
}
return [mother, father];
};
var rank_selection = function(gene_pool) {
gene_pool = gene_pool.slice(0);
gene_pool.sort(function(a, b) {
return b.fitness() - a.fitness();
});
var choose_one = function() {
var sum_fitness = (gene_pool.length + 1) * (gene_pool.length / 2);
var choose = Math.floor(Math.random() * sum_fitness);
for (var i = 0; i < gene_pool.length; i++) {
// figure out the sume of the records up to this point. if we exceed
// our chosen spot, we've found our spawn.
if ((i + 1) * (i / 2) >= choose) {
return gene_pool.splice(i, 1)[0];
}
}
return gene_pool.pop(); // last element, if for some reason we get here
};
var mother = choose_one();
var father = choose_one();
return [mother, father];
};
var start = function() {
// Initialize our first generation
var width = $output_canvas[0].width;
var height = $output_canvas[0].height;
generation = 0;
children = [];
for (var j = 0; j < num_offspring; j++) {
children.push(Spawn.random(width, height));
}
// sort by fitness so that our best comes first
children.sort(function(a, b) {
return a.fitness() - b.fitness();
});
best_spawn = children[0];
best_fitness = best_spawn.fitness();
best_spawn.draw(output_ctx);
};
var generate = function(spawn_pool) {
// generate a new set of offspring
var offspring = [];
for (var i = 0; i < num_offspring; i++) {
var parents = select_parents(spawn_pool);
// odds of crossover decrease as we get closer
if (Math.random() * best_fitness < crossover_rate) {
var s = Spawn.from_parents(parents);
}
else {
// quick hack to copy our mother, with possible mutation
var s = Spawn.from_parents([parents[0], parents[0]]);
}
offspring.push(s);
}
// select a number of best from the parent pool (elitism)
for (var i = 0; i < elitism; i++) {
offspring.push(spawn_pool[i]);
}
// sort our offspring by fitness (this includes the parents from elitism). Fittest first.
offspring.sort(function(a, b) {
return a.fitness() - b.fitness();
});
// pick off the number that we want
offspring = offspring.slice(0, num_offspring);
best_spawn = offspring[0];
best_fitness = best_spawn.fitness();
best_spawn.draw(output_ctx);
generation++;
return offspring;
};
var average_fitness = function(generation) {
debugger;
var a = 0;
for (var i = 0; i < generation.length; i++) {
a += generation[i].fitness();
}
return a / generation.length;
};
//Draw yellow and then initialize our first generation
input_ctx.fillStyle = 'yellow';
input_ctx.fillRect(0, 0, input_ctx.canvas.width, input_ctx.canvas.height);
start();
// Our loop function. Use setTimeout to prevent things from freezing
var gen = function() {
children = generate(children);
$gen_span.text('Generation: ' + generation);
$best_fit.text('Best Fitness: ' + best_fitness);
$avg_fit.text('Avg. Fitness: ' + average_fitness(children));
if (generation % 100 === 0) {
console.log('Generation', generation);
console.log('Fitness', best_fitness);
}
setTimeout(gen, 1);
};
gen();
I've commented the code to try to make parsing it easy. The basic idea is quite simple:
Select 1 or 2 parents from the current generation
Mix those one or two parents together
Mutate the result slightly and add it to the next generation
Select the best few parents (1 in the example) and add them to the next generation
Sort and slice off N results and use them for the next generation (potentially a mix of parents and offspring)
Rinse and repeat
The output never gets anywhere near yellow. It quickly falls into a steady state of a sort that looks awful. Where have I gone wrong?
Solved it. It was in the "from_parents" method:
if (Math.random() > 0.5) {
nodes.push($.extend({}, parents[0].nodes[i]));
}
else {
nodes.push($.extend({}, parents[1].nodes[i]));
}
The $.extend() was doing a shallow copy. The obvious solution was to either put true as the first argument which causes a deep copy. This, however, is incredibly slow performance-wise. The better solution was to remove the $.extend() from that chunk of code entirely and instead to move it up to the mutate() method, where I call $.extend() only if a node is actually about to be changed. In other words, it becomes a copy-on-write.
Also, the color I put in the fitness function was wrong :P