I'm having a little trouble generating/displaying a terrain using Three.JS without major FPS drops. Here's the code I wrote to create each block and set the correct position:
var TO_METERS = 10;
var testOb = [];
var blockGeometry = new THREE.CubeGeometry(TO_METERS, TO_METERS, TO_METERS);
var blockMat = new THREE.MeshLambertMaterial({color: 0xFFFFFF, wrapAround: true, side: THREE.FrontSide, shading: THREE.FlatShading});
function loadChunk(startX, startY, startZ) {
var yVar = 0;
var zVar = 0;
var blockCo = 0;
var combinedGeometry = new THREE.CubeGeometry(0, 0, 0);
for (var x = 0; x <= 4999; x++) {
testOb[x] = new THREE.Mesh();
testOb[x].geometry = blockGeometry;
if (blockCo == 10) {
blockCo = 0;
if (zVar == 90) {
yVar += TO_METERS;
zVar = 0;
}
else {
zVar += TO_METERS;
}
}
testOb[x].position.x = (blockCo * TO_METERS) + startX;
testOb[x].position.y = (yVar - 500) + startY;
testOb[x].position.z = zVar + startZ;
testOb[x].castShadow = true;
blockCo++;
THREE.GeometryUtils.merge(combinedGeometry, testOb[x]);
}
var cMesh = new Physijs.BoxMesh(combinedGeometry, blockMat, 0);
scene.add(cMesh);
}
Basically it creates each block, sets the position and merges them together using THREE.GeometryUtils.merge to make up a "chunk" (a rectangle) MineCraft style.
I'm pretty sure the large number of individual blocks that make up each chunk is causing the low FPS. With only 10 chunks the FPS is fine. If I add any more the FPS drops drastically.
One thought I had was to use a WebWorker to do the processing, but of cause that isn't possible as I can't add the chunks or even use Three.JS within it. That also would only help the load time, not the FPS problem I'm having.
If anyone has any ideas how I would go about fixing this problem, I would really appreciate it. :) Maybe it would be possible to hide blocks which the camera can't see? Or I might just totally be doing it the wrong way. Thanks!
Related
I am trying to make to grid to squares using as3.
I am using nested for loops to create the grid.
import flash.display.Shape;
import flash.display.MovieClip;
var n=10;
var myClip = new MovieClip;
stage.addChild(myClip);
for (var i = 0; i < n * 10; i += 10) {
for (var j = 0; j < n * 10; j += 10) {
var _shape = new Shape;
myClip.addChild(_shape);
_shape.graphics.lineStyle(1);
_shape.graphics.beginFill(0xcccccc);
_shape.graphics.drawRect(i, j, 10, 10);
_shape.graphics.endFill();
}
}
I am applying Zooming and Panning Gestures on myClip. For this Grid size everything works fine. As soon as I increase the value of n, it starts lagging
My game requires a bigger grid. Please help
I'll show some ideas as code, my AS3 is a bit rusty but perhaps it helps.
You can reduce the number of Shape instances or draw the vector based grid graphic to a Bitmap. Since you are zooming and panning it you'll want to smooth it. Depending on performance and how much you zoom you also may want to draw the bitmap at a higher resolution than initially used. See comments in the below.
import flash.display.Shape;
import flash.display.MovieClip;
var n=10;
// do you actually need dynamic binding or a timeline in this?
// if not (also if you don't know what it means) do use the Sprite class instead
var myClip = new MovieClip;
stage.addChild(myClip);
// if you don't need individual shapes move this out of the for loop
// your logic with all of the shapes having the same origin suggests this might be so
var _shape = new Shape;
myClip.addChild(_shape);
for (var i = 0; i < n * 10; i += 10) {
for (var j = 0; j < n * 10; j += 10) {
_shape.graphics.lineStyle(1);
_shape.graphics.beginFill(0xcccccc);
_shape.graphics.drawRect(i, j, 10, 10);
_shape.graphics.endFill();
}
}
// then we can draw the grid to a bitmap
// since you are scaling it I'm drawing it a 300% resolution
var _bmd:BitmapData = new BitmapData(_shape.width*3, _shape.height*3, true, 0);
var _bit:Bitmap = new Bitmap(_bmd);
myClip.addChild(_bit);
_shape.width*=3;
_shape.height*=3;
_bmd.draw(stage);
_bit.smoothing = true;
_bit.width/=3;
_bit.height/=3;
// and remove the vector shape so it won't be rendered
myClip.removeChild(_shape);
// if need be it can be redrawn later
I am trying to tile the texture from multiple images onto a plane geometry using MeshFaceMaterial. Every thing works fine, except for a blurry edge forming in between tiles.
.
var textureArray = [];
var tileColumns = 2;
var tileRows = 1;
textureArray[0] = THREE.ImageUtils.loadTexture('./test3.jpg');
textureArray[1] = THREE.ImageUtils.loadTexture('./test4.jpg');
var faceCountPerTileX = 2 * widthSegments/tileColumns;
var faceCountPerTileY = heightSegments/tileRows;
var faceCountX = 2 * widthSegments;
var faceCountY = heightSegments;
for(var tileIndexY = 0; tileIndexY < tileRows; tileIndexY++){
for(var tileIndexX = 0; tileIndexX < tileColumns; tileIndexX++){
var index = tileIndexY * tileColumns + tileIndexX;
textureArray[index].wrapS = THREE.RepeatWrapping;
textureArray[index].wrapT = THREE.RepeatWrapping;
textureArray[index].repeat.set(tileColumns,tileRows);
materialContainer[tileIndexY * tileColumns + tileIndexX] = new THREE.MeshBasicMaterial({
map: textureArray[tileIndexY * tileColumns + tileIndexX],
overdraw: true,
ambient: 0xffffff
});
for(var faceIndexY = tileIndexY * faceCountPerTileY; faceIndexY < (tileIndexY+1) * faceCountPerTileY; faceIndexY++){
for(var faceIndexX = tileIndexX * faceCountPerTileX; faceIndexX < (tileIndexX+1) * faceCountPerTileX; faceIndexX++){
g.faces[faceIndexY * faceCountX + faceIndexX].materialIndex = tileIndexY * tileColumns + tileIndexX;
}
}
}
}
var mat = new THREE.MeshFaceMaterial(materialContainer);
var obj = new THREE.Mesh(g, mat);
I have tried all known solutions, i have even tried writing a custom shader and using ShaderMaterial. But no luck, can some help me out to fix the issue?
By the looks of it, you set the texture mode of the invidual textures in your set to repeat.
This seems wrong, the individual textures do not repeat, they are displayed only once. Setting a texture to repeat causes the right side of the texture to "blend through" on the left (and vice versa), causing visible seams like the one on your screenshot.
I understand that I can use body.position.set(x, y, z) to instantaneously move a body, but how can I move it smoothly in an animated manner where it's movement will adhere to the physics and collide with any other bodies on its journey? Using body.velocity.set(x, y, z) will set its velocity, and using body.linearDamping = v, will provide some friction/resistance... but it's still not good enough to allow me to specify exactly where I want the body to stop.
It sounds like you're looking for a kinematic body. With kinematic bodies, you have full control over the movement, and it will push away other bodies in its path. However, the body has infinite mass and is not affected by other bodies colliding with it.
Start off by defining the start and end positions of your body.
var startPosition = new CANNON.Vec3(5, 0, 2);
var endPosition = new CANNON.Vec3(-5, 0, 2);
var tweenTime = 3; // seconds
Then create your kinematic body. In this example we'll add a Box shape to it.
var body = new CANNON.Body({
mass: 0,
type: CANNON.Body.KINEMATIC,
position: startPosition
});
body.addShape(new CANNON.Box(new CANNON.Vec3(1,1,1)));
world.add(body);
Compute the direction vector and get total length of the tween path.
var direction = new CANNON.Vec3();
endPosition.vsub(startPosition, direction);
var totalLength = direction.length();
direction.normalize();
The speed and velocity can be calculated using the formula v = s / t.
var speed = totalLength / tweenTime;
direction.scale(speed, body.velocity);
For each update, compute the tween progress: a number between 0 and 1 where 0 i start position and 1 is end position. Using this number you can calculate the current body position.
var progress = (world.time - startTime) / tweenTime;
if(progress < 1){
// Calculate current position
direction.scale(progress * totalLength, offset);
startPosition.vadd(offset, body.position);
} else {
// We passed the end position! Stop.
body.velocity.set(0,0,0);
body.position.copy(endPosition);
}
See full code below. You can duplicate one of the cannon.js demos and just paste this code.
var demo = new CANNON.Demo();
var postStepHandler;
demo.addScene("Tween box",function(){
var world = demo.getWorld();
// Inputs
var startPosition = new CANNON.Vec3(5, 0, 2);
var endPosition = new CANNON.Vec3(-5, 0, 2);
var tweenTime = 3; // seconds
var body = new CANNON.Body({
mass: 0,
type: CANNON.Body.KINEMATIC,
position: startPosition
});
body.addShape(new CANNON.Box(new CANNON.Vec3(1,1,1)));
world.add(body);
demo.addVisual(body);
if(postStepHandler){
world.removeEventListener('postStep', postStepHandler);
}
// Compute direction vector and get total length of the path
var direction = new CANNON.Vec3();
endPosition.vsub(startPosition, direction);
var totalLength = direction.length();
direction.normalize();
var speed = totalLength / tweenTime;
direction.scale(speed, body.velocity);
// Save the start time
var startTime = world.time;
var offset = new CANNON.Vec3();
postStepHandler = function(){
// Progress is a number where 0 is at start position and 1 is at end position
var progress = (world.time - startTime) / tweenTime;
if(progress < 1){
direction.scale(progress * totalLength, offset);
startPosition.vadd(offset, body.position);
} else {
body.velocity.set(0,0,0);
body.position.copy(endPosition);
world.removeEventListener('postStep', postStepHandler);
postStepHandler = null;
}
}
world.addEventListener('postStep', postStepHandler);
});
demo.start();
You need to use a physics library for this, such as Physijs. It works easily with Three.js. Googling for "Physijs Three.js" will provide examples.
I'm a beginner in Java as well as with the slick tools. I want to make a game that has different coloured cubes randomly placed within a certain area of the window.
I use two for-loops and call for a random number in render. I get the cubes placed exactly as I want, but the problems is that they flicker in all colours. I guess it has to do with how I call for a random number and that it gets updated with FPS?!
Please help me!!
public void render(GameContainer gc, StateBasedGame sdg, Graphics g) throws SlickException {
//set background
Image background = (new Image("res/background.png")).getScaledCopy(800, 500);
g.drawImage(background, 0, 0);
//set gamescape
blue = (new Image("res/blue.png")).getScaledCopy(20,20);
green = (new Image("res/green.png")).getScaledCopy(20,20);
red = (new Image("res/red.png")).getScaledCopy(20,20);
int xvalue = 300;
int yvalue = 400;
for (int a = 1; a < 20; a++) {
for (int i = 1; i < 10; i++) {
r = rand.nextInt(3);
if(r==0){g.drawImage(blue,xvalue,yvalue);}
else if(r==1){g.drawImage(red, xvalue, yvalue);}
else{g.drawImage(green, xvalue, yvalue);}
xvalue = xvalue+20;
}
yvalue = yvalue - 20;
xvalue = xvalue -180;
}
}
Your problem is that you generate a new random number each time you redraw the scene.
To resolve this, you may have to create an array in which you store the generated color of each cube. And each time you redraw your images, you just read each color value in the array.
Is there a way to determine the size and position of a model and then auto-center and scale the model so that it is positioned at the origin and within the view of the camera? I find that when I import a Collada model from Sketchup, if the model was not centered at the origin in Sketchup, then it is not centered in three.js. While that makes sense, it would be nice to auto-center to origin after importing.
I've seen some discussion in the different file loaders about getting the bounds of the imported model, but I have been unable to find any references to how to do that.
The scaling issue is less important, but I feel like it relates to a bounds function, which is why I asked it too.
EDIT:
More info after playing around a bit and a few more google searches...
The code for my callback function on loading the collada file now looks like this:
loader.load(mURL, function colladaReady( collada ) {
dae = collada.scene;
skin = collada.skins[ 0 ];
dae.scale.x = dae.scale.y = dae.scale.z = 1;
dae.updateMatrix();
//set arbitrary min and max for comparison
var minX = 100000;
var minY = 100000;
var minZ = 100000;
var maxX = 0;
var maxY = 0;
var maxZ = 0;
var geometries = collada.dae.geometries;
for(var propName in geometries){
if(geometries.hasOwnProperty(propName) && geometries[propName].mesh){
dae.geometry = geometries[propName].mesh.geometry3js;
dae.geometry.computeBoundingBox();
bBox = dae.geometry.boundingBox;
if(bBox.min.x < minX) minX = bBox.min.x;
if(bBox.min.y < minY) minY = bBox.min.x;
if(bBox.min.z < minZ) minZ = bBox.min.z;
if(bBox.max.x > maxX) maxX = bBox.max.x;
if(bBox.max.y > maxY) maxY = bBox.max.x;
if(bBox.max.z > maxZ) maxZ = bBox.max.z;
}
}
//rest of function....
This is generating some interesting data about the model. I can get an overall extreme coordinate for the model, which I'm assuming (probably incorrectly) would be close to an overall bounding box for the model. But trying to do anything with those coordinates (like averaging and moving the model to the averages) generates inconsistent results.
Also, it seems inefficient to have to loop through every geometry for a model, is there a better way? If not, can this logic be applied to other loaders?
You can use THREE.Box3#setFromObject to get the bounding box of any Object3D, including an imported model, without having to loop through the geometries yourself. So you could do something like
var bBox = new THREE.Box3().setFromObject(collada.scene);
to get the extreme bounding box of the model; then you could use any of the techniques in the answers that gaitat linked in order to set the camera position correctly. For instance, you could follow this technique (How to Fit Camera to Object) and do something like:
var height = bBox.size().y;
var dist = height / (2 * Math.tan(camera.fov * Math.PI / 360));
var pos = collada.scene.position;
camera.position.set(pos.x, pos.y, dist * 1.1); // fudge factor so you can see the boundaries
camera.lookAt(pos);
Quick fiddle: http://jsfiddle.net/p19r9re2/ .
try geometry.center()
center: function () {
var offset = new Vector3();
return function center() {
this.computeBoundingBox();
this.boundingBox.getCenter( offset ).negate();
this.translate( offset.x, offset.y, offset.z );
return this;
};
}(),